• 方法在陣列的尾部新增一個或多個元素，並返回陣列的長度

引數: item1, item2, …, itemX ,要新增到陣列末尾的元素

let arr = [1,2,3];

let length = arr.push('末尾1','末尾2'); // 返回陣列長度

console.log(arr,length)

// [1, 2, 3, "末尾1", "末尾2"] 5

返回值： 陣列的長度

2.2 pop()

• 方法刪除陣列的最後一個元素，減小陣列長度並返回它刪除的值

//組合使用push()和pop()能夠用JavaScript陣列實現先進後出的棧

let stack = [];

stack.push(1,2) // 返回長度2，這時stack的值是[1,2]

stack.pop() // 返回刪除的值2，這時stack的值是[1]

返回值： 從陣列中刪除的元素(當陣列為空時返回undefined)。

2.3 unshift()

方法在陣列的頭部新增一個或多個元素，並將已存在的元素移動到更高索引的位置來獲得足夠的空間，最後返回陣列新的長度

let arr = [3,4,5];

let length = arr.unshift(1,2); // 返回長度是5

console.log(arr, length)

//[1, 2, 3, 4, 5] 5

返回值： 返回陣列新的長度

2.4 shift()

方法刪除陣列的第一個元素並將其返回，然後把所有隨後的元素下移一個位置來填補陣列頭部的空缺，返回值是刪除的元素

let arr = [1,2,3];

let item = arr.shift(); // 返回刪除的值1

console.log(arr, item)

// [2, 3] 1

返回值： 從陣列中刪除的元素; 如果陣列為空則返回undefined

2.5 splice()

方法是在陣列中插入或刪除元素的通用方法

// start不超過陣列長度(以下操作是連續的)
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],因為此時陣列從第0位開始不夠3位，所以是刪除從0開始到最後的所有元素。

// start大於陣列長度(以下操作是連續的)

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是負數(以下操作是連續的)

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

arr.splice(-3,2); // arr是[1,2,5], 返回值是[3,4]
arr.splice(-4); // arr是[],返回值是[1,2,5]

// 插入陣列時，是插入陣列本身，而不是陣列元素

let arr = [1,4,5];

arr.splice(1,0,[2,3]) // arr是[1,[2,3],4,5]，返回值是[]

2.6 sort()

sort() 方法將陣列中的元素排序並返回排序後的陣列

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());

// 沒有使用比較函式時，數字並不會按照我們設想的那樣排序

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

返回值： 返回排序後的陣列。原陣列已經被排序後的陣列代替

2.7 reverse()

方法將陣列中的元素顛倒順序，返回逆序的陣列

let arr = [1,2,3];

arr.reverse() // arr是[3,2,1]，返回值是[3,2,1]

返回值： 返回順序顛倒後的陣列。原陣列已經被排序後的陣列代替

2.8 fill()

方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素

arr.fill(value[, start[, end]])

• value 用來填充陣列元素的值。
• start (可選) 起始索引，預設值為0。
• end (可選) 終止索引，預設值為 this.length。
• 如果 start 是個負數, 則開始索引會被自動計算成為 length+start , 其中 length 是 this 物件的 length 屬性值. 如果 end 是個負數, 則結束索引會被自動計算成為 length+end

返回值： 修改後的陣列

[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 方法故意被設計成通用方法, 該方法不要求 this 是陣列物件。

[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}

三、不改變原陣列的方法

3.1 slice()

方法返回一個從開始到結束（不包括結束）選擇的陣列的一部分淺拷貝到一個新陣列物件。且原始陣列不會被修改

• 返回值： 一個含有提取元素的新陣列

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]

// 開始位置在結束位置後面，得到的陣列是空

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是[]


//如果元素是個物件引用 （不是實際的物件），slice 會拷貝這個物件引用到新的數組裡。兩個物件引用都引用了同一個物件。如果被引用的物件發生改變，則新的和原來的陣列中的這個元素也會發生改變。


let arr = [{name: 'xiaoming'}];

let arr1 = arr.slice(); // arr是[{name: xiaoming}]，arr1是[{name: 'xiaoming'}]

