學完這些,js操作數組你就很牛逼了

js數組方法詳解

一.ES5數組方法

1.Array.isArray()

用來判斷是否爲數組,可以彌補typeof運算符的不足

var arr = [1, 3, 5, "xiaoming", "liuqiao"];
var arrObj = {};
console.log(Array.isArray(arr));//true
console.log(Array.isArray(arrObj));//false

2.valueOf()

返回數組的原始值（一般情況下其實就是數組自身）

var arr = [1, 3, 5, "xiaoming", "liuqiao"];   
console.log(arr.valueOf());//[1, 3, 5, "xiaoming", "liuqiao"];
 //判斷返回的是數組自身
console.log(arr.valueOf()===arr) //true

3.toString()

返回數組的字符串形式

var arr = [1, 3, 5, "xiaoming", "liuqiao"];   
console.log(arr.toString());//1,3,5,xiaoming,liuqiao

4.indexOf()

返回指定元素在數組中第一次出現的位置,沒有返回-1

var arr = [1, 3, 5, "xiaoming", "liuqiao"];        
console.log(arr.indexOf('xiaoming'));//返回索引 3

5.lastIndexOf()

返回指定元素在數組中最後出現的位置,沒有返回-1

var arr = [1, 3, 5, "xiaoming", "liuqiao",'xiaoming'];
console.log(arr.lastIndexOf('xiaoming'));//返回索引 5

6.push()

用於在數組的末端添加一個或多個元素,並返回添加元素後的數組長度, 會改變元素原數組

var arr = [1, 3, 5, "xiaoming", "liuqiao"]; 
console.log(arr.push('xiaohong', 'xiaobai')); //返回數組長度7
console.log(arr);// [1, 3, 5, "xiaoming", "liuqiao", "xiaohong", "xiaobai"]

7.pop()

用於刪除數組的最後一個元素,並返回該元素,會改變原數組

var arr = [1, 3, 5, "xiaoming", "liuqiao"];
console.log(arr.pop('liuqiao'))//liuqiao
console.log(arr);// [1, 3, 5, "xiaoming"]

8.join()

以某字符串參數爲分隔符,將數組所有元素,組成字符串並返回,若沒有傳參,則以默認以逗號分隔

var arr = [1, 3, 5, "xiaoming", "liuqiao"];
console.log(arr.join('-'));//1-3-5-xiaoming-liuqiao
console.log(arr.join());//1,3,5,xiaoming,liuqiao

9.concat()

用於多個數組的合併,將新數組的元素,添加到原數組元素的後面,返回一個新數組, 原數組不變

var arr = [1, 3, 5, "xiaoming", "liuqiao"];
var newArr = ['xiaohong', 'xiaobai']
console.log(arr.concat(newArr));//[1, 3, 5, "xiaoming", 
console.log(arr);//[1, 3, 5, "xiaoming", "liuqiao"];

----------------------------------分隔符-----------------------------------
//多個數組合並
var newArr = ['xiaohong']
var newArr2 = [2];
var newArr3= [6];
console.log(arr.concat(newArr,newArr2,newArr3));//[1, 3, 5, "xiaoming", "liuqiao", "xiaohong",2,6]

10.shift()

用於刪除數組的第一個元素,並返回該元素.會改變原數組

var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
console.log(arr.shift());//xiaoming
console.log(arr);//[3, 5, 1, "liuqiao"]

11.unshift()

用於在數組的第一個位置添加元素,並返回添加新元素後的數組長度.會改變原數組

var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
console.log(arr.unshift('abc'));//6
console.log(arr);//["abc", "xiaoming", 3, 5, 1, "liuqiao"]

12.reverse()

用於倒置數組中的元素順序,返回改變後的數組.會改變原數組

var arr = ["xiaoming", 3, 5, 1, "liuqiao"]; 
console.log(arr.reverse());//["liuqiao", 1, 5, 3, "xiaoming"]
console.log(arr);//["liuqiao", 1, 5, 3, "xiaoming"]

13.slice()

從數組中拷貝一部分，返回新數組

var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
//包含索引爲1的元素，不包含索引爲3的元素(拷貝索引爲 1 2 的元素)
console.log(arr.slice(1,3));//[3, 5]
console.log(arr);//["xiaoming", 3, 5, 1, "liuqiao"];

