js数组总结

1.创建(from/of)

1.Array()构造函数

• 有几种基本的方式可以创建数组。一种是使用 Array 构造函数，比如：

有几种基本的方式可以创建数组。一种是使用 Array 构造函数，比如：
let colors = new Array(); 

如果知道数组中元素的数量，那么可以给构造函数传入一个数值，然后 length 属性就会被自动创
建并设置为这个值。比如，下面的代码会创建一个初始 length 为 20 的数组：
let colors = new Array(20); 

也可以给 Array 构造函数传入要保存的元素。比如，下面的代码会创建一个包含 3 个字符串值的
数组：
let colors = new Array("red", "blue", "green"); 

创建数组时可以给构造函数传一个值。这时候就有点问题了，因为如果这个值是数值，则会创建一
个长度为指定数值的数组；而如果这个值是其他类型的，则会创建一个只包含该特定值的数组。下面看
一个例子：
let colors = new Array(3); // 创建一个包含 3 个元素的数组
let names = new Array("Greg"); // 创建一个只包含一个元素，即字符串"Greg"的数组

在使用 Array 构造函数时，也可以省略 new 操作符。结果是一样的，比如：
let colors = Array(3); // 创建一个包含 3 个元素的数组
let names = Array("Greg"); // 创建一个只包含一个元素，即字符串"Greg"的数组

2.字面量

另一种创建数组的方式是使用数组字面量（array literal）表示法。数组字面量是在中括号中包含以
逗号分隔的元素列表，如下面的例子所示：
let colors = ["red", "blue", "green"]; // 创建一个包含 3 个元素的数组
let names = []; // 创建一个空数组
let values = [1,2,]; // 创建一个包含 2 个元素的数组
在这个例子中，第一行创建一个包含 3 个字符串的数组。第二行用一对空中括号创建了一个空数组。
第三行展示了在数组最后一个值后面加逗号的效果：values 是一个包含两个值（1 和 2）的数组。

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

3.es6静态创建方法

• from():用于将类数组结构转换为数组实例
• of():用于将一组参数转换为数组实例

1.Array.from()

第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个 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().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] 

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

2.数组空位

使用数组字面量初始化数组时，可以使用一串逗号来创建空位（hole）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"]; // 创建一个包含 3 个字符串的数组
colors[99] = "black"; // 添加一种颜色（位置 99）
alert(colors.length); // 100

这里，colors 数组有一个值被插入到位置 99，结果新 length 就变成了 100（99 + 1）。这中间的所有元素，即位置 3~98，实际上并不存在，因此在访问时会返回 undefined。

4.检测数组isArray()

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

if (value instanceof Array){ 
 // 操作数组
}

使用instanceof的问题是假定只有一个全局执行上下文。如果网页里有多个框架，则可能涉及两个不同的全局执行上下文，因此就会有两个不同版本的 Array 构造函数。如果要把数组从一个框架传给另一个框架，则这个数组的构造函数将有别于在第二个框架内本地创建的数组。

为解决这个问题，ECMAScript 提供了 Array.isArray()方法。这个方法的目的就是确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的。来看下面的例子：

if (Array.isArray(value)){ 
 // 操作数组
}

5.迭代器方法(keys/values/entries)

在 ES6 中，Array 的原型上暴露了 3 个用于检索数组内容的方法：

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", "qux"]; 
for (const [idx, element] of a.entries()) { 
    alert(idx); 
    alert(element); 
} 
// 0 
// foo 
// 1 
// bar 
// 2 
// baz 
// 3 
// qux

6.复制和填充方法(fill/copyWithin)

1.fill()

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

2.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.转换方法(toString/valueOf/toLocaleString)

1.toString/valueOf

前面提到过，所有对象都有 toLocaleString()、toString()和 valueOf()方法。其中，valueOf()返回的还是数组本身。而 toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说，对数组的每个值都会调用其 toString()方法，以得到最终的字符串。来看下面的

例子：

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

2.toLocaleString()

