学习笔记17—Array

1 创建数组

有几种基本的方式可以创建数组,一种是使用Array构造函数,比如:

let colors = new Array();

如果知道数组中元素的数量,那么可以给构造函数传入一个数值,然后length属性就会被自动创建并设置为这个值,比如下面的代码会创建一个初始length为20的数组:

let colors = new Array(20);

也可以给Array构造函数传入要保存的元素,比如下面代码会创建一个包含3个字符串值的数组:

let colors = new Array("red","blue","green");

如果传入的只有一个值,如果是数值的话,则代表数组中元素的个数,这时候就有问题了,需要注意,如果是传入的两个值,就没关系:

let a = new Array(1,2);
console.log(a[0]+a[1]);

在使用Array构造函数时,也可以省略new操作符,结果是一样的:

let colors = Array(3);
let colors = Array("Greg");

另一种创建数组的方式是使用数组字面量(array literal)表示法,数组字面量是在括号中包含以逗号分隔的元素列表:

let colors = ["red","blue","green"];//创建一个包含3个元素的数组
let name = [];//创建一个空数组
let values = [1,2,];//创建一个包含2个元素的数组

第三行展示了在数组最后一个值后面加逗号的效果。

数组空位
使用数组字面量初始化数组时,可以使用一串逗号来创建空位,ECMAScript会将逗号之间相应索引位置的值当成空位:

const options = [,,,,,]; //创建包含5个元素的数组
console.log(options.length);//5
console.log(options);//[,,,,,]

ES6新增的方法和迭代器与早期ECMAScript版本中存在的方法行为。ES6新增的方法普遍将这些空位当成存在的元素,只不过值为undefined:

const options = [1,,,,5];

for (const option of options){
	console.log(option === undefined);
}
//false
//true
//true
//true
//false

2 数组的索引

要取得或设置数组的值,需要使用中括号并提供相应值的数字索引:

let colors = ["red","blue","green"];//定义一个字符串数组
alert(colors[0]);
colors[2] = "black";
colors[3] = "brown";

在中括号中提供的索引表示要访问的值,如果索引小于数组包含的元素数,则返回存储在相应位置的元素。如果把一个值设置给超过数组最大索引的索引,则数组长度会自动扩展到该索引值+1。
数组中的元素的数量保存在length属性中,这个属性始终返回0或大于0的值:

let colors = ["red","blue","green"];
let names = [];

alert(colors.length);//3
alert(names.length);//0

数组length属性的独特之处在于它不是只读的,通过修改length属性,可以从数组末尾删除或添加元素:

let colors = ["red","blue","green"];
colors.length = 2;
alert(colors[2]);//undefined

如果将length设置为大于数组元素数的值,则新添加的元素都将以undefined填充。使用length属性可以方便地向数组末尾添加元素:

let colors = ["red","blue","green"];
colors[colors.length] = "black";
colors[colors.length] = "brown";
let colors = ["red","blue","green"];
colors[99] = "black";
alert(colors.length);//100

这里colors数组有一个值被插入到位置99,结果新length就变成了100,这中间的所有元素,即3~98实际上不存在,因此访问时会返回undefined。

3 复制和填充方法

ES6新增了两个方法:批量复制方法copyWithin()以及填充数组方法fill()。这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。使用这个方法不会改变数组的大小。
使用fill()方法可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置,它是可选的。如果不提供结束索引,则一直填充到数组末尾。负值索引从数组末尾开始计算,也可以将负索引想象成数组长度加上它得到的一个正索引:

const zeroes = [0,0,0,0,0];

//用5填充整个数组
zeros.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的元素
zeros.fill(7,1,3);
console.log(zeroes);//[0,7,7,0,0]
zeros.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]

fill()忽略超出数组边检,零长度及方向相反的索引范围:

const zeroes = [0,0,0,0,0];

//索引过低,忽略
zeroes.fill(1,-10,-6);
console.log(zeroes);//[0,0,0,0,0]

//索引部分可用,填充可用部分
zeroes.fill(4,3,10);
console.log(zeroes);//[0,0,0,4,4]

//索引反向,忽略
zeroes.fill(2,4,2);
console.log(zeroes);//[0,0,0,0,0]

