JavaScript 中常见的数组方法（实用干货）

小灰灰 2021-07-24 17:14 446阅读 0赞

## 我们首先了解数组在Js中的定义 ##

**1、什么是数组**

数组就是一组数据的集合  
其表现形式就是内存中的一段连续的内存地址  
数组名称其实就是连续内存地址的首地址

**2、关于js中的数组特点**

数组定义时无需指定数据类型  
数组定义时可以无需指定数组长度  
数组可以存储任何数据类型的数据

**3.JS中符号含义：**

()表示函数执行  
\[\]表示语法模拟，表示模拟Array类的实例（=new Array()）  
\{\}表示语法模拟，表示模拟Object类的实例（=new Object()）

**这样我们也大概了解Js数组的定义和方法**  
**下面是我们数组方法的合集**

1.  concat()  
    连接两个或更多的数组，并返回结果

var arr = [1,2,3]
    var arr2 = [4,5,6]
    arr.concat(arr2)
    console.log(arr)   // [1,2,3,4,5,6]

2.join()  
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔  
参数可选，指定要使用的分隔符，如果省略则默认使用逗号作为分隔符

var arr = new Array(3)
    arr[0] = 1
    arr[1] = 2
    arr[2] = 3
    
    console.log(arr.join())   //1,2,3

3.pop()  
删除并返回数组的最后一个元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.pop();
    console.log(fruits)  // ["Banana","Orange","Apple"]

4.push()  
向数组的末尾添加一个或更多元素，并返回新的长度

var fruits = [1,2,3];
    fruits.push(4)
    console.log(fruits )  // [1,2,3,4]

5.shift()  
删除并返回数组的第一个元素\`

var fruits = [1,2,3,4]
    fruits.shift()
    console.log(fruits )  // [2,3,4]

6.unshift()  
向数组的开头添加一个或更多元素，并返回新的长度。\`

var fruits = [2,3,4]
    fruits.unshift(1)
    console.log(fruits )  // [1,2,3,4]

7.reverse()  
反转数组中元素的顺序

var fruits = [1,2,3,4];
    fruits.reverse()
    console.log(fruits )  // [4,3,2,1]

8.toString()  
把数组转换为字符串，并返回结果。

var fruits = [1,2,3,4];
    fruits.toString()
    console.log(fruits )  //  1,2,3,4

9.splice()  
从数组中添加或删除元素。  
参数 :  
**index 规定从何处添加元素  
howmany 可选。规定应该删除多少元素。必须是数字，但可以是 “0”。  
item1, …, itemX 可选。要添加到数组的新元素**

var arr = [1,2,3,4]
        arr.splice(0,1)
        console.log(arr) //  [2,3,4]

10.slice()  
选取数组的的一部分，并返回一个新数组。不会改变原数组。  
参数:

**start 可选，规定从何处开始选取。(数组下标)  
end 可选，规定从何处结束选取。(数组下标)，结束位置不会被截取**

var arr = [1,2,3,4]
        console.log(arr.slice(1,3)) // [2,3]

11.sort()  
对数组的元素进行排序。

let arr = [5,2,1,3,4]
                arr.sort(function(a,b){ 
                    return a-b
                })
                window.console.log(arr)
                // [1, 2, 3, 4, 5]
                //b-a则相反

12.from()  
通过给定的对象中创建一个数组。

var arr = Array.from("helloWord")
    console.log(arr)
    // ["h", "e", "l", "l", "o", "W", "o", "r", "d"]

13.indexOf()  
搜索数组中的元素，并返回它所在的位置。

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

14.includes()  
判断一个数组是否包含一个指定的值。

let arr = [5,2,1,3,4]
    console.log(arr.includes(1))
    // true
    console.log(arr.includes(0))
    // false

15.isArray()  
判断对象是否为数组。

let arr = [5,2,1,3,4]
    console.log(Array.isArray(arr))
    // true

16.entries()  
返回数组的可迭代对象。

let arr = [5,2,1,3,4]
                arr.entries()
                window.console.log(arr)
    // 0: 5
    // 1: 2
    // 2: 1
    // 3: 3
    // 4: 4

17.keys()  
返回数组的可迭代对象，包含原始数组的键(key)。

18.valueOf()  
返回数组对象的原始值。  
valueOf() 方法返回 Array 对象的原始值。

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

19.every()  
检测数值元素的每个元素是否都符合条件。  
只有全部符合条件才会返回true，否则返回false  
可以用来做单选全部选中，然后全选选中的业务。

// every循环定义的临时数组 // every()方法,针对数组中的每一个元素进行比对 // 只要有一个元素比对结果为false则返回false // 反之要所有的元素比对结果为true才为true let result = tempArr.every(ele=>{ 
            // 对数组中每一项的选中状态比较  是否为选中状态 也就是true
            return ele.checked == true
          })
          // 全选按钮的选中状态等于every方法返回的值
          // 如果返回true说明商品全部选中 反之则说明有未选中的
          // 所以可以直接让全选按钮的值等于every方法返回的数据
          state.shoppingCartCheckAll = result

20.find()  
返回符合传入测试（函数）条件的数组元素\`

let arr = [5,2,1,3,4]
    let index = arr.find(item=>item<2)
    console.log(index)  // 1

21.findIndex()  
返回符合传入测试（函数）条件的数组元素索引。  
可以用来对数组去重

let index = state.shoppingCartItem.findIndex(ele => { 
            return ele.id === item.id
          }) //如果购物车中存在商品则让这个商品数量加1 if (index !== -1) { 
            state.shoppingCartItem[index].count += 1;
              //不存在商品则添加提交的商品
          } else { 
              //定义商品选中状态
            item.checked = false
            state.shoppingCartItem.push(item)
          }

22.forEach()  
数组每个元素都执行一次回调函数。  
可以对数组进行深拷贝,还可以添加一些判断条件

// 定义一个临时数组 let tempArr = [] // 循环购物车数组，并且添加进定义的空数组 state.shoppingCartItem.forEach(ele=>{ 
            tempArr.push(ele)
          })

23.filter()  
检测数值元素，并返回符合条件所有元素的数组

let arr = [5,2,1,3,4]
                let index = arr.filter(item=>{ 
                    return item>3
                })
                window.console.log(index)
                // [5, 4]

24.map()  
通过指定函数处理数组的每个元素，并返回处理后的数组。

let arr = [5,2,1,3,4] arr.map(value=>{ 
    	return value*value
    })
    //  [25, 4, 1, 9, 16]

25.some()  
检测数组元素中是否有元素符合指定条件。

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。  
如果没有满足条件的元素，则返回false。

let arr = [5, 2, 1, 3, 4]; let temp = arr.some((value) => { 
              return value > 6
        });
        window.console.log(temp)
        //  false