arr1[0].name = 'xiaogang'; // arr是[{name: 'xiaogang'}]，arr1是[{name: 'xiaogang'}]


// 對於字串、數字及布林值來說（不是 String、Number 或者 Boolean 物件），slice 會拷貝這些值到新的數組裡。在別的數組裡修改這些字串或數字或是布林值，將不會影響另一個數組。

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]

// 當然，如果向兩個陣列任一中添加了新元素（簡單或者引用型別），則另一個不會受到影響

3.2 join()

方法將陣列（或一個類陣列物件）中所有元素都轉化為字串並連線在一起，返回最後生成的字串

• 返回值： 一個所有陣列元素連線的字串。如果 arr.length 為0，則返回空字串

let num = [1,2,3];

let str1 = num.join(); // 1,2,3

let str2 = num.join(', ') // 1, 2, 3

let str3 = num.join('') // 123

//所有的陣列元素被轉換成字串，再用一個分隔符將這些字串連線起來。如果元素是undefined 或者null， 則會轉化成空字串。

let num = [1,null,3];
let str1 = num.join(); // 1,,3

//如果陣列中的元素是陣列，會將裡面的陣列也呼叫join()
let num = [[1,2],3];

let str1 = num.join('-'); // 1,2-3

// 如果陣列中的元素是物件，物件會被轉為[object Object]字串

let num = [{num: 1},2,3];

let str1 = num.join('-'); // [object Object]-2-3

// 扁平化簡單的二維陣列
const arr = [11, [22, 33], [44, 55], 66];
const flatArr = arr.join().split(','); // ["11", "22", "33", "44", "55", "66"]

3.3 toString()

方法將陣列的每個元素轉化為字串(如有必要將呼叫元素的 toString() 方法)並且輸出用逗號分割的字串列表。返回一個字串表示陣列中的元素

[1,2,3].toString(); // 1,2,3

[1,[2,'c']].toString(); //1,2,c

// 以上與不使用任何引數呼叫join()方法返回的字串是一樣的。

// 以下的這個例子要跟下面的toLocaleString對照看

[{a:1},1,new Date()].toString() //"[object Object],1,Sat Jul 07 2018 18:43:45 GMT+0800 (中國標準時間)"

注意： 當陣列和字串操作的時候，js 會呼叫這個方法將陣列自動轉換成字串

[1,2,3]+'abc' //1,2,3abc

返回值： 返回一個字串表示陣列中的元素

// 扁平化簡單的二維陣列
const arr = [11, [22, 33], [44, 55], 66];

const flatArr = arr.toString().split(','); // ["11", "22", "33", "44", "55", "66"]

3.4 toLocaleString()

陣列中的元素將使用各自的 toLocaleString 方法轉成字串，這些字串將使用一個特定語言環境的字串（例如一個逗號 “,”）隔開

//陣列中的元素將會使用各自的 toLocaleString 方法：

// Object: Object.prototype.toLocaleString()

// Number: Number.prototype.toLocaleString()

// Date: Date.prototype.toLocaleString()

let prices = ['￥7', 500, 8123, 12];

// 不帶引數

prices.toLocaleString(); // "￥7,500,8,123,12"

//帶引數

prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); // "￥7,500,8,123,12"

//MDN上的舉例中說是 "￥7,￥500,￥8,123,￥12"，在瀏覽器和Node中驗證了返回的都是 "￥7,500,8,123,12" 啊！

// 以下的這個例子要跟上面的toString對照看

[{a:1},1,new Date()].toLocaleString() //"[object Object],1,2018/7/7 下午6:45:00"

返回值： 表示陣列元素的字串

3.5 concat()

它的元素包括呼叫concat()的原始陣列的元素和concat()的每個引數，但是要注意，concat()不會遞迴扁平化陣列的陣列，concat()也不會修改呼叫的陣列