与fill()不同,copyWithin()会按照指定范围浅复制数组中的部分内容,然后将它们插入到指定索引开始的位置,开始索引和结束索引则与fill()使用同样的计算方法:

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();

//从ints中复制索引0开始到索引3结束的内容
//插入到索引4开始的位置
ints.copyWithin(4,0,3);
alert(ints)l//[0,1,2,3,0,1,2,7,8,9]
reset();

//javascript引擎在插值之前会完整复制范围内的值
//因此复制期间不存在重写的风险
ints.copyWithin(2,0,6);
alert(ints);//[0,1,0,1,2,3,4,5,8,9]
reset();

//支持负值索引,与fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4,-7,-3);
alert(ints);//[0,1,2,3,4,5,3,4,5,6]

4 转换方法

前面提到过,所有对象都有toLocaleString()、toString()和valueOf()方法。其中valueOf()返回的还是数组本身,而toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说对数组的每个值都会调用其toString()方法,以得到最终的字符串:

let colors = ["red","blue","green"];//创建一个包含3个字符串的数组
alert(colors.toString());//red,blue,green
alert(colors.valueOf());//red,blue,green
alert(colors);//red,blue,green

首先被显式调用的是toString()和valueOf()方法,它们分别返回了数组的字符串表示,即将所有字符串组合起来以逗号分隔,最后一行代码直接用alert()显示数组,因为alert()期待字符串,所以会在后台调用数组的toString()方法,从而得到跟前面一样的结果。
继承的方法toLocaleString()以及toString()都返回数组值的逗号分隔的字符串。如果想使用不同的分隔符,则可以使用join()方法。join()方法接收一个参数,即字符串分隔符,返回包含所有项的字符串:

let colors = ["red","green","blue"];
alert(colors.join(","));//red,green,blue
alert(colors.join("||"));//red||green||blue

如果不给join()传任何参数,或者传入undefined,则仍然使用逗号作为分隔符。

5 栈方法

ECMAScript给数组提供几个方法,让他看起来像是另外一种数据结构。数组对象可用像栈一样,也就是一种限制插入和删除项的数据结构。栈是一种后进先出(LIFO)的结构,也就是最近添加的项先被删除。数据项的插入(称为推入,push)和删除(称为弹出,pop)只在栈的一个地方发生,即栈顶。ECMAScript数组提供了push()和pop()方法,以实现类似栈的行为。
push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度。pop()方法则用于删除数组的最后一项,同时减少数组的length值,返回被删除的项。

let colors = new Array();
let count = colors.push("red","green");
alert(count);//2

count = colors.push("black");
alert(count);//3

let item = colors.pop();
alert(item);//black
alert(color.length);//2

6 队列方法

就像栈是以LIFO形式限制访问的数据结构一样,队列以先进先出(FIFO)形式限制访问,队列在列表末尾添加数据,但从列表开头获取数据。因为有了在数据末尾添加数据的push()方法,所以要模拟队列就差一个从数组开头取得数据的方法了。这个数组方法叫shift(),它会删除数组的第一项并返回它,然后数组长度-1:

let colors = new Array();
let count = colors.push("red","green");
alert(count);//2

count = colors.push("black");
alert(count);//3

let item = colors.shift();//取得第一项
alert(item);//red
alert(colors.length);//2

ECMAScript也为数组提供了unshift()方法。顾名思义unshift()就是执行跟shift()相反的操作,在数组头部添加任意多个值,然后返回新的数组长度。

7 操作方法

(1)concat()
concat()方法可以在现有数组全部元素基础上创建一个新数组,它首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组。如果传入一个或多个数组,则concat()会把这些数组的每一项都添加到结果数组,如果参数不是数组,则直接把他们添加到结果数组末尾:

let colors = ["red","green","blue"];
let colors2 = colors.concat("yellow",["black","brown"]);

console.log(colors);//["red","green","blue"]
console.log(colors2);//["red","green","blue","yellow","black","brown"]

(2)slice()
slice()用于创建一个包含原有数组中一个或多个元素的新数组。slice()方法可以接收一个或两个参数:返回元素的开始索引和结束索引。如果只有一个参数,则slice()会返回该索引到数组末尾的所有元素。如果有两个参数,则slice()返回从开始索引到结束索引对应的所有元素,其中不包含结束索引对应的元素:

