JS常用的15个操作数组的方法

hushuo

发布于 2021-3-23 11:41

浏览

1收藏

数组的增删改查：
**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]1.
2.
3.
4.

**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]1.
2.
3.
4.

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

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

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

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

**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] // 不改变原数组1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

**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]1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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

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

let res = arr.join('-')
console.log(res) // 'zbw-cyl'1.
2.
3.
4.
5.
6.

**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]1.
2.
3.
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]1.
2.
3.

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

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

**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'} 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

**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 }]1.
2.
3.
4.
5.
6.
7.

**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的元素1.
2.
3.
4.
5.
6.

**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的元素1.
2.
3.
4.
5.
6.

**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 }1.
2.
3.
4.
5.
6.
7.

分类

JavaScript

标签

数组

JavaScript