本文是 重温基本 系列文章的第十篇。
本日感觉：安然夜，多棒。

系列目次：

• 【温习材料】ES6/ES7/ES8/ES9材料整顿(个人整顿)
• 【重温基本】1.语法和数据类型
• 【重温基本】2.流程掌握和错误处置惩罚
• 【重温基本】3.轮回和迭代
• 【重温基本】4.函数
• 【重温基本】5.表达式和运算符
• 【重温基本】6.数字
• 【重温基本】7.时候对象
• 【重温基本】8.字符串
• 【重温基本】9.正则表达式

本章节温习的是JS中的数组，以索引举行排序。

前置学问：
数组是一个有序的数据鸠合，应用数组称号和索引举行接见。

let arr = [1,2,3];
arr[0] = 1;

在JavaScript中数组没有明白数据类型。

let arr = [1, 'hi', undefined, fun()];

1.建立数组

建立数组要领有3种：

let arr = new Array(ele1, ele2, ele3, ..., eleN);
let arr = Array(ele1, ele2, ele3, ..., eleN);
let arr = [ele1, ele2, ele3, ..., eleN];

上面是已知数组元素，别的一种另有建立一个长度不为0，且有没有任何元素的数组：

let len = 5;

let arr = new Array(len); // 要领1
let arr = Array(len);     // 要领2
let arr = [];             // 要领3
arr.length = len;

若传入的数组长度不是整数，则报错：

let arr = new Array(3.5); 
let arr = Array(3.5); 
let arr = [];
arr.length = 3.5;
//Uncaught RangeError: Invalid array length

个中要注重这两种建立要领是差别的：

let arr1 = new Array(4);   // [empty × 4]
let arr2 = [4];            // [4]
for(let k in arr1){
    console.log(k);
}  // undefined
for(let k in arr2){
    console.log(k);
}  // 0

2.应用数组

2.1 简朴应用

猎取数组指定位置的值：

let a = [1,2,5];
a[0];  // 1
a[2];  // 5
a[3];  // undefined

猎取数组长度：

let a = [1,2,5];
a.length;    // 3
a["length"]; // 3

设置数组指定位置的值：

let a = [1,2,5];
a[0] = 9;
a[2] = 99;
a[3] = 999;

2.2 明白数组length

• 数组的索引值是从0最先，即上面数组索引0的是1,索引1的值是2，顺次下去。
• 数组length永久返回的是数组末了一个元素的索引加1。
• 可经由过程arr.length = 0来清空数组。
• 可经由过程arr.length = len来设置数组长度。

2.3 遍历数组

遍历数组就是以某种要领处置惩罚数组的每一个元素，简朴以下：

• 应用for轮回：

let arr = ["pingan", "leo", "robin"];
for (let i = 0; i<arr.length; i++){
    // 处置惩罚元素的操纵
    console.log(`第${i}个元素是：${arr[i]}；`)
}
// 第0个元素是：pingan；
// 第1个元素是：leo；
// 第2个元素是：robin；

• 应用for...in：

let arr = ["pingan", "leo", "robin"];
for(let i in arr){
    console.log(`第${i}个元素是：${arr[i]}；`)
}
// 第0个元素是：pingan；
// 第1个元素是：leo；
// 第2个元素是：robin；

• 应用forEach：

arr.forEach(callback) 吸收一个回调要领。
callback(val, index, array) : 吸收三个参数：

* `val` : 当前处置惩罚的元素；   
* `index` : 当前处置惩罚的元素的索引；   
* `array` : 正在处置惩罚的数组；   

可参考MDN Array.prototype.forEach 的细致引见。

let arr = ["pingan", "leo", "robin"];
arr.forEach(function(val, i, array){
    console.log(`第${i}个元素是：${val}；`)
})

3. 数组要领（接见和修正）

可参考W3school JavaScript Array 对象 的细致引见。

3.1 concat()

衔接两个或更多的数组，并返回一个新数组。

• 语法:

arr.concat(a1, a2, ..., an);

• 参数:

arr：目的数组；
a1,a2,...,an：须要兼并的元素；

let a1 = [1,2,3];
let a2 = [9,99,999];
let a = a1.concat(a2);
// [1, 2, 3, 9, 99, 999]

3.2 join()

应用指定分开符，衔接两个或多个数组的元素，返回一个字符串。

• 语法:

arr.join(sep);

• 参数:

arr：目的数组；
sep：衔接的分开符，默许值为“,”；

let arr = ["pingan", "leo", "robin"];
arr.join();    // "pingan,leo,robin"
arr.join("");  // "pinganleorobin"
arr.join(","); // "pingan,leo,robin"

