Array
一组有序的数据。通过索引标记,是动态大小的,会随着数据添加而自动增长。
1.创建数组
let colors1 = new Array(); //使用 Array 构造函数
let colors2 = new Array(20); //使用 Array 构造函数,确认数组大小
let colors3 = new Array("red", "blue", "green"); // 使用 Array 构造函数,保存存入的元素
Array 构造函数还有两个 ES6 新增的用于创建数组的静态方法:from()和 of()。from()用于将类数组结构转换为数组实例,而 of()用于将一组参数转换为数组实例。
console.log(Array.from("1234")); // [1, 2, 3, 4] 字符串会被拆分为单字符数组
const m = new Map().set(1, 2)
.set(3, 4);
console.log( Array.from(m)); // [1, 2, 3, 4] 集合 转换成一个新数组
const s = new Set().add(1)
.add(2)
.add(3)
.add(4);
console.log(Array.from(s)); // [1, 2, 3, 4] 集合 转换成一个新数组
const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1);
console.log(a1); // [1, 2, 3, 4]
console.log(a1 === a2); // false 对现有数组执行浅复制
const iter = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
yield 4;
}
};
console.log(Array.from(iter)); // [1, 2, 3, 4] 可以使用任何可迭代对象
function getArgsArray() {
return Array.from(arguments);
}
console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4] arguments 对象可以被轻松地转换为数组
const arrayLikeObject = {
0: 1,
1: 2,
2: 3,
3: 4,
length: 4
};
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]转换带有必要属性的自定义对象
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 替代在 ES6之前常用的 Array.prototype. slice.call(arguments)
2.数组空位
使用数组字面量初始化数组时,可以使用一串逗号来创建空位(hole)。不推荐使用
3.检测数组
Array.isArray()方法,的目的就是确定一个值是否为数组,而不用管它是在哪个全局执行上下文中创建的。
4.迭代器方法
keys()返回数组索引的迭代器,values()返回数组元素的迭代器,而 entries()返回
索引/值对的迭代器。
const a = ["foo", "bar", "baz", "qux"];
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"]]
5.复制和填充方法
批量复制方法 copyWithin()和填充数组方法 fill()都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。使用这个方法不会改变数组的大小。
const nums = [1, 2,3,4, 5];
// 用 5 填充整个数组
console.log(nums.fill(5)); // 5,5,5,5,5
// 用 6 填充索引大于等于 3 的元素
console.log(nums.fill(6, 3)); // 5,5,5,6,6
// 用 7 填充索引大于等于 1 且小于 3 的元素
console.log(nums.fill(7, 1, 3)); // 5,7,7,6,6
const nums = [1, 2,3,4, 5];
// 复制索引 0 开始的内容,插入到索引 3 开始的位置
console.log(nums.copyWithin(3)); // 1,2,3,1,2
// 复制索引 2 开始的内容,插入到索引 0 开始的位置
console.log(nums.copyWithin( 0,2)); // 3,1,2,1,2
// 复制索引 0 开始到索引 3 结束的内容 插入到索引 4 开始的位置
console.log(nums.copyWithin(3,0, 2)); // 3,1,2,3,1
6.转换方法
toLocaleString()方法、toString()方法, valueOf()方法和join()方法
let colors = ["red", "green", "blue"];
console.log(colors.toString()); // red,green,blue
console.log(colors.toLocaleString()); // red,green,blue
console.log(colors.valueOf()); // red,green,blue
console.log(colors.join("||")); // red||green||blue```
7.栈方法
一种限制插入和删除项的数据结构,栈是一种后进先出(LIFO,Last-In-First-Out)的结构。最近添加的项先被删除,提供了 push()和 pop()方法。
let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
count = colors.push("black"); // 再推入一项
let item = colors.pop(); // 取得最后一项
console.log(item); // black
console.log(colors); // red,green
8.队列方法
先进先出(FIFO,First-In-First-Out)形式限制访问。队列在列表末尾添加数据,但从列表开头获取数据。
let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
count = colors.push("black"); // 再推入一项
let item = colors.shift(); // 取得第一项
console.log(item); // red
console.log(colors); // green,black
colors.unshift("red");
console.log(colors); //red,green,black
9.排序方法
对元素重新排序:reverse()和 sort()。reverse()方法就是将数组元素反向排列。
sort()会按照升序重新排列数组元素,即最小的值在前面,最大的值在后面。
let colors = new Array(); // 创建一个数组
let count = colors.push(1, 5); // 推入两项
count = colors.push(4); // 再推入一项
colors.reverse();
console.log(colors); // 4,5,1
colors.sort();
console.log(colors); //1,4,5
10.操作方法
concat()方法可以在现有数组全部元素基础上创建一个新数组。
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 colors3 = colors.concat("yellow", newColors);
console.log(colors3); // ["red", "green", "blue", "yellow", ["black", "brown"]]
// 强制打平类数组对象
let colors4 = colors.concat(moreNewColors);
console.log(colors4); // ["red", "green", "blue", "pink", "cyan"]
splice()方法 在数组中间删除,插入,替换。
let colors = ["red", "green", "blue"];
colors.splice(0,1); // 删除第一个元素
console.log(colors); // green,blue
colors.splice(1, 0, "yellow", "orange"); //在索引1插入两个元素
console.log(colors); // green,yellow,orange,blue
colors.splice(1, 1, "red", "purple"); // 删除索引1 在索引1插入两个元素
console.log(colors); // green,red,purple,orange,blue
11.搜索和位置方法
搜索数组的方法:按严格相等搜索和按断言函数搜索。
严格相等:indexOf()、lastIndexOf()和 includes()
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.indexOf(5)); // 3
console.log(numbers.lastIndexOf(5)); // 5
console.log(numbers.includes(3)); // true
断言函数:find()返回第一个匹配的元素,findIndex()返回第一个匹配元素的索引。
const people = [
{
name: "Matt",
age: 27
},
{
name: "Nicholas",
age: 29
}
];
console.log(JSON.stringify(people.find((element, index, array) => element.age < 28)));
// {name: "Matt", age: 27}
console.log(people.findIndex((element, index, array) => element.age < 28));
// 0
12.迭代方法
传给每个方法的函数接收 3个参数:数组元素、元素索引和数组本身。
every():对数组每一项都运行传入的函数,如果对每一项函数都返回 true,则这个方法返回 true。
filter():对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回。
forEach():对数组每一项都运行传入的函数,没有返回值。
map():对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。
some():对数组每一项都运行传入的函数,如果有一项函数返回 true,则这个方法返回 true。
let numbers = [1, 2, 3, 4, 5];
let everyResult = numbers.every((item, index, array) => item > 2);
let someResult = numbers. some((item, index, array) => item > 2);
let numbers2 =[];
numbers.forEach(( item, index, array) => {
if( item > 2) {
numbers2.push(item);
}
});
let numbers3 = numbers.filter((item, index, array) => item > 2);
let numbers4 = numbers.map((item, index, array) => item * 2);
console.log(everyResult);// false every对所有值都得到达要求才能是true
console.log(someResult); // true some对所有值其中一个能满足条件才能是true
console.log(numbers2); // 3,4,5 执行循环执行判断条件
console.log(numbers3); // 3,4,5 过滤
console.log(numbers4); // 2,4,6,8,10 对原有集合进行操作改变成新的数组
13.归并方法
reduce()方法从数组第一项开始遍历到最后一项。reduceRight()从最后一项开始遍历至第一项。reduce()和reduceRight()的函数接收 4 个参数:上一个归并值、当前项、当前项的索引和数组本身。
let numbers = [1, 2, 3, 4, 5];
let reduceSum = numbers.reduce((prev, cur, index, array) => prev + cur);
let reduceRightSum = numbers.reduceRight((prev, cur, index, array)=> prev + cur );
console.log(reduceSum);// 15
console.log(reduceRightSum); // 15