一、创建数组
1、使用Array构造函数
如果知道数组中元素的数量，那么可以给构造函数传入一个数值，然后length属性就会被自动创建并设置为这个值。
也可以给Array构造函数传入要保存的元素。
在使用Array构造函数时，也可以省略new操作符。结果是一样的。
let colors = new Array();
let colors2 = new Array(5);
let colors3 = new Array("red", "blue", "green");
let names = Array("Greg")
2、使用数组字面量表示法
数组字面量是在中括号中包含以逗号分隔的元素列表。
let colors = ["red", "blue", "green"];
注意：在使用数组字面量表示法创建数组不会调用Array构造函数。
二、数组方法
1、创建数组的静态方法：from()和of()
a、from()用于将类数组结构转换为数组实例
Array.from()的第一个参数是一个类数组对象，即任何可迭代的结构， 或者有一个length属性和可索引元素的结构。
类数组对象包括字符串、集合、映射、数组字面量、可迭代对象、arguments对象、带有length属性的自定义对象等。
// 字符串会被拆分为单字符数组
console.log(Array.from("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]
// Array.from()对现有数组执行浅复制
const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1);
console.log(a1); // [1, 2, 3, 4]
alert(a1 === a2); // false
// 可以使用任何可迭代对象
const iter = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
yield 4;
}
};
console.log(Array.from(iter)); // [1, 2, 3, 4]
// arguments对象可以被轻松地转换为数组
function getArgsArray() {
return Array.from(arguments);
}
console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]
// from()也能转换带有必要属性的自定义对象
const arrayLikeObject = {
0: 1,
1: 2,
2: 3,
3: 4,
length: 4
};
console.log(Array.from(arrayLikeObject)); // [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]
b、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]
2、数组空位
使用数组字面量初始化数组时，可以使用一串逗号来创建空位。ECMAScript会将逗号之间相应索引位置的值当成空位，ES6规范重新定义了该如何处理这些空位。
const options = [,,,,,]; // 创建包含5个元素的数组
console.log(options.length); // 5
console.log(options); // [,,,,,]
ES6新增的方法和迭代器与早期ECMAScript版本中存在的方法行为不同。ES6新增方法普遍将这些空位当成存在的元素，只不过值为undefined。
const options = [1,,,,5];
for (const option of options) {
console.log(option === undefined);
}
// false
// true
// true
// true
// false
const a = Array.from([,,,]); // 使用ES6的Array.from()创建的包含3个空位的数组
for (const val of a) {
alert(val === undefined);
}
// true
// true
// true
alert(Array.of(...[,,,])); // [undefined, undefined, undefined]
for (const [index, value] of options.entries()) {
alert(value);
}
// 1
// undefined
// undefined
// undefined
// 5
ES6之前的方法则会忽略这个空位，但具体的行为也会因方法而异：
const options = [1,,,,5];
// map()会跳过空位置
console.log(options.map(() => 6)); // [6, undefined, undefined, undefined, 6]
// join()视空位置为空字符串
console.log(options.join('-')); // "1----5"
注意：由于行为不一致和存在性能隐患，因此实践中要避免使用数组空位。如果确实需要空位，则可以显式地用undefined值代替。
3、数组索引
要取得或设置数组的值，需要使用中括号并提供相应值的数字索引，如下所示：
let colors = ["red", "blue", "green"]; // 定义一个字符串数组
alert(colors[0]); // 显示第一项
colors[2] = "black"; // 修改第三项
colors[3] = "brown"; // 添加第四项
数组中元素的数量保存在length属性中，通过修改length属性，可以从数组末尾删除或添加元素。
let colors = ["red", "blue", "green"]; // 创建一个包含3个字符串的数组
colors.length = 2;
alert(colors[2]); // undefined
如果将length设置为大于数组元素数的值，则新添加的元素都将以undefined填充。
let colors = ["red", "blue", "green"]; // 创建一个包含3个字符串的数组
colors.length = 4;
alert(colors[3]); // undefined
4、检测数组(判断是否为数组)
判断一个对象是不是数组。在只有一个网页（因而只有一个全局作用域）的情况下，使用instanceof操作符就足矣。
if (value instanceof Array){
// 操作数组
}
使用instanceof的问题是假定只有一个全局执行上下文。如果网页里有多个框架，则可能涉及两个不同的全局执行上下文，因此就会有两个不同版本的Array构造函数。
为解决这个问题，ECMAScript提供了Array.isArray()方法。这个方法的目的就是确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的。
if (Array.isArray(value)){
// 操作数组
}
5、迭代器方法(Array原型上)—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"]]
const a = ["foo", "bar", "baz", "qux"];
console.log(a.entries());
注意：以上三种迭代方法都是Array实例才有的。
使用ES6的解构可以非常容易地在循环中拆分键/值对：
const a = ["foo", "bar", "baz", "qux"];
for (const [idx, element] of a.entries()) {
alert(idx);
alert(element);
}
// 0
// foo
// 1
// bar
// 2
// baz
// 3
// qux
6、复制和填充方法—copyWithin()、fill()
a、填充数组fill()方法
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(1, 10, 15);
console.log(zeroes); // [0, 0, 0, 0, 0]
// 索引反向，忽略
zeroes.fill(2, 4, 2);
console.log(zeroes); // [0, 0, 0, 0, 0]
// 索引部分可用，填充可用部分
zeroes.fill(4, 3, 10)
console.log(zeroes); // [0, 0, 0, 4, 4]
b、批量复制方法copyWithin()
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();
// 从ints中复制索引0开始到索引3结束的内容
// 插入到索引4开始的位置
ints.copyWithin(4, 0, 3);
alert(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset();
// JavaScript引擎在插值前会完整复制范围内的值
// 因此复制期间不存在重写的风险
ints.copyWithin(2, 0, 6);
alert(ints); // [0, 1, 0, 1, 2, 3, 4, 5, 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(1, 12, 15);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引反向，忽略
ints.copyWithin(2, 4, 2);
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];
7、转换方法—toLocaleString()、toString()和valueOf()
valueOf()返回的还是数组本身。而toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说，对数组的每个值都会调用其toString()方法，以得到最终的字符串。
let colors = ["red", "blue", "green"]; // 创建一个包含3个字符串的数组
console.log(colors.toString()); // red,blue,green
console.log(colors.valueOf()); // ['red', 'blue', 'green']
console.log(colors); // ['red', 'blue', 'green']
toLocaleString()方法也可能返回跟toString()和valueOf()相同的结果，但也不一定。它与另外两个方法唯一的区别是，为了得到最终的字符串，会调用数组每个值的toLocaleString()方法，而不是toString()方法。
toLocaleString()以及toString()都返回数组值的逗号分隔的字符串。如果想使用不同的分隔符，则可以使用join()方法。
join()方法接收一个参数，即字符串分隔符，返回包含所有项的字符串。
let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue
如果不给 join()传入任何参数，或者传入undefined，则仍然使用逗号作为分隔 符。
注意：如果数组中某一项是null或undefined，则在join()、toLocaleString()、toString()和valueOf()返回的结果中会以空字符串表示。
8、栈方法—push()，pop()
ECMAScript给数组提供几个方法，让它看起来像是另外一种数据结构。
push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。
pop()方法则用于删除数组的最后一项，同时减少数组的length值，返回被删除的项。
let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
alert(count); // 2
count = colors.push("black"); // 再推入一项
alert(count); // 3
let item = colors.pop(); // 取得最后一项
alert(item); // black
alert(colors.length); // 2
9、队列方法—shift()、unshift()
shift()，它会删除数组的第一项并返回它，然后数组长度减1。
使用shift()和push()，可以把数组当成队列来使用：
let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
alert(count); // 2
count = colors.push("black"); // 再推入一项
alert(count); // 3
let item = colors.shift(); // 取得第一项
alert(item); // red
alert(colors.length); // 2
unshift()就是执行跟shift()相反的操作：在数组开头添加任意多个值，然后返回新的数组长度。
通过使用unshift()和pop()，可以在相反方向上模拟队列，即在数组开头添加新数据，在数组末尾取得数据：
let colors = new Array(); // 创建一个数组
let count = colors.unshift("red", "green"); // 从数组开头推入两项
alert(count); // 2
count = colors.unshift("black"); // 再推入一项
alert(count); // 3
let item = colors.pop(); // 取得最后一项
alert(item); // green
alert(colors.length); // 2
10、排序方法—reverse()、sort()
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()方法可以接收一个比较函数，用于判断哪个值应该排在前面。例如：
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15
当然，比较函数也可以产生降序效果，只要把返回值交换一下即可：
function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 15,10,5,1,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()都返回调用它们的数组的引用。
11、操作方法
a、concat()—在现有数组全部元素基础上创建一个新数组
首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组。如果传入一个或多个数组，则concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组，则直接把它们添加到结果数组末尾。
let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // ["red", "green","blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]
打平数组参数的行为可以重写，方法是在参数数组上指定一个特殊的符号：Symbol.isConcatSpreadable。这个符号能够阻止concat()打平参数数组。
let colors = ["red", "green", "blue"];
let newColors = ["black", "brown"];
let moreNewColors = {
[Symbol.isConcatSpreadable]: true,
length: 2,
0: "pink",
1: "cyan"
};
newColors[Symbol.isConcatSpreadable] = false;
// 强制不打平数组
let colors2 = colors.concat("yellow", newColors);
// 强制打平类数组对象
let colors3 = colors.concat(moreNewColors);
console.log(colors); // ["red", "green", "blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", ["black", "brown"]]
console.log(colors3); // ["red", "green", "blue", "pink", "cyan"]
b、slice()—创建一个包含原有数组中一个或多个元素的新数组
slice()方法可以接收一个或两个参数：返回元素的开始索引和结束索引。如果只有一个参数，则slice()会返回该索引到数组末尾的所有元素。如果有两个参数，则slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。记住，这个操作不影响原始数组。
let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
alert(colors2); // green,blue,yellow,purple
alert(colors3); // green,blue,yellow
注意：如果slice()的参数有负值，那么就以数值长度加上这个负值的结果确定位置。比如，在包含5个元素的数组上调 用slice(-2,-1)，就相当于调用slice(3,4)。如果结束位置小于开始位置，则返回空数组。
c、splice()—删除、插入、替换元素
splice(参数一,参数二,参数三)
- 参数一：开始位置
- 参数二：要删除元素的数量
- 参数三：要插入的任意多个元素
不同操作对应参数不同：
- 删除：需要给splice()传2个参数：要删除的第一个元素的位置和要删除的元素数量。
- 插入：需要给splice()传3个参数：开始位置、0（要删除的元素数量）和要插入的元素。
- 替换：splice()在删除元素的同时可以在指定位置插入新元素，同样要传入3个参数：开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。
12、搜索和位置方法
a、严格相等—indexOf()、lastIndexOf()、includes()
这些方法都接收两个参数：要查找的元素和一个可选的起始搜索位置。
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
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
b、断言函数—find()、findIndex()
断言函数接收3个参数：元素、索引和数组本身。断言函数返回真值，表示是否匹配。
find()和findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。find()返回第一个匹配的元素，findIndex()返回第一个匹配元素的索引。
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
找到匹配项后，这两个方法都不再继续搜索。
const evens = [2, 4, 6];
// 找到匹配后，永远不会检查数组的最后一个元素
evens.find((element, index, array) => {
console.log(element);
console.log(index);
console.log(array);
return element === 4;
});
// 2
// 0
// [2, 4, 6]
// 4
// 1
// [2, 4, 6]
13、迭代方法
a、every()
every()：对数组每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true。
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
alert(everyResult); // false
b、filter()
filter()：对数组每一项都运行传入的函数，函数返回true的项会组成数组之后返回。
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
alert(filterResult); // 3,4,5,4,3
a、forEach()
forEach()：对数组每一项都运行传入的函数，没有返回值。
本质上，forEach()方法相当于使用for循环遍历数 组。
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
// 执行某些操作
});
a、map()
map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
alert(mapResult); // 2,4,6,8,10,8,6,4,2
a、some()
some()：对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array) => item > 2);
alert(someResult); // true
这些方法都不改变调用它们的数组。
14、归并方法—reduce()、reduceRight()
reduce()方法从数组第一项开始遍历到最后一项。而reduceRight()从最后一项开始遍历至第一项。
这两个方法都接收两个参数：对每一项都会运行的归并函数，以及可选的以之为归并起点的初始值。
传给reduce()和reduceRight()的函数接收4个参数：上一个归并值、当前项、当前项的索引和数组本身。
可以使用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。
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。
15、删除数组元素
a、delete
使用delete删除数组元素只是将对应位置上的数组元素值置为undefined，并没有真正的删除元素，其length属性的值还是不变。
let arr=['s','d','g']
delete arr[1]
console.log(arr); // Array(3) [ "s", <1 empty slot>, "g" ]
console.log(arr[1]); // undefined
b、splice
需要给splice()传2个参数：要删除的第一个元素的位置和要删除的元素数量。
let arr = [1,2,3,4,6]
let spliceArr = arr.splice(1,2)
console.log('删除的元素：', spliceArr); // 删除的元素：Array [ 2, 3 ]
console.log('剩下的元素：', arr); // 剩下的元素： Array(3) [ 1, 4, 6 ]
三、其他补充
1、类数组
“类数组”意味着有长度属性并且属性的索引是从零开始的，但是它没有Array的 内置方法，例如forEach()、map()都是没有的。
通过数组的slice(...)或from(...)将类数组转换为数组的方法（以arguments对象为例，）：
function foo() {
var arr = Array.prototype.slice.call( arguments );
// 或者
// var arr = Array.from( arguments );
arr.push( "bam" );
console.log( arr );
}
foo( "bar", "baz" ); // ["bar","baz","bam"]
2、字符串和数组的一些相关操作
a、字符串反转：将字符串转为数组实现反转再转回字符串
字符串的split方法：使用指定的分隔符字符串将一个String对象分割成子字符串数组。
数组的join方法：将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。
let s= "abcdef"
let rs = s.split("").reverse().join("");
console.log(rs); //fedcba
