第5章 数组
创建数组
- 创建只含一个元素的数组时，只能使用字面量及 Array.of 的方式
- 构造函数及数组对象传入一个参数时表示空数组的长度
使用数组字面量创建数组
js
let arr1 = []; // 使用数组字面量创建空的数组
let arr2 = ['张三', '李四', '王五']; // 使用数组字面量创建带初始值的数组使用 Array.of 创建
js
let arr3 = Array.of(); // 创建一个新的空数组
let arr4 = Array.of(2, 3); // 创建一个含2，3两个元素的数组使用构造函数创建数组
js
let arr5 = new Array(); // 创建一个新的空数组
let arr6 = new Array(2); // 创建一个长度为2的数组
let arr7 = new Array(2, 3); // 创建一个含2，3两个元素的数组使用数组对象创建
js
let arr8 = Array(); // 创建一个新的空数组
let arr9 = Array(2); // 创建一个长度为2的数组
let arr10 = Array(2, 3); // 创建一个含2，3两个元素的数组访问数组
js
let arr = [1, 2, 3];
console.log(arr.length); // 打印数组的长度
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3
console.log(arr[3]); // undefined检测数组
- instanceof 运算符
- Array.isArray(参数)
js
let arr = [];
let obj = {};
arr instanceof Array; // true
obj instanceof Array; // false
Array.isArray(arr); // true
Array.isArray(obj); // false获取索引
indexOf()返回第一个满足条件的数组元素的索引号lastIndexOf()返回最后一个满足条件的数组元素的索引号- 查找不到时 返回值为-1
js
let arr = [1, 2, 2, 2, 3];
arr.indexOf(2); // 1
arr.indexOf(2, 2)); // 2 （从第三个开始查找）
arr.lastIndexOf(2); // 3添加元素
添加到末尾
js
// 直接使用下标的方式添加
let arr = [1, 2, 3];
arr.length = 4; // 修改数组的长度
arr[3] = 4; // 在最后增加一个数字添加到首尾
- 使用数组内置方法
push()与unshift() push()与unshift()方法返回新数组的长度
js
let arr = [1, 2, 3];
arr.push(4); // 4 arr = [ 1, 2, 3, 4 ]
arr.unshift(0); // 5 arr = [ 0, 1, 2, 3, 4 ]添加到任意位置
- 使用 splice 函数
- 第 2 个参数设置为 0，可达到只添加，不删除的效果
js
let arr = [1, 2, 3];
arr.splice(2, 0, 4, 5, 6); // arr = [ 1, 2, 4, 5, 6, 3 ]删除元素
删除最后元素
js
// 直接修改数组的长度
let arr = [1, 2, 3];
arr.length = 2; // 末尾的3被删除删除首尾元素
- 使用数组内置方法
pop()与shift() pop()与shift()方法返回删除的元素
js
let arr = [1, 2, 3];
arr.pop(); // 3 arr = [ 1, 2 ]
arr.shift(); // 1 arr = [ 2 ]删除任意位置的元素
- 使用 splice 函数
- 第 1 个参数表示删除的位置，第 2 个参数表示删除的个数
- 第 3 个及后面的参数为添加的元素
js
let arr = [1, 2, 3];
arr.splice(1, 1); // arr = [1, 3]
arr.splice(1, 1, 6, 7, 8); // arr = [1, 6, 7, 8]删除指定元素
js
// 遍历数组
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
newArr[newArr.length] = arr[i];
}
}数组转换为字符串
toString()
join(分隔符) 默认分隔符为
,
js
let arr = [1, 2, 3];
arr.toString(); // 1,2,3
arr.join(); // 1,2,3
arr.join(''); // 123
arr.join('-'); // 1-2-3
arr.join('&'); // 1&2&3数组反转
使用内置方法 reverse()
reverse()方法是一个原地操作reverse()方法同时可用于反转字符串
js
let arr = [1, 2, 3];
console.log(arr.reverse()); // [3, 2, 1]
console.log(arr); // [3, 2, 1]
// split 将字符串转换为数组，reverse 反转数组，join 将数组拼接成字符串
console.log('hello'.split('').reverse().join('')); // olleh
//自己实现
var arr = ['red', 'green', 'blue', 'pink', 'purple']
var newArr = []
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i]
}
console.log(newArr)遍历反转
js
let arr = ['red', 'green', 'blue', 'pink', 'purple'];
let newArr = [];
for (let i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}数组排序
使用内置方法 sort()
sort()方法是一个原地操作sort()默认为升序排列sort()中可以接受一个回调函数compareFn(a, b)- 如果
compareFn(a, b)大于 0 ， b 会被排列到 a 之前（调换位置） - 如果
compareFn(a, b)小于 0 ，那么 a 会被排列到 b 之前（不调换位置） - 如果
compareFn(a, b)等于 0 ， a 和 b 的相对位置不变
- 如果
js
let arr = [1, 5, 3, 2, 4];
arr.sort(); // arr = [1, 2, 3, 4, 5]
// sort()实现降序排列
arr.sort((a, b) => {
if (a > b) {
return -1;
} else if (a < b) {
return 1;
} else {
return 0;
}
});
// 以上代码可简写为
arr.sort((a, b) => a - b); // 升序
arr.sort((a, b) => b - a); // 降序冒泡排序
js
let arr = [1, 5, 3, 2, 4];
let temp;
// 循环 arr.length 次
for (let i = 0; i < arr.length; i++) {
// 每次循环找出最大值 放到最后
for (let j = 0; j < arr.length - i; j++) {
// 每次循环将较大值 放在后面
if (arr[j] > arr[j + 1]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}数组连接
- 通过
concat()方法可以连接数组 concat()方法不是原地操作
js
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = arr1.concat(arr2); // arr = [1, 2, 3, 4, 5, 6]数组裁切
- 通过
slice()方法可以实现数组的裁切 slice()方法不是原地操作
注意点
- 只有一个参数时，为该索引开始到数组结束
- 有两个参数时，前闭后开
- 参数为负数时，表示从后往前数
js
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.slice(1); // arr1 = [ 2, 3, 4, 5 ]
let arr2 = arr.slice(1, 3); // arr2 = [ 2, 3 ]
let arr3 = arr.slice(1, -1); // arr3 = [ 2, 3, 4 ]数组解构
- 解构赋值可以将数组中的元素 快速赋值给多个变量
- 常用于函数返回一个数组时，通过解构操作符赋值
- 可以配合剩余运算符使用
- ...rest 用于取出解构后剩余的数组元素
- 将多个独立的项合并到一个数组
js
let arr = [1, 2, 3, 4, 5];
{
// 全部取出
let [a, b, c, d, f] = arr;
console.log(a, b, c, d, f); // 1 2 3 4 5
}
{
// 取出前2个和剩余的
let [a, b, ...rest] = arr;
console.log(a, b); // 1,2
console.log(rest); // [ 3, 4, 5 ]
}
{
// 取出中间的（第三个）
let [, , a] = arr;
console.log(a); // 3
}数组遍历
for 循环
js
let arr = [1, 3, 5, 7, 9];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}for...in 遍历
- for...in 遍历会得到数组的索引 (key)
js
let arr = [1, 3, 5, 7, 9];
for (let index in arr) {
console.log(arr[index]);
}for...of 遍历
- for...of 遍历会得到数组的值 (value)
js
let arr = [1, 3, 5, 7, 9];
for (let item of arr) {
console.log(item);
}forEach 遍历
- forEach 接受一个回调函数
- 回调函数有三个参数，分别是元素、索引、数组本身 （item, index, arr）
- forEach 不改变原数组，且无返回值
js
let arr = [1, 3, 5, 7, 9];
arr.forEach((item, index, arr) => {
console.log(item, index, arr);
});map 遍历
- map 与 forEach 类似，接受一个回调函数
- map 会返回一个新的数组
js
let arr = [1, 3, 5, 7, 9];
let mappedArr = arr.map((ele) => ele * 2);
console.log(arr); // [ 1, 3, 5, 7, 9 ]
console.log(mappedArr); // [ 2, 6, 10, 14, 18 ]reduce 累加
reduce 方法可以实现数组累加
reduce 接受一个回调函数，有四个参数
必需：total 初始值或计算结束的返回值 currentValue 当前元素
可选：currentIndex 当前元素索引 arr 当前元素所属的数组对象
可选：initialValue 函数的初始值
js
let arr = [1, 2, 3, 4];
let result = arr.reduce((total, currentValue) => total + currentValue, 0);
console.log(result); // 10filter 过滤
- filter 方法可以实现数组过滤
- filter 会返回一个新数组，其中包括符合条件的元素
- 接受的参数与 forEach 和 map 类似
js
let arr = [1, 2, 3, 4, 5, 6];
let filteredArr = arr.filter((ele) => ele > 3);
console.log(filteredArr); // [ 4, 5, 6 ]every 测试
- every 检测所有元素 全部满足返回 true
- 接受的参数与 forEach 和 map 类似
js
let arr = [1, 2, 3, 4, 5, 6];
let result1 = arr.every((ele) => ele > 0);
let result2 = arr.every((ele) => ele > 2);
console.log(result1); // true
console.log(result2); // falsesome 测试
- some 检测部分元素 一个满足就返回 true
- 接受的参数与 forEach 和 map 类似
js
let arr = [1, 2, 3, 4, 5, 6];
let result = arr.some((ele) => ele > 2);
console.log(result); // true
预览: