一總結表

二.會改變原數組的方法

1.copyWithin方法

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

兼容性：ES6

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

參數：

返回值：拷貝后的數組

示例：

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

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

2.fill方法

定義：fill() 方法用于將一個固定值替換數組的元素另玖。

兼容性：ES6

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

參數：

返回值：填充后的數組

示例：

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

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

3.pop方法

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

兼容性：無

語法：array.pop()

返回值：被刪除的元素

示例：

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

4.push方法

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

兼容性：無

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

參數：

返回值：新的數組長度

示例：

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() 方法用于顛倒數組中元素的順序宣脉。

兼容性：無

語法：array.reverse()

返回值：顛倒順序后的數組

示例：

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

6.shift方法

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

兼容性：無

語法：array.shift()

返回值：被刪除的元素

示例：

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

7.sort方法

定義：sort() 方法用于對數組的元素進行排序。排序順序可以是字母或數字塑猖，并按升序或降序竹祷。默認排序順序為按字母升序。

兼容性：無

語法：array.sort(sortfunction)

參數：

返回值：排序后的數組

示例：

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() 方法可向數組的開頭添加一個或更多元素蜡励。

兼容性：無

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

參數：

返回值：新數組的長度

示例：

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

9.splice方法

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

兼容性：無

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

參數：

返回值：如果從array中刪除了元素，則返回的是含有被刪除的元素的數組负芋，未刪除元素時返回空數組漫蛔。

示例：

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

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

let arr3=[0,1,2,3,4,5];
//從索引值為3開始刪除一個元素，并在此位置添加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 ]

三.不會改變原數組的方法

1.concat方法

定義：concat() 方法用于連接兩個或多個數組旧蛾。

兼容性：無

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

參數：

返回值：連接操作后的數組

示例：

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

2.every方法

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

兼容性：無

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

參數：

返回值：如果數組中檢測到有一個元素不滿足，則整個表達式返回 false 运褪，且剩余的元素不會再進行檢測。如果所有元素都滿足條件导披，則返回 true。

示例：

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

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

//當條件出現不滿足時，剩余的元素不再遍歷
//判斷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() 方法用于檢測數組中的元素是否滿足指定條件（函數提供）糙置。

兼容性：無

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

參數：

返回值：如果有一個元素滿足條件龟糕，則表達式返回true , 剩余的元素不會再執(zhí)行檢測。如果沒有滿足條件的元素悔耘，則返回false讲岁。

示例：

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

//判斷arr中是否有大于等于1的元素
let count1=0;
console.log(arr.some(function (item, index, arr) {
    count1++;
    return item >= 1;//如果有一個元素滿足條件，則表達式返回true,剩余的元素不會再執(zhí)行檢測
}, 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)建一個新的數組衬以，新數組中的元素是通過檢查指定數組中符合條件的所有元素缓艳。

兼容性：無

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

參數：

返回值：返回數組，包含了符合條件的所有元素澄港。如果沒有符合條件的元素則返回空數組湖苞。

示例：

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

5.find方法

定義：find() 方法返回通過測試（函數內判斷）的數組的第一個元素的值藏姐。

兼容性：ES6

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

參數：

返回值：當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素虑椎，之后的值不會再調用執(zhí)行函數。如果沒有符合條件的則返回 undefined俱笛。

示例：

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

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

//找出arr中第一個大于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() 方法返回傳入一個測試條件（函數）符合條件的數組第一個元素位置。

兼容性：ES6

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

參數：

返回值：當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置族壳，之后的值不會再調用執(zhí)行函數。如果沒有符合條件的則返回 -1鸯檬。

示例：

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

//尋找arr中大于5的元素的索引
let count1=0;
console.log(arr.findIndex(function (item, index, arr) {
    count1++;
    return item > 5;//當條件滿足時决侈，剩余的元素不再遍歷
}, 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() 方法用于調用數組的每個元素，并將元素傳遞給回調函數喧务。

兼容性：無

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

參數：

返回值： undefined尘应。

示例：

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

8.from方法

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

兼容性：ES6

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

參數：

返回值： undefined拳亿。

示例：

let thisValue = {
    a: 'form方法第二個參數函數的this指向'
}

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

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

9.includes方法

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

兼容性：ES6

語法：arr.includes(searchElement, fromIndex)

參數：

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

示例：

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

10.indexOf方法

定義：indexOf() 方法可返回數組中某個指定的元素第一次出現的位置肉津。

兼容性：無

語法：array.indexOf(item,start)

參數：

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

示例：

let arr=['a','b','c','d','e'];
//從第一個元素開始查找字符c
console.log(arr.indexOf('c'));//2
//從第一個元素開始查找字符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
//從倒數第四個元素開始查找字符c
console.log(arr.indexOf('c',-4));//2

11.lastIndexOf方法

定義：lastIndexOf() 方法可返回數組中某個指定的元素最后一次出現的位置恩脂。其用法與indexOf一致。

12.isArray方法

定義：isArray() 方法用于判斷一個對象是否為數組趣斤。

兼容性：ES5

語法：Array.isArray(obj)

參數：

返回值：布爾值唬渗，如果對象是數組返回 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() 方法用于把數組中的所有元素轉換一個字符串镊逝。

兼容性：無

語法：array.join(separator)

參數：

返回值：返回一個字符串。該字符串是通過把 arrayObject 的每個元素轉換為字符串，然后把這些字符串連接起來座菠，在兩個元素之間插入 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() 方法用于從數組創(chuàng)建一個包含數組鍵的可迭代對象。

兼容性：ES6

語法：array.keys()

參數：無

返回值： 一個數組可迭代對象浴滴。

示例：

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() 方法返回一個新數組拓萌，數組中的元素為原始數組元素調用函數處理后的值。map() 方法按照原始數組元素順序依次處理元素升略。

兼容性：無

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

參數：

返回值：返回一個新數組球拦，數組中的元素為原始數組元素調用函數處理后的值靠闭。

示例：

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

16.reduce方法

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

兼容性：無

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

參數：

返回值：返回計算結果

示例：

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

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

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

17.reduceRight方法

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

18.slice方法

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

兼容性：無

語法：array.slice(start, end)

參數：

返回值：返回一個新的數組，包含從 start（包括該元素） 到 end （不包括該元素）的元素穆趴。

示例：

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

19.toString方法

定義：toString() 方法可把數組轉換為字符串脸爱，并返回結果。

兼容性：無

語法：array.toString()

參數：無

返回值：數組的所有值用逗號隔開未妹。

示例：

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

20.valueOf方法

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

兼容性：無

語法：array.valueOf()

參數：無

返回值：array本身。

示例：

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

參考文獻：菜鳥教程JavaScript Array 對象