[js] 数组

ES6前

ES6

扩展运算符
扩展运算符…用于将数组转化为用逗号分隔的参数序列
在函数调用中常用函数中的rest参数

// 后跟表达式
const arr = [
  1，
  ...(x > 0 ? [2, 3, 4] : [2, 3]),
];
// 在定义时使用
function f0(...items) {
  return items.map(i => i * 2);
}
// 在调用时使用
function f1(a, b, c, d, e) {
  return a + b + c + d + e;
}
let a = [1, 2, 3];
f1(0, ...a, 4); // 10

小技巧
不能使用数组参数的函数传入数据

const arr0 = [1, 5, 2, 6, 3, 8];
const arr1 = [2, 7, 2];
// es5
Math.max.apply(null, arr0);
arr0.push.apply(null, arr1);
// es6
Math.max(...arr0);
arr0.push(...arr1);

合并数组

const arr0 = [3, 4];
const arr1 = [1, 2, ...arr0];

解构赋值

const list = [0, 1, 2, 3];
[a, b, ...c] = list;
c; // [2, 3]

字符串转数组，可识别32位unicode

[...'abce'] // ['a', 'b', 'c', 'e']
[...'x\uD83D\uDE80y'] // ['x', '\uD83D\uDE80', 'y']

Array.from
MDN Array.from方法
Array.from可将array-like对象（必须有length属性）和iterable对象转化为数组
Array.from可针对一个数组返回一个新数组，返回的数组是浅复制

var arr = [
  {
    a: {
      a1: 2
    },
    b: 1
  },
  {
    a: {
      a1: 3
    }
  },
  {
    a: {
      a1: 4
    }
  },
  5
]
var arr1 = Array.from(arr);
arr[0].a.a1 = 6;
arr[0].b = 6;
arr[3] = 6;
arr1[0].a.a1; // 6
arr1[0].b; // 6
arr1[3]; // 5

Array.from的两个可选参数

var obj = {
  length: 3,
  a: 6,
  '1': {
    hudk: 'badbad'
  }
}
var c = [1, 2, 5];
var arr0 = Array.from(obj, (v, i) => i);
// 使用=>的话this指向会改变，无法用c指向
var arr1 = Array.from(obj, function (v, i) {
  return this[i];
}, c);
arr0; // [0, 1, 2]
arr1; // [1, 2, 5]

Array.of
Array.of用于将一组数转化为数组，主要用于弥补Array()构造函数的不足

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

entries, keys, values
三者均是用于遍历数组，其中keys是对键名的遍历，values是对键值的遍历，entries是对键值对的遍历

var arr = [4, 5, 3];
arr.keys(); // Array Iterator {}
for (let i of arr.keys()) {
  console.log(i);
}
// 0
// 1
// 2

// 现在都未实现
for (let i of arr.values()) {
  console.log(i);
}

for (let i of arr.entries()) {
  console.log(i);
}
// [0, 4]
// [1, 5]
// [2, 3]

数组空位
数组空位指某个位置没有值，与undefined不同

var arr0 = new Array(3);
var arr1 = [];
arr1.length = 3;
var arr2 = [undefined, undefined, undefined];
var arr3 = [, , ,];
arr0; // [undefined × 3]
arr1; // [undefined × 3]
arr2; // [undefined, undefined, undefined]
arr3; // [undefined × 3]

不同方法对空位的处理不同
forEach，filter，every，some跳过；map跳过但保留占位符；join和toString保留并转化为空字符串

var arr = [,1,,3];
arr.forEach((x, i) => console.log(i)); // 1 3
arr.filter(x => true); // [1, 3]
arr.every(x => typeof x === 'number'); // true
arr.some(x => typeof x === 'number'); // true
arr.map((x, i) => {
  console.log(i);
  return i;
}); // 1 3 [undefined × 1, 1, undefined × 1, 3]
arr.join('#'); // #1##3
arr.toString(); // ,1,,3

ES6方法中明确将空位转化为undfined

var arr = [,1,,3];
Array.from(arr); // [undefined, 1, undefined, 3]
[...arr] // [undefined, 1, undefined, 3]
arr.copyWithin(0, 2, 3); // [undefined × 1, 3, undefined × 1, 3]
arr.find(n => typeof n === 'undefined'); // undefined 还是没找到，很有趣
arr.findIndex(n => typeof n === 'undefined'); // 0
arr.includes(undefined); // true
arr.fill(5); // [5, 5, 5, 5]
for (let i of arr) {
  console.log(i);
} // undefined 1 undefined 3
for (let i of arr.entries()) {
  console.log(i);
} // [0, undefined] [1, 1] [2, undefined] [3, 3]
for (let i of arr.values()) {
  console.log(i);
} // 未实现
for (let i of arr.keys()) {
  console.log(i);
} // 0 1 2 3