toLocaleString()方法也可能返回跟 toString()和 valueOf()相同的结果，但也不一定。在调用数组的 toLocaleString()方法时，会得到一个逗号分隔的数组值的字符串。它与另外两个方法唯一的区别是，为了得到最终的字符串，会调用数组每个值的 toLocaleString()方法，而不是toString()方法。看下面的例子：

let person1 = { 
    toLocaleString() { 
        return "Nikolaos"; 
    }, 
    toString() { 
        return "Nicholas"; 
    } 
}; 

let person2 = { 
    toLocaleString() { 
        return "Grigorios"; 
    }, 
    toString() { 
        return "Greg"; 
    } 
}; 
let people = [person1, person2]; 
alert(people); // Nicholas,Greg 
alert(people.toString()); // Nicholas,Greg 
alert(people.toLocaleString()); // Nikolaos,Grigorios

这里定义了两个对象person1和person2，它们都定义了toString()和toLocaleString()方法，而且返回不同的值。然后又创建了一个包含这两个对象的数组people。在将数组传给alert()时，输出的是"Nicholas,Greg"，这是因为会在数组每一项上调用toString()方法（与下一行显式调用toString()方法结果一样）。而在调用数组的toLocaleString()方法时，结果变成了"Nikolaos, Grigorios"，这是因为调用了数组每一项的toLocaleString()方法。

8.指定符号分割join

join()方法接收一个参数，即字符串分隔符，返回包含所有项的字符串。来看下面的例子：

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

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

9.排序(sort/reverse)

1.reverse()

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

2.sort()

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

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

一开始数组中数值的顺序是正确的，但调用 sort()会按照这些数值的字符串形式重新排序。因此，即使 5 小于 10，但字符串"10"在字符串"5"的前头，所以 10 还是会排到 5 前面。很明显，这在多数情况下都不是最合适的。为此，sort()方法可以接收一个比较函数，用于判断哪个值应该排在前面。

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

function compare(value1, value2) { 
    if (value1 < value2) { 
        return -1; 
    } else if (value1 > value2) { 
        return 1; 
    } else { 
        return 0; 
    } 
}

这个比较函数可以适用于大多数数据类型，可以把它当作参数传给 sort()方法，如下所示：

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

在给 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); // 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()都返回调用它们的数组的引用。

如果数组的元素是数值，或者是其 valueOf()方法返回数值的对象（如 Date 对象），这个比较函数还可以写得更简单，因为这时可以直接用第二个值减去第一个值：

function compare(value1, value2){ 
 return value2 - value1; 
}

比较函数就是要返回小于 0、0 和大于 0 的数值，因此减法操作完全可以满足要求。

10.其他操作方法

1.拼接concat()

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()打平参数数组。相反，把这个值设置为 true 可以强制打平类数组对象：

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

2.切片slice()

1. 方法 slice()用于创建一个包含原有数组中一个或多个元素的新数组
2. slice()方法可以接收一个或两个参数：返回元素的开始索引和结束索引
3. 如果只有一个参数，则 slice()会返回该索引到数组末尾的所有元素
4. 如果有两个参数，则 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

11.增

1.splice()添加任意位置

使用它的方式可以有很多种。splice()的主要目的是在数组中间插入元素，但有 3 种不同的方式使用这个方法。

1.删除
	-需要给 splice()传 2 个参数：
		-要删除的第一个元素的位置
		-要删除的元素数量。可以从
数组中删除任意多个元素，比如 splice(0, 2)会删除前两个元素。

2.插入
	-需要给 splice()传 3 个参数：
        -开始位置、
        -0（要删除的元素数量）
        -要插入的元素
         
可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数，乃至任意多
个要插入的元素。比如，splice(2, 0, "red", "green")会从数组位置 2 开始插入字符串
"red"和"green"。

3.替换
	splice()在删除元素的同时可以在指定位置插入新元素，同样要传入 3 个参数：
		-开始位置
		-要删除元素的数量
		-要插入的任意多个元素。
		-要插入的元素数量不一定跟删除的元素数量一致。
