数组的空位

数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。

  1. Array(3) // [, , ,]

上面代码中，Array(3)返回一个具有 3 个空位的数组。
注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。

  1. 0 in [undefined, undefined, undefined] // true
  2. 0 in [, , ,] // false
  • forEach(), filter(), reduce(), every() 和some()都会跳过空位。
  • map()会跳过空位，但会保留这个值
  • join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。
  • entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。
  • for…of循环也会遍历空位。
  • fill()会将空位视为正常的数组位置。
  • copyWithin()会连空位一起拷贝。
  • 扩展运算符（…）也会将空位转为undefined。
  • Array.from方法会将数组的空位，转为undefined，也就是说，这个方法不会忽略空位。

    …扩展运算符

    将数组转化为，号分割的参数列表

    代替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. <a name="4d2c4a03"></a>
  2. ### 复制数组

const a1 = [1, 2]; const a2 = a1;

a2[0] = 2; a1 // [2, 2]

  1. <a name="d70c73cb"></a>
  2. ### 合并数组

const arr1 = [‘a’, ‘b’]; const arr2 = [‘c’]; const arr3 = [‘d’, ‘e’];

// ES5 的合并数组 arr1.concat(arr2, arr3); // [ ‘a’, ‘b’, ‘c’, ‘d’, ‘e’ ]

// ES6 的合并数组 […arr1, …arr2, …arr3]

  1. <a name="0cc3701d"></a>
  2. ### 与结构赋值结合使用

const [first, …rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5]

const [first, …rest] = []; first // undefined rest // []

const [first, …rest] = [“foo”]; first // “foo” rest // []

  1. <a name="a4969eb2"></a>
  2. ### 利用Iterator接口的使用

let nodeList = document.querySelectorAll(‘div’); let array = […nodeList];

Number.prototype[Symbol.iterator] = function*() { let i = 0; let num = this.valueOf(); while (i < num) { yield i++; } }

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

let map = new Map([ [1, ‘one’], [2, ‘two’], [3, ‘three’], ]);

let arr = […map.keys()]; // [1, 2, 3]

const go = function*(){ yield 1; yield 2; yield 3; };

[…go()] // [1, 2, 3]

// 注意，没有实现iterator会报错

  2. <a name="c2548f8c"></a>
  3. ## Array.prototype.concat(array|string|array)
  4. 数组连接<br />返回一个新的数组
  5. <a name="eea1d722"></a>
  6. ## Array.prototype.join([string])
  7. string 表示分隔符<br />返回一个string<br />数组转字符串
  8. <a name="e4943a03"></a>
  9. ## Array.prototype.valueOf()
  10. 返回对象的原始值
  11. <a name="9936aa47"></a>
  12. ## Array.prototype.toSource()
  13. 返回该对象的源代码，数组的此方法只有firefox支持,支持性较差
  14. <a name="b79bc6b7"></a>
  15. ## Array.prototype.toString()
  16. 返回string<br />与数组的join方法返回相同
  17. <a name="4435fc81"></a>
  18. ## Array.prototype.toLocaleString()
  19. 首先调用每个元素的toLocaleString方法，然后使用地区特定分隔符把生成字符串连接起来，形成一个字符串<br />返回string
  20. <a name="15bd5805"></a>
  21. ## Array.prototype.slice(start:number[, end:number]);
  22. 字符串截取<br />start与end都可以为负数，负数的话，从另一个方向开始计算位置
  23. <a name="adae6679"></a>
  24. ## Array.prototype.push(newElement, ...)
  25. 尾部追加元素，返回数组长度
  26. <a name="45c7d3cb"></a>
  27. ## Array.prototype.pop()
  28. 从尾部将元素取出来，并在数组中删除这个元素，返回从尾部获取的元素
  29. <a name="0b0b7ddd"></a>
  30. ## Array.prototype.unshift(newElement, ...)
  31. 头部追加元素，返回数组长度
  32. <a name="fa215dec"></a>
  33. ## Array.prototype.shift()
  34. 从头部将元素取出来，并在数组中删除这个元素，返回从头部获取的元素
  35. <a name="ef214afb"></a>
  36. ## Array.prototype.splice(index:number, deleteNum: number, item, ...);
  37. index下标，deleteNum要删除的数量，item 要追加的元素
  38. <a name="dc9fb6ee"></a>
  39. ## Array.prototype.reverse()
  40. 颠倒数组中的元素顺序
  41. <a name="3c3c17ca"></a>
  42. ## Array.prototype.sort([fn(x,y)])
  43. 数组排序

// 注意 [1,10,2,21].sort(); // 结果返回时 10在2之前

