关于javascript:JS常用的15个操作数组的方法

JS 中那些罕用的数组办法：

数组的增删改查：

**push(插入的元素 < 可传多个 >)
作用：往数组的尾部插入元素 **

let arr = [1, 2, 3]
arr.push(4, 5)
let res = arr.push(4, 5) // 返回值为插入元素后数组的长度（res：5）console.log(arr) // [1, 2, 3, 4, 5]

**unshift(插入的元素 < 可传多个 >)
作用：往数组的头部插入元素 **

let arr = [1, 2, 3]
arr.unshift(-2, -1, 0)
let res = arr.unshift(-2, -1, 0) // 返回值为插入元素后数组的长度（res：6）console.log(arr) // [-2, -1, 0, 1, 2, 3]

**pop()
作用：删除数组的最初一个元素 **

let arr = [1, 2, 3]
arr.pop()
let res = arr.pop() // 返回值为删除的元素 (res: [3])
console.log(arr) // [1, 2]

**shift()
作用：删除数组的第一个元素 **

let arr = [1, 2, 3]
arr.shift()
let res = arr.shift() // 返回值为删除的元素 (res: [1])
console.log(arr) // [2, 3]

**slice(开始元素的下标，完结元素的下标)
作用：截取数组特定元素（不扭转原数组，可用作浅拷贝）**

// 浅拷贝
let arr = [1, 2, 3]
let newArr = arr.slice() // 返回值为截取后的新数组
console.log(newArr) // [1, 2, 3] 

// 截取元素
let arr = [1, 2, 3]
let newArr = arr.slice(0, 2) // 从第下标为 0 的元素开始截取，到元素下标为 2 的元素（注：但不包含元素下标为 2 的元素）console.log(newArr) // [1, 2]
console.log(arr) // [1, 2, 3] // 不扭转原数组 

**splice(开始元素的下标，删除的元素个数，增加的元素 …)
作用：可新增元素或者删除元素 **

// 新增元素
let arr = [1, 3, 5]
arr.splice(1, 0, 2) // 在元素下标为 1 的元素前面新增一个元素 2
let res = arr.splice(1, 0, 2) // 因为此处为新增元素，返回值为空数组 []（res：[]）console.log(arr) // [1, 2, 3, 5]

// 删除元素
let arr = [1, 2, 3]
arr.splice(1, 1) // 在元素下标为 1 的元素前面删除一个元素
let res = arr.splice(1, 1) // 返回值为删除的元素 (res: [2])
console.log(arr) // [1, 3]

**join(传入宰割每个元素的标记)
作用：数组转换为字符串 **

let arr = ['zbw', 'cyl']
let res = arr.join(',') 
console.log(res) // 'zbw, cyl'

let res = arr.join('-')
console.log(res) // 'zbw-cyl'

**concat()
作用：连贯多个数组或值 **

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]

let res = arr1.concat(arr2)
console.log(res) // [1, 2, 3, 4, 5, 6]

let res = arr1.concat(4, arr2, 7, 8)
console.log(res) // [1, 2, 3, 4, 4, 5, 6, 7, 8]

操作数组的高阶函数

高阶函数：把函数作为参数传入或把函数作为返回值的函数为高阶函数

**map()
作用：操作数组，返回通过解决后的数组 **

let arr = [1, 2, 3, 4]
let res = arr.map(item => item * 2)
console.log(res) // [2, 4, 6, 8]

**filter()
作用：过滤数组，返回操作表达式为 true 的数组元素 **

let arr = [1, 2, 3, 4]
let res = arr.filter(item => item >= 2)
console.log(res) // [2, 3, 4]

**reduce(pre< 初始值 >, cur< 以后项 >, arr< 数组自身 >, < 初始值 >)
作用：求和，数组转对象 **

// 求和
let arr = [1, 2, 3, 4]
let res = arr.reduce((pre, cur) => {return pre += cur}, 0) // 这里是求和 所以初始值为 0
console.log(res) // 10

// 数组转对象
let arr = [{ id: 1, name: 'zbw', age: 18},
  {id: 2, name: 'cyl', age: 18},
]

let obj = arr.reduce((pre, cur) => {pre[cur.id] = cur.name
   return pre
}, {}) // 这里是数组转对象 所以初始值为空对象 {}

console.log(obj) // {1: 'zbw', 2: 'cyl'} 

**forEach()
作用：跟 map() 作用相似，区别在于 forEach() 会扭转原数组，且没有返回值 **

let arr = [{ name: 'zbw', age: 22},
  {name: 'cyl', age: 18},
]

arr.forEach(item => item.age = 20)
console.log(arr) // [{name: 'zbw', age: 20},{name: 'cyl', age:20}]

**some()
作用：判断数组中是否存在符合条件表达式的条件，如果有一项合乎返回 true，否则返回 false**

let arr = [1, 2, 3, 4]
let bool = arr.some(item => item > 2)
console.log(bool) // true 因为存在大于 2 的元素

let bool = arr.some(item => item > 5)
console.log(bool) // false 因为不存在大于 5 的元素 

**every()
作用：判断数组中是否全副元素都合乎表达式的条件，全副都合乎返回 true，否则返回 false**

let arr = [1, 2, 3, 4]
let bool = arr.every(item => item > 0)
console.log(bool) // true 因为所有元素都大于 0

let bool = arr.every(item => item > 1)
console.log(bool) // false 因为存在不大于 1 的元素 

**find()
作用：找到数组中符合条件的第一个元素 **

let arr = [{id: 1, name: 'zbw', age: 18}, {id: 2, name: 'cyl', age: 18}]

let res = arr.find(item => item.age === 18)
console.log(res) // {id: 1, name: 'zbw', age: 18}

let res = arr.find(item => item.id === 2)
console.log(res) // {id: 2, name: 'cyl', age: 18}