一總結(jié)表

二.會(huì)改變?cè)瓟?shù)組的方法

1.copyWithin方法

定義：copyWithin() 方法用于從數(shù)組的指定位置拷貝元素到數(shù)組的另一個(gè)指定位置中。

兼容性：ES6

語法：array.copyWithin(target, start, end)

參數(shù)：

返回值：拷貝后的數(shù)組

示例：

let arr=[0,1,2,3,4,5];
//從arr的第四個(gè)元素開始，替換為其索引值從1到3的元素，超出的元素將被省略
console.log(arr.copyWithin(4, 1, 3));//[ 0, 1, 2, 3, 1, 2 ]

let arr1=[0,1,2,3,4,5];
//將第一個(gè)到倒數(shù)第三個(gè)元素拷貝，放到以索引為2開始的位置
console.log(arr1.copyWithin(2, 0, -3));//[ 0, 1, 0, 1, 2, 5 ]

2.fill方法

定義：fill() 方法用于將一個(gè)固定值替換數(shù)組的元素。

兼容性：ES6

語法：array.fill(value, start, end)

參數(shù)：

返回值：填充后的數(shù)組

示例：

let arr=[0,1,2,3,4,5];
//將數(shù)組arr的全部元素以998進(jìn)行填充
console.log(arr.fill(998));//[ 998, 998, 998, 998, 998, 998 ]

let arr1=[0,1,2,3,4,5];
//將數(shù)組arr1中的第一個(gè)到倒數(shù)第三個(gè)元素以998進(jìn)行填充
console.log(arr1.fill(998, 0, -3));//[ 998, 998, 998, 3, 4, 5 ]

3.pop方法

定義：pop() 方法用于刪除數(shù)組的最后一個(gè)元素。

兼容性：無

語法：array.pop()

返回值：被刪除的元素

示例：

let arr=[0,1,2,3,4,5];
//刪除arr的最后一個(gè)元素
console.log(arr.pop());//5

4.push方法

定義：push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素。

兼容性：無

語法：array.push(item1, item2, ..., itemX)

參數(shù)：

返回值：新的數(shù)組長(zhǎng)度

示例：

let arr=[0,1,2,3,4,5];
//向arr末尾追加元素6
console.log(arr.push(6));//7
//向arr末尾追加元素7,8,9
console.log(arr.push(7,8,9));//10

5.reverse方法

定義：reverse() 方法用于顛倒數(shù)組中元素的順序。

兼容性：無

語法：array.reverse()

返回值：顛倒順序后的數(shù)組

示例：

let arr=[0,1,2,3,4,5];
console.log(arr.reverse());//[ 5, 4, 3, 2, 1, 0 ]

6.shift方法

定義：shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除。

兼容性：無

語法：array.shift()

返回值：被刪除的元素

示例：

let arr=[0,1,2,3,4,5];
console.log(arr.shift());//0

7.sort方法

定義：sort() 方法用于對(duì)數(shù)組的元素進(jìn)行排序。排序順序可以是字母或數(shù)字，并按升序或降序。默認(rèn)排序順序?yàn)榘醋帜干颉?/h4>

兼容性：無

語法：array.sort(sortfunction)

參數(shù)：

返回值：排序后的數(shù)組

示例：

let arr = ['#', 'b', 'f', 'a'];
console.log(arr.sort());//[ '#', 'a', 'b', 'f' ]

let arr1 = [9, 3, 5, 1, 8, 45, 23];
//升序排序
console.log(arr1.sort(function (a, b) {
    return a - b;//升序
}));//[ 1, 3, 5, 8, 9, 23, 45 ]

let arr2 = [9, 3, 5, 1, 8, 45, 23];
//降序排序
console.log(arr1.sort(function (a, b) {
    return b - a;//降序
}));//[ 45, 23, 9, 8, 5, 3, 1 ]

8.unshift方法

定義：unshift() 方法可向數(shù)組的開頭添加一個(gè)或更多元素。

兼容性：無

