數組++、對象、ES5Array新增方法

數組++、對象、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引用數據類型

Object1.Array2.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);



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章