Array

数组的本质是一个对象 我们使用 typeof 关键字便可验证这一点

typeof []; // object

假设我们有以下数组 来获取它的键名试试

var arr = ['a', 'b', 'c', 'd'];
console.log(Object.keys(arr));

//[ '0', '1', '2', '3' ]

获取到数组的 key 为 [ '0', '1', '2', '3' ]

所以我们可以用 arr[0]来获取数组中的元素

本质上是 Object[key]的形式获取了 value

而 arr[0]会被转换成 arr['0'] 因为对象的键名都是 string 类型

length 属性

我们思考一个问题 arr.length 得到的一定是数组的实际长度吗

var arr = ['a', 'b', 'c', 'd'];
console.log(arr.length); //4
arr[100] = 'z';
console.log(arr.length); //101

length 属性永远比 key 最大值 大一个

注意 因为数组本质上是一个对象 所以我们可以进行如下赋值

const arr = [1, 2, 3, 4, 5];
arr['a'] = '6';

console.log(arr); // [ 1, 2, 3, a: 6 ]

上述操作会增加一个元素 a

但是数组 length 依然为 5 因为 length = Max（key） + 1

伪数组

伪数组不具备任何数组的方法 如果调用会报错

常见的伪数组有

• 函数内部的 arguments

• 通过选择器获取到的 nodeList

但是伪数组有 length 属性

将伪数组转换为真正的数组有如下方法

Array.prototype.slice.call ( arrayLike )

Array.from ( arrayLike )

数组 API

静态方法

Array.from(arrayLike[, mapFn[, thisArg]])

方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

• arrayLike

  • 想要转换成数组的伪数组对象或可迭代对象。

• mapFn 可选

  • 如果指定了该参数，新数组中的每个元素会执行该回调函数。

• thisArg 可选

  • 可选参数，执行回调函数 mapFn 时 this 对象。

功能：将类数组变成真正的数组 快速生成有序数组

例如 快速生成一个 1-10 的数组

Array.from({ length: 10 }, (val, index) => index + 1); // [1,2....,10]

因为伪数组也有 length 属性 所以我们也可以改写成如下

Array.from({ length: 10 }, (val, index) => index + 1);

Array.isArray()

Array.of(element0[, element1[, ...[, elementN]]])

返回值: 一个新的数组实例

成员方法

arr.concat()

功能: 合并数组 也可用于浅拷贝

// 浅拷贝 只拷贝最外层
const NewArray = orgArray.concat();

arr.every(callback(element[, index[, array]])[, thisArg])

• callback

  用来测试每个元素的函数，它可以接收三个参数：

  • element

    用于测试的当前值。

  • index 可选

    用于测试的当前值的索引。

  • array 可选

    调用 every 的当前数组。

返回值: 如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

[1, 2, 3, 4, 5]
  .every((x) => x > 0) // true
  [(1, 2, 3, 4, 5)].every((x) => x > 1); // false

arr.some()

同 every

返回值: 有一个通过就返回 true

arr.fill()

参数: arr.fill(value[, start[, end]])

• value

  用来填充数组元素的值。

• start 可选

  起始索引，默认值为 0。

• end 可选

  终止索引，默认值为 this.length。

返回值: 修改后的数组

// 可用于初始化数组
Array(3).fill(0); // [0, 0, 0]

arr.filter(callback(element[, index[, array]])[, thisArg])

返回值: 一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

[1, 2, 3, 4, 5]
  .filter((x) => x > 1) // [2, 3, 4, 5]
  [(1, 2, 3, 4, 5)].filter((x) => x > 6); // []

arr.find(callback[, thisArg])

返回值: 数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

[1, 2, 3, 4, 5]
  .find((x) => x > 6) //undefined
  [(1, 2, 3, 4, 5)].find((x) => x > 2); //3

arr.findIndex()

同 find 区别在于返回值

数组中通过提供测试函数的第一个元素的索引。否则，返回-1。

arr.flat([depth])

• depth: 深度 默认为 1

将数组扁平化

返回值: 一个新的数组实例。

arr.flatMap()

flatMap() = map() + flat(1)

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

返回值: 没有返回值 undefined

arr.map()

效果同 forEach() 区别在于 map()有返回值

返回值: 原数组每个元素执行回调函数的结果组成的新数组

arr.includes()

返回值: boolean

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false

arr.indexOf(searchElement[, fromIndex])

• fromIndex(可选)

  • 指定开始查找的位置

返回值: 查找元素的索引下标 若找不到则为-1