14.splice() 最高級方法

可以對數組進行增、刪、改.返回被增加,刪除或修改的元素會改變原數組

刪除:splice一個參數時:被刪除的起始索引, 直到末尾全部刪除,返回被刪除的項

var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
console.log(arr.splice(2));//[5, 1, "liuqiao"]
console.log(arr); //["xiaoming", 3]

刪除: splice 兩個參數時:第一個參數是被刪除的起始索引,第二個參數是要刪除的項數返回被刪除的項

var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
console.log(arr.splice(0,2));//["xiaoming", 3]
console.log(arr); //[5, 1, "liuqiao"]

添加: splice:三個參數時:第一個起始位置索引(也就是在哪個地方添加),第二個參數是0,第三個參數是插入的項.返回空數組

//通俗點來說就是:在哪個地方,添加哪幾項
var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
console.log(arr.splice(1, 0, 'xiaofang'));//[]
console.log(arr); //["xiaoming", "xiaofang", 3, 5, 1, "liuqiao"]

替換:splice:向數組指定位置插入任意項元素,同時刪除任意數量的項

三個參數:第一個參數:起始索引位置,第二個參數:刪除的項數,第三個參數:插入任意數量的項

返回被刪除的項
```
var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
console.log(arr.splice(1, 2, 'xiaofang','xiaohong'));//[3,5]
console.log(arr);//["xiaoming", "xiaofang", "xiaohong", 1, "liuqiao"]
```

15.sort()

將數組進行排序，返回數組默認按照字符編碼排序(默認爲升序) 會改變原數組

sort排序是針對字符的排序,先使用數組的toString()方法轉爲字符串,再逐位筆記,3 是大於12的,因爲收尾3>1,所以儘量不要使用Number類型的數據進行排序
比較字符串的時候,首位的英文字母通過ASCII碼可以轉爲相應的數值，再根據數值比較

var arr = ["xiaoming", 3, 5, 1, 12,"liuqiao"];
console.log(arr.sort());//["xiaoming", 3, 5, 1, 12,"liuqiao"];
console.log(arr);//["xiaoming", 3, 5, 1, 12,"liuqiao"];

數組排序方法,需要自己定義回調函數 sort([fn]),返回數組

升序，只能對數值排序

var arr = [3, 5, 1, 12];
//升序，只能對數值排序
arr.sort(function (a, b) { 
    return a - b;
});
console.log(arr);//[1, 3, 5, 12]

降序，只能對數值排序

var arr = [3, 5, 1, 12];
 //降序，只能對數值排序
arr.sort(function (a, b) {
    return b - a;
});
console.log(arr);//[12, 5, 3, 1]

自定義排序函數升序

var arr = [3, 5, 1, 12];
arr.sort(function (a, b) {//升序
    if (a > b) {
        return 1;
    }
    if (a < b) {
        return -1;
    }
    return 0;
});
console.log(arr);//[1, 3, 5, 12]

16 some()

判斷數組中是否存在滿足條件的項,只要有一項滿足條件,就會返回true

array.some(callback(value,index,self))

some()接收一個回調函數作爲參數,這個回調函數需要有返回值,callback(value,index,self)有是三個參數

var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
//相當於循環遍歷
var bol = arr.some(function (value, index, self) {
    console.log(value);//遍歷的值
    console.log(index);//索引
    console.log(self);//self表示自身
    return value == 3;
});
console.log(bol);//true

可以判斷某值是否存在,或者是否滿足條件

some的執行原理:因爲要判斷數組中的每一項，只要有一個回調函數返回true，some都會返回true，所以與every正好相反，當遇到一個回調函數的返回值爲true時，可以確定結果，那麼停止執行，後面都數據不再遍歷，停在第一個返回true的位置；當回調函數的返回值爲false時，需要繼續向後執行，到最後才能確定結果，所以會遍歷所有數據，實現類似於forEach的功能，遍歷所有。

17.every()

判斷數組中每一項都是否滿足所給條件,當所有項都滿足條件,纔會返回true 與some相反

var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
var bol = arr.every(function (value, index, self) {
    console.log(value);//遍歷的值
    console.log(index);//索引
    console.log(self);//self表示自身
    return value == 3;
});
console.log(bol);//false

