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

我们首先了解数组在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