數組++、對象、ES5String
1 Array 數組
1.1 多維數組
數組裏包含數組,即數組中的元素爲數組。
var arr = [1,2,'html5',[3,4,'css3'],[5,6,'javascript']];
arr[3][2]; //=>'css3'
2 Object對象
2.1數據類型
2.1.1基本數據類型
Number,String,Boolean
2.1.2特殊數據類型
Undefined,Null
2.1.3引用數據類型
Object:1.Array;2.Function
2.2 Object的創建方式
2.2.1字面量創建方式(直接量,推薦方式)
直接量(推薦):var obj = {name:'小明',age:18};
//添加屬性、屬性的值
obj[‘gender’] = ‘男’;
2.2.2構造函數的方式
構造函數:var obj = new Object();
//添加屬性、屬性值
obj.name = ‘小明’;
2.3 對象的遍歷循環
通過for...in,
// 對象的遍歷
// for..in循環
for(var attr in obj){
// attr是一個變量
// 必須使用方括號語法
console.log(attr,obj[attr]);
2.4 練習總結
1.清空input的輸入內容,id.value =‘’;
2.獲取焦點 id.focus();,autofocu只有在刷新頁面時纔有用,而id.focus();在每次循環中都可以使用。
3 ES5.String Array 新增方法
3.1 Array.isArray判斷是否爲數組(靜態方法)
Array.isArray():判斷是否爲數組,返回布爾值,如果爲數組則返回值爲true,如果不爲數組則返回值爲false。
3.2索引方法
indexOf/lastIndexOf(keyword [,startIndex]),區別就是一個從前往後找,一個從後往前找。
keyword: 要查找的項,
startIndex:查找起點位置的索引,該參數可選
方法返回keyword所在數組中的索引值,如果數組不存在keyword,則返回-1。
案例:
查找keyword在數組中的索引值,查找不到返回-1
indexOf(keyword [,startIndex]):從頭往後查找
lastIndexOf(keyword [,startIndex]):從後往前查找
var arr = ['html','css','javascript','ECMAScript','javascript','css3','html5'];
// 判斷arr中是否有javascript
var res = arr.indexOf('javascript');//2
var res = arr.indexOf('javascript',3);//4
var res = arr.lastIndexOf('javascript');//4
var res = arr.indexOf('laoxie');//-1
console.log(res);
// 判斷相關產中是否含有某個值
if(arr.indexOf('html') != -1){}
if(arr.indexOf('html') >=0){}
3.3迭代方法
下面方法都對數組中的每一項運行給定函數fn,,函數中有三個形參分別爲:
1.item:數組中的每一項,
2.index:遍歷過程中對應的索引值,
2.array:對數組的引用
3.3.1 forEach(fn); 遍歷方法
遍歷方法,for循環沒有太大差別,比for循環方便。
3.3.2 map(fn)
返回每次函數調用的結果組成的數組,即map函數執行完畢後得到什麼,取決於在函數中返回什麼。
window.onload = function(){
var goodslist = [{
name:'iphone7 plugs',
imgurl:'img/ip7.jpg',
price:5899.00,
sale:5888.00,
color:'土豪金'
},{
name:'Note7',
imgurl:'img/note7.jpg',
price:3899.00,
sale:998.00,
color:'黑色'
},{
name:'榮耀7',
imgurl:'img/honor7.jpg',
price:1999.00,
sale:1899.00,
color:'白色'
}];
// 獲取元素
var datalist = document.getElementById('datalist');
var html = goodslist.map(function(item){
return '<li><img src="'+item.imgurl+'"><h4>'+item.name+'</h4><p class="price">價格:<span>'+item.price+'</span></p><p class="color">顏色:'+item.color+'</p></li>'
}).join('');
datalist.innerHTML = html;
console.log(html);
}
3.3.3 filter(fn)
得到執行fn後返回true時對應的數組元素,利用這個方法可對數組元素進行過濾篩選。
var arr3 = [10,2,8,20,44,22,2,9,31,45,5,88];
// 獲取數組中小於10的數
var res3 = arr3.filter(function(item){
return item<10;
});
console.log(res3);
3.3.4 every(fn)
如果該函數對每一項都返回 true,則返回true。
3.3.5 some(fn)
如果該函數對任何一項返回 true,則返回true。
3.4歸併方法
兩個方法都會迭代數組中的所有項,然後生成一個最終返回值。
1.reduce(fn,initVal)
2.reduceRight(fn,initVal)
fn(prev,cur,index,array): fn是每一項調用的函數,函數接受4個參數分別是
prev:前一次返回值,
cur:當前值,
index:索引值,
array:當前數組,
函數需要返回一個值,這個值會在下一次迭代中作爲prev的值;
initVal: 迭代初始值(可選),如果缺省,prev的值爲數組第一項。
/*
計算數組的和
reduce(fn,initVal)
reduceRight()
如果沒有初始值,則把數組的第一項作爲初始值
*/
var arr = [1,10,11,23,33,8,9,21];
console.log(arr);
/*var total = arr.reduce(function(prev,curr){
// prev:前一次返回值
console.log(prev,curr);
return curr+prev;
},0);
console.log(total);*/
var total = arr.reduce(function(prev,curr){
console.log(prev,curr)
return prev+curr;
});
console.log(total);