語法：array.unshift(item1, item2, ..., itemX)

參數(shù)：

返回值：新數(shù)組的長(zhǎng)度

示例：

let arr = [0, 1, 2, 3, 4, 5];
console.log(arr.unshift(10, 11));//8

9.splice方法

定義：splice() 方法用于添加或刪除數(shù)組中的元素。

兼容性：無

語法：array.splice(index,howmany,item1,.....,itemX)

參數(shù)：

返回值：如果從array中刪除了元素，則返回的是含有被刪除的元素的數(shù)組，未刪除元素時(shí)返回空數(shù)組。

示例：

let arr1=[0,1,2,3,4,5];
//刪除從索引值為3到數(shù)組末尾的元素
console.log(arr1.splice(3));//[ 3, 4, 5 ]
console.log(arr1);//[ 0, 1, 2 ]

let arr2=[0,1,2,3,4,5];
//從索引值為3開始刪除一個(gè)元素
console.log(arr2.splice(3,1));//[ 3 ]
console.log(arr2);//[ 0, 1, 2, 4, 5 ]

let arr3=[0,1,2,3,4,5];
//從索引值為3開始刪除一個(gè)元素，并在此位置添加6,7,8
console.log(arr3.splice(3,1,6,7,8));//[ 3 ]
console.log(arr3);//[ 0, 1, 2, 6, 7, 8, 4, 5 ]

let arr4=[0,1,2,3,4,5];
//從索引值為3開始添加6,7,8
console.log(arr4.splice(3,0,6,7,8));//[]
console.log(arr4);//[ 0, 1, 2, 6, 7, 8, 3, 4, 5 ]

三.不會(huì)改變?cè)瓟?shù)組的方法

1.concat方法

定義：concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。

兼容性：無

語法：array1.concat(array2,array3,...,arrayX)

參數(shù)：

返回值：連接操作后的數(shù)組

示例：

let arr1=[1,2,3];
let arr2=[4,5,6];
let arr3=[7,8,9];
//將數(shù)組arr2和arr3與arr1連接
let res=arr1.concat(arr2,arr3);
console.log(res);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

2.every方法

定義：every() 方法用于檢測(cè)數(shù)組所有元素是否都符合指定條件（通過函數(shù)提供）。

兼容性：無

語法：array.every(function(currentValue,index,arr), thisValue)

參數(shù)：

返回值：如果數(shù)組中檢測(cè)到有一個(gè)元素不滿足，則整個(gè)表達(dá)式返回 false ，且剩余的元素不會(huì)再進(jìn)行檢測(cè)。如果所有元素都滿足條件，則返回 true。

示例：

let arr=[0,1,2,3,4,5];
let thisValue={
    a:'every方法第一個(gè)參數(shù)函數(shù)的this指向'
}

//判斷arr中的元素是否都大于-1
let count1=0;
console.log(arr.every(function (item, index, arr) {
    count1++;
    return item > -1;
}, thisValue));//true
console.log(count1)//6

//當(dāng)條件出現(xiàn)不滿足時(shí)，剩余的元素不再遍歷
//判斷arr中的元素是否都小于3
let count2=0;
console.log(arr.every(function (item, index, arr) {
    count2++;
    return item <3;
}, thisValue));//false
console.log(count2);//4

3.some方法

定義：some() 方法用于檢測(cè)數(shù)組中的元素是否滿足指定條件（函數(shù)提供）。

兼容性：無

語法：array.some(function(currentValue,index,arr), thisValue)

參數(shù)：

返回值：如果有一個(gè)元素滿足條件，則表達(dá)式返回true , 剩余的元素不會(huì)再執(zhí)行檢測(cè)。如果沒有滿足條件的元素，則返回false。

示例：

let arr=[0,1,2,3,4,5];
let thisValue={
    a:'some方法第一個(gè)參數(shù)函數(shù)的this指向'
}

