数组
数组（array）是一个有序的数据集合，我们可以通过数组名称和索引进行访问。
创建数组
- 使用内置
Array构造函数 - 使用数组字面量
const arr1 = new Array('A', 2, 'good');
const arr2 = [3, 'c', 547];
注意 new Array 的其他情况：
const arr = new Array(2); // 长度为2，没有任何元素的数组
const arr = Array(2); // 同上
// 下面也有同样效果
const arr = [];
arr.length = 2;
所以
arr = [42];与arr = new Array(42);效果是不一样的！
Array(N)这里 N 必须是整数。
const arr = new Array(9.3); // RangeError: invalid array length
稀疏数组
const arr = [,,,,]; // arr.length为4，浏览器会自动忽略最后一个逗号
数组元素的添加和删除
- 直接赋值
const arr = []; arr[0] = 1; arr[1] = 2; console.log(arr); // [1, 2] -
delete删除值而不会改变数组长度const arr = [1, 2, 3, 4]; delete arr[2]; console.log(arr); // [1, 2,,4] -
push()在数组末尾添加元素 -
unshift()在数组开头添加元素 -
pop()在数组末尾删除元素 -
shift()在数组开头删除元素const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] arr.unshift(0); // [0, 1, 2, 3, 4] arr.pop(); // [0, 1, 2, 3] arr.shift(); // [1, 2, 3] -
splice()在数组指定位置插入或删除元素，并返回被删除的内容const arr = [1, 2, 3, 4, 5, 6]; // 一个参数时，表示从数组的哪里（下标）开始删除元素 let n = arr.splice(4); console.log(n); // [5, 6] console.log(arr); // [1, 2, 3, 4] // 第二个参数表示删除几个元素，0表示不删除元素 n = arr.splice(2, 1); console.log(n); // [3] console.log(arr); // [1, 2, 4] // 第三个参数开始，表示添加到数组的元素 n = arr.splice(2, 0, 'a', 'b') console.log(n); // [] console.log(arr); // [1, 2, 'a', 'b', 4] // 可以使用展开运算符 const k = [7, 8, 9]; n = arr.splice(2, 2, ...k); console.log(n); // ['a', 'b'] console.log(arr); // [1, 2, 7, 8, 9, 4]
遍历数组
-
forEach()为每个元素调用指定的函数，不改变原数组const arr = [1, 2, 3, 4]; let sum = 0; arr.forEach(val => { sum += val; }) console.log(arr); // [1, 2, 3, 4] console.log(sum); // 10 -
map()为每个元素调用指定的函数，并返回一个数组，不改变原数组const arr = [1, 2, 3, 4]; var arr2 = []; arr2 = arr.map(val => { return val * 2; }) console.log(arr); // [1, 2, 3, 4] console.log(arr2); // [2, 4, 6, 8] -
forconst arr = [1, 2, 3, 4]; for(let i = 0; i < arr.length; i++) { console.log(arr[i]) } // 1,2,3,4 -
for...inconst arr = [1, 2, 3, 4]; for(let i in arr) { console.log(arr[i]) } // 1,2,3,4 -
for...ofconst arr = [1, 2, 3, 4]; for(let item of arr) { console.log(item) } // 1,2,3,4
注意
for...in与for...of的区别
for...in循环出来的是key
for...of循环出来的是value
检验数组
-
every()检测数组所有元素是否都符合指定条件，如果有一个元素不满足条件，则返回false并停止检索。如果所有元素都满足条件，则返回trueconst arr = [13, 23, 33, 43]; arr.every(val => { return val > 10; }) // true arr.every(val => { return val < 30; }) // false -
some()检测数组所有元素是否都符合指定条件，如果有一个元素满足条件，则返回true并停止检索。如没有满足条件的元素，则返回falseconst arr = [13, 23, 33, 43]; arr.some(val => { return val > 30; }) // true arr.some(val => { return val > 100; }) // false -
includes()判断数组是否包含一个指定的值，有返回true，否则返回falseconst arr = [13, 23, 33, 43]; arr.includes(23); // true arr,includes(24); // false
数组查找
-
filter()查找数组中符合条件的所有元素，创建并返回一个新数组const arr = [13, 23, 33, 43]; arr.filter(val => { return val < 30; }) // [13, 23] -
find()返回指定数组中满足条件的第一个元素，否则返回undefinedconst arr = [13, 23, 33, 43]; arr.find(val => { return val > 30; }) // 33 arr.find(val => { return val > 100; }) // undefined -
findIndex()返回指定数组中满足条件的第一个元素的索引，否则返回-1const arr = [13, 23, 33, 43]; arr.findIndex(val => { return val > 30; }) // 2 arr.findIndex(val => { return val > 100; }) // -1 -
indexOf()搜索数组中的元素，并返回它首次出现位置的索引，没有则返回-1const arr = [13, 23, 33, 33, 33, 43]; arr.indexOf(33); // 2 arr.indexOf(53); // -1 -
lastIndexOf()搜索数组中的元素，并返回它最后出现位置的索引，没有则返回-1const arr = [13, 23, 33, 33, 33, 43]; arr.lastIndexOf(33); // 4 arr.lastIndexOf(53); // -1
其他数组操作
-
concat()连接两个或更多的数组，并返回结果，不改变原数组const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = []; arr3 = arr1.concat(arr2, 7, 8); console.log(arr1); //[1, 2, 3] console.log(arr2); //[4, 5, 6] console.log(arr3); //[1, 2, 3, 4, 5, 6, 7, 8] -
copyWithin()从数组的指定位置拷贝元素到数组的另一个指定位置，并返回结果，会改变原数组内容，但不改变长度length[1, 2, 3, 4].copyWithin(2); // [1, 2, 1, 2] [1, 2, 3, 4].copyWithin(2, 1); // [1, 2, 2, 3] [1, 2, 3, 4].copyWithin(2, 0); // [1, 2, 1, 2] [1, 2, 3, 4].copyWithin(2, 0, 1); // [1, 2, 1, 4] [1, 2, 3, 4].copyWithin(-1); // [1, 2, 3, 1] [1, 2, 3, 4].copyWithin(-2, -3, -1); // [1, 2, 2, 3] -
fill()使用一个固定值来填充数组[1, 2, 3].fill(4); // [4, 4, 4] [1, 2, 3].fill(4, 1); // [1, 4, 4] [1, 2, 3].fill(4, 1, 2); // [1, 4, 3] [1, 2, 3].fill(4, -3, -2); // [4, 2, 3] -
from()从一个类似数组或可迭代对象中创建一个新数组Array.form('foo'); // ['f', 'o', 'o'] Array.form([1, 2, 3], x => x + x); // [2, 4, 6] // 可以用来转换 `arguments` 或获取到的 DOM List 等类数组对象 function fn() { let arr = Array.from(arguments); console.log(arguments); console.log(arr); } fn(21, 31, 41); // { 0: 21, 1: 31, 2: 41 } // [21, 31, 41] -
join()将数组中所有元素转换为一个字符串['f', 'o', 'o'].join(''); // 'foo' ['f', 'o', 'o'].join('+'); // 'f+o+o' -
reduce()接收一个函数作为累加器，数组中每个值（从左至右）开始缩减，最终计算为一个值[1, 2, 3, 4].reduce((sum, val) => { return sum += val; }) // 10 // 可以设置累加器初始值 [1,2,3,4].reduce((sum, val) => { return sum += val; }, 10) // 20 -
reduceRight()与reduce()作用相同，只是从右向左计算。 -
reverse()翻转数组const arr = [1, 2, 3]; arr.reverse(); console.log(arr); // [3, 2, 1] -
slice()选取数组的一部分，并返回一个新数组，不改变原数组const arr = [1, 2, 3, 4, 5]; arr.slice(1); // [2, 3, 4, 5] arr.slice(1, 3); // [2, 3] arr.slice(1, -1); // [2, 3, 4] arr.slice(-2); // [4, 5] arr.slice(-4, 3); // [2, 3] arr.slice(-4, -2); // [2, 3] arr.sclie(-2, 1); // [] -
sort()对数组元素进行排序const arr = [2, 5, 1, 9, 3]; arr.sort(); console.log(arr); // [1, 2, 3, 5, 9]sort()方法默认按Unicode位点进行排序const arr= ['02', '31', '1', '12', '416', '42', '304']; arr.sort(); console.log(arr); // [ '02', '1', '12', '304', '31', '416', '42' ]sort()支持一个方法：
sort((a, b) => a - b)- 回调函数返回值小于等于 0，a 在 b 前；
- 回调函数返回值大于 0，b 在 a 前；
const arr= ['02', '31', '1', '12', '416', '42', '304']; arr.sort((a, b) => { return a - b; }) console.log(arr); // [ '1', '02', '12', '31', '42', '304', '416' ] -
toString()将数组转化成字符串const arr = [1, 2, 3]; let str = ''; str = arr.toString(); console.log(str); // '1,2,3' console.log(arr); // [1, 2, 3]
多维数组
数组里包含数组，就是一个多维数组
// 创建一个多维数组
const arr = [];
for (let i = 0; i < 2; i++) {
arr[i] = [];
for (let j = 0; j < 2; j++) {
arr[i].push(i + j);
}
}
console.log(arr); // [[0, 1], [1, 2]]
