重新认识js数组

theme: arknights

本文正在参加「金石计划 . 瓜分6万现金大奖」

JavaScript数组跟其他编程语言有很大的区别，JavaScript数组每个槽位可以存储任意类型的值。数组是动态的，会随着数据添加自动增长。

创建数组

（1）使用Array构造函数

let arr = new Array();
let arr = new Array(7);
let arr = new Array("jing");

（2）数组字面量

let arr = ["red","blue","green"];
let arr = [1,2];

与对象一样，在使用数组字面量表示法创建数组不会调用Array构造函数。

（3）ES6新增创建数组的静态方法：from()和of()

from()用于将类数组结构转换为数组实例。

//字符串会被拆分成为单字符数组
console.log(Array.form("Matt")); //["M","a","t","t"]
​
//可以使用from()将集合和映射转换为一个新数组
const m = new Map.set(1,2)
                 .set(3,4);
const s = new Set().add(1)
                   .add(2)
                   .add(3)
                   .add(4);
console.log(Array.from(m)); //[[1,2].[3,4]]
console.log(Array.from(s));//[1,2,3,4]

of()可以把一组数组转换为参数

console.log(Array.of(1,2,3,4));//[1,2,3,4]

数组空位

使用数组字面量初始化数组时，可以使用一串逗号来创建空位（hole）。ECMAScript 会将逗号之间 相应索引位置的值当成空位，ES6 规范重新定义了该如何处理这些空位.ES6 新增方法普遍将这 些空位当成存在的元素，只不过值为 undefined.

const options = [,,,,,]; // 创建包含 5 个元素的数组
console.log(options.length); // 5 
console.log(options); // [,,,,,] 

数组索引

这里先将数组的长度设置为2，所以会将第三个元素删掉，打印输出第三个元素的时候会重新，则会以新的元素填充，填充值为undefined。

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

检测数组（重点）

（1）instance of运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置，返回一个布尔值

let a = [];
a instance of Array;  //true
let b ={};
b instance of Array;  //false

（2）constructor 属性返回对创建此对象的数组函数的引⽤，就是返回对象相对应的构造函数

var arr = [];
arr.constructor == Array; //true

（3）通过Object.prototype.toString.call()判断，Object.prototype.toString.call()可以获取到对象的不同类型

let a=[7,8,9];
Object.prototype.toString.call(a)==='[Object Array]';//true

（4）Array.isArray()用于确定传递的值是否是一个数组，返回一个布尔值

var a = new Array(123);
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

迭代器方法

在 ES6 中，Array 的原型上暴露了 3 个用于检索数组内容的方法：keys()、values()和 entries()。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"]]

复制和填充方法

使用 fill()方法可以向一个已有的数组中插入全部或部分相同的值。

// 用 5 填充整个数组
zeroes.fill(5); 
// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3); 
// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3); 
// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1) 
// (-1 + zeroes.length = 4) 
zeroes.fill(8, -4, -1); 

填充数组fill()，fill()静默忽略超出数组边界、零长度及方向相反的索引范围

// 索引过低，忽略
zeroes.fill(1, -10, -6);
// 索引反向，忽略
zeroes.fill(2, 4, 2);

与 fill()不同，copyWithin()会按照指定范围浅复制数组中的部分内容，然后将它们插入到指 定索引开始的位置。

let ints, 
 reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
reset(); 
// 从 ints 中复制索引 5 开始的内容，插入到索引 0 开始的位置
ints.copyWithin(0, 5); 
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
// 从 ints 中复制索引 0 开始到索引 3 结束的内容
// 插入到索引 4 开始的位置
ints.copyWithin(4, 0, 3); 
alert(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9] 

排序方法

reverse()方法就 是将数组元素反向排列。

let values = [1, 2, 3, 4, 5]; 
values.reverse(); 
alert(values); // 5,4,3,2,1 

默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。为此， sort()会在每一项上调用 String()转型函数，然后比较字符串来决定顺序。

let values = [0, 1, 5, 10, 15]; 
values.sort(); 
alert(values); // 0,1,10,15,5 

sort()方法可以接收一个比较函数，用于判断哪个值应该排在前面。这个参数可以是比较函数，需要自定义比较函数。

搜索和位置方法

indexOf()和 includes()方法从数组前头（第一项） 开始向后搜索，而 lastIndexOf()从数组末尾（最后一项）开始向前搜索。这些方法都接收两个参 数：要查找的元素和一个可选的起始搜索位置。

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

find()和 findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。find()返回 第一个匹配的元素，findIndex()返回第一个匹配元素的索引。这两个方法也都接收第二个可选的参数， 用于指定断言函数内部 this 的值.

const people = [ 
 { 
 name: "Matt", 
 age: 27 
 }, 
 { 
 name: "Nicholas", 
 age: 29 
 } 
]; 
alert(people.find((element, index, array) => element.age < 28)); 
// {name: "Matt", age: 27}
alert(people.findIndex((element, index, array) => element.age < 28)); 
// 0   找到匹配项后，这两个方法都不再继续搜索。

迭代方法

every()：对数组每一项都运行传入的函数，如果对每一项函数都返回 true，则这个方法返回 true。

filter()：对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回。

forEach()：对数组每一项都运行传入的函数，没有返回值。

map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

some()：对数组每一项都运行传入的函数，如果有一项函数返回 true，则这个方法返回 true。

归并方法

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

let values = [1, 2, 3, 4, 5]; 
let sum = values.reduce((prev, cur, index, array) => prev + cur); 
alert(sum); // 15，将数组求和