构建数组
数组长度最长为 4294967295。
new 操作符
- 构造数组通过构造函数 Array() 和运算符 new 实现。Array() 构造函数可以接收参数,数量无限制,类型无限制。
const a = new Array();
const b = Array(6);
const c = new Array(1,2,3,"4","5");
- 定义指定长度的数组,没有为元素初始化赋值,所有元素的初始值为 undefined。
var a = new Array(6);
数组字面量
定义数组直接量,这种方法定义数组要比使用 Array 构造函数定义数组快。
var a = [1,2,3,"4"];
var b = [];
Array 构造函数还有两个 ES6 新增的用于创建数组的静态方法:from() 和 of()。from() 用于将类数组结构转换为数组实例,而 of() 用于将一组参数转换为数组实例。
Array.from()
- 第一个参数是一个类数组对象,即任何可迭代的结构,或者有一个 length 属性和可索引元素的结构。使用该方法可以将该结构转化为数组实例。
// 字符串会被拆分为单字符数组
console.log(Array.from("Matt")); // ["M", "a", "t", "t"]
// 可以使用 from() 将映射转换为一个新数组
const m = new Map().set(1, 2).set(3, 4);
console.log(Array.from(m)); // [[1, 2], [3, 4]]
// 可以使用 from() 将 Set 集合转换为一个新数组
const set = new Set().add(1).add(2);
console.log(Array.from(set));//[1,2]
- 第二个可选的映射函数参数。类数组的每一次迭代结果都会作为映射函数的参数,函数的返回值作为新数组实例对应的元素值。
- 第三个可选参数,用于指定映射函数中 this 的值。但这个重写的 this 值在箭头函数中不适用。
const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1, x => x**2);
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 3});
console.log(a2); // [1, 4, 9, 16]
console.log(a3); // [1, 8, 27, 64]
Array.of()
Array.of 可以把一组参数转换为数组。这个方法用于替代 Array.prototype. slice.call(arguments)。
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
console.log(Array.of(undefined)); // [undefined]
新增数组校验
- isArray
判断一个对象是不是数组。这个方法的目的就是确定一个值是否为数组,而不用管它是在哪个全局执行上下文中创建的。
const a = [1, 2, 3];
const b = '';
console.log(Array.isArray(a));//true
console.log(Array.isArray(b));//false
改变数组的length属性
当改变数组长度时会自动在书的末尾增加或删除元素。新增的元素值为 undefined。
var a = [1, 2, 3, 4];
a.length = 3;
console.log(a);//[1,2,3]
a.length = 5;
console.log(a);//[1,2,3,undefined,undefined]
使用delete运算符可以删除数组元素,但不会改变length的值。它相当于把该位置的元素值设为 undefined
基本 API
改变原数组
push
push 方法在数组的末尾插入一个或多个元素,他们按顺序被插入到数组末尾,并返回操作后数组长度。
var a = [];
console.log(a.push(1, 2, 3));//3
console.log(a)//[1,2,3]
pop
pop 方法将返回数组的最后一个元素,并将最后一个元素从数组中删除,数组的 length 属性值减一。空数组调用此方法返回 undefined,数组的 length 不变。
var a = [1];
console.log(a.pop());//1
console.log(a, a.length)//[] 0
console.log(a.pop());
unshift
unshift 方法在数组的开头插入一个或多个元素,他们按顺序被插入到数组开头,并返回操作后数组长度。
var a = [];
console.log(a.unshift(1, 2, 3));//3
console.log(a, a.length)//[1,2,3] 3
shift
shift 方法删除并返回数组的第一个元素,数组的 length 值减一。空数组调用本方法返回 undefined。
var a = [1, 2];
console.log(a.shift());//1
console.log(a, a.length)//[2] 1
a.shift();
console.log(a.shift());// undefined
splice
splice 方法可以说是功能最强大的一个方法了,它可以在指定位置开始删除、插入、替换元素。
三个参数:
- 第一个参数:指定插入的起始位置;
- 第二个参数:指定要删除元素个数;
- 第三个参数:表示插入的具体元素;
let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1); // 删除第一项
console.log(colors); // green,blue
console.log(removed); // red,只有一个元素的数组
removed = colors.splice(1, 0, "yellow", "orange"); // 在位置 1 插入两个元素
console.log(colors); // green,yellow,orange,blue
console.log(removed); // 空数组
removed = colors.splice(1, 1, "red"); // 替换第一项
console.log(colors); // green,red,purple,orange,blue
console.log(removed);
排序
- reverse
reverse 方法可以颠倒数组元素顺序,会改变原数组。
var a = [1,2,3,4];
a = a.reverse();
console.log(values);//[4,3,2,1]
- sort
默认情况下,sort 会按照升序重新排列数组元素。sort 会在每一项上调用 String 转型函数,然后比较字符串来决定顺序。即使数组的元素都是数值,也会先把数组转换为字符串再比较、排序。也会改变原数组。
let values = [0, 1, 5, 10, 15];
values.sort();
console.log(values); // 0,1,10,15,5
sort 方法可以接收一个比较回调函数,该函数接收两个参数,如果第一个参数应该排在第二个参数前面,就返回负值;如果两个参数相等,就返回 0;如果第一个参数应该排在第二个参数后面,就返回正值。
let values = [0, 1, 5, 10, 15];
values.sort((a, b) => a < b ? 1 : a > b ? -1 : 0);
console.log(values); // 15,10,5,1,0
注意 reverse()和 sort()都返回调用它们的数组的引用。
填充
- fill
fill 方法可以向一个已有的数组中插入全部或部分相同的值。- 第一个参数:填充值。
- 第二个参数:开始索引,用于指定开始填充的位置,可选;
- 第三个参数:结束索引,可选;若未传入第二个参数则一直填充到数组末尾。
负值索引,则实际参数值为数组长度加上该负值。静默忽略超出数组边界、零长度及方向相反的索引范围,索引部分可用,填充可用部分。
const zeroes = [0, 0, 0, 0, 0];
// 用 5 填充整个数组
zeroes.fill(5);
console.log(zeroes); // [5, 5, 5, 5, 5]
zeroes.fill(0); // 重置
// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3);
console.log(zeroes); // [0, 0, 0, 6, 6]
zeroes.fill(0); // 重置
// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3);
console.log(zeroes); // [0, 7, 7, 0, 0];
zeroes.fill(0); // 重置
// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1)
// (-1 + zeroes.length = 4)
zeroes.fill(8, -4, -1);
console.log(zeroes); // [0, 8, 8, 8, 0];
zeroes.fill(0); // 重置
//fill()静默忽略超出数组边界、零长度及方向相反的索引范围:
// 索引过低,忽略
zeroes.fill(1, -10, -6);
console.log(zeroes); // [0, 0, 0, 0, 0]
zeroes.fill(0); // 重置
// 索引部分可用,填充可用部分
zeroes.fill(4, 3, 10)
console.log(zeroes); // [0, 0, 0, 4, 4]
zeroes.fill(0); // 重置
不改变原数组
concat
concat 方法能够把该方法中的参数追加到指定数组中,形成一个新的连接数组。
var a = [1,2,3];
var b = a.concat(4,5);//[1,2,3,4,5]
如果concat()方法中的参数包含数组,则会把元素展开添加到数组中。
var a = [1,2,3];
var b = a.concat(4,[5,6]);
console.log(b);//[1,2,3,4,5,6]
slice
slice 方法将返回数组中指定的片段(即数组中的一个子数组)。
两个参数:
+ 第一个参数:截取子数组在原数组中的起点,
+ 第二个参数:截取子数组在原数组中的终点,可选。
如果只有一个参数,则 slice 会截取该索引到数组末尾的所有元素。若参数有负数,那么实际参数值就是数组长度加上这个负值。
var a = [1,2,3,4,5,6];
var b = a.slice(2,5);
var c = a.slice(-4,-1);
console.log(b);//[3,4,5]
console.log(c);//[3,4,5]
复制
- copyWithin
copyWithin 方法会按照指定范围浅复制数组中的部分内容,然后将它们插入到指定索引开始的位置。- 第一个参数:插入位置索引。
- 第二个参数:复制部分开始索引,可选,用于指定开始填充的位置;
- 第三个参数:复制部分结束索引,可选,若未传入第二个参数则一直填充到数组末尾。
负值索引,则实际参数值为数组长度加上该负值。静默忽略超出数组边界、零长度及方向相反的索引范围,索引部分可用,填充可用部分。
let ints,
reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 从 ints 中复制索引 0 开始的内容,插入到索引 5 开始的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5);
console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
reset();
// 从 ints 中复制索引 5 开始的内容,插入到索引 0 开始的位置
ints.copyWithin(0, 5);
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset();
// 支持负索引值,与 fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3);
console.log(ints); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]
//copyWithin()静默忽略超出数组边界、零长度及方向相反的索引范围:
let ints,
reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引过低,忽略
ints.copyWithin(1, -15, -12);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引部分可用,复制、填充可用部分
ints.copyWithin(4, 7, 10)
console.log(ints); // [0, 1, 2, 3, 7, 8, 9, 7, 8, 9];
归并方法
常用来求一个数组的和。
- reduce
reduce 方法从数组第一项开始遍历到最后一项。接收两个参数:- 参数一:归并回调函数。
回调函数有四个参数:上一个归并值、当前项、当前项的索引和数组本身。 - 参数二:并起点的初始值,可选。
- 参数一:归并回调函数。
let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur);
console.log(sum); // 15
- reduce
reduceRight 方法从最后一项开始遍历至第一项。接收两个参数:- 参数一:归并回调函数。
回调函数有四个参数:上一个归并值、当前项、当前项的索引和数组本身。 - 参数二:并起点的初始值,可选。
- 参数一:归并回调函数。
let values = [1, 2, 3, 4, 5];
let sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
});
console.log(sum); // 15
数组与字符串转换
- toString
toString 方法是按照JS标准进行转换,不受语言环境影响。
console.log([1, 2, [3, 4, [5]]].toLocaleString())//1,2,3,4,5
- join
join 方法把数组转换为多种形式字符串,join()方法有一个参数,用来定义合并元素的连字符。如果不提供参数,则以逗号连接每个元素。
var a = [1,2,3,4];
a = a.join("-");//"1-2-3-4"
b = a.join();//"1,2,3,4"
- split
split 方法把字符串转换为一个数组。
两个参数:- 第一个参数:指定劈开数组的字符;
- 第二个参数:指定返回数组的长度,可选;
若未传第二个参数,则返回所有元素。
var a = "1-2-3-4";
var b = a.split("-");
var b = a.split("-",2);
console.log(b);//[1,2,3,4]
console.log(b);//[1,2]
搜索方法
严格相等
- indexOf
从数组前头(第一项)开始向后搜索,返回要查找的元素在数组中的位置,如果没找到则返回-1。接收两个参数:- 参数一:要查找的元素。
- 参数二:起始搜索位置,可选。
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
console.log(numbers.indexOf(4)); // 3
console.log(numbers.indexOf(4, 4)); // 5
- lastIndexOf
从数组末尾(最后一项)开始向前搜索,返回要查找的元素在数组中的位置,如果没找到则返回-1。接收两个参数:- 参数一:要查找的元素。
- 参数二:起始搜索位置,可选。
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
console.log(numbers.lastIndexOf(4, 4)); // 3
console.log(numbers.lastIndexOf(4)); // 5
- includes
ECMAScript 7 新增,从数组前头(第一项)开始向后搜索,返回布尔值,表示是否至少找到一个与指定元素匹配的项。在比较第一个参数跟数组每一项时,会使用全等(===)比较。接收两个参数:- 参数一:要查找的元素。
- 参数二:起始搜索位置,可选。
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
console.log(numbers.includes(4)); // true
console.log(numbers.includes(4, 7)); // false
断言函数
- find
find 方法使用了断言函数,数组的开头开始向后搜索,返回第一个匹配的元素,找到匹配值后就会结束搜索。接受两个参数:- 参数一:断言函数,接收三个参数:
- 参数一:元素
- 参数二:索引,可选
- 参数三:数组本身,可选
- 参数二:断言函数的 this
- 参数一:断言函数,接收三个参数:
const arr = ["a", "b", "c"];
const res1 = arr.find(ele => ele == "b");
console.log(res1);// b
- findIndex
findIndex 方法使用了断言函数,数组的开头开始向后搜索,返回第一个匹配的元素的索引值,找到匹配值后就会结束搜索。接受两个参数:- 参数一:断言函数,接收三个参数:
- 参数一:元素
- 参数二:索引,可选
- 参数三:数组本身,可选
- 参数二:断言函数的 this
- 参数一:断言函数,接收三个参数:
const arr = ["a", "b", "c"];
const res2 = arr.findIndex((ele, index) => index >= 1);
console.log(res2);// 1
迭代方法
迭代器方法
因为这些方法都返回迭代器,所以可以将它们的内容通过 Array.from() 直接转换为数组实例。
- keys
keys 返回数组索引的迭代器;
const a = ["foo", "bar", "baz", "qux"];
const Keys = Array.from(a.keys());
console.log(Keys); // [0, 1, 2, 3]
- values
values 返回数组元素的迭代器;
const a = ["foo", "bar", "baz", "qux"];
const Values = Array.from(a.values());
console.log(Values); // ["foo", "bar", "baz", "qux"]
- entries
entries 返回索引/值对的迭代器
const a = ["foo", "bar", "baz", "qux"];
const aEntries = Array.from(a.entries());
console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]
every
数组的每个元素作为回调函数的参数,只有每次回调函数的调用都返回 true ,最后才返回 true,否则返回 false ,就像逻辑运算中的 “与”逻辑。接收两个参数:
- 参数一:回调函数,回调函数接收三个参数
- 参数一:元素
- 参数二:索引,可选
- 参数三:数组本身,可选
- 回调函数的 this
const arr = ["a", "ab", "c"];
const res = arr.every(item => item.includes('a'));
console.log(res);//false
some
数组的每个元素作为回调函数的参数,只有有一次回调函数的调用返回 true ,最后就返回 true,否则返回 false ,就像逻辑运算中的 “或”逻辑。接收两个参数:
- 参数一:回调函数,回调函数接收三个参数
- 参数一:元素
- 参数二:索引,可选
- 参数三:数组本身,可选
- 回调函数的 this
const arr = ["a", "ab", "c"];
const res = arr.some(item => item.includes('a'));
console.log(res);//true
map
数组的每个元素作为回调函数的参数,返回一个新数组,每个元素为原数组对应每项的回调函数的执行结果。接收两个参数:
- 参数一:回调函数,回调函数接收三个参数
- 参数一:元素
- 参数二:索引,可选
- 参数三:数组本身,可选
- 回调函数的 this
const arr = ["a", "ab", "c"];
const res = arr.map(item => item + 'a');
console.log(res);//['aa', 'aba', 'ca']
console.log(arr);//["a", "ab", "c"]
forEach
数组的每个元素作为回调函数的参数,无返回值,无法通过return中断遍历。接收两个参数:
- 参数一:回调函数,回调函数接收三个参数
- 参数一:元素
- 参数二:索引,可选
- 参数三:数组本身,可选
- 回调函数的 this
const arr = ["a", "ab", "c"];
const res = arr.forEach(item => {
console.log(item);
return ;
});
// a
// ab
// c
filter
数组的每个元素作为回调函数的参数,返回一个新数组,数组里的元素为对调函数返回 true 的原数组元素,接收两个参数:
- 参数一:回调函数,回调函数接收三个参数
- 参数一:元素
- 参数二:索引,可选
- 参数三:数组本身,可选
- 回调函数的 this
const arr = ["a", "ab", "c"];
const res = arr.filter(item => item.includes('a'));
console.log(res);//['a', 'ab']
我是孤城浪人,一名正在前端路上摸爬滚打的菜鸟,欢迎你的关注。