整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
我們前端來(lái)說(shuō)數(shù)組作為一個(gè)常用的類型，今天我們講一下在實(shí)際使用中經(jīng)常用到的方法和使用場(chǎng)景。
concat() 可以用來(lái)連接兩個(gè)或多個(gè)數(shù)組，返回要給新的數(shù)組并且不會(huì)影響之前的數(shù)組。
使用方法：arr.concat(arr1,arr2,......,arrn) 他的參數(shù)可以是多個(gè)數(shù)組。實(shí)例如下：
var arr = [1,2,3];
var arr1 = [4,5,6];
var arr2 = [7,8,9];
arr.concat(arr1,arr2)
輸出結(jié)果：
[1,2,3,4,5,6,7,8,9]join()方法是把數(shù)組中所有的元素通過(guò)指定的分隔符連接成一個(gè)統(tǒng)一的字符串。
實(shí)例如下：
var arr = ["str1","str2","str3"]
arr.join("#")
輸出結(jié)果：
str1#str2#str3pop() 是用來(lái)刪除數(shù)組的最后一個(gè)元素。咱們直接上實(shí)例：
var arr = ["str1","str2","str3"]
arr.pop()
輸出結(jié)果：
["str1","str2"]push() 方法適用于向數(shù)組的末尾添加一個(gè)或多個(gè)元素。
使用方法：
arr.push(obj1,obj2,......objn) 我們可以看到這個(gè)方法可以添加多個(gè)參數(shù)。具體實(shí)例如下：
var arr = ["str1","str2","str3"]
arr.push("obj1","obj2","obj3")
輸出結(jié)果：
["str1","str2","str3","obj1","obj2","obj3"]
unshift() 方法適用于向數(shù)組的末尾添加一個(gè)或多個(gè)元素。也可以添加多個(gè)參數(shù)。具體實(shí)例如下：
var arr = ["str1","str2","str3"]
arr.unshift("obj1","obj2","obj3")
輸出結(jié)果：
["obj1", "obj2", "obj3", "str1", "str2", "str3"共同點(diǎn)：兩者都是用于對(duì)數(shù)組的循環(huán)遍歷
var arr = ["str1","str2","str3"]
for (let index = 0; index < this.arr.length; index++) {
const element = this.arr[index];
console.log(element)
}
this.arr.forEach(element => {
console.log(element)
});
輸出結(jié)果相同：
["str1","str2","str3"]不同點(diǎn)：for 可以中途中斷 但是forEach不行他會(huì)執(zhí)行完整個(gè)數(shù)組元素
var arr = ["str1","str2","str3"]
for (let index = 0; index < this.arr.length; index++) {
const element = this.arr[index];
console.log(element)
if(index==1){
return
}
}
this.arr.forEach(element => {
console.log(element)
return
});
輸出結(jié)果：
["str1","str2"]
輸出結(jié)果：
["str1","str2","str3"]
我們看出for函數(shù)只輸出了兩個(gè)值就中斷了 但是forEach確將所有的數(shù)據(jù)都輸出了。整個(gè)地方是特別容易出錯(cuò)并且不容易找出錯(cuò)誤的地方。所以大家一定要區(qū)分開(kāi)兩個(gè)函數(shù)的共同點(diǎn)和區(qū)別。
map函數(shù)可以根據(jù)之前的對(duì)象根據(jù)某個(gè)條件進(jìn)行某種變換，生成另外一個(gè)新的對(duì)象。
let arr=[1,2,3]
let createArr=arr.map(item=>{
return item*2
})
輸出結(jié)果：
[2,4,6]filter函數(shù)用于數(shù)組中獲取過(guò)濾符合條件的所有元素，返回過(guò)濾后的數(shù)組，如果沒(méi)有符合條件的元素則返回空數(shù)組。
let arr=[1,2,3]
let arr2=arr.filter(item=>{
return item.value>1
})
輸出結(jié)果：
[2,3]find()函數(shù)查找符合條件的值，不過(guò)有幾點(diǎn)注意事項(xiàng)：
1、返回符合條件的第一個(gè)元素的值，多符合也只是返回一個(gè)。
2、如果沒(méi)有符合判斷條件的則返回 undefined。
是poetry，點(diǎn)擊上方“關(guān)注”，每天為你分享前端進(jìn)階與個(gè)人精進(jìn)干貨。
一、數(shù)組預(yù)覽圖
參數(shù): item1, item2, ..., itemX ,要添加到數(shù)組末尾的元素
let arr = [1,2,3];
let length = arr.push('末尾1','末尾2'); // 返回?cái)?shù)組長(zhǎng)度
console.log(arr,length)
// [1, 2, 3, "末尾1", "末尾2"] 5
返回值： 數(shù)組的長(zhǎng)度
//組合使用push()和pop()能夠用JavaScript數(shù)組實(shí)現(xiàn)先進(jìn)后出的棧
let stack = [];
stack.push(1,2) // 返回長(zhǎng)度2，這時(shí)stack的值是[1,2]
stack.pop() // 返回刪除的值2，這時(shí)stack的值是[1]
返回值： 從數(shù)組中刪除的元素(當(dāng)數(shù)組為空時(shí)返回undefined)。
方法在數(shù)組的頭部添加一個(gè)或多個(gè)元素，并將已存在的元素移動(dòng)到更高索引的位置來(lái)獲得足夠的空間，最后返回?cái)?shù)組新的長(zhǎng)度
let arr = [3,4,5];
let length = arr.unshift(1,2); // 返回長(zhǎng)度是5
console.log(arr, length)
//[1, 2, 3, 4, 5] 5
返回值： 返回?cái)?shù)組新的長(zhǎng)度
方法刪除數(shù)組的第一個(gè)元素并將其返回，然后把所有隨后的元素下移一個(gè)位置來(lái)填補(bǔ)數(shù)組頭部的空缺，返回值是刪除的元素
let arr = [1,2,3];
let item = arr.shift(); // 返回刪除的值1
console.log(arr, item)
// [2, 3] 1
返回值： 從數(shù)組中刪除的元素; 如果數(shù)組為空則返回undefined
方法是在數(shù)組中插入或刪除元素的通用方法
// start不超過(guò)數(shù)組長(zhǎng)度(以下操作是連續(xù)的)
let arr = [1,2,3,4,5];
arr.splice(2) // arr是[1,2]，返回值是[3,4,5]
arr.splice(1,1) // arr是[1]，返回值是[2]
arr.splice(0,3) // arr是[]，返回值是[1],因?yàn)榇藭r(shí)數(shù)組從第0位開(kāi)始不夠3位，所以是刪除從0開(kāi)始到最后的所有元素。
// start大于數(shù)組長(zhǎng)度(以下操作是連續(xù)的)
let arr = [1,2,3,4,5];
arr.splice(5) // arr是[1,2,3,4,5]，返回值是[]
arr.splice(5,3,6) // arr是[1,2,3,4,5,6]，返回值是[]
arr.splice(5,3,7) // arr是[1,2,3,4,5,7] 返回值是[6]
// start是負(fù)數(shù)(以下操作是連續(xù)的)
let arr = [1,2,3,4,5];
arr.splice(-3,2); // arr是[1,2,5], 返回值是[3,4]
arr.splice(-4); // arr是[],返回值是[1,2,5]
// 插入數(shù)組時(shí)，是插入數(shù)組本身，而不是數(shù)組元素
let arr = [1,4,5];
arr.splice(1,0,[2,3]) // arr是[1,[2,3],4,5]，返回值是[]
sort() 方法將數(shù)組中的元素排序并返回排序后的數(shù)組
var stringArray = ["Blue", "Humpback", "Beluga"];
var numberArray = [40, 1, 5, 200];
function compareNumbers(a, b){
return a - b;
}
console.log('stringArray:' + stringArray.join());
console.log('Sorted:' + stringArray.sort());
console.log('numberArray:' + numberArray.join());
// 沒(méi)有使用比較函數(shù)時(shí)，數(shù)字并不會(huì)按照我們?cè)O(shè)想的那樣排序
console.log('Sorted without a compare function:'+ numberArray.sort());
console.log('Sorted with compareNumbers:'+ numberArray.sort(compareNumbers));
//打印如下
// stringArray: Blue,Humpback,Beluga
// Sorted: Beluga,Blue,Humpback
// numberArray: 40,1,5,200
// Sorted without a compare function: 1,200,40,5
// Sorted with compareNumbers: 1,5,40,200
返回值： 返回排序后的數(shù)組。原數(shù)組已經(jīng)被排序后的數(shù)組代替
方法將數(shù)組中的元素顛倒順序，返回逆序的數(shù)組
let arr = [1,2,3];
arr.reverse() // arr是[3,2,1]，返回值是[3,2,1]
返回值： 返回順序顛倒后的數(shù)組。原數(shù)組已經(jīng)被排序后的數(shù)組代替
方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素
arr.fill(value[, start[, end]])
返回值： 修改后的數(shù)組
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
//fill 方法故意被設(shè)計(jì)成通用方法, 該方法不要求 this 是數(shù)組對(duì)象。
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
方法返回一個(gè)從開(kāi)始到結(jié)束（不包括結(jié)束）選擇的數(shù)組的一部分淺拷貝到一個(gè)新數(shù)組對(duì)象。且原始數(shù)組不會(huì)被修改
let arr = [1,2,3,4,5];
let arr1 = arr.slice(1,3); // arr是[1,2,3,4,5]， arr1是[2,3]
let arr2 = arr.slice(-2,-1); // arr是[1,2,3,4,5], arr2是[4]
// 開(kāi)始位置在結(jié)束位置后面，得到的數(shù)組是空
let arr3 = arr.slice(-2, -3); // arr是[1,2,3,4,5], arr3是[]
let arr4 = arr.slice(2, 1); // arr是[1,2,3,4,5], arr4是[]
//如果元素是個(gè)對(duì)象引用 （不是實(shí)際的對(duì)象），slice 會(huì)拷貝這個(gè)對(duì)象引用到新的數(shù)組里。兩個(gè)對(duì)象引用都引用了同一個(gè)對(duì)象。如果被引用的對(duì)象發(fā)生改變，則新的和原來(lái)的數(shù)組中的這個(gè)元素也會(huì)發(fā)生改變。
let arr = [{name: 'xiaoming'}];
let arr1 = arr.slice(); // arr是[{name: xiaoming}]，arr1是[{name: 'xiaoming'}]
arr1[0].name = 'xiaogang'; // arr是[{name: 'xiaogang'}]，arr1是[{name: 'xiaogang'}]
// 對(duì)于字符串、數(shù)字及布爾值來(lái)說(shuō)（不是 String、Number 或者 Boolean 對(duì)象），slice 會(huì)拷貝這些值到新的數(shù)組里。在別的數(shù)組里修改這些字符串或數(shù)字或是布爾值，將不會(huì)影響另一個(gè)數(shù)組。
let arr = [1,2,3];
let arr1 = arr.slice(); // arr是[1,2,3]，arr1是[1,2,3]
arr1[1] = "two"; // arr是[1,2,3]，arr1是[1,"tow",3]
// 當(dāng)然，如果向兩個(gè)數(shù)組任一中添加了新元素（簡(jiǎn)單或者引用類型），則另一個(gè)不會(huì)受到影響
方法將數(shù)組（或一個(gè)類數(shù)組對(duì)象）中所有元素都轉(zhuǎn)化為字符串并連接在一起，返回最后生成的字符串
let num = [1,2,3];
let str1 = num.join(); // 1,2,3
let str2 = num.join(', ') // 1, 2, 3
let str3 = num.join('') // 123
//所有的數(shù)組元素被轉(zhuǎn)換成字符串，再用一個(gè)分隔符將這些字符串連接起來(lái)。如果元素是undefined 或者null， 則會(huì)轉(zhuǎn)化成空字符串。
let num = [1,null,3];
let str1 = num.join(); // 1,,3
//如果數(shù)組中的元素是數(shù)組，會(huì)將里面的數(shù)組也調(diào)用join()
let num = [[1,2],3];
let str1 = num.join('-'); // 1,2-3
// 如果數(shù)組中的元素是對(duì)象，對(duì)象會(huì)被轉(zhuǎn)為[object Object]字符串
let num = [{num: 1},2,3];
let str1 = num.join('-'); // [object Object]-2-3
// 扁平化簡(jiǎn)單的二維數(shù)組
const arr = [11, [22, 33], [44, 55], 66];
const flatArr = arr.join().split(','); // ["11", "22", "33", "44", "55", "66"]
方法將數(shù)組的每個(gè)元素轉(zhuǎn)化為字符串(如有必要將調(diào)用元素的toString()方法)并且輸出用逗號(hào)分割的字符串列表。返回一個(gè)字符串表示數(shù)組中的元素
[1,2,3].toString(); // 1,2,3
[1,[2,'c']].toString(); //1,2,c
// 以上與不使用任何參數(shù)調(diào)用join()方法返回的字符串是一樣的。
// 以下的這個(gè)例子要跟下面的toLocaleString對(duì)照看
[{a:1},1,new Date()].toString() //"[object Object],1,Sat Jul 07 2018 18:43:45 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)"
注意： 當(dāng)數(shù)組和字符串操作的時(shí)候，js 會(huì)調(diào)用這個(gè)方法將數(shù)組自動(dòng)轉(zhuǎn)換成字符串
[1,2,3]+'abc' //1,2,3abc
返回值： 返回一個(gè)字符串表示數(shù)組中的元素
// 扁平化簡(jiǎn)單的二維數(shù)組
const arr = [11, [22, 33], [44, 55], 66];
const flatArr = arr.toString().split(','); // ["11", "22", "33", "44", "55", "66"]
數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串，這些字符串將使用一個(gè)特定語(yǔ)言環(huán)境的字符串（例如一個(gè)逗號(hào) ","）隔開(kāi)
//數(shù)組中的元素將會(huì)使用各自的 toLocaleString 方法：
// Object: Object.prototype.toLocaleString()
// Number: Number.prototype.toLocaleString()
// Date: Date.prototype.toLocaleString()
let prices = ['￥7', 500, 8123, 12];
// 不帶參數(shù)
prices.toLocaleString(); // "￥7,500,8,123,12"
//帶參數(shù)
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); // "￥7,500,8,123,12"
//MDN上的舉例中說(shuō)是 "￥7,￥500,￥8,123,￥12"，在瀏覽器和Node中驗(yàn)證了返回的都是 "￥7,500,8,123,12" 啊！
// 以下的這個(gè)例子要跟上面的toString對(duì)照看
[{a:1},1,new Date()].toLocaleString() //"[object Object],1,2018/7/7 下午6:45:00"
返回值： 表示數(shù)組元素的字符串
它的元素包括調(diào)用concat()的原始數(shù)組的元素和concat()的每個(gè)參數(shù)，但是要注意，concat()不會(huì)遞歸扁平化數(shù)組的數(shù)組，concat()也不會(huì)修改調(diào)用的數(shù)組
[1,2,3].concat([4,5,6],[7,8,9]) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
['a','b','c'].concat(1,[2,3],[[4,5]]) // ["a", "b", "c", 1, 2, 3, [4,5]]
// concat方法不會(huì)改變this或任何作為參數(shù)提供的數(shù)組，而是返回一個(gè)淺拷貝,所以原始數(shù)組和新數(shù)組都引用相同的對(duì)象。 如果引用的對(duì)象被修改，新數(shù)組和原始數(shù)組都會(huì)變。
let obj = {a: 1};
let arr1 = [2,obj];
let arr2 = [1].concat(arr1);
console.log(arr1,arr2) //[2,{a:1}],[1,2,{a:1}]
//記錄下上面的打印結(jié)果之后修改obj
obj.a = 2;
console.log(arr1,arr2) ////[2,{a:2}],[1,2,{a:2}]
// 說(shuō)了是淺拷貝，而且原數(shù)組也不改變，那我們就可以用它來(lái)實(shí)現(xiàn)數(shù)組的淺拷貝功能
let num1 = [1,2,3];
//第一種
let num2 = num1.concat();
//第二種
let num2 = [].concat(num1);
num2[0] = 'a';
console.log(num1,num2); // [1, 2, 3] ["a", 2, 3]
用于確定傳遞的值是否是一個(gè) Array
// 下面的函數(shù)調(diào)用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 這里注意：Array.prototype 也是一個(gè)數(shù)組,一個(gè)屬性值不是索引的數(shù)組。[constructor: ?, concat: ?, find: ?, findIndex: ?, pop: ?, …]
Array.isArray(Array.prototype);
// 下面的函數(shù)調(diào)用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });
方法從頭到尾遍歷數(shù)組，為每個(gè)元素調(diào)用指定的函數(shù)
// 1、 空元素不遍歷,undefined和null是會(huì)遍歷的。
let numberArr = [1,2,,3];
numberArr.forEach(function (value,index,array) {
console.log(value,index,array)
})
//打印信息如下，可見(jiàn)空元素是不會(huì)遍歷的
//1 0 [1, 2, empty, 3]
//2 1 [1, 2, empty, 3]
//3 3 [1, 2, empty, 3]
let nullArr = [1,2,null,3];
nullArr.forEach(function (value,index,array) {
console.log(value,index,array)
})
//打印信息如下，null是會(huì)遍歷的
//1 0 (4) [1, 2, null, 3]
//2 1 (4) [1, 2, null, 3]
//null 2 (4) [1, 2, null, 3]
//3 3 (4) [1, 2, null, 3]
//2、已刪除的項(xiàng)不會(huì)被遍歷到。如果已訪問(wèn)的元素在迭代時(shí)被刪除了,之后的元素將被跳過(guò)
let numberArr = [1,2,3];
numberArr.forEach(function (value,index,array) {
if(index === 0) {
delete numberArr[2]; //刪除第三項(xiàng)
//或者numberArr.pop()
}
console.log(value,index,array)
})
//打印信息如下：
// 1 0 (3) [1, 2, empty]
// 2 1 (3) [1, 2, empty]
let numberArr1 = [1,2,3,4];
numberArr1.forEach(function (value,index,array) {
if(index === 1) {
numberArr1.shift() //遍歷到第二項(xiàng)的時(shí)候，刪除第一項(xiàng)
}
console.log(value,index,array)
})
// 打印信息如下,遍歷到第二項(xiàng)的時(shí)候，刪除第一項(xiàng)，會(huì)跳過(guò)第三項(xiàng)
// 1 0 (4) [1, 2, 3, 4]
// 2 1 (3) [2, 3, 4]
// 4 2 (3) [2, 3, 4]
// 3、forEach 遍歷的范圍在第一次調(diào)用 callback 前就會(huì)確定。調(diào)用forEach 后添加到數(shù)組中的項(xiàng)不會(huì)被 callback 訪問(wèn)到。如果已經(jīng)存在的值被改變，則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值。
let arr = [1,2,3];
arr.forEach(function (value,index,array) {
if(index === 0) {
arr.push('新增的不會(huì)被遍歷到')
arr[2] = 4;
}
console.log(value,index,array)
})
// 1 0 (4) [1, 2, 4, "新增的不會(huì)被遍歷到"]
// 2 1 (4) [1, 2, 4, "新增的不會(huì)被遍歷到"]
// 4 2 (4) [1, 2, 4, "新增的不會(huì)被遍歷到"]
// 4、使用thisArg參數(shù) 和 箭頭函數(shù)使用thisArg
let arr = [1,2,3];
let obj = {arr: 'thisArg'}
arr.forEach(function () {
console.log(this.arr)
},obj)
// 打印三次 'thisArg'
let arr = [1,2,3];
let obj = {arr: 'thisArg'}
arr.forEach(() => {
console.log(this.arr)
},obj)
// 打印三次 undefined
// 5、forEach無(wú)法中途退出循環(huán)，只能用return退出本次回調(diào)，進(jìn)行下一次回調(diào)
let arr = [1,2,3];
let result = arr.forEach((value) => {
if(value == 2) {
return value;
}
console.log(value)
})
console.log(result) // undefined ，即使中間return vlaue，也還是undefined
//打印value的值如下，說(shuō)明return 并不能終止循環(huán)
// 1
// 3
方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)callback函數(shù)后返回的結(jié)果
方法測(cè)試數(shù)組的所有元素是否都通過(guò)了指定函數(shù)的測(cè)試。當(dāng)且僅當(dāng)針對(duì)數(shù)組中的所有元素調(diào)用判定函數(shù)都返回true，它才返回true。
let arr = [12,34,5,23,44];
let num = 0;
let result = arr.every(function (element, index, array) {
num++;
return element > 10;
})
console.log(result,num) // 打印 false 3
// 可見(jiàn)發(fā)現(xiàn)5這個(gè)小于10的元素后，遍歷立即終止，num為3
let arr = [12,34,,23,44];
let num = 0;
let result = arr.every(function (element, index, array) {
num++;
return element > 10;
})
console.log(result,num) // 打印 true 4
// 不會(huì)遍歷沒(méi)有賦值的索引位置，所以num為4
let result = [].every(function (element, index, array) {
return element > 10;
})
console.log(result) // 打印 true
方法測(cè)試數(shù)組中的某些元素是否通過(guò)由提供的函數(shù)實(shí)現(xiàn)的測(cè)試。當(dāng)數(shù)組中至少有一個(gè)元素調(diào)用判定函數(shù)返回true，它就返回true，當(dāng)且僅當(dāng)數(shù)組中的所有元素調(diào)用判定函數(shù)都返回false，它才返回false
// 一個(gè)簡(jiǎn)單的例子說(shuō)明
function isBiggerThan10(element, index, array) {
console.log(index)
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // 返回值是false，打印的index是0,1,2,3,4
[12, 5, 8, 1, 4].some(isBiggerThan10); // 返回值是true，打印的index是0，找到符合元素之后立即返回
// 實(shí)現(xiàn)一個(gè)跟includes方法類似的功能
let arr = [1,2,3];
function include(value) {
return arr.some((element) => {
return element === value
})
}
include(2) // true
include(4) // false
let result = [].some(function (element, index, array) {
return element > 10;
})
console.log(result) // 打印 false
這兩個(gè)方法使用指定的函數(shù)將數(shù)組元素進(jìn)行組合，生成單個(gè)值。這在函數(shù)式編程中是常見(jiàn)的操作，也可以稱為“注入”和“折疊”。reduceRight() 和 reduce() 工作原理是一樣的，不同的是reduceRight() 按照數(shù)組索引從高到低（從右到左）處理數(shù)組，而不是從低到高
let arr = [1,2,3,4,5];
let sum = arr.reduce((x,y) => x + y,0);
console.log(sum) // 15
// 看一下initialValue傳和不傳的區(qū)別
let arr = [1,2,3,4,5];
arr.reduce(function (accumulator,currentValue,currentIndex,arr) {
console.log(currentIndex)
return accumulator + currentValue;
})
// 1,2,3,4,5 沒(méi)傳入initialValue，索引是從1開(kāi)始
arr.reduce(function (accumulator,currentValue,currentIndex,arr) {
console.log(currentIndex)
return accumulator + currentValue;
},10)
// 0,1,2,3,4,5 傳入initialValue，索引從0開(kāi)始
// 應(yīng)用到二維數(shù)組展開(kāi)
let arr = [[0, 1], [2, 3], [4, 5]].reduce(
(a, b) => a.concat(b)
);
console.log(arr)
// [0, 1, 2, 3, 4, 5]
方法返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引，如果不存在，則返回-1
let array = [2, 5, 9];
array.indexOf(2) // 0
array.indexOf(7) // -1
array.indexOf(9, 2) // 2
array.indexOf(9, 3) // -1
array.indexOf(2, -1) // -1
array.indexOf(2, -3) // 0
array.indexOf(2, -4) // 0
let array1 = [1,2,NaN];
array1.indexOf(NaN) // -1
方法用來(lái)判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，根據(jù)情況，如果包含則返回 true，否則返回false。 ES7新增
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, 3].includes(3, -4); // true
[1, 2, NaN].includes(NaN); // true
find 方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 undefined。findIndex 方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。否則返回-1
// find
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n)); // 返回元素NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -5, 10,NaN].findIndex((n) => isNaN(n)); // 返回索引4
// 稀疏數(shù)組
let a =[1,,3,4];
let index = 0;
a.find((n) => {
console.log(index++) //0,1,2 第二次是empty也會(huì)調(diào)用一次，而且返回為true，立即退出
return n === 3;
})
源：升學(xué)就業(yè)幫講師——肖云銳
1. 數(shù)組的聲明和賦值
方式一: new Array()構(gòu)造函數(shù)方法
// 1. 使用構(gòu)造函數(shù)創(chuàng)建數(shù)組對(duì)象
// 創(chuàng)建了一個(gè)空數(shù)組var arr = new Array();
// 創(chuàng)建了一個(gè)數(shù)組，里面存放了3個(gè)字符串
var arr = new Array('zs', 'ls', 'ww');
// 創(chuàng)建了一個(gè)數(shù)組，里面存放了4個(gè)數(shù)字
var arr = new Array(1, 2, 3, 4);方式二: 字面量方式
// 2. 使用字面量創(chuàng)建數(shù)組對(duì)象
var arr = [1, 2, 3];
// 獲取數(shù)組中元素的個(gè)數(shù)
console.log(arr.length);注意事項(xiàng)：
1. 定義空數(shù)組的方式
var arr1 = [];2. 定義一個(gè)數(shù)組可以存入不同的數(shù)據(jù)類型. 但是一般不建議這樣使用.
var arr3 = [25,true,'abc'];3. 訪問(wèn)數(shù)組的元素通過(guò)索引，索引從開(kāi)始
var arr6 = [];
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
console.log(arr6);4. js中數(shù)組的下標(biāo)是可以不連續(xù)的，如果不連續(xù)默認(rèn)補(bǔ)充empty
var arr6 = [];
arr6[0] = 10;
arr6[1] = 20;
arr6[2] = 30;
console.log(arr6);
arr6[4] = 50;
console.log(arr6)執(zhí)行結(jié)果如下圖所示:
5. 數(shù)組的擴(kuò)容和縮容
var arr = [1, 1.2, new Date(), false, "呵呵"];
console.log("前:" + arr);
// 數(shù)組的擴(kuò)容arr.length = 10;
// 數(shù)組的縮小
//arr.length = 3;
console.log("后:" + arr);6. 清空數(shù)組
// 方式1 推薦
arr = [];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);2. 數(shù)組的遍歷
方式一:for循環(huán)，也是最常見(jiàn)的
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}方式二:for......in 遍歷數(shù)組
for(let item in arr){
console.log(arr[item])
}方式三: foreach遍歷數(shù)組
arr.forEach(function(item, index){
console.log(item + "=" + index);
});3. 數(shù)組的常用方法
數(shù)組常用的一些方法：
首尾數(shù)據(jù)操作
push() //在數(shù)組末尾添加一個(gè)或多個(gè)元素，并返回?cái)?shù)組操作后的長(zhǎng)度
pop() //刪除數(shù)組最后一項(xiàng)，返回刪除項(xiàng)
shift() //刪除數(shù)組第一項(xiàng)，返回刪除項(xiàng)
unshift() //在數(shù)組開(kāi)頭添加一個(gè)或多個(gè)元素，并返回?cái)?shù)組的新長(zhǎng)度合并和拆分
concat()
// 將兩個(gè)數(shù)組合并成一個(gè)新的數(shù)組，原數(shù)組不受影響。
// 參數(shù)位置可以是一個(gè)數(shù)組字面量、數(shù)組變量、零散的值。
slice(start,end)
// 從當(dāng)前數(shù)組中截取一個(gè)新的數(shù)組，不影響原來(lái)的數(shù)組，返回一個(gè)新的數(shù)組，
// 包含從 start 到 end （不包括該元素）的元素。
// 參數(shù)區(qū)分正負(fù)，正值表示下標(biāo)位置，負(fù)值表示從后面往前數(shù)第幾個(gè)位置，
// 參數(shù)可以只傳遞一個(gè)，表示從開(kāi)始位置截取到字符串結(jié)尾。刪除、插入、替換
splice(index,howmany,element1,element2,……)
//用于插入、刪除或替換數(shù)組的元素
//index：刪除元素的開(kāi)始位置
//howmany：刪除元素的個(gè)數(shù)，可以是0
//element1,element2：要替換的新的數(shù)據(jù)。位置方法
indexOf() //查找數(shù)據(jù)在數(shù)組中最先出現(xiàn)的下標(biāo)
lastIndexOf() //查找數(shù)據(jù)在數(shù)組中最后一次出現(xiàn)的下標(biāo)
//如果沒(méi)找到返回-1排序和倒序
reverse() //將數(shù)組完全顛倒，第一項(xiàng)變成最后一項(xiàng)，最后一項(xiàng)變成第一項(xiàng)。
sort(); //默認(rèn)根據(jù)字符編碼順序，從小到大排序
//如果想要根據(jù)數(shù)值大小進(jìn)行排序，必須添加sort的比較函數(shù)參數(shù)。
//該函數(shù)要比較兩個(gè)值，然后返回一個(gè)用于說(shuō)明這兩個(gè)值的相對(duì)順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b，根據(jù)a和b的關(guān)系作為判斷條件，返回值根據(jù)條件分為三個(gè)分支，正數(shù)、負(fù)數(shù)、0：
//返回值是負(fù)數(shù)-1：a排在b前面。
//返回值是整數(shù)1：a排在b后面。
//返回值是0：a和b的順序保持不變。
//人為能控制的是判斷條件。轉(zhuǎn)字符串方法
// 將數(shù)組的所有元素連接到一個(gè)字符串中。
join() //通過(guò)參數(shù)作為連字符將數(shù)組中的每一項(xiàng)用連字符連成一個(gè)完整的字符串迭代方法
//不會(huì)修改原數(shù)組(可選) HTML5新增
every()、filter()、forEach()、map()、some()代碼示例
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
