数组高频方法梳理

Posted 2021-06-02 Mzs-Qsy

参考文档:

1. MDN-Array

2. by flower

---

join()

把数组转换为字符串，通过给定的字符进行连接，默认是,

let foods = [\'西瓜\', \'南瓜\', \'北瓜\'];

console.log(foods.join());
// 输出: "西瓜,南瓜,北瓜"

console.log(foods.join(\'\'));
// 输出: "西瓜南瓜北瓜"

console.log(foods.join(\'-\'));
// 输出: "西瓜-南瓜-北瓜"

push()

把一个或多个元素添加到数组的末尾，并返回新的数组长度

let foods = [\'西兰花\', \'花菜\']
let length = foods.push(\'西红柿\')
console.log(length)
// 输出:3
console.log(foods)
// 输出: [\'西兰花\',\'花菜\',\'西红柿\']
foods.push(\'西瓜\', \'南瓜\', \'北瓜\', \'冬瓜\')
console.log(foods)
// 输出: [\'西兰花\', \'花菜\', \'西红柿\', \'西瓜\', \'南瓜\', \'北瓜\', \'冬瓜\']

pop()

从数组中删除最后一个元素，并返回该元素的值。注意：数组的长度会发生改变

let foods = [\'西兰花\',\'花菜\']
let food = foods.pop()
console.log(food)
// 输出: 花菜
console.log(foods)
// 输出: [\'西兰花\']

shift()

从数组中删除第一个元素，并返回该元素的值。注意：数组的长度会发生改变

let foods = [\'西兰花\', \'花菜\']
let food = foods.shift()
console.log(food)
// 输出: 西兰花
console.log(foods)
// 输出: [\'花菜\']

unshift()

将一个或者多个元素添加到数组的开头，并返回数组的新长度

let foods = [\'西兰花\', \'花菜\']
let length = foods.unshift(\'西瓜\')
console.log(length)
// 输出: 3
console.log(foods)
// 输出: [\'西瓜\',\'西兰花\',\'花菜\']
foods.unshift(\'南瓜\', \'冬瓜\')
console.log(foods)
// 输出: [\'南瓜\',\'冬瓜\',\'西瓜\',\'西兰花\',\'花菜\']

sort()

对数组的元素进行排序，并返回数组。默认比较的数组元素转为字符串的utf-16的顺序，也可以传入函数进行排序

对象可以按照某个属性排序：

let items = [
  { name: \'Edward\', value: 21 },
  { name: \'Sharpe\', value: 37 },
  { name: \'And\', value: 45 },
  { name: \'The\', value: -12 },
  { name: \'Magnetic\' },
  { name: \'Zeros\', value: 37 }
];

// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
});

// sort by name
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
});

reverse()

将数组进行翻转，并返回该数组。注意：改变的是原始数组

  let foods = [\'西兰花\', \'花菜\']
  foods.reverse()
  console.log(foods)
  // 输出: [\'花菜\',\'西兰花\']

concat()

用来合并两个或者多个数组，返回的是新数组，不会改变原始数组

let foods = [\'西兰花\', \'花菜\']
let fruits = [\'西瓜\', \'香蕉\']
console.log(foods.concat(fruits))
// 输出: [\'西兰花\', \'花菜\',\'西瓜\',\'香蕉\']
let meats = [\'牛肉\', \'猪肉\']
console.log(foods.concat(fruits, meats))
// 输出: [\'西兰花\', \'花菜\',\'西瓜\',\'香蕉\',\'牛肉\',\'猪肉\']

slice()

切下一段数组，不包括end索引！！！

**slice()** 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，**不包括end**）

  let foods = [\'西兰花\', \'花菜\',\'西瓜\',\'香蕉\',\'牛肉\',\'猪肉\']  console.log(foods.slice(5))  // 输出: [\'猪肉\']  console.log(foods.slice(3,5))  // 输出: [\'香蕉\',\'牛肉\']

splice()

根据给定的起始索引和操作个数删除指定个元素，会改变原数组

  let foods = [\'西兰花\', \'花菜\',\'西瓜\',\'香蕉\',\'牛肉\',\'猪肉\']  // 从索引1开始删除1个元素  foods.splice(1,1)  console.log(foods)  // 输出: [\'西兰花\', \'西瓜\', \'香蕉\', \'牛肉\', \'猪肉\']  // 从索引2开始删除，删除所有  foods.splice(2)  console.log(foods)  // 输出: [\'西兰花\', \'西瓜\']

indexOf()

返回在数组中可以找到的符合条件的第一个索引值，如果不存在，返回-1

let foods =[\'西瓜\',\'西兰花\']console.log(foods.indexOf(\'西兰花\'))// 输出: 1console.log(foods.indexOf(\'花菜\'))// 输出: -1

lastIndexOf()

从后往前查找符合条件的元素，符合返回索引，如果不存在，返回-1

let foods =[\'西兰花\',\'西瓜\',\'西兰花\']console.log(foods.lastIndexOf(\'西兰花\'))// 输出: 2console.log(foods.lastIndexOf(\'花菜\'))// 输出: -1

forEach()

将数组的每一个元素，挨个的传递给传入的回调函数

回调函数会接收三个参数，分别为

• element
  当前元素。
• index
  当前元素的索引。
• array
  调用forEach的数组。

let foods =[\'西兰花\',\'西瓜\',\'西兰花\']foods.forEach(v=>{console.log(v)})// 依次输出: 西兰花 西瓜 西兰花

map()

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

回调函数会接收三个参数，分别为

• element
  当前元素。
• index
  当前元素的索引。
• array
  调用findIndex的数组。

let foods = [\'西兰花\', \'西瓜\']let newFoods = foods.map(v => {return v + \'好好吃\'})console.log(foods)// 输出: [\'西兰花\', \'西瓜\']console.log(newFoods)// 输出: [\'西兰花好好吃\', \'西瓜好好吃\']

filter()

返回一个新的数组，新数组的元素是数组中每个元素调用一个提供的函数，根据返回值的真假决定是否保留，过滤每一个元素并返回一个新数组

回调函数会接收三个参数，分别为

• element
  当前元素。
• index
  当前元素的索引。
• array
  调用findIndex的数组。

  let foods = [\'西兰花\', \'西瓜\', \'花椒\', \'剁椒\']  console.log(    foods.filter(v => {      return v.indexOf(\'西\') == 0    })  )  // 输出: [\'西兰花\', \'西瓜\']

every()

检验数组中的每个值是否都满足回调函数的校验，都满足结果为true，反之为false

回调函数会接收三个参数，分别为

• element
  当前元素。
• index
  当前元素的索引。
• array
  调用findIndex的数组。

  let numArr = [2, 5, 6, 7, 8, 9]  console.log(    numArr.every(v => {      return v > 2    })  )  // 输出: false  console.log(    numArr.every(v => {      return v >= 2    })  )  // 输出: true

some()

和every类似，只需要有任意一个元素满足回调函数的校验条件结果就是true，都不满足就是false

回调函数会接收三个参数，分别为

• element
  当前元素。
• index
  当前元素的索引。
• array
  调用findIndex的数组。

  let numArr = [2, 5, 6, 7, 8, 9]  console.log(    numArr.some(v => {      return v == 1    })  )  // 输出: false  console.log(    numArr.some(v => {      return v == 2    })  )  // 输出: true

find()

返回满足提供的回调函数校验的第一个元素的值，如果都不满足，返回undefined

回调函数会接收三个参数，分别为

• element
  当前元素。
• index
  当前元素的索引。
• array
  调用findIndex的数组。

  let foods = [\'西兰花\', \'西瓜\', \'椒盐\', \'剁椒\']  console.log(    foods.find(v => {      return v.indexOf(\'椒\') != -1    })  )  // 输出: 椒盐  console.log(    foods.find(v => {      return v.indexOf(\'花菜\') != -1    })  )  // 输出: undefined

findIndex()

返回数组中满足提供的回调函数校验的第一个元素的索引，否则返回-1

回调函数会接收三个参数，分别为

• element
  当前元素。
• index
  当前元素的索引。
• array
  调用findIndex的数组。

let foods = [    { name: \'西兰花\', color: \'绿\' },    { name: \'辣椒\', color: \'红\' },    { name: \'花菜\', color: \'白\' }  ]  console.log(    foods.findIndex(v => {      return v.color == \'白\'    })  )  // 输出: 2  console.log(    foods.findIndex(v => {      return v.color == \'黄\'    })  )  // 输出: -1

includes()

返回数组中是否存在指定的值，如果存在返回true，否则返回false

  let foods = [\'西兰花\', \'西瓜\', \'椒盐\', \'剁椒\']  console.log(foods.includes(\'西瓜\'))  // 输出: true  console.log(foods.includes(\'花菜\'))  // 输出: false