Question | 数组的常用API

Array 的 every()、filter()、forEach()、map()、some() 这些方法的第二个参数，用于将第一个参数的函数体内的 this 指向第二个参数。如果没有指定第二个参数，this 值在非严格模式下是全局对象，在严格模式下则为 null。

连接：arr.join("连接符")

用连接符把数组里面的元素连接成字符串。

arr.join(“”)能无缝连接。
拼接：arr.concat("a","b",arr1)

强调：
(1)不会修改原数组，返回新数组。
(2)如果传给 concat() 的某个参数本身是一个数组，则会将该数组的元素衔接到 arr 中，而不是数组本身。

var a = [1,2,3];
a.concat(4,5); // [1,2,3,4,5]
a.concat([4,5]); // [1,2,3,4,5]
a.concat(4, [5, [6, 7]]); // [1,2,3,4,5,[6,7]]

截取：arr.slice(start[,end])

强调：
(1)不会修改原数组，返回新的子数组。

(2)含头不含尾。

(3)省略第二个参数表示从start位置开始一直截取到末尾。

(4)支持负数，表示倒数第几个。
删除、插入、替换：arr.splice(start, deleteCount [,value1,value2...])

强调：

(1)直接修改原数组。

(2)返回所有被删除元素组成的子数组。

(3)如果 deleteCount 是 0，表示插入元素，插入的元素会排在 start 处元素之前。

(4) 如果是删除，从 start 开始，并包含 start 处的元素。
翻转数组：arr.reverse()

强调：(1)直接修改原数组。
数组排序：arr.sort()

强调：
(1)直接修改原数组。

(2)默认按照数组元素第一位的ASCII码从小到大排列。

(3)可以设置下列的比较器函数来控制升序，降序或者打乱。

(4)arr.sort(function(a,b){return a-b;}); 升序(只限数组中是数字或者数字字符串)。

(5)arr.sort(function(a,b){return b-a;});降序(只限数组中是数字或者数字字符串)。

arr.sort(function(){
    
    
	return Math.random()>.5 ? 1 : -1;
 }); // 随机打乱数组(数组中可以是任何数据类型)

查找：arr.indexOf(value[,from])或arr.lastIndexOf(value[,from])

强调：
(1)返回value在数组中的索引，没有找到返回-1。

(2) indexOf 可以匹配指向同一个地址的对象

  let obj = {
    
    age: 22};
  let arr = [{
    
    name: 'Jim'}];
  arr.push(obj);
  arr.includes(obj) // 1
  arr.includes({
    
    age: 22}) // -1

循环数组，无返回值：arr.forEach(function(value,index,arr){})
循环数组，有返回值：arr.map(function(value,index,arr){})
数组转字符串：String(arr)或arr.toString()

将数组中的元素用逗号连接成字符串，类似于arr.join(",")。
开头入栈：arr.unshift(value1, value2......)

在数组的最开头插入元素。

强调：
(1)修改原数组。

(2)返回新数组的length。
开头出栈：arr.shift()

弹出数组最开头的元素。

强调：

(1)修改原数组。

(2)返回被弹出的元素。
结尾入栈：arr.push(value1[,value2,arr1])

在数组末尾追加元素。

强调：

(1)修改原数组。

(2)返回新数组的length。

(3)追加进去的数组不会被打散。
结尾出栈：arr.pop()

弹出数组最末尾的元素。

强调：

(1)修改原数组。

(2)返回被弹出的元素。

Array.every

全部满足条件。

// 是否全部大于0
let a = [1,2,3,4].every(item => {
    
    
    return item > 0;
});
console.log(a); // true

Array.some

部分满足条件。

判断数组中有没有符合条件的元素，只要遇到符合条件的就退出循环。

// 是否有部分大于3
let a = [1,2,3,4].some(item => {
    
    
    return item > 3;
});
console.log(a); // true

Array.filter

按条件过滤。

注意：过滤结果是一个数组。

const persons = [
    {
    
    name: 'Jim', age: 22},
    {
    
    name: 'Alen', age: 17},
    {
    
    name: 'Lily', age: 20}
]
 
let a = persons.filter(person => {
    
    
    return person.age > 20;
});
console.log(a)  // [{name: 'Jim', age: 22}]

Array.reduce

汇总。