//判斷arr中是否有大于等于1的元素
let count1=0;
console.log(arr.some(function (item, index, arr) {
    count1++;
    return item >= 1;//如果有一個(gè)元素滿足條件，則表達(dá)式返回true,剩余的元素不會(huì)再執(zhí)行檢測(cè)
}, thisValue));//true
console.log(count1);//2

//判斷arr中是否有大于5的元素
let count2=0;
console.log(arr.some(function (item, index, arr) {
    count2++;
    return item > 5;
}, thisValue));//false
console.log(count2);//6

4.filter方法

定義：filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

兼容性：無

語法：array.filter(function(currentValue,index,arr), thisValue)

參數(shù)：

返回值：返回?cái)?shù)組，包含了符合條件的所有元素。如果沒有符合條件的元素則返回空數(shù)組。

示例：

let arr=[0,1,2,3,4,5];
let thisValue={
    a:'filter方法第一個(gè)參數(shù)函數(shù)的this指向'
}
//將arr中小于等于2的元素過濾掉
let res=arr.filter(function(item,index,arr){
    return item>2;
},thisValue);
console.log(res);//[ 3, 4, 5 ]

5.find方法

定義：find() 方法返回通過測(cè)試（函數(shù)內(nèi)判斷）的數(shù)組的第一個(gè)元素的值。

兼容性：ES6

語法：array.find(function(currentValue,index,arr), thisValue)

參數(shù)：

返回值：當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 true 時(shí), find() 返回符合條件的元素，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的則返回 undefined。

示例：

let arr=[0,1,2,3,4,5];
let thisValue={
    a:'find方法第一個(gè)參數(shù)函數(shù)的this指向'
}

//找出arr中第一個(gè)大于2的元素
let count1=0;
console.log(arr.find(function (item, index, arr) {
    count1++;
    return item > 2;//當(dāng)條件滿足時(shí)，剩余的元素不再遍歷
}, thisValue));//3
console.log(count1);//4

//找出arr中第一個(gè)大于5的元素
let count2=0;
console.log(arr.find(function (item, index, arr) {
    count2++;
    return item > 5;
}, thisValue));//undefined
console.log(count2);//6

6.findIndex方法

定義：findIndex() 方法返回傳入一個(gè)測(cè)試條件（函數(shù)）符合條件的數(shù)組第一個(gè)元素位置。

兼容性：ES6

語法：array.findIndex(function(currentValue,index,arr), thisValue)

參數(shù)：

返回值：當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 true 時(shí), findIndex() 返回符合條件的元素的索引位置，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的則返回 -1。

示例：

let arr=[0,1,2,3,4,5];
let thisValue={
    a:'findIndex方法第一個(gè)參數(shù)函數(shù)的this指向'
}

//尋找arr中大于5的元素的索引
let count1=0;
console.log(arr.findIndex(function (item, index, arr) {
    count1++;
    return item > 5;//當(dāng)條件滿足時(shí)，剩余的元素不再遍歷
}, thisValue));//-1
console.log(count1);//6

//尋找arr中大于3的元素的索引
let count2=0;
console.log(arr.findIndex(function (item, index, arr) {
    count2++;
    return item > 3;
}, thisValue));//4
console.log(count2);//5

7.forEach方法

定義：forEach() 方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。

兼容性：無

語法：array.forEach(function(currentValue, index, arr), thisValue)

參數(shù)：

返回值： undefined。

示例：

let arr=[0,1,2,3,4,5];
let thisValue={
    a:'forEach方法第一個(gè)參數(shù)函數(shù)的this指向'
}
arr.forEach(function(item,index,arr){
    if(item===2){
        return;//利用return來實(shí)現(xiàn)continue，無法實(shí)現(xiàn)break(可以用every方法代替forEach實(shí)現(xiàn)break)
    }
    console.log(item);
},thisValue);
// 0
// 1
// 3
// 4
// 5

8.from方法

定義：from() 方法用于通過擁有 length 屬性的對(duì)象或可迭代的對(duì)象來返回一個(gè)數(shù)組。

兼容性：ES6

語法：Array.from(object, mapFunction, thisValue)

參數(shù)：

