JavaScript 數組的常用方法

我們前端來說數組作為一個常用的類型，今天我們講一下在實際使用中經常用到的方法和使用場景。

concat() 多數組組合

concat() 可以用來連接兩個或多個數組，返回要給新的數組并且不會影響之前的數組。

使用方法：arr.concat(arr1,arr2,......,arrn) 他的參數可以是多個數組。實例如下：

var arr = [1,2,3];
var arr1 = [4,5,6];
var arr2 = [7,8,9];
arr.concat(arr1,arr2)

輸出結果：
[1,2,3,4,5,6,7,8,9]

join()將數組元素連接到一起

join()方法是把數組中所有的元素通過指定的分隔符連接成一個統一的字符串。

實例如下：

var arr = ["str1","str2","str3"]
arr.join("#")

輸出結果：
str1#str2#str3

pop()刪除數組的最后元素

pop() 是用來刪除數組的最后一個元素。咱們直接上實例：

var arr = ["str1","str2","str3"]
arr.pop()

輸出結果：
["str1","str2"]

push()往數組結尾添加元素

push() 方法適用于向數組的末尾添加一個或多個元素。

使用方法：

arr.push(obj1,obj2,......objn) 我們可以看到這個方法可以添加多個參數。具體實例如下：

var arr = ["str1","str2","str3"]
arr.push("obj1","obj2","obj3")

輸出結果：
 ["str1","str2","str3","obj1","obj2","obj3"]

unshift()往數組開頭添加元素

unshift() 方法適用于向數組的末尾添加一個或多個元素。也可以添加多個參數。具體實例如下：

var arr = ["str1","str2","str3"]
arr.unshift("obj1","obj2","obj3")