every的執行原理和some都差不多,也是循環遍歷,只要發現不滿足條件,立馬停止,返回false

二.ES6數組方法

1.擴展運算符 …

1.1 將一個數組轉爲用逗號分隔參數序列

作用:函數調用

var arr = [7, 8];
function sum(a, b) {
    return a + b;
}
onsole.log(sum(...arr));//15

1.2 求最大值

var arr = [7, 8, 20];
console.log(Math.max(...arr));//20

1.3 拼接數組

var arr1= [7, 8, 20];
var arr2=["xiaoming",25];
arr1.push(...arr2);
console.log(arr1);//[7, 8, 20, "xiaoming", 25]

1.4 深拷貝數組

var arr1 = [1,2,3]
var arr2 = [...arr1]
console.log(arr1)  // [1, 2, 3]
console.log(arr2)  // [1, 2, 3]

arr2[0]=0
console.log(arr1)  // [1, 2, 3]
console.log(arr2)  //[0, 2, 3]

1.5 合併多個數組 (淺拷貝)

var arr1 = ['1', '2'];
const arr2 = ['3'];
const arr3 = ['4', '5'];
var arr4=[...arr1, ...arr2, ...arr3]
console.log(arr4)// ["1", "2", "3", "4", "5"]

1.6 將字符串轉爲數組

var msg='我是中國人';
console.log([...msg]);//["我", "是", "中", "國", "人"]

2. Array.of()

用於將一組值，轉換爲數組。

var arr = Array.of("xiaoming", 4, 7, 9);
console.log(arr);//["xiaoming", 4, 7, 9]

3. Array.from()

ES6爲Array增加了from函數用來將其他對象轉換成數組。

其他對象有要求:可以將兩種對象轉爲數組

1.部署了iterator接口的對象,比如:Set,Map,Array

2.類數組對象,什麼叫類數組對象,就是一個對象必須有length屬性,沒有length屬性,轉換出來的是空數組.

你會碰到的類數組對象有：函數中的 arguments 關鍵字，或者是一個 DOM 集合。

3.1 轉換類數組對象

var arr = { '0': 10, '1': 15, length: 2 };
var array = Array.from(arr);
console.log(array);//[10, 15]

3.2 從string中生成數組

var msg = "我是中國人";
var arr=Array.from(msg)
console.log(arr);//["我", "是", "中", "國", "人"]

3.3 從 `Set` 生成數組(可以作爲數組的去重一種解決方案)

var set=new Set(['abc','foo','abc','cde']);
var arr=Array.from(set);
console.log(arr);// ["abc", "foo", "cde"]

//一行代碼,數組去重
var arr1 = [1,2,4,2,3,5,1,3];
var arr2 = Array.from(new Set(arr1));
console.log(arr2);// [1, 2, 4, 3, 5]

3.4 可以遍歷數組,進行數據處理

var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
arr=Array.from(arr,item=>{
    return item+"_hello";
});
console.log(arr);//["xiaoming_hello", "3_hello", "5_hello", "1_hello", "12_hello", "liuqiao_hello"]

4.fill()

fill()函數，使用制定的元素填充數組，其實就是用默認內容初始化數組

三個參數:

第一個:填充的元素值

第二個:從哪裏開始填充(位置索引)

第三個:從哪裏之前結束

var arr = [2, 5, 1, 12, 8];
//一個值的時候都填充
arr.fill("liuqiao");
console.log(arr);//["liuqiao", "liuqiao", "liuqiao", "liuqiao", "liuqiao"]

//2個值的時候, 從這裏開始,都填充
arr.fill("liuqiao",2);
console.log(arr);//[2, 5, "liuqiao", "liuqiao", "liuqiao"]

//三個值的時候,走索引,從哪裏到哪裏之前
arr.fill("liuqiao",0,2);
console.log(arr);//["liuqiao", "liuqiao", 1, 12, 8]

5.includes()

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

var arr = ["xiaobin", 3, 5, 1, 12, "liuqiao"];
onsole.log( arr.includes("liuqiao"));//true

6.entries(),keys(),values()

用於數組遍歷,他們返回一個新的Array Iterator對象,可以用for…of循環進行遍歷

唯一的區別就是

keys()是對鍵名的遍歷,

values()是對鍵值的遍歷

entries()是對鍵值對的遍歷