比如，splice(2, 1, "red", "green")会在位置 2 删除一个元素，然后从该位置开始
向数组中插入"red"和"green"。

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);

2.push()栈方法添加到最后

添加一个元素到数组的最后位置:

// 添加一个元素到数组的最后位置
// 方式一:
numbers[numbers.length] = 10

// 方式二:
numbers.push(11)
numbers.push(12, 13)

alert(numbers)

3.unshift()队列方法添加到头部

当然, 我们在数组首位插入数据可以直接使用unshift方法

// 通过unshift在首位插入数据
numbers.unshift(-2)
numbers.unshift(-4, -3)
alert(numbers) // -4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,12,13

12.删除

1.pop()栈方法删除尾部元素

如果希望删除数组最后的元素, 可以使用pop()方法

// 删除最后的元素
numbers.pop()
alert(numbers) // -4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,12

2.shift队列方法删除首位元素

numbers.shift()
alert(numbers)

3.splice任意位置删除

splice() 方法会改变原始数组。

表达式 arr.splice(index, num, item1, item2, ...);

参数说明

第一个参数为 一个整数，用来指定添加/删除元素的位置，可以用负数来从尾部开始数 必填参数
第二个参数为删除元素的数量，若不想删除可以设置为0 可选参数
再后面的参数为 向数组添加的元素 可选参数
如果是删除操作,那么会把删除的元素放在一个新数组中返回。

1.操作的元素会包括开始的元素

2.如果数组的元素不够，会一直删除到数组的最后一位

• 任意位置?
  • 前面我们学习的主要是在数组的开头和结尾处添加和删除数据.
  • 那如果我们希望在数组的中间位置进行一些操作应该怎么办呢?
• 一方面, 我们可以自己封装这样的函数, 但JS已经给我们提供了一个splice方法
• 通过splice删除数据

// 删除指定位置的几个元素
numbers.splice(5, 3)
alert(numbers) // -4,-3,-2,-1,0,4,5,6,7,8,9,10,11,12,13

• 代码解析:

  • 上面的代码会删除索引为5, 6, 7位置的元素.
  • 第一个参数表示索引起始的位置为5(其实是第6个元素, 因为索引从0开始的), 删除3个元素.

如果我们希望使用splice来插入数据呢?

// 插入指定位置元素
numbers.splice(5, 0, 3, 2, 1)
alert(numbers) // -4,-3,-2,-1,0,3,2,1,4,5,6,7,8,9,10,11,12,13

代码解析:

• 上面的代码会从索引为5的位置开始插入数据. 其他数据依次向后位移.
• 第一个参数依然是索引值为5(第六个位置)
• 第二个参数为0时表示不是删除数据, 而是插入数据.
• 后面紧跟的是在这个位置要插入的数据, 可以是其他类型, 比如"a", “b”, “c”.

如果我们希望使用splice来修改数据呢?

// 修改指定位置的元素
numbers.splice(5, 3, "a", "b", "c")
alert(numbers) // -4,-3,-2,-1,0,a,b,c,4,5,6,7,8,9,10,11,12,13

代码解析:

• 上面的代码会从索引5的位置开始修改数据, 修改多少个呢? 第二个参数来决定的.
• 第一个参数依然是索引的位置为5(第六个位置)
• 第二个参数是要将数组中多少个元素给替换掉, 我们这里是3个(也可以使用3个元素来替换2个, 可以自己尝试一下)
• 后面跟着的就是要替换的元素.

13.改

1.splice

同上

14.查

1.indexOf/lastIndexOf/includes

ECMAScript 提供两类搜索数组的方法：按严格相等搜索和按断言函数搜索。

1.严格相等

ECMAScript 提供了 3 个严格相等的搜索方法：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

2.find/findIndex

2.断言函数

ECMAScript 也允许按照定义的断言函数搜索数组，每个索引都会调用这个函数。断言函数的返回值决定了相应索引的元素是否被认为匹配。

