JavaScript数组和其方法

文章目录 一、定义数组Array.from()Array.of() 二、检测数组三、存取元素通过[]运算符可以存取数组元素的值。通过改变数组的length属性来实现。通过push()和pop()方法 *** 作数组。通过unshift()和shift()方法 *** 作数组。通过splice()方法 三、数组的应用数组与字符串转换数组排序连接数组截取子数组迭代器方法复制和填充方法搜索和位置方法归并方法

一、定义数组

定义数组通过构造函数Array()和运算符new实现。
定义空数组。

var a = new Array();

定义带有参数的数组，数组的元素没有类型限制。

var a = new Array(1,2,3,"4","5");

定义指定长度的数组，没有为元素初始化赋值，所有元素的初始值为undefined。

var a = new Array(6);

定义数组是可以省略new。

var a = Array(6);

定义数组直接量，这种方法定义数组要比使用Array()定义数组快。

var a = [1,2,3,"4"];
var b = [];

Array 构造函数还有两个 ES6 新增的用于创建数组的静态方法：from()和 of()。from()用于将类数组结构转换为数组实例，而 of()用于将一组参数转换为数组实例。

Array.from()

Array.from()的第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个 length 属性和可索引元素的结构。这种方式可用于很多场合：

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

Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值，而无须像调用 Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数，用于指定映射函数中 this 的值。但这个重写的 this 值在箭头函数中不适用。

const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1, x => x**2); 
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2}); 
console.log(a2); // [1, 4, 9, 16] 
console.log(a3); // [1, 4, 9, 16]

Array.of()

Array.of()可以把一组参数转换为数组。这个方法用于替代在 ES6之前常用的 Array.prototype. slice.call(arguments)，一种异常笨拙的将 arguments 对象转换为数组的写法：

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

二、检测数组

一个经典的 ECMAScript 问题是判断一个对象是不是数组。在只有一个网页（因而只有一个全局作用域）的情况下，使用 instanceof *** 作符就足矣：

if (value instanceof Array){ } 

使用 instanceof 的问题是假定只有一个全局执行上下文。如果网页里有多个框架，则可能涉及两个不同的全局执行上下文，因此就会有两个不同版本的 Array 构造函数。如果要把数组从一个框架传给另一个框架，则这个数组的构造函数将有别于在第二个框架内本地创建的数组。为解决这个问题，ECMAScript 提供了 Array.isArray()方法。这个方法的目的就是确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的。来看下面的例子：

if (Array.isArray(value)){ }

三、存取元素 通过[]运算符可以存取数组元素的值。

var a = [1,2,3];
alert(a[1]);//2
a[1] = 4;
alert(a[1]);//4

通过改变数组的length属性来实现。

当改变数组长度时会自动在书的末尾增加或删除元素。

var a = [1,2,3,4];
a.length = 3;

使用delete运算符可以删除数组元素，但不会改变length的值。

通过push()和pop()方法 *** 作数组。

push()方法可以在数组的末尾插入一个或多个元素，他们按顺序被插入到数组末尾，并返回 *** 作后数组长度。
pop()方法可以依次把它们从数组中删除。不带参数，返回数组最后一个元素。

var a = [];
a.push(1,2,3);
a.pop();

通过unshift()和shift()方法 *** 作数组。

unshift()和shift()方法与push()和pop()方法 *** 作类似，但是作用于数组头部。

var a = [];
a.unshift(1,2,3);//添加元素
a.shift();//删除元素

通过splice()方法

该方法是一个通用的删除和插入元素的方法，它可以在指定位置开始删除或插入元素。
三个参数：第一个参数指定插入的起始位置，第二个参数：指定要删除元素个数，第三个参数：表示插入的具体元素。

let colors = ["red", "green", "blue"]; 
let removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue 
alert(removed); // red，只有一个元素的数组
removed = colors.splice(1, 0, "yellow", "orange"); // 在位置 1 插入两个元素
alert(colors); // green,yellow,orange,blue 
alert(removed); // 空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两个值，删除一个元素
alert(colors); // green,red,purple,orange,blue 
alert(removed);

三、数组的应用 数组与字符串转换

使用Array对象的join()方法把数组转换为多种形式字符串，join()方法有一个参数，用来定义合并元素的连字符。如果不提供参数，则以逗号连接每个元素。

var a = [1,2,3,4];
a = a.join("-");//"1-2-3-4"
b = a.join();//"1,2,3,4"

可以使用split()方法把字符串劈开为一个数组，有两个参数：第一个参数：指定劈开数组的字符，第二个参数：指定返回数组的长度。

var a = [1,2,3,4];
a = a.join("-");//"1-2-3-4"
b = a.split("-");//1,2,3,4

数组排序

使用reverse()方法可以颠倒数组元素顺序，该方法是在原数组基础上进行 *** 作的，不会新建数组。

var a = [1,2,3,4];
a = a.reverse(); //[4,3,2,1]

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

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