var array = [2, 5, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

arr.join()

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join(); // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', '); // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join(''); // myVar4的值变为"WindRainFire"

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• accumulator: 累加器 即函数上一次调用的返回值。

  第一次的时候为 initialValue || arr[0]

• currentValue: 数组中函数正在处理的的值。

  第一次的时候 initialValue || arr[1]

• currentIndex: (可选)数据中正在处理的元素索引

  如果提供了 initialValue 从 0 开始 否则从 1 开始

• array: (可选)调用 reduce 的数组

• initialValue: (可选)累加器的初始值。没有时 累加器第一次的值为 currentValue

  注意: 在对没有设置初始值的空数组调用 reduce 方法时会报错。

返回值: 函数累计处理的结果

为了更直观的感受 我们来看一个例子

//有初始值
[1, 2, 3, 4].reduce(function (accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10); // 20

callback	accumulator	currentValue	currentIndex	array	return value
first call	10(初始值)	1(数组第一个元素)	0(有初始值为 0)	[1, 2, 3, 4]	11
second call	11	2	1	[1, 2, 3, 4]	13
third call	13	3	2	[1, 2, 3, 4]	16
fourth call	16	4	3	[1, 2, 3, 4]	20

arr.reverse()

返回值: 颠倒后的数组(会直接修改原数组)

arr.slice([begin[, end]])

若省略 则默认从 0 开始

返回值: 一个新的数组实例(不会修改原数组)

功能: 切割数组/浅拷贝/转化为真正的数组

Array.prototype.slice.call(arguments);

arr.sort([compareFunction])

var numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b); // 升序
numbers.sort((a, b) => b - a); // 降序

返回值: 排序后的数组(修改原数组)

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• deleteCount(可选)

  整数，表示要移除的数组元素的个数。

  • >0 删除元素

  • <0 添加元素

增加/删除

• pop() 删除最后一个元素 返回值为被删除元素

• push() 在数组最后添加一个元素 返回值为新数组的长度

• shift() 删除第一个元素 返回值为被删除的元素

• unshift() 在数组开头添加一个元素 返回值为新数组的长度

总结

数组排序

// 升序
arr.sort((x, y) => x - y);
// 降序
arr.sort((x, y) => y - x);

数组反转

// 实现一
arr.reverse();

// 实现二
arr.reduce((prev, curr) => {
  prev.unshift(curr);
  return prev;
}, []);

数组去重

实现一

用 ES6 Set 的特性 没有重复的元素

实现二

先将数组排序 然后比较相邻元素 如果相同 就移到下一个元素

实现三

双重 for 循环

比较

具体代码如下

function getArr(arr) {
  const timer = 10000;
  for (let i = 0; i < timer; i++) {
    arr[i] = Math.floor(Math.random() * 100);
  }
  return arr;
}

let arr1 = [];
let arr2 = [];
let arr3 = [];

// 生成了 3个 数组长度为timer的数组
arr1 = getArr(arr1);
arr2 = getArr(arr2);
arr3 = getArr(arr3);

// case 1
console.time('case1');
arr = [...new Set(arr1)];
console.timeEnd('case1');

// case 2
console.time('case2');
arr2 = arr2.sort((x, y) => x - y);
const res2 = [];
for (let i = 0; i < arr2.length; i++) {
  if (arr2[i] !== arr2[i + 1]) {
    res2.push(arr2[i]);
  }
}
console.timeEnd('case2');

// case3
console.time('case3');
const res3 = [];
for (let i = 0; i < arr3.length; i++) {
  for (let j = i + 1; j < arr3.length; j++) {
    if (arr3[i] == arr3[j]) {
      break;
    }
    if (j == arr3.length - 1) {
      res3.push(arr3[i]);
    }
  }
}
console.timeEnd('case3');

// output
// case1: 0.467ms
// case2: 5.254ms
// case3: 11.034ms

可见 利用 ES6 的 Set 是效率最高的一种方法

数组乱序

实现

取两个数组长度范围内的下标 交换位置

var arr = [1, 2, 3, 4, 5, 6, 7, 8];

function random(arr) {
  const timer = 1000;
  var x, y, temp;
  for (let i = 0; i < timer; i++) {
    x = Math.floor(Math.random() * arr.length);
    y = Math.floor(Math.random() * arr.length);
    temp = arr[x];
    arr[x] = arr[y];
    arr[y] = temp;
    // ES6 写法
    // ;[arr[x], arr[y]] = [arr[y], arr[x]]
  }
  return arr;
}

数组扁平化

实现一

调用 Array.prototype.flat

实现二

如果都是数字 可以用 toString 方法 转化为字符串 再用 split 切割

实现三

递归调用

var arr = [1, [1, 2, 3], 4, 5];
var res = [];
function flat(arr) {
  // case 1
  // return arr.flat()
  // case 2
  // return arr
  //   .toString()
  //   .split(',')
  //   .map((item) => +item)
  // case 3
  // for (var i = 0; i < arr.length; i++) {
  //   if (arr[i] instanceof Array) {
  //     flat(arr[i])
  //   } else {
  //     res.push(arr[i])
  //   }
  // }
  // return res
}