断言函数接收 3 个参数：元素、索引和数组本身。其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组。断言函数返回真值，表示是否匹配。

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
找到匹配项后，这两个方法都不再继续搜索。
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]

15.数组转字符串

1.join

将数组转换为字符串[不改变原数组]

可选参数为指定分隔符

{
        let arr = [1, 2, 3, 4]
        let b = arr.join('-')
        console.log(b)//1-2-3-4
        console.log(typeof b)//string
}

2.toString()

方法可把数组转换为字符串，并返回结果。[不改变原数组]

{
    let arr = ['xiao', 'hao', 'wen', 24]
    let b = arr.toString()
    console.log(b)//xiao,hao,wen,24
}

16.字符串转数组split

方法用于把一个字符串分割成字符串数组

• 例子 1

在本例中，我们将按照不同的方式来分割字符串：

<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

</script>

输出：

How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

• 例子 2

在本例中，我们将分割结构更为复杂的字符串：

"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//将返回["", "a", "b", "c"]

• 例子 3

使用下面的代码，可以把句子分割成单词：

var words = sentence.split(' ')

或者使用正则表达式作为 separator：

var words = sentence.split(/\s+/)

• 例子 4

如果您希望把单词分割为字母，或者把字符串分割为字符，可使用下面的代码：

"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]

若只需要返回一部分字符，请使用 howmany 参数：

"hello".split("", 3)	//可返回 ["h", "e", "l"]

17.迭代方法

5个迭代方法

接收 3个参数：数组元素、元素索引和数组本身

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

这些方法都不改变调用它们的数组。

every()：对数组每一项都运行传入的函数，如果对每一项函数都返回 true，则这个方法返回true。 
filter()：对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回。
forEach()：对数组每一项都运行传入的函数，没有返回值。
map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。
some()：对数组每一项都运行传入的函数，如果有一项函数返回 true，则这个方法返回 true。

1. every()方法

检测数组中的元素是否全部满足条件

• every()方法是将数组中每一个元素传入到一个函数中, 该函数返回true/false.

• 如果函数中每一个元素都返回true, 那么结果为true, 有一个为false, 那么结果为false

• every()练习:

  • 判断一组元素中是否都包含某一个字符

// 定义数组
var names = ["abc", "cb", "mba", "dna"]

// 判断数组的元素是否都包含a字符
var flag = names.every(function (t) {
    return t.indexOf('a') != -1
})
alert(flag)

2. some()方法

some()检测数组中是否存在满足条件的元素

语法 arr.some(function(value, index, arr), this);

参数值同forEach一样

返回值：布尔类型 ture / false

• some()方法是将数组中每一个元素传入到一个函数中, 该函数返回true/false

• 但是和every不同的是, 一旦有一次函数返回了true, 那么迭代就会结束. 并且结果为true

• some()练习

// 定义数组
var names = ["abc", "cb", "mba", "dna"]

// 判断数组中是否包含有a字符的字符
var flag = names.some(function (t) {
    alert(t)
    return t.indexOf("a") != -1
})
alert(flag)

3. filter()方法

过滤原数组，返回新数组

• filter()方法是一种过滤的函数
• 首先会遍历数组中每一个元素传入到函数中
• 函数的结果返回true, 那么这个元素会被添加到最新的数组中, 返回false, 则忽略该元素.
• 最终会形成一个新的数组, 该数组就是filter()方法的返回值

// 定义数组
var names = ["abc", "cb", "mba", "dna"]

// 获取names中所有包含'a'字符的元素
var newNames = names.filter(function (t) {
    return t.indexOf("a") != -1
})
console.log(newNames)//abc,mba,dna

4.map()方法

对数组中的每一个元素都进行处理，返回新的数组

• map()方法提供的是一种映射函数.
• 首先会遍历数组中每一个元素传入到函数中.
• 元素会经过函数中的指令进行各种变换, 生成新的元素, 并且将新的元素返回.
• 最终会将返回的所有元素形成一个新的数组, 该数组就是map()方法的返回值

• map()练习:

// 定义数组
var names = ["abc", "cb", "mba", "dna"]