[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方法不會改變this或任何作為引數提供的陣列，而是返回一個淺拷貝,所以原始陣列和新陣列都引用相同的物件。 如果引用的物件被修改，新陣列和原始陣列都會變。


let obj = {a: 1};

let arr1 = [2,obj];

let arr2 = [1].concat(arr1);

console.log(arr1,arr2) //[2,{a:1}],[1,2,{a:1}]

//記錄下上面的列印結果之後修改obj

obj.a = 2;
console.log(arr1,arr2) ////[2,{a:2}],[1,2,{a:2}]


// 說了是淺拷貝，而且原陣列也不改變，那我們就可以用它來實現陣列的淺拷貝功能

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]

3.6 isArray()

用於確定傳遞的值是否是一個 Array

// 下面的函式呼叫都返回 true

Array.isArray([]);

Array.isArray([1]);

Array.isArray(new Array());

// 這裡注意：Array.prototype 也是一個數組,一個屬性值不是索引的陣列。[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

Array.isArray(Array.prototype);

// 下面的函式呼叫都返回 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 });

四、陣列遍歷、對映、過濾、檢測、簡化等方法

4.1 forEach()

方法從頭到尾遍歷陣列，為每個元素呼叫指定的函式

• callback 為陣列中每個元素執行的函式，該函式接收三個引數

// 1、 空元素不遍歷,undefined和null是會遍歷的。

let numberArr = [1,2,,3];

numberArr.forEach(function (value,index,array) {
    console.log(value,index,array)
})



//列印資訊如下，可見空元素是不會遍歷的
//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是會遍歷的
//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、已刪除的項不會被遍歷到。如果已訪問的元素在迭代時被刪除了,之後的元素將被跳過


let numberArr = [1,2,3];
numberArr.forEach(function (value,index,array) {
    if(index === 0) {

    delete numberArr[2]; //刪除第三項
    //或者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() //遍歷到第二項的時候，刪除第一項
}

console.log(value,index,array)
})



// 列印資訊如下,遍歷到第二項的時候，刪除第一項，會跳過第三項
// 1 0 (4) [1, 2, 3, 4]
// 2 1 (3) [2, 3, 4]
// 4 2 (3) [2, 3, 4]
// 3、forEach 遍歷的範圍在第一次呼叫 callback 前就會確定。呼叫forEach 後新增到陣列中的項不會被 callback 訪問到。如果已經存在的值被改變，則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值。


let arr = [1,2,3];
arr.forEach(function (value,index,array) {

    if(index === 0) {
        arr.push('新增的不會被遍歷到')
        arr[2] = 4;
}

console.log(value,index,array)
})



// 1 0 (4) [1, 2, 4, "新增的不會被遍歷到"]
// 2 1 (4) [1, 2, 4, "新增的不會被遍歷到"]
// 4 2 (4) [1, 2, 4, "新增的不會被遍歷到"]
// 4、使用thisArg引數 和 箭頭函式使用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無法中途退出迴圈，只能用return退出本次回撥，進行下一次回撥

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的值如下，說明return 並不能終止迴圈
// 1
// 3

4.2 map()

方法建立一個新陣列，其結果是該陣列中的每個元素都呼叫一個callback函式後返回的結果

• 返回值： 一個新陣列，每個元素都是回撥函式的結果
• 不要用 map 代替 forEach , map 會建立一個新的陣列，佔用記憶體。如果你不用 map 的返回值，那你就應當使用 forEach

4.3 filter()

• 方法返回的陣列元素是呼叫的陣列的一個子集。傳入的函式時用來邏輯判定的，該函式返回 true 或 false,如果返回值為true或能轉化為true的值，那麼傳遞給判斷函式的元素就是這個子集的成員，它將被新增倒一個作為返回值的陣列中
• 返回值： 一個新的通過測試的元素的集合的陣列，如果沒有通過測試則返回空陣列

4.4 every()

方法測試陣列的所有元素是否都通過了指定函式的測試。當且僅當針對陣列中的所有元素呼叫判定函式都返回true，它才返回true。

• 空陣列上呼叫every方法，返回 true，因為空陣列沒有元素，所以空陣列中所有元素都符合給定的條件
• 返回值： 一個布林值，當所有的元素都符合條件才返回true，否則返回false

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

// 可見發現5這個小於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

// 不會遍歷沒有賦值的索引位置，所以num為4

let result = [].every(function (element, index, array) {

return element > 10;
})

