风动之石的博客

Array

解构赋值

扩展运算符

扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

使用特性

  • 主要用于函数调用中
  • 可与正常的函数参数可以结合使用
  • 扩展运算符后面还可以放置表达式
  • 扩展运算符后面是一个空数组，则不产生任何效果
  • 可替代函数的 apply 方法

应用

  • 复制数组
  • 合并数组
  • 与解构赋值结合
  • 可将字符串转为真正的数组
  • 实现了 Iterator 接口的对象
  • Map 和 Set 结构，Generator 函数
console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
1
2
3
4
5
6
7
8
  • 主要用于函数调用中
function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42
1
2
3
4
5
6
function push(array, ...items) { // 注意：这里 ...items 里的 ... 是 rest 参数，不是扩展运算符
  console.log(items) // [[2, 3, 4]]
  array.push(...items); // 这里 ...items 里的 ... 是才是扩展运算符
  console.log(array) // [1, [2, 3, 4]]
}

push([1], [2, 3, 4])
1
2
3
4
5
6
7
  • 扩展运算符与正常的函数参数可以结合使用
function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);
1
2
3
  • 扩展运算符后面还可以放置表达式
const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];
1
2
3
4
  • 扩展运算符后面是一个空数组，则不产生任何效果
[...[], 1]
// [1]
1
2
  • 替代函数的 apply 方法
// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);
1
2
3
4
5
6
7
8
9
10
11
12
13
// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
1
2
3
4
5
6
7
8
9
  • 扩展运算符还可以将字符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
1
2

Array.from

只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组

ES5

Array.isArray()

Polyfill

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
}
1
2
3
4
5

实例

数组去重

  • 方法一：[...new Set(array)]或Array.from(new Set(array))

  • 方法二：indexOf + splice

function deleteRepeat(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    if (arr.indexOf(arr[i]) !== i) {
      arr.splice(i, 1)
    }
  }
  return arr
}
1
2
3
4
5
6
7
8
  • 方法三：Hash Map
function deleteRepeat(array){
  let newArray = []
  let obj = {}
  let index = 0
  let len = array.length
  for(let i = 0; i < len; i++){
    const type = typeof array[i]
    const key = type + array[i]
    if(obj[key] === undefined) {
      obj[key] = true
      newArray[index++] = array[i]
    }
  }
  return newArray
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

以上几种方法，无法针对不同引用的对象去重。比如array = [{a: 1}, {a: 1}]

如何将二维数组扁平化为一维数组？

const arr = [
  [1, 2],
  [3, 4]
]

Array.prototype.concat.apply([], arr) // [1, 2, 3, 4]
1
2
3
4
5
6