返回值： undefined。

示例：

let thisValue = {
    a: 'form方法第二個(gè)參數(shù)函數(shù)的this指向'
}

//將str字符串轉(zhuǎn)為數(shù)組，空格以“空值”文字代替
let str = 'this is string';
let strToArray = Array.from(str, function (item, index) {//這個(gè)函數(shù)只有兩個(gè)參數(shù)，分別是元素值和索引
    if (item === ' ') {//可以利用返回值改變當(dāng)前元素的值
        return '空值';
    } else {
        return item;
    }
}, thisValue);
console.log(strToArray);//[ 't', 'h', 'i', 's', '空值', 'i', 's', '空值', 's', 't', 'r', 'i', 'n', 'g' ]

//利用from和Set實(shí)現(xiàn)數(shù)組去重
let res = Array.from(new Set([1, 2, 3, 1, 5, 1, 10]));
console.log(res);//[ 1, 2, 3, 5, 10 ]

9.includes方法

定義：includes() 方法用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值。

兼容性：ES6

語法：arr.includes(searchElement, fromIndex)

參數(shù)：

返回值： 布爾值。如果找到指定值返回 true，否則返回 false。

示例：

//從第一個(gè)元素開始查找元素10
console.log(arr.includes(10));//false
//從第一個(gè)元素開始查找元素4
console.log(arr.includes(4));//true
//從倒數(shù)第六個(gè)元素開始查找4
console.log(arr.includes(4, -6));//true
//從倒數(shù)第五個(gè)元素開始查找4
console.log(arr.includes(4, -5));//false

10.indexOf方法

定義：indexOf() 方法可返回?cái)?shù)組中某個(gè)指定的元素第一次出現(xiàn)的位置。

兼容性：無

語法：array.indexOf(item,start)

參數(shù)：

返回值： 元素在數(shù)組中的位置，如果沒有搜索到則返回 -1。

示例：

let arr=['a','b','c','d','e'];
//從第一個(gè)元素開始查找字符c
console.log(arr.indexOf('c'));//2
//從第一個(gè)元素開始查找字符f
console.log(arr.indexOf('f'));//-1
//從索引為2的元素開始查找字符c
console.log(arr.indexOf('c',2));//2
//從索引為3的元素開始查找字符c
console.log(arr.indexOf('c',3));//-1
//從倒數(shù)第四個(gè)元素開始查找字符c
console.log(arr.indexOf('c',-4));//2

11.lastIndexOf方法

定義：lastIndexOf() 方法可返回?cái)?shù)組中某個(gè)指定的元素最后一次出現(xiàn)的位置。其用法與indexOf一致。

12.isArray方法

定義：isArray() 方法用于判斷一個(gè)對(duì)象是否為數(shù)組。

兼容性：ES5

語法：Array.isArray(obj)

參數(shù)：

返回值：布爾值，如果對(duì)象是數(shù)組返回 true，否則返回 false。

示例：

let arr=[1,2,3,4];
let number=1;
let str='string';
let set=new Set([1,23,34,43]);//Set { 1, 23, 34, 43 }
let map=new Map([
    ['apples', 500],
    ['bananas', 300],
    ['oranges', 200]
]);//Map { 'apples' => 500, 'bananas' => 300, 'oranges' => 200 }

console.log(Array.isArray(arr));//true
console.log(Array.isArray(number));//false
console.log(Array.isArray(str));//false
console.log(Array.isArray(set));//false
console.log(Array.isArray(map));//false

13.join方法

定義：join() 方法用于把數(shù)組中的所有元素轉(zhuǎn)換一個(gè)字符串。

兼容性：無

語法：array.join(separator)

參數(shù)：

返回值：返回一個(gè)字符串。該字符串是通過把 arrayObject 的每個(gè)元素轉(zhuǎn)換為字符串，然后把這些字符串連接起來，在兩個(gè)元素之間插入 separator 字符串而生成的。

示例：