reduce的第2个参数是可选的，也就是初始值是可选的。当不指定初始值时，它将使用数组的第一个元素作为初始值。函数里面的 index 是当前 value 在数组中的索引。当不传入初始值的时候，index 是从 1 开始的，总的循环次数比数组长度少1。当传入初始值的时候，index 是从 0 也就是第一个元素开始，数组有多长就会遍历几次。

适用场景1：累加

let a = [1,2,3,4].reduce((total, value, index, arr) => {
      
      
    return total + value;
}, 0);
console.log(a) // 10

也有喜欢这么写的：

// 其实这里的 x 就是上面的 total，只是参数名字换了一下
let a = [1,2,3,4].reduce(function(x, y) {
      
      
    return x + y;
});

适用场景2：数组处理

// 如：获取年龄大于18岁人的名字
const persons = [
    {
      
      name: 'Jim', age: 22},
    {
      
      name: 'Alen', age: 17},
    {
      
      name: 'Lily', age: 20}
]
 
let names = persons.reduce((names, person) => {
      
      
    if (person.age > 18) {
      
      
        names.push(person.name)
    }
    return names;
}, []);
console.log(names) // ['Jim', 'Lily']

适用场景3：将数组转化为对象

const arr = [
    {
      
      id: '1', name: 'Jim'},
    {
      
      id: '2', name: 'Lily'},
    {
      
      id: '3', name: 'Allen'}
]
 
let obj = arr.reduce((acc, current) => {
      
      
    return {
      
      ...acc, [current.id]: current};
}, {
      
      })
 
console.log(obj)
// {
      
      
//     1: {id: '1', name: 'Jim'},
//     2: {id: '2', name: 'Lily'},
//     3: {id: '3', name: 'Allen'}
// }

适用场景4：将二维数组扁平化为一维数组

const arrLevel2 = [
    ['大', '家', '好'],
    ['我', '是', '渣', '渣', '辉']
];
 
let arrLevel1 = arrLevel2.reduce((acc, current) => {
      
      
    return acc.concat(current);
}, [])
 
console.log('arrLevel1', arrLevel1)
// -> ["大", "家", "好", "我", "是", "渣", "渣", "辉"]

适用场景5：在一次遍历中进行多次计算

有时我们需要对数组进行多次计算。例如，我们想要计算数字列表的最大值和最小值，我们可以这样写：

const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4];
 
const initMinMax = {
      
      
    minReading: Number.MAX_VALUE,
    maxReading: Number.MIN_VALUE,
};
 
const minMax = readings.reduce((acc, current) => {
      
      
    return {
      
      
        minReading: Math.min(acc.minReading, current),
        maxReading: Math.max(acc.maxReading, current)
    }
}, initMinMax);
 
console.log(minMax); // -> {minReading: 0.2, maxReading: 5.5}

适用场景6：获取数组中的最大值

let arr = [22, 19, 50, 7, 15];
let max = arr.reduce(function(x, y) {
      
      
  return x > y ? x : y;
}); // 50

Array.reduceRight

reduceRight() 的工作原理和 reduce() 一样，不同的是它按照数组索引从高到低（从右到左）处理数组。
```
[2, 10, 60].reduceRight(function (x, y) {
      
      
  return x/y;
});
// => 3: (60/10)/2
```

Array.find

找出第一个符合条件的数组成员，没找到返回 undefined。

const persons = [
    {
      
      id: 1, name: 'Jim', age: 22},
    {
      
      id: 2, name: 'Alen', age: 17},
    {
      
      id: 3, name: 'Lily', age: 20}
]
 
let a = persons.find(person => {
      
      
    return person.id === 2;
});
 
console.log(a) // {id: 2, name: 'Alen', age: 17}

Array.findIndex

找出第一个符合条件的数组成员的位置，没找到返回 -1。

const persons = [
    {
      
      id: 1, name: 'Jim', age: 22},
    {
      
      id: 2, name: 'Alen', age: 17},
    {
      
      id: 3, name: 'Lily', age: 20}
]
 
let a = persons.findIndex(person => {
      
      
    return person.id === 2;
});
 
console.log(a) // 1

Array.includes

表示某个值是否在数组里，includes() 不接受函数参数。
```
let a = [1,2,3].includes(3);
 
console.log(a) // true
```
Array.toLocaleString()

将数组转换为本地化字符串。它首先调用所有数组元素的 toLocaleString() 方法，然后使用地区特定的分隔字符将结果字符串连接起来。

转载为：
————————————————
版权声明：本文为CSDN博主「huangpb0624」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/huangpb123/article/details/76861748

Question | 数组的常用API

猜你喜欢