// 在names中所有的元素后面拼接-abc
var newNames = names.map(function (t) {
    return t + "-abc"
})
alert(newNames)

5. forEach()方法

​ forEach()方法仅仅是一种快速迭代数组的方式而已.该方法不需要返回值,按升序遍历数组

语法:

arr.forEach(function(value, index, arr), this);

value(必须): 当前遍历时的数组值。

index(可选): 当前遍历时的索引值。

arr(可选): 数组对象本身。

this(可选): 执行回调函数时的。

forEach的使用

// 定义数组
var names = ["abc", "cb", "mba", "dna"]

// forEach的使用
names.forEach(function (t) {
    alert(t)
})

let arr = [1, 2, 3, 4, 5, 6]
arr.forEach((value, index) => {
    console.log(`${index}:${value}\n`)//值
})

18.归并方法

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

1. reduce方法

语法 arr.reduce((total, value, index, arr), init)

参数 total(必须)：初始值，之后为上一次回调的返回值。

value(必须): 数组元素的值。

index(可选): 索引值。

arr(可选): 数组对象。

init(可选): 初始值。

返回值 ：累加后的值

数组的累加器，合并成为一个值。

• 我们单独拿出reduce方法, 因为这个方法相对来说难理解一点

• 首先, 我们来看这个方法需要的参数:

  arr.reduce(callback[, initialValue])
  

参数

• callback（一个在数组中每一项上调用的函数，接受四个参数：）

  • previousValue（上一次调用回调函数时的返回值，或者初始值）
  • currentValue（当前正在处理的数组元素）
  • currentIndex（当前正在处理的数组元素下标）
  • array（调用reduce()方法的数组）

• initialValue（可选的初始值。作为第一次调用回调函数时传给previousValue的值）

• 有些晦涩难懂, 我们直接看例子

  • 求一个数字中数字的累加和

使用for实现:

// 1.定义数组
var numbers = [1, 2, 3, 4]

// 2.for实现累加
var total = 0
for (var i = 0; i < numbers.length; i++) {
    total += numbers[i]
}
alert(total) // 10

使用forEach简化for循环

• 相对于for循环, forEach更符合我们的思维(遍历数组中的元素)

// 3.使用forEach
var total = 0
numbers.forEach(function (t) {
    total += t
})
alert(total)

使用reduce方法实现

// 4.使用reduce方法
var total = numbers.reduce(function (pre, cur) {
    return pre + cur
})
alert(total)

代码解析:

• pre中每次传入的参数是不固定的, 而是上次执行函数时的结果保存在了pre中
• 第一次执行时, pre为0, cur为1
• 第二次执行时, pre为1 (0+1, 上次函数执行的结果), cur为2
• 第三次执行时, pre为3 (1+2, 上次函数执行的结果), cur为3
• 第四次执行时, pre为6 (3+3, 上次函数执行的结果), cur为4
• 当cur为4时, 数组中的元素遍历完了, 就直接将第四次的结果, 作为reduce函数的返回值进行返回.

似乎和forEach比较没有太大的优势呢?

• 通过这个代码你会发现, 你不需要在调用函数前先定义一个变量, 只需要一个变量来接收方法最终的参数即可.

• 但是这就是优势吗? 不是, 优势在于reduce方法有返回值, 而forEach没有.

• 这算什么优势? 如果reduce方法有返回值, 那么reduce方法本身就可以作为参数直接传递给另外一个需要reduce返回值的作为参数的函数. 而forEach中你只能先将每次函数的结果保存在一个变量, 最后再将变量传入到参数中.

• 没错, 这就是最近非常流行的函数式编程. 也是为了几乎每个可以使用函数式编程的语言都有reduce这个方法的原因.

• 关于函数式编程, 不再本次课程的讨论之中, 只是看到了这个函数, 给大家延伸了一下而已.(后面有机会和大家分享函数式编程)

• initialValue

  • 其实就是第一次执行reduce中的函数时, pre的值.
  • 因为默认pre第一次执行时为0.