輸出結果：
["obj1", "obj2", "obj3", "str1", "str2", "str3"

forEach() 和for()數組循環遍歷

共同點：兩者都是用于對數組的循環遍歷

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

輸出結果相同：
 ["str1","str2","str3"]

不同點：for 可以中途中斷但是forEach不行他會執行完整個數組元素

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

輸出結果：
 ["str1","str2"]
輸出結果：
 ["str1","str2","str3"]

我們看出for函數只輸出了兩個值就中斷了但是forEach確將所有的數據都輸出了。整個地方是特別容易出錯并且不容易找出錯誤的地方。所以大家一定要區分開兩個函數的共同點和區別。

map(）函數

map函數可以根據之前的對象根據某個條件進行某種變換，生成另外一個新的對象。

 let arr=[1,2,3]
 let createArr=arr.map(item=>{
   return item*2
 })
 
 輸出結果：
 [2,4,6]

filter() 函數

filter函數用于數組中獲取過濾符合條件的所有元素，返回過濾后的數組，如果沒有符合條件的元素則返回空數組。

let arr=[1,2,3]
let arr2=arr.filter(item=>{
  return item.value>1
})

輸出結果：
 [2,3]

find()函數

find()函數查找符合條件的值，不過有幾點注意事項：

1、返回符合條件的第一個元素的值，多符合也只是返回一個。

2、如果沒有符合判斷條件的則返回 undefined。

是poetry，點擊上方“關注”，每天為你分享前端進階與個人精進干貨。

一、數組預覽圖

二、會改變原數組的方法

2.1 push()

方法在數組的尾部添加一個或多個元素，并返回數組的長度

參數: 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 方法，當某個元素通過 callback 的測試時，返回數組中的一個值，否則返回 undefined。
findIndex方法，返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-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

// 稀疏數組
let a =[1,,3,4];

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

4.10 其他

keys()方法返回一個新的Array迭代器，它包含數組中每個索引的鍵
values() 方法返回一個新的Array迭代器，它包含數組中每個索引的值
entries()方法返回一個新的Array迭代器，該對象包含數組中每個索引的鍵/值對

源：升學就業幫講師——肖云銳

1. 數組的聲明和賦值

方式一: new Array()構造函數方法

// 1. 使用構造函數創建數組對象
// 創建了一個空數組var arr = new Array();
// 創建了一個數組，里面存放了3個字符串
var arr = new Array('zs', 'ls', 'ww');
// 創建了一個數組，里面存放了4個數字
var arr = new Array(1, 2, 3, 4);

方式二: 字面量方式

// 2. 使用字面量創建數組對象
var arr = [1, 2, 3];
// 獲取數組中元素的個數
console.log(arr.length);

注意事項：

1. 定義空數組的方式

var arr1 = [];

2. 定義一個數組可以存入不同的數據類型. 但是一般不建議這樣使用.

var arr3 = [25,true,'abc'];

3. 訪問數組的元素通過索引，索引從開始

var arr6 = [];
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
console.log(arr6);

4. js中數組的下標是可以不連續的，如果不連續默認補充empty

var arr6 = [];
arr6[0] = 10;
arr6[1] = 20;
arr6[2] = 30;
console.log(arr6);
arr6[4] = 50;
console.log(arr6)

執行結果如下圖所示:

5. 數組的擴容和縮容

var arr = [1, 1.2, new Date(), false, "呵呵"];
console.log("前:" + arr);
// 數組的擴容arr.length = 10;
// 數組的縮小
//arr.length = 3;
console.log("后:" + arr);

6. 清空數組

// 方式1 推薦
arr = [];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

2. 數組的遍歷

方式一:for循環，也是最常見的

for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}

方式二:for......in 遍歷數組

for(let item in arr){
console.log(arr[item])
}

方式三: foreach遍歷數組

arr.forEach(function(item, index){ 
   console.log(item + "=" + index);
});

3. 數組的常用方法

數組常用的一些方法：

首尾數據操作

push() //在數組末尾添加一個或多個元素，并返回數組操作后的長度
pop() //刪除數組最后一項，返回刪除項
shift() //刪除數組第一項，返回刪除項
unshift() //在數組開頭添加一個或多個元素，并返回數組的新長度

合并和拆分

concat()
// 將兩個數組合并成一個新的數組，原數組不受影響。
// 參數位置可以是一個數組字面量、數組變量、零散的值。
slice(start,end)
// 從當前數組中截取一個新的數組，不影響原來的數組，返回一個新的數組，
// 包含從 start 到 end （不包括該元素）的元素。
// 參數區分正負，正值表示下標位置，負值表示從后面往前數第幾個位置，
// 參數可以只傳遞一個，表示從開始位置截取到字符串結尾。

刪除、插入、替換

splice(index,howmany,element1,element2,……)
//用于插入、刪除或替換數組的元素
//index：刪除元素的開始位置
//howmany：刪除元素的個數，可以是0
//element1,element2：要替換的新的數據。

位置方法

indexOf() //查找數據在數組中最先出現的下標
lastIndexOf() //查找數據在數組中最后一次出現的下標
//如果沒找到返回-1

排序和倒序

reverse() //將數組完全顛倒，第一項變成最后一項，最后一項變成第一項。
sort(); //默認根據字符編碼順序，從小到大排序
//如果想要根據數值大小進行排序，必須添加sort的比較函數參數。
//該函數要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，根據a和b的關系作為判斷條件，返回值根據條件分為三個分支，正數、負數、0：
//返回值是負數-1：a排在b前面。
//返回值是整數1：a排在b后面。
//返回值是0：a和b的順序保持不變。
//人為能控制的是判斷條件。

轉字符串方法

// 將數組的所有元素連接到一個字符串中。
join() //通過參數作為連字符將數組中的每一項用連字符連成一個完整的字符串

迭代方法

//不會修改原數組(可選) HTML5新增
every()、filter()、forEach()、map()、some()

代碼示例

在線咨詢

上一篇：餐飲展示預約小程序如何制作？
下一篇：流體算法和模擬水墨特效

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商