sort()方法可以接收一个比较函数，比较函数接收两个参数，如果第一个参数应该排在第二个参数前面，就返回负值；如果两个参数相等，就返回 0；如果第一个参数应该排在第二个参数后面，就返回正值。下面是使用简单比较函数的一个例子：

let values = [0, 1, 5, 10, 15]; 
values.sort((a, b) => a < b ? 1 : a > b ? -1 : 0); 	
alert(values); // 15,10,5,1,0

注意 reverse()和 sort()都返回调用它们的数组的引用。

连接数组

concat()方法能够把该方法中的参数追加到指定数组中，形成一个新的连接数组。

var a = [1,2,3];
var b = a.concat(4,5);//[1,2,3,4,5]

如果concat()方法中的参数包含数组，则会把元素展开添加到数组中。

var a = [1,2,3];
var b = a.concat(4,[5,6]);//[1,2,3,4,5,6]

截取子数组

slice()方法将返回数组中指定的片段（即数组中的一个子数组）。
有两个参数：第一个参数：截取子数组在原数组中的起点，第二个参数：截取子数组在原数组中的终点。如果只有一个参数，则 slice()会返回该索引到数组末尾的所有元素。

var a = [1,2,3,4,5,6];
var b = a.slice(2,5);//[3,4,5]

迭代器方法

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

复制和填充方法

ES6 新增了两个方法：批量复制方法 copyWithin()，以及填充数组方法 fill()。这两个方法的函数签名类似，都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引。使用 fill()方法可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置，它是可选的。如果不提供结束索引，则一直填充到数组末尾。负值索引从数组末尾开始计算。也可以将负索引想象成数组长度加上它得到的一个正索引：

const zeroes = [0, 0, 0, 0, 0]; 
// 用 5 填充整个数组
zeroes.fill(5); 
console.log(zeroes); // [5, 5, 5, 5, 5] 
zeroes.fill(0); // 重置
// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3); 
console.log(zeroes); // [0, 0, 0, 6, 6] 
zeroes.fill(0); // 重置
// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3); 
console.log(zeroes); // [0, 7, 7, 0, 0]; 
zeroes.fill(0); // 重置
// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1) 
// (-1 + zeroes.length = 4) 
zeroes.fill(8, -4, -1); 
console.log(zeroes); // [0, 8, 8, 8, 0]; 
//fill()静默忽略超出数组边界、零长度及方向相反的索引范围：
const zeroes = [0, 0, 0, 0, 0]; 
// 索引过低，忽略
zeroes.fill(1, -10, -6); 
console.log(zeroes); // [0, 0, 0, 0, 0] 
// 索引部分可用，填充可用部分
zeroes.fill(4, 3, 10) 
console.log(zeroes); // [0, 0, 0, 4, 4] 

copyWithin()会按照指定范围浅复制数组中的部分内容，然后将它们插入到指定索引开始的位置。开始索引和结束索引则与 fill()使用同样的计算方法：

let ints, 
reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
reset(); 
// 从 ints 中复制索引 0 开始的内容，插入到索引 5 开始的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5); 
console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4] 
reset(); 
// 从 ints 中复制索引 5 开始的内容，插入到索引 0 开始的位置
ints.copyWithin(0, 5); 
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9] 
reset(); 
// 支持负索引值，与 fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3); 
alert(ints); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6] 
//copyWithin()静默忽略超出数组边界、零长度及方向相反的索引范围：
let ints, 
reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
reset(); 
// 索引过低，忽略
ints.copyWithin(1, -15, -12); 
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
reset() 
// 索引部分可用，复制、填充可用部分
ints.copyWithin(4, 7, 10) 
alert(ints); // [0, 1, 2, 3, 7, 8, 9, 7, 8, 9];

搜索和位置方法

ECMAScript 提供了 3 个严格相等的搜索方法：indexOf()、lastIndexOf()和 includes()。其中，前两个方法在所有版本中都可用，而第三个方法是 ECMAScript 7 新增的。
这些方法都接收两个参数：要查找的元素和一个可选的起始搜索位置。indexOf()和 includes()方法从数组前头（第一项）开始向后搜索，而 lastIndexOf()从数组末尾（最后一项）开始向前搜索。

indexOf()和 lastIndexOf()都返回要查找的元素在数组中的位置，如果没找到则返回-1。includes()返回布尔值，表示是否至少找到一个与指定元素匹配的项。在比较第一个参数跟数组每一项时，会使用全等（===）比较，也就是说两项必须严格相等。

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}

归并方法

reduce()和 reduceRight()。这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。reduce()方法从数组第一项开始遍历到最后一项。而 reduceRight()从最后一项开始遍历至第一项。这两个方法都接收两个参数：对每一项都会运行的归并函数，以及可选的以之为归并起点的初始值。传给 reduce()和 reduceRight()的函数接收 4 个参数：上一个归并值、当前项、当前项的索引和数组本身。

let sum = values.reduce((prev, cur, index, array) => prev + cur); 
alert(sum); // 15
// reduceRight
let values = [1, 2, 3, 4, 5]; 
let sum = values.reduceRight(function(prev, cur, index, array){ 
 return prev + cur; 
}); 
alert(sum); // 15