let arr= ["a", "b", "c", "d"];
let res1 = arr.join();
let res2 = arr.join('-');
console.log(res1);//a,b,c,d
console.log(res2);//a-b-c-d

14.keys方法

定義：keys() 方法用于從數(shù)組創(chuàng)建一個(gè)包含數(shù)組鍵的可迭代對(duì)象。

兼容性：ES6

語法：array.keys()

參數(shù)：無

返回值： 一個(gè)數(shù)組可迭代對(duì)象。

示例：

let arr=['a','b','c','d'];
let iterator1=arr.keys();
for (const key of iterator1) {
    console.log(key);
}
// 0
// 1
// 2
// 3

arr[10]='j';
console.log(arr);//[ 'a', 'b', 'c', 'd', <6 empty items>, 'j' ]
let iterator2=arr.keys();
for (const key of iterator2) {
    console.log(key);
}
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
// 10

15.map方法

定義：map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。map() 方法按照原始數(shù)組元素順序依次處理元素。

兼容性：無

語法：array.map(function(currentValue,index,arr), thisValue)

參數(shù)：

返回值：返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

示例：

let arr=[0,1,2,3,4,5];
let thisValue={
    a:'map方法第一個(gè)參數(shù)函數(shù)的this指向'
}
//將arr的每個(gè)元素+1
let res=arr.map(function (item,index,arr) {
    return item+1;//返回值將作為新數(shù)組的元素
},thisValue);
console.log(res);//[ 1, 2, 3, 4, 5, 6 ]

16.reduce方法

定義：reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。

兼容性：無

語法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

參數(shù)：

返回值：返回計(jì)算結(jié)果

示例：

let arr=[0,1,2,3,4,5];

//未設(shè)置初始值，計(jì)算arr的和
console.log(arr.reduce(function (total, item, index, arr) {
    return total + item;
}));//15

//設(shè)置初始值為10，計(jì)算arr的和
console.log(arr.reduce(function (total, item, index, arr) {
    return total + item;
}, 10));//25

17.reduceRight方法

定義：reduceRight() 方法的功能和 reduce() 功能是一樣的，不同的是 reduceRight() 從數(shù)組的末尾向前將數(shù)組中的數(shù)組項(xiàng)做累加。

18.slice方法

定義：slice() 方法可從已有的數(shù)組中返回選定的元素。slice() 方法可提取字符串的某個(gè)部分，并以新的字符串返回被提取的部分。

兼容性：無

語法：array.slice(start, end)

參數(shù)：

返回值：返回一個(gè)新的數(shù)組，包含從 start（包括該元素） 到 end （不包括該元素）的元素。

示例：

let arr=[0,1,2,3,4,5];
//不傳參數(shù)時(shí),可用于拷貝數(shù)組
let arr1=arr.slice();
console.log(arr1,arr1===arr);//[ 0, 1, 2, 3, 4, 5 ] false
//選取從索引值為3到最后一個(gè)的元素
console.log(arr.slice(3));// [ 3, 4, 5 ]
//選取從索引值為3到索引值為4的元素
console.log(arr.slice(3, 4));// [ 3 ]
//選取從倒數(shù)第二個(gè)元素到最后一個(gè)的元素
console.log(arr.slice(-2));// [ 4, 5 ]
//選取從倒數(shù)第二個(gè)元素到倒數(shù)第一個(gè)的元素
console.log(arr.slice(-3, -1));// [ 3, 4 ]

19.toString方法

定義：toString() 方法可把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

兼容性：無

語法：array.toString()

參數(shù)：無

返回值：數(shù)組的所有值用逗號(hào)隔開。

示例：

let arr=['#','b','f','a'];
console.log(arr.toString());//#,b,f,a

20.valueOf方法

定義：valueOf() 方法返回 Array 對(duì)象的原始值。

兼容性：無

語法：array.valueOf()

參數(shù)：無

返回值：array本身。

示例：

let arr=['#','b','f','a'];
let res=arr.valueOf();
console.log(res === arr);//true

參考文獻(xiàn)：菜鳥教程JavaScript Array 對(duì)象