JS 数组操作

林深时觉寒 2022-07-01
# astro
# blogging

数组基础

定义数组的四种方式

**// （一）最简便的方法，数组字面量。推荐**
var arr = ['a', 'b', 'c'];  // 最后一个元素后最好不要加逗号，浏览器兼容性问题

**// （二）使用 new Array()，不推荐，其行为不一致**
let a = new Array() // 没有参数，创建空数组 []
let c = new Array(2)  // 一个参数时，如果是数值则表示新数组的长度，非数值即当作数组新元素
var cars = new Array("Saab", "Volvo", "BMW"); // 多个参数时，参数即为新数组元素

**//（三）es6 的 Array.from()，可接收一个或两个参数**
Array.from("Matt"); // ["M", "a", "t", "t"] 字符串会被拆分为单字符数组
const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1, x => x**2);
a2; // [1, 4, 9, 16]

**//（四）es6 的 Array.of()，把一组参数转换为数组，替代了 ES6 之前常用的 Array.prototype.slice.call(arguments)**
Array.of(1, 2, 3, 4); // [1, 2, 3, 4]
Array.of(undefined); // [undefined ]

// 数组的本质是对象
typeof [1, 2, 3] // object

length 属性

数组的 length 属性，返回数组的元素数量。但它不是只读的，通过修改 length 属性，可以从数组末尾删除或添加元素！！！

let arr = ["a", "b", "c"];

arr.length; // 3

// 设置长度为2时，最后一位自动被删除了
arr.length = 2;
arr; // ['a', 'b']

// 以下效果相当于清空数组
arr.length = 0;
arr; // []

// 当设置 length 大于当前元素个数，新增的位置都是 undefined
arr.length = 4;
arr[3]; // undefined

注意：数组最多可以包含 4 294 967 295 个元素，这对于大多数编程任务应该足够了。如果 尝试添加更多项，则会导致抛出错误。以这个最大值作为初始值创建数组，可能导致脚本 运行时间过长的错误。

数组的空位

当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位（hole）。

var a = [1, , 1];
a.length // 3
a[1] // undefined

# 最后一个元素后面有逗号，并不会产生空位
var a = [1, 2, 3,];

a.length // 3
a // [1, 2, 3]

扩展运算符（…）

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

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>]

该运算符主要用于函数调用。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers); // 42

上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们都使用了扩展运算符。该运算符将一个数组，变为参数序列。

// 扩展运算符与正常的函数参数可以结合使用，非常灵活
function f(v, w, x, y, z) {}
const args = [0, 1];
f(-1, ...args, 2, ...[3]);

// 扩展运算符后面还可以放置表达式
const arr = [...(x > 0 ? ["a"] : []), "b"];

// 如果扩展运算符后面是一个空数组，则不产生任何效果
[...[], 1];
// [1]

检测数组 Array.isArray()

var arr = [1, 2, 3];

typeof arr; // "object"，不足
Array.isArray(arr); // true

数组方法

【迭代器方法】keys()、values()、entries()

const a = ["foo", "bar", "baz", "qux"];

// 因为这些方法都返回迭代器，所以可以将它们的内容通过 Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys());
const aValues = Array.from(a.values());
const aEntries = Array.from(a.entries());
console.log(aKeys); // [0, 1, 2, 3]
console.log(aValues); // ["foo", "bar", "baz", "qux"]
console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

// 使用 ES6 的解构可以非常容易地在循环中拆分键/值对：
const a = ["foo", "bar", "baz"];
for (const [idx, element] of a.entries()) {
  alert(idx);
  alert(element);
}
// 0
// foo
// 1
// bar
// 2
// baz

【复制和填充方法】copyWithin()、fill()

ES6 新增了两个方法：批量复制方法 copyWithin()，以及填充数组方法 fill()。这两个方法的函数签名类似，都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引。使用这个方法不会改变数组的大小。

【转换方法】valueOf()、toString()、toLocaleString()、join()

let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
alert(colors.toString()); // red,blue,green
alert(colors.valueOf()); // red,blue,green
alert(colors); // red,blue,green

let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue

注意 如果数组中某一项是 null 或 undefined，则在 join()、toLocaleString()、toString() 和 valueOf() 返回的结果中会以空字符串表示。

【栈和队列方法】push()、pop()、shift()、unshift()

【迭代方法】every()、filter()、forEach()、map()、some()

ECMAScript 为数组定义了 5 个迭代方法。

每个方法接收两个参数：以每一项为参数运行的函数，以及可选的作为函数运行上下文的作用域对象（影响函数中 this 的值）。

传给每个方法的函数接收 3个参数：数组元素、元素索引和数组本身。因具体方法而异，这个函数的执行结果可能会也可能不会影响方法的返回值。数组的 5 个迭代方法使用方法以及参数说明：

array.xxx(function (item, index, array) {
  /* 操作*/
}); // 普通函数
array.xxx((item, index, array) => {
  /* 操作*/
}); // 箭头函数（推荐）
// item：数组当前项的值
// index：数组当前项的索引（下标）
// array：数组对象本身
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

// **every**
let everyResult = numbers.every((item, index, array) => item > 2);
alert(everyResult); // false

