本文介绍Javascript中数组的相关知识。
数组
先介绍添加数据项
const numbers = [3, 4];
numbers.push(5, 6);
// 插在后面
numbers.unshift(1, 2);
// 插在前面
numbers.splice(2, 0, “a”, “b”, “c”);
// 插在中间,第一个参数2表示是插入的位置，
// 0表示删除个数，后面表示插入项
console.log(numbers);
// 输出[1, 2, ‘a’, ‘b’, ‘c’, 3, 4, 5, 6]
查找数组项
const numbers = [1, 2, 3, 1, 4];
numbers.indexOf(1);
// 查找数据项 1 在数组中的位置，这里是0
numbers.indexOf(1, 2);
// 查找数据项 1 在数组中的位置，从位置2开始查，输出3
numbers.lastIndexOf(1)
// 查找最后一个 1的位置，输出3
numbers.includes(1)
// 查找是否存在1，true
查找对象项
数组项如果是对象，用includes将是无效的。
要用find方法了。
在google搜索 Javascript array find可以查看详细用法。
const courses = [
{ id: 1, name: “a” },
{ id: 2, name: “b” },
];
const course = courses.find(function (course) {
return course.name === “a”;
});
// find方法里的是谓词函数
console.log(course);
还有一个方法是findIndex，它将返回序号。
箭头函数
箭头函数可以简化前面的谓词函数，这在ES6中才有。
当一个函数作为另一个函数的参数时，是箭头函数的常用场景。
…
const course = courses.find(course=>course.name===”a”);
// 参数只有1个可以不加括号（cource），0个用（），2个参数用（a,b）
// => 是箭头函数的符号
// 只有一个返回语句可以省略 return
…
删除数组项
与添加数组项正好对应。
const numbers=[1,2,3,4]
numbers.pop()
// 删除最后项,为[1,2,3]
numbers.shift()
// 删除最前面，为[2,3,4]
numbers.splice(2,2)
// 与前面插入的方法一致，表示从位置2开始，删除2个数组项
// 为[1,2]
清空数组
let numbers = [1, 2, 3, 4];
let another = numbers;
// 清除数组有4种方法
// 第1种：
numbers = [];
// 第1种方法实际数组还存在内存，因为有anothe的引用，不能被内存清除机制清除
// 第二种：
numbers.length = 0;
// 第三种
numbers.splice(0, numbers.length);
// 第四种
while (numbers.length > 0) numbers.pop();
一般建议用第2种，第1种也可以。
组合和切割数组
组合：concat
切割：slice
对原数组不影响。
const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = first.concat(second);
// 组合，[1, 2, 3, 4, 5, 6]
const slice = combined.slice();
// 复制，[1, 2, 3, 4, 5, 6]
const slice2 = combined.slice(2);
// 从位置2开始切割至最后 [3, 4, 5, 6]
const slice3 = combined.slice(2, 4);
// 从位置2开始切割至位置4（不包括位置4），[3, 4]
拆分操作符
操作符：…
三个点的拆分操作符从ES6开始才有。
可以简化前面的操作。
const combined = […first, “a”, …second, “b”];
console.log(combined);
// 输出[1, 2, 3, ‘a’, 4, 5, 6, ‘b’]
const copy = […combined];
// 复制
遍历数组
除了for…in，for…of可以遍历外，还有foreach方法。
const numbers = [1, 2, 3];
numbers.forEach(function (number) {
console.log(number);
});
谓词函数也可以箭头函数代替。
numbers.forEach((number) => console.log(number));
连接数组元素
用join方法，相对于split方法。
const numbers = [1, 2, 3];
const joined = numbers.join(“,”);
console.log(joined);
// 合成字符串 1,2,3
数组排序
const numbers = [2, 4, 1, 3];
console.log(numbers.sort());
// 正序
console.log(numbers.reverse());
// 倒序
sort和reverse只对值类型有效，数组项是对象的话将失效。
可以用谓词函数解决。
const courses = [
{ id: 1, name: “Node.js” },
{ id: 2, name: “Javascript” },
];
courses.sort(function (a, b) {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
});
检查数组元素
有every，some方法，只有新版JavaScript才有。有些旧浏览器不支持。
every：检查每个数组项是否都符合条件；
some：检查是否至少一个数组项符合条件。
const numbers = [1, -1, 2, 3];
const allPositive = numbers.every(function (value) {
return value >= 0;
});
// false
const atLeastOnePositive = numbers.some((value) => value >= 1);
// true
筛选数组
用的是filter方法，也用到谓词函数。
const numbers = [1, -1, 2, 3];
const filterd = numbers.filter(function (n) {
return n >= 0;
});
// 或
const filtered1 = numbers.filter((n) => n >= 0);
数组映射
用的是map方法，将数组中的项映射成其他东西。
map和前面的filter方法都不改变原数组。
…
const items = filtered.map((n) => “<li>” + n + “</li>”);
const html = items.join(“”);
// 默认的连接字符是’,’，这里”表示不用任何字符连接
console.log(html);
// <li>1</li><li>2</li><li>3</li>
可以映射为对象，谓词函数用箭头函数。
…
const items = filtered.map((n) => ({ value: n }));
// 箭头函数后需要加上小括号，否则可能会把对角的大括号解释成函数。
filter和map等这些方法是可以链接的。
const numbers = [1, -1, 2, 3];
const items = numbers
.filter((n) => n >= 0)
.map((n) => ({ value: n }))
.filter((obj) => obj.value > 1)
.map((obj) => obj.value);
统计数组 Reducing an Array
有时我们需要对数组项进行求和，常规方法是用循环累加，比如for…of，也可以用reduce方法，这个方法可以将单个数组缩减成一个值，对象或字符串。
const numbers = [1, -1, 2, 3];
const sum = numbers.reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
// reduce方法第1个参数是回调函数，第2参数为初始值，
// 如果不提供，第1个数组项为初始值
当然，我们也可以用箭头函数来简化。
…
const sum = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue,
0
);
小结
本文介绍了Javascript的数组用法，在实际运用过程中，很多场景是通过新建一个数组来计算，不在原数组中进行。
下一篇计划讲Javascript的函数。