[1,10,2,21, {},function(){}].sort(function(a,b){ // 最好在里面做一个对非数值类型的处理 return a-b });

  1. <a name="1fe60b3e"></a>
  2. ## Array.prototype.copyWithin(target, start[, end])
  3. 从数组指定位置，拷贝元素到数组的另一个指定位置中

[1,2,3,4,5].copyWithin(2, 0, 2);// 目标下标2位置，将0~1不包含2的位置的内容拷贝到2下标开始位置 // 上面的结果是 // [1, 2, 1, 2, 5]

  2. <a name="97913908"></a>
  3. ## Array.prototype.forEach(function(value, index, arr), thisValue);
  4. 创建一个独立的运行空间，并循环<br />value元素，index下标，array当前元素属于的数组对象可选参数，thisValue是改变this指向使用的，如果不填写this===undefined
  5. <a name="fe2925ec"></a>
  6. ## Array.prototype.map(function(value, index, arr), thisValue);
  7. 和forEach一致，区别是会返回一个新数组
  8. <a name="9790033a"></a>
  9. ## Array.prototype.every(function(value, index, arr), thisValue);
  10. 所以值都符合条件返回true
  11. <a name="abf90ce1"></a>
  12. ## Array.prototype.some(function(value, index, arr), thisValue);
  13. 具备符合条件的返回ture
  14. <a name="0c0f49a2"></a>
  15. ## Array.prototype.find(function(value, index, arr), thisValue);
  16. 查找元素，找到返回元素值，没找到返回undefined
  17. <a name="d95cd5a9"></a>
  18. ## Array.prototype.findIndex(function(value, index, arr), thisValue);
  19. 查找元素，找到返回元素下标，没找到返回-1
  20. <a name="c31f6454"></a>
  21. ## Array.prototype.filter(function(value, index, arr), thisValue);
  22. 返回符合条件的数组，没有符合条件的返回空数组[];
  23. <a name="4821336d"></a>
  24. ## Array.prototype.reduce(function(total, currentValue, index, arr), total);
  25. 累加器，返回total
  26. <a name="6570485c"></a>
  27. ## Array.prototype.rightReduce(function(total, value, index, arr), total);
  28. 累加器，返回total
  29. <a name="b82a009a"></a>
  30. ## Array.prototype.indexOf(item, start);
  31. 查找元素，找到返回元素下标，没找到返回-1，正向查找，从左向右(从前往后)
  32. <a name="ddd3f485"></a>
  33. ## Array.prototype.lastIndexOf(item, start);
  34. 查找元素，找到返回元素下标，没找到返回-1   反向查找，从右往左（从后往前）
  35. <a name="afea7ddd"></a>
  36. ## Array.prototype.fill(value, start, end);
  37. 向指定位置填充内容
  38. <a name="d21415c8"></a>
  39. ## Array.prototype.includes(searchElement, fromIndex);
  40. 查看是否包含，包含返回true
  41. <a name="ad62f838"></a>
  42. ## Array.prototype.entries();

for (let [index, elem] of [‘a’, ‘b’].entries()) { console.log(index, elem); }

let letter = [‘a’, ‘b’, ‘c’]; let entries = letter.entries(); console.log(entries.next().value); // [0, ‘a’] console.log(entries.next().value); // [1, ‘b’] console.log(entries.next().value); // [2, ‘c’]

  2. <a name="e67ad736"></a>
  3. ## Array.prototype.keys();
  4. 返回keys组成的数组
  5. <a name="f3bd4b43"></a>
  6. ## Array.prototype.values();
  7. 返回结果组成的数组
  8. <a name="5a756a61"></a>
  9. ## Array.prototype.flat()
  10. 拉平数组,返回一个新数组

[1, 2, [3, [4, 5]]].flat()

  1. <a name="8cdc80d3"></a>
  2. ## Array.prototype.flatMap()
  3. 组合,返回一个新数组

// 相当于 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]

  2. <a name="f5deca26"></a>
  3. ## Array.from(element[,fn:function(x){}]);
  4. 可以通过fn改变元素值内容<br />将符合格式的内容，转化为数组

Array.from(arrayLike, x => x x); // 等同于 Array.from(arrayLike).map(x => x x);

Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]

let arrayLike = { ‘0’: ‘a’, ‘1’: ‘b’, ‘2’: ‘c’, length: 3 };

// ES5的写法 var arr1 = [].slice.call(arrayLike); // [‘a’, ‘b’, ‘c’]

// ES6的写法 let arr2 = Array.from(arrayLike); // [‘a’, ‘b’, ‘c’]

let ps = document.querySelectorAll(‘p’); Array.from(ps)

// arguments对象 function foo() { var args = Array.from(arguments); // … }

// arguments对象 function foo() { const args = […arguments]; }

// NodeList对象 […document.querySelectorAll(‘div’)]

  1. <a name="e58e2232"></a>
  2. ## Array.of(item, ...);
  3. 将一组值转化为数组

Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1 ```

Array.isArray(element);

判断是否是数组，是的话返回true