console.log(result) // 列印 true

4.5 some()

方法測試陣列中的某些元素是否通過由提供的函式實現的測試。當陣列中至少有一個元素呼叫判定函式返回true，它就返回true，當且僅當陣列中的所有元素呼叫判定函式都返回false，它才返回false

• 空陣列呼叫some，返回false
• 返回值： 只要陣列中的任意一個元素在回撥函式中返回的是真值，就返回true，否則為false

// 一個簡單的例子說明
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，找到符合元素之後立即返回


// 實現一個跟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

4.6 reduce() 和 reduceRight()

這兩個方法使用指定的函式將陣列元素進行組合，生成單個值。這在函數語言程式設計中是常見的操作，也可以稱為“注入”和“摺疊”。reduceRight() 和 reduce() 工作原理是一樣的，不同的是reduceRight() 按照陣列索引從高到低（從右到左）處理陣列，而不是從低到高

• 如果陣列為空且沒有提供initialValue，會丟擲TypeError 。如果陣列僅有一個元素（無論位置如何）並且沒有提供initialValue， 或者有提供initialValue但是陣列為空，那麼此唯一值將被返回並且callback不會被執行
• 返回值： 函式累計處理的結果

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

let sum = arr.reduce((x,y) => x + y,0);

console.log(sum) // 15

// 看一下initialValue傳和不傳的區別

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 沒傳入initialValue，索引是從1開始

arr.reduce(function (accumulator,currentValue,currentIndex,arr) {

    console.log(currentIndex)
    
    return accumulator + currentValue;
},10)



// 0,1,2,3,4,5 傳入initialValue，索引從0開始
// 應用到二維陣列展開
let arr = [[0, 1], [2, 3], [4, 5]].reduce(
    (a, b) => a.concat(b)
);

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

4.7 indexof()

方法返回在陣列中可以找到一個給定元素的第一個索引，如果不存在，則返回-1

• 注意： indexOf 使用嚴格相等（即 === ）比較 searchElement 和陣列中的元素。而且 indexOf() 不能識別 NaN
• 返回值： 首個被找到的元素在陣列中的索引位置; 若沒有找到則返回 -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

4.8 includes()

方法用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。 ES7新增

• 返回值： 一個布林值，根據情況，如果包含則返回 true，否則返回false

[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

4.9 find() 和 findIndex()

find 方法返回陣列中滿足提供的測試函式的第一個元素的值。否則返回 undefined。findIndex 方法返回陣列中滿足提供的測試函式的第一個元素的索引。否則返回-1

find
findIndex

// 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

// 稀疏陣列
let a =[1,,3,4];

let index = 0;
a.find((n) => {
    
    console.log(index++) //0,1,2 第二次是empty也會呼叫一次，而且返回為true，立即退出
    
    return n === 3;
})

如果你現在在JAVA這條路上掙扎，也想在IT行業拿高薪，可以參加我們的訓練營課程，選擇最適合自己的課程學習，技術大牛親授，7個月後，進入名企拿高薪。我們的課程內容有：Java工程化、高效能及分散式、高效能、深入淺出。高架構。效能調優、Spring，MyBatis，Netty原始碼分析和大資料等多個知識點。如果你想拿高薪的，想學習的，想就業前景好的，想跟別人競爭能取得優勢的，想進阿里面試但擔心面試不過的，你都可以來，q群號為：779792048

注：加群要求

1、具有1-5工作經驗的，面對目前流行的技術不知從何下手，需要突破技術瓶頸的可以加。

2、在公司待久了，過得很安逸，但跳槽時面試碰壁。需要在短時間內進修、跳槽拿高薪的可以加。

3、如果沒有工作經驗，但基礎非常紮實，對java工作機制，常用設計思想，常用java開發框架掌握熟練的，可以加。

4、覺得自己很牛B，一般需求都能搞定。但是所學的知識點沒有系統化，很難在技術領域繼續突破的可以加。

5.阿里Java高階大牛直播講解知識點，分享知識，多年工作經驗的梳理和總結，帶著大家全面、科學地建立自己的技術體系和技術認知！