// **some**
let someResult = numbers.some((item, index, array) => item > 2);
alert(someResult); // true

// **filter**
// 筛选数组中数值大于 2 的值
let filterResult = numbers.filter((item, index, array) => item > 2);
alert(filterResult); // 3,4,5,4,3

// **map**
let mapResult = numbers.map((item, index, array) => item * 2);
alert(mapResult); // 2,4,6,8,10,8,6,4,2

// **foreach**
numbers.forEach((item, index, array) => {
  // 执行某些操作
});

【排序方法】reverse()、sort()

【操作方法】concat()、slice()、splice()

【搜索方法】indexOf()、lastIndexOf()、includes()、find()、findIndex()

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.indexOf(4)); // 3
alert(numbers.lastIndexOf(4)); // 5
alert(numbers.includes(4)); // true
alert(numbers.indexOf(4, 4)); // 5
alert(numbers.lastIndexOf(4, 4)); // 3
alert(numbers.includes(4, 7)); // false

let person = { name: "Nicholas" };
let people = [{ name: "Nicholas" }];
let morePeople = [person];

alert(people.indexOf(person)); // -1
alert(morePeople.indexOf(person)); // 0
alert(people.includes(person)); // false，因为不是一个对象
alert(morePeople.includes(person)); // true

断言函数：类比 Java 中的 Predicate ECMAScript 也允许按照定义的断言函数搜索数组，每个索引都会调用这个函数。断言函数的返回值决定了相应索引的元素是否被认为匹配。 断言函数接收 3 个参数：元素、索引和数组本身。其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组。断言函数返回真值，表示是否匹配。

【归并方法】reduce()、reduceRight()

这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。reduce() 方法从数组第一项开始遍历到最后一项。而 reduceRight() 从最后一项开始遍历至第一项。

reduce()方法和reduceRight()方法的第一个参数都是一个函数。该函数接受以下四个参数。

  1. 累积变量：第一次执行时，默认为数组的第一个成员；以后每次执行时，都是上一轮的返回值
  2. 当前变量：第一次执行时，默认为数组的第二个成员；以后每次执行时，都是下一个成员
  3. 当前位置：一个整数，表示第二个参数（当前变量）的位置，默认为1
  4. 原数组

这四个参数之中，只有前两个是必须的，后两个则是可选的。

如果要对累积变量指定初值，可以把它放在reduce()方法和reduceRight() 方法的第二个参数。建议总是加上第二个参数，这样比较符合直觉，每个数组成员都会依次执行reduce()方法的参数函数。另外，第二个参数可以防止空数组报错。

// reduce() 执行累加数组中所有数值的操作，比如：
let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur);
alert(sum); // 15
// 解析：
// 第一次执行归并函数时，prev 是 1，cur 是 2。
// 第二次执行时，prev 是 3（1 + 2），cur 是 3（数组第三项）。
// 如此递进，直到把所有项都遍历一次，最后返回归并结果。

// reduceRight() 方法与之类似，只是方向相反
let values = [1, 2, 3, 4, 5];
let sum = values.reduceRight(function (prev, cur, index, array) {
  return prev + cur;
});
alert(sum); // 15
// 在这里，第一次调用归并函数时 prev 是 5，而 cur 是 4。当然，最终结果相同。

使用 reduce() 还是 reduceRight()，只取决于遍历数组元素的方向。除此之外，这两个方法没什么区别。

【摊平方法】flat()、flatMap()：数组扁平化

数组的成员有时候还是数组，Array.prototype.flat 用于将嵌套的数组“拉平”，变成一维的数组，该方法返回一个新数组，对原数组没有影响。

[1, 2, [3, 4]].flat();
// [1, 2, 3, 4]

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

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

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

上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

// 如果原数组有空位，flat()方法会跳过空位
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

例子：

直接调用 ES6 中的flat方法来实现数组扁平化。

flat 方法的语法：arr.flat ( [depth] )。其中depth是flat的参数，depth 是可以传递数组的展开深度（默认不填、数值是 1），即展开一层数组。

如果层数不确定，参数可以传进 Infinity，代表不论多少层都要展开。

// 常规操作
let arr = [1, [2, [3, 4，5]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr))// [1, 2, 3, 4，5]

// 骚操作
let arr = [1, [2, [3, 4]]];
console.log(arr.flat(Infinity)); // [1, 2, 3, 4，5]

学习资料

主页 随笔 说说 技术笔记 关于 友链
ㆆᵕㆆ…
# 数组基础
# 定义数组的四种方式
# length 属性
# 数组的空位
# 扩展运算符（…）
# 检测数组 Array.isArray()
# 数组方法
# 【迭代器方法】keys()、values()、entries()
# 【复制和填充方法】copyWithin()、fill()
# 【转换方法】valueOf()、toString()、toLocaleString()、join()
# 【栈和队列方法】push()、pop()、shift()、unshift()
# 【迭代方法】every()、filter()、forEach()、map()、some()
# 【排序方法】reverse()、sort()
# 【操作方法】concat()、slice()、splice()
# 【搜索方法】indexOf()、lastIndexOf()、includes()、find()、findIndex()
# 【归并方法】reduce()、reduceRight()
# 【摊平方法】flat()、flatMap()：数组扁平化
# 学习资料