3.3 pop()和push()

• pop(): 删除并返回数组末了一个元素，转变原数组。
• push(item): 向数组末端增加一个或多个元素，转变原数组，返回新的数组长度。

轻易影象和明白：两个都是从数组末端操纵，pop()是删除末了一个元素，push()是向末了一名增加新的元素。

let arr = ["pingan", "leo"];
let a1 = arr.pop();              // "leo"
let a2 = arr.push("robin","hi"); // 3
arr;   // ["pingan", "robin", "hi"]

3.4 shift()和unshift()

• shift(): 删除并返回数组第一个元素，转变原数组。
• unshift(item): 向数组头部增加一个或多个元素，转变原数组，返回新的数组长度。

轻易影象和明白：两个都是从数组头部操纵，shift()是删除第一个元素，unshift()是向第一名增加新的元素。

let arr = ["pingan", "leo"];
let a1 = arr.shift();               // "pingan"
let a2 = arr.unshift("robin","hi"); // 3
arr;   // ["robin", "hi", "leo"]

3.5 reverse()

倒置数组中元素的递次，转变原数组。

let arr = [1, 2, 3, 4];
arr.reverse();  // [4, 3, 2, 1]

3.6 slice()

用于提取数组中一个片断，作为新数组返回。
slice(start[,end]): 吸收2个参数：

• start: 必须，指定肇端索引，若负数则从数组末了最先算起，-1为倒数第一名，-2为倒数第二位，以此类推。
• end： 可选，指定完毕索引，若没传则示意到数组完毕。

注重：
end如有指定的话，是不包括end索引上的值。

let arr = [1, 2, 3, 5, 6];
let a1 = arr.slice(2);    // [3, 5, 6]
let a2 = arr.slice(2,3);  // [3]

3.7 splice()

从数组中删除指定索引最先的项目，然后返回被删除的项目。

• 语法：

arr.splice(index, num, a1, a2,...,an);

• 参数：

index: 必须，肇端位置的索引，若负数则从数组末了最先算起；
num：必须，删除的数目，若为0则不删除；
a1,a2,...an：可选，为数组增加的元素；

let arr = [1, 2, 3, 4];
let a = arr.splice(1, 2, "hi", "leo");
// a =>  [2, 3]
// arr =>  [1, "hi", "leo", 4]

3.8 sort()

对数组的元素举行排序，转变原数组。
可接受一个回调要领作为比较函数，来决议排序体式格局。
比较函数应当具有两个参数 a 和 b，返回值以下：
若 a 小于 b，在排序后的数组中 a 应当出现在 b 之前，则返回一个小于 0 的值。
若 a 即是 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

let a1 = [1,3,6,9,10];
a1.sort(); // [1, 10, 3, 6, 9]
a1.sort(function(a,b){
    return a > b ? 1 : a < b ? -1 : 0;
})         // [1, 3, 6, 9, 10]

3.9 indexOf()和lastIndexOf()

二者都是在数组搜刮指定元素，只是indexOf()返回的是搜刮到的第一个元素的索引，而lastIndexOf()返回的是搜刮到的末了一个元素的索引。
语法：
indexOf(ele[,start])和lastIndexOf(ele[,start]);
参数：

• ele: 须要搜刮的元素。
• start: 最先搜刮的索引。

let arr = ["hh1", "hh2", "hh2", "hh2", "hh3", "hh4"];
let a1 = arr.indexOf("hh2");      // 1
let a2 = arr.lastIndexOf("hh2");  // 3
let a3 = arr.indexOf("hh2",2);    // 2

4. 数组要领（迭代）

以下是ES6范例新增的数组要领：

可参考MDN Array 的细致引见。

4.1 forEach()

对数组的每一个元素实行一次供应的函数。

语法：
arr.forEach(callback)。

参数：
callback(val, index, arr) : 须要实行的函数，吸收三个参数：

• val : 正在处置惩罚的当前元素;
• index : 可选，正在处置惩罚的当前元素的索引;
• arr : 可选，正在操纵的数组;

let a = [1,3,5,7];
a.forEach(function(val, index, arr){
    arr[index] = val * 2
})
a ; // [2, 6, 10, 14]

4.2 every()

测试数组的一切元素是不是都经由过程了指定函数的测试。
语法：
arr.every(callback)。

参数：
callback(val, index, arr) : 须要实行的函数，吸收三个参数：

• val : 正在处置惩罚的当前元素;
• index : 可选，正在处置惩罚的当前元素的索引;
• arr : 可选，正在操纵的数组;