//entries()是對鍵值對的遍歷
var arr = ["a", "b", "c"];
var iterator = arr.entries();
for (let item of iterator) {
    console.log(item);
}
//[0, "a"]
//[1, "b"]
//[2, "c"]

//keys() 返回 0  1  2
//values() 返回  a  b  c

三.常用的迭代方法(包含ES5和ES6)

1.map

map() 映射,對數組中的每一項運行給定的函數,返回每次函數調用的結果組成的數組.

var arr = ["xiaobin", 3, 5, 1, 12, "liuqiao"];
//currentValue 當前遍歷的項
//index 項索引
//array  當前數組
let array = arr.map(function (currentValue, index, array) {
    return currentValue + 'hello';
});
console.log(array);//["xiaobinhello", "3hello", "5hello", "1hello", "12hello", "liuqiaohello"]

2.filter

filter()過濾,對數組中的每一項運行給定的函數,返回滿足過濾條件組成的數據

var arr = [3, 5, 1, 12, 8];
//currentValue 當前遍歷的項
//index 項索引
//array  當前數組
var array=arr.filter(function (currentValue, index, array) {
    return currentValue > 5;
});
console.log(array);//[12, 8]

3.forEach

forEach(),對數組進行遍歷循環,對數組中的每一項運行給定的函數.這個方法沒有返回值.

與map的功能一樣,但是區別是:

forEach()遍歷執行某方法,但是沒有返回值

map()遍歷執行某方法,有返回值

var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
//item 當前遍歷的項
//index 項索引
//array  當前數組
arr.forEach((item,index,array )=> {
    //執行某功能
});

4.find()

用於找出第一個符合條件的數組成員,它的參數是一個回調函數,所有成員依次執行該回調函數.直到找出第一個返回值爲true的成員,然後返回該成員.如果沒有符合條件的成員則返回undefined

 var arr = [3, 5, 1, 12, 8];
 var array = arr.find(item => {
     return item > 5
 });
 console.log(array);//12

 var array = arr.find(item => {
     return item > 12
 });
 console.log(array);//undefined

5.findIndex()

findIndex() 方法的用法與find方法非常類似,返回第一個符合條件的數組成員的位置,如果所有成員不符合條件,則返回-1

var arr = [2, 5, 1, 12, 8];
var index = arr.findIndex(item => {
    return item > 5
});
console.log(index);//3

var index = arr.findIndex(item => {
    return item > 13
});
console.log(index);//-1

回undefined

 var arr = [3, 5, 1, 12, 8];
 var array = arr.find(item => {
     return item > 5
 });
 console.log(array);//12

 var array = arr.find(item => {
     return item > 12
 });
 console.log(array);//undefined

5.findIndex()

findIndex() 方法的用法與find方法非常類似,返回第一個符合條件的數組成員的位置,如果所有成員不符合條件,則返回-1

var arr = [2, 5, 1, 12, 8];
var index = arr.findIndex(item => {
    return item > 5
});
console.log(index);//3

var index = arr.findIndex(item => {
    return item > 13
});
console.log(index);//-1

學完這些,js操作數組你就很牛逼了

js數組方法詳解

文章目錄

一.ES5數組方法

1.Array.isArray()

2.valueOf()

3.toString()

4.indexOf()

5.lastIndexOf()

6.push()

7.pop()

8.join()

9.concat()

10.shift()

11.unshift()

12.reverse()

13.slice()

14.splice() 最高級方法

15.sort()

16 some()

17.every()

二.ES6數組方法

1.擴展運算符 …

1.1 將一個數組轉爲用逗號分隔參數序列

1.2 求最大值

1.3 拼接數組

1.4 深拷貝數組

1.5 合併多個數組 (淺拷貝)

1.6 將字符串轉爲數組

2. Array.of()

3. Array.from()

3.1 轉換類數組對象

3.2 從string中生成數組

3.3 從 Set 生成數組(可以作爲數組的去重一種解決方案)

3.4 可以遍歷數組,進行數據處理

4.fill()

5.includes()

6.entries(),keys(),values()

三.常用的迭代方法(包含ES5和ES6)

1.map

2.filter

3.forEach

4.find()

5.findIndex()

5.findIndex()

3.3 從 `Set` 生成數組(可以作爲數組的去重一種解決方案)