总结 JS 数组及其方法

构建数组

数组长度最长为 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']

我是孤城浪人,一名正在前端路上摸爬滚打的菜鸟,欢迎你的关注。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值