返回值：
若都经由过程返回true，不然返回false。

let a = [1, "", "aa", 13, 6];
let res = a.every(function(val, index, arr){
    return typeof val == "number";
})
res;// false

let b = [1, 2, 3];
let r = b.every(function(val, index, arr){
    return typeof val == "number";
})
r;  // true

4.3 some()

测试数组中的某些元素是不是经由过程由供应的函数完成的测试。
语法：
arr.some(callback)。

参数：
callback(val, index, arr) : 须要实行的函数，吸收三个参数：

• val : 正在处置惩罚的当前元素;
• index : 可选，正在处置惩罚的当前元素的索引;
• arr : 可选，正在操纵的数组;

返回值：
如有一个经由过程返回true，不然返回false。

let a = [1, "", "aa", 13, 6];
let res = a.some(function(val, index, arr){
    return typeof val == "number";
})
res;// true

let b = [1, 2, 3];
let r = b.some(function(val, index, arr){
    return typeof val == "number";
})
r;  // true

4.4 filter()

将一切在过滤函数中返回 true 的数组元素放进一个新数组中并返回。

语法：
arr.filter(callback)。

参数：
callback(val, index, arr) : 须要实行的函数，吸收三个参数：

• val : 正在处置惩罚的当前元素;
• index : 可选，正在处置惩罚的当前元素的索引;
• arr : 可选，正在操纵的数组;

返回值：
一个返回经由过程测试的元素的数组，若都没有则返回空数组。

let a = [1, "", "aa", 13, 6];
let res = a.filter(function(val, index, arr){
    return typeof val == "number";
})
res;//[1, 13, 6]

4.5 map()

传入一个操纵函数，对每一个元素实行此要领，并返回一个实行后的数组。

语法：
arr.map(callback)。

参数：
callback(val, index, arr) : 须要实行的函数，吸收三个参数：

• val : 正在处置惩罚的当前元素;
• index : 可选，正在处置惩罚的当前元素的索引;
• arr : 可选，正在操纵的数组;

返回值：
一个新数组，每一个元素都是回调函数的结果。

let a = [1, 3, 5];
let b = a.map(function(val, index, arr){
    return val + 2;
})
b; //[3, 5, 7]

5. 数组的拓展(ES6)

5.1 拓展运算符

拓展运算符应用(...)，相似rest参数的逆运算，将数组转为用(,)分开的参数序列。

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

拓展运算符重要应用在函数挪用。

function f (a, b){
    console.log(a, b);
}
f(...[1, 2]); // 1 2

function g (a, b, c, d, e){
    console.log(a, b, c, d, e);
}
g(0, ...[1, 2], 3, ...[4]); // 0 1 2 3 4

若拓展运算符背面是个空数组，则不发生结果。

[...[], 1]; // [1]

替换apply要领

// ES6之前
function f(a, b, c){...};
var a = [1, 2, 3];
f.apply(null, a);

// ES6以后
function f(a, b, c){...};
let a = [1, 2, 3];
f(...a);

// ES6之前
Math.max.apply(null, [3,2,6]);

// ES6以后
Math.max(...[3,2,6]);

拓展运算符的应用

• (1)复制数组：

一般我们直接复制数组时，只是浅拷贝，假如要完成深拷贝，能够应用拓展运算符。

// 一般状况 浅拷贝
let a1 = [1, 2];
let a2 = a1; 
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]

// 拓展运算符 深拷贝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 作用雷同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]

• (2)兼并数组：

注重，这里兼并数组，只是浅拷贝。

let a1 = [1,2];
let a2 = [3];
let a3 = [4,5];

// ES5 
let a4 = a1.concat(a2, a3);

// ES6
let a5 = [...a1, ...a2, ...a3];

a4[0] === a1[0]; // true
a5[0] === a1[0]; // true

• (3)与解构赋值连系：

与解构赋值连系天生数组，然则应用拓展运算符须要放到参数末了一个，不然报错。

let [a, ...b] = [1, 2, 3, 4]; 
// a => 1  b => [2,3,4]

let [a, ...b] = [];
// a => undefined b => []

let [a, ...b] = ["abc"];
// a => "abc"  b => []

5.2 Array.from()

将 类数组对象 和 可遍历的对象，转换成真正的数组。

// 类数组对象
let a = {
    '0':'a',
    '1':'b',
    length:2
}
let arr = Array.from(a);

// 可遍历的对象
let a = Array.from([1,2,3]);
let b = Array.from({length: 3});
let c = Array.from([1,2,3]).map(x => x * x);
let d = Array.from([1,2,3].map(x => x * x));

