JavaScript - 数组

创建和初始化数组

let arr1 = new Array();
let arr2 = new Array(7);
let arr3 = new Array(1, 2, 3, 4, 5, 6, 7);
let arr4 = [];
let arr5 = [1, 2, 3, 4, 5, 6, 7];

访问元素和迭代数组

for (let i = 0; i < arr.length; i += 1) {
  console.log(arr[i]);
}

添加元素

在数组末尾插入元素

// 通过索引
arr[arr.length] = 1;
// 通过push
arr.push(1);

在数组开头插入元素

// 原型链实现
Array.prototype.insertFirstPosition = function (value) {
  for (let i = this.length; i > 0; i -= 1) {
    this[i] = this[i - 1];
  }
  this[0] = value;
};
arr.insertFirstPosition(1);
// unshift
arr.unshift(1);

删除元素

从数组末尾删除元素

// pop
arr.pop();

从数组开头删除元素

// 通过索引，但数组长度未发生变化
for (let i = 0; i < arr.length; i += 1) {
  arr[i] = arr[i + 1];
}
// 原型链方法
Array.prototype.reIndex = function (myArray) {
  const newArray = [];
  for (let i = 0; i < myArray.length; i += 1) {
    if (myArray[i] !== undefined) {
      newArray.push(myArray[i]);
    }
  }
  return newArray;
};
Array.prototype.removeFirstPosition = function () {
  for (let i = 0; i < this.length; i += 1) {
    this[i] = this[i + 1];
  }
  return this.reIndex(this);
};
arr = arr.removeFirstPosition();
// shift
arr.shift();

在任意位置添加或删除元素

// 删除索引5开始的3个元素
arr.splice(5, 3);
// 将2、3、4插入数组
arr.splice(5, 0, 2, 3, 4);
// 替换元素
arr.splice(5, 3, 2, 3, 4);

JavaScript 的数组方法参考

方法	描述
concat	连接两个或更多的数组，并返回结果
every	对数组中的每个元素运行给定函数，如果该函数每个元素都返回 true，则返回 true
filter	对数组中的每个元素运行给定函数， 返回该函数会返回 true 的元素组成的数组
forEach	对数组中的每个元素运行给定函数，没有返回值
join	将所有的数组元素连接成一个字符串
indexOf	返回第一个与给定参数相等的数组元素的索引，没有找到返回 -1
lastIndexOf	返回在数组中搜索到的与给定参数相等的元素的索引里最大的值
map	对数组中的每个元素运行给定函数，返回每次函数调用的结果组成的数组
reverse	颠倒数组
slice	传入索引值，将数组里对应索引范围内的元素作为新数组返回
some	对数组中的每个元素运行给定函数，如果任一元素返回 true， 则返回 true
sort	按照字母顺序对数组排序，支持传入指定排序方法的函数作为参数
toString	将数组作为字符串返回
valueOf	将数组作为字符串返回

数组合并

const a = 0;
const b = [1, 2, 3];
const c = [-1, -2, -3];
const arr = c.concat(a, b); // -3, -2, -1, 0, 1, 2, 3

迭代器函数

const isEven = (x) => x % 2 === 0;

// 各个迭代器之间的返回值不一致
// every
arr.every(isEven);
// some
arr.some(isEven);
// forEach
arr.forEach(isEven);
// map
arr.map(isEven);
// filter
arr.filter(isEven);
// reduce
arr.reduce((previous, current) => previous + current);

ES6 和数组的新功能

方法	描述
@@iterator	返回一个包含数组键值对的迭代器对象，可以通过同步调用得到数组元素的键值对
copyWithin	复制数组中一系列元素到同一数组指定的起始位置
entries	返回包含数组所有键值对的 @@iterator
includes	如果数组中存在某个元素则返回 true，否则返回 false
find	根据回调函数给定的条件从数组中查找元素，如果找到则返回该元素
findIndex	根据回调函数给定的条件从数组中查找元素，如果找到则返回该元素在数组中的索引
fill	用静态值填充数组
from	根据已有的数组创建一个新的数组
keys	返回包含数组所有索引的 @@iterator
of	根据传入的参数创建一个新数组
values	返回包含数组所有值的 @@iterator

// for...of
for (const item of arr) {
  console.log(item);
}
// @@iterator
let iterator = arr[Symbol.iterator]();
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value); // 若迭代结束，会返回 undefined
// entries、keys、values
let aEntries = arr.entries();
console.log(aEntries.next().value);
console.log(aEntries.next().value);
console.log(aEntries.next().value); // 若迭代结束，会返回 undefine

const aKeys = arr.keys();
console.log(aKeys.next().value);
console.log(aKeys.next().value);
console.log(aKeys.next().value); // 若迭代结束，会返回 undefine

const aValues = arr.values();
console.log(aValues.next().value);
console.log(aValues.next().value);
console.log(aValues.next().value); // 若迭代结束，会返回 undefine
// form
const arr1 = Array.from(arr);
const evens = Array.from(arr, (x) => x % 2 === 0); // 增加过滤值的函数
// Array.of
const arr1 = Array.of(1); // [1]
const arr2 = Array.of(1, 2, 3, 4); // [1,2,3,4]
// fill
const arr = new Array(6);
arr.fill(0); // [0, 0, 0, 0, 0, 0]
arr.fill(2, 1); // [0, 2, 2, 2, 2, 2]
arr.fill(1, 3, 5); // [0, 0, 0, 1, 1, 0]
// copyWithin
const arr = [1, 2, 3, 4, 5, 6];
arr.copyWithin(0, 3); // [4, 5, 6, 4, 5, 6]
arr.copyWithin(1, 3, 5); // [1, 4, 5, 4, 5, 6]

排序元素

// 升序
arr.sort((a, b) => {
  if (a < b) {
    return -1;
  } else if (a > b) {
    return 1;
  }
  return 0;
});
// 降序
arr.sort((a, b) => {
  if (a > b) {
    return -1;
  } else if (a < b) {
    return 1;
  }
  return 0;
});

搜索

// find 和 findIndex
arr.find((x) => x === 1); // 返回对应的元素
arr.findIndex((x) => x === 1); // 返回对应的元素索引
// includes
arr.includes(1); // 存在则返回 true，否则 false

输出为字符串

arr.toString();
arr.join(",");