let colors = ["red","green","blue","yellow","purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1,4);

alert(colors2);//green,blue,yellow,purple
alert(colors3);//green,blue,yellow

(3)splice()
splice()的主要目的是在数组中间插入元素,但有3种不同的方式使用这个方法:

  • 删除。需要给splice()传2个参数:要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素,比如splice(0,2)会删除前两个元素。
  • 插入。需要给splice()传3个参数:开始位置、0(要删除的元素数量)和要插入的元素,可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个乃至任意多个要插入的元素。比如splice(2,0,“red”,“green”)会从数组位置2开始插入字符串"red"和"green"
  • 替换。splice()在删除元素的同时可以在指定位置插入新元素,同样要传入3个参数:开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。

splice()方法始终返回这样一个数组,它包含从数组中被删除的元素。

8 搜索和位置方法

ECMAScript提供两类搜索数组的方法:按严格相等搜索和按断言函数搜索
(1)严格相等
ECMAScript提供了3个严格相等的搜索方法:indexOf()、lastIndexOf()和includes()。其中前两个方法在所有版本中都可以用,而第三个方法是ECMAScript7新增的。这些方法都接收两个参数:要查找的元素和一个可选的起始搜索位置。indexOf()和includes()方法从数组前头开始向后搜索,而lastIndexOf()从数组末尾开始向前搜索。
indexOf()和lastIndexOf()都返回要查找的元素在数组中的位置,如果没找到则返回-1.includes()返回布尔值,表示是否至少找到一个与指定元素匹配的项。在比较第一个参数跟数组每一项时会使用全等(===)比较:

let numbers = [1,2,3,4,5,4,3,2,1];

alert(numbers.indexOf(4));//3
alert(numbers.lastIndexOf(4));//5
alert(numbers.includes(4));//true

alert(numbers.indexOf(4,4));//5
alert(numbers.lastIndexOf(4,4));//3
alert(numbers.includes(4,7));//false

let person = {name:"Nicholas"};
let people = [{name:"Nicholas"}];
let morePeople = [person];

alert(people.indexOf(person));//-1
alert(morePeople.indexOf(person));//0
alert(people.includes(person));//false
alert(morePeople.includes(person));//true

(2)断言函数
ECMAScript也允许按照定义的断言函数搜索数组,每个索引都会调用这个函数,断言函数的返回值决定了相应索引的元素是否被认为匹配。
断言函数接收3个参数:元素、索引和数组本身,其中元素是数组中当前搜索的元素,索引是当前元素的索引,而数组就是正在搜索的数组。断言函数返回真值,表示是否匹配。
find()和findIndex()方法使用了断言函数,这两个方法都从数组的最小索引开始。find()返回第一个匹配的元素,findIndex()返回第一个匹配元素的索引。这两个方法也都接收第二个可选参数,用于指定断言函数内部this值:

const people = [
{
	name:"Matt",
	age:27
},
{
	name:"Nicholas",
	age:29
}
];

alert(people.find((element,index,array)=>element.age<28));
//{name:"Matt",age:27}

alert(people.findIndex((element,index,array)=>element.age<28));

找到匹配项以后这两个方法都不再继续搜索。

9 归并方法

ECMAScript为数组提供了两个归并方法:reduce()和reduceRight()。这两个方法都会迭代数组的所有项,并在此基础上构建一个最终返回值。reduce()方法从数组第一项开始遍历到最后一项。而reduceRight()从最后一项遍历至第一项。
这两个方法都接收两个参数:对每一项都会运行的归并函数,以及可选的以之为归并起点的初始值。传给reduce()和reduceRight()的函数接收4个参数:上一个归并值、当前项、当前项的索引和数组本身。这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。如果没有给这两个方法传入可选的第二个参数(作为归并的起点值),则第一次迭代将从数组的第二项开始,因此传给归并函数的第一个参数是数组的第一项,第二个参数是数组的第二项。
可以用reduce()函数执行累加数组中所有数值的操作:

let values = [1,2,3,4,5];
let sum = values.reduce((prev,cur,index,array)=>prev+cur);

alert(sum);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值