5.3 Array.of()

将一组数值，转换成数组，填补Array要领参数差别致使的差别。

Array.of(1,2,3);    // [1,2,3]
Array.of(1).length; // 1

Array();       // []
Array(2);      // [,] 1个参数时，为指定数组长度
Array(1,2,3);  // [1,2,3] 多于2个参数，构成新数组

5.4 find()和findIndex()

find()要领用于找出第一个相符前提的数构成员，参数为一个回调函数，一切成员顺次实行该回调函数，返回第一个返回值为true的成员，假如没有一个相符则返回undefined。

[1,2,3,4,5].find( a => a < 3 ); // 1

回调函数吸收三个参数，当前值、当前位置和原数组。

[1,2,3,4,5].find((value, index, arr) => {
    // ...
});

findIndex()要领与find()相似，返回第一个相符前提的数构成员的位置，假如都不相符则返回-1。

[1,2,3,4].findIndex((v,i,a)=>{
    return v>2;
}); // 2

5.5 fill()

用于用指定值添补一个数组，一般用来初始化空数组，并抹去数组中已有的元素。

new Array(3).fill('a');   // ['a','a','a']
[1,2,3].fill('a');        // ['a','a','a']

而且fill()的第二个和第三个参数指定添补的肇端位置和完毕位置。

[1,2,3].fill('a',1,2);//  [1, "a", 3]

5.6 entries(),keys(),values()

重要用于遍历数组，entries()对键值对遍历，keys()对键名遍历，values()对键值遍历。

for (let i of ['a', 'b'].keys()){
    console.log(i)
}
// 0
// 1

for (let e of ['a', 'b'].values()){
    console.log(e)
}
// 'a'
// 'b'

for (let e of ['a', 'b'].entries()){
    console.log(e)
}
// 0 'a'
// 1 'b'

5.7 includes()

用于示意数组是不是包括给定的值，与字符串的includes要领相似。

[1,2,3].includes(2);     // true
[1,2,3].includes(4);     // false
[1,2,NaN].includes(NaN); // true

第二个参数为肇端位置，默以为0，假如负数，则示意倒数的位置，假如大于数组长度，则重置为0最先。

[1,2,3].includes(3,3);    // false
[1,2,3].includes(3,4);    // false
[1,2,3].includes(3,-1);   // true
[1,2,3].includes(3,-4);   // true

5.8 flat(),flatMap()

flat()用于将数组一维化，返回一个新数组，不影响原数组。
默许一次只一维化一层数组，若需多层，则传入一个整数参数指定层数。
若要一维化一切层的数组，则传入Infinity作为参数。

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

flatMap()是将原数组每一个对象先实行一个函数，在对返回值构成的数组实行flat()要领，返回一个新数组，不转变原数组。
flatMap()只能睁开一层。

[2, 3, 4].flatMap((x) => [x, x * 2]); 
// [2, 4, 3, 6, 4, 8] 

6. 数组的拓展(ES7)

6.1 Array.prototype.includes()要领

includes()用于查找一个值是不是在数组中，假如在返回true，不然返回false。

['a', 'b', 'c'].includes('a');     // true
['a', 'b', 'c'].includes('d');     // false

includes()要领吸收两个参数，搜刮的内容和最先搜刮的索引，默许值为0，若搜刮值在数组中则返回true不然返回false。

['a', 'b', 'c', 'd'].includes('b');      // true
['a', 'b', 'c', 'd'].includes('b', 1);   // true
['a', 'b', 'c', 'd'].includes('b', 2);   // false

与indexOf要领对照，下面要领结果雷同：

['a', 'b', 'c', 'd'].indexOf('b') > -1;  // true
['a', 'b', 'c', 'd'].includes('b');      // true 

includes()与indexOf对照：

• includes比拟indexOf更具语义化，includes返回的是是不是存在的详细结果，值为布尔值，而indexOf返回的是搜刮值的下标。
• includes比拟indexOf更正确，includes以为两个NaN相称，而indexOf不会。

let a = [1, NaN, 3];
a.indexOf(NaN);     // -1
a.includes(NaN);    // true

别的在推断+0与-0时，includes和indexOf的返回雷同。

[1, +0, 3, 4].includes(-0);   // true
[1, +0, 3, 4].indexOf(-0);    // 1

参考材料

1.MDN 索引鸠合类
2.MDN 数组对象
3.W3school JavaScript Array 对象

本部分内容到这完毕

迎接关注微信民众号【前端自习课】天天清晨，与您一同进修一篇优异的前端手艺博文 .