javaScript（九） 数组

]

console.log(af.pop())

console.log(af)

第一个输出：{id:2,name:“枷”,score:“98”}

第二个输出：[ {id:1,name:“My”,score:“90”}, {id:3,name:“123”,score:“80”} ]

Array.prototype.shift()

删除数组中的第一个元素，该方法没有参数，返回值是删除的那一个参数，如果数组为空，那么会返回undefined

var ag=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

]

console.log(ag.shift())

console.log(ag)

第一个输出：{id:1,name:“My”,score:“90”}

第二个输出：[  {id:3,name:“123”,score:“80”}, {id:2,name:“枷”,score:“98”} ]

Array.prototype.splice(index,deleteCount,…item)

-在任意位置删除或者添加元素

-参数

• index：修改时开始的位置

• deleteCount：要删除的个数，可选，如果为0，那么表示不删除

• …item：要添加进数组的元素，可选，如果没有，那么表示仅仅用作删除

-返回值

• 返回值是被删除或添加后的元素组成的新数组

示例1：

var ah=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

]

console.log(ah.splice(0,0,“1”,“2”,“3”));

console.log(ah)

第一个输出：[]，因为删除的个数是0，那么splice()输出为一个空数组

第二个输出：[ “1”，“2”，“3”，{id:1,name:“My”,score:“90”}, {id:3,name:“123”,score:“80”}, {id:2,name:“枷”,score:“98”} ]

示例2：

var ah=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

]

console.log(ah.splice(1,1,“1”,“2”,“3”));

console.log(ah)

第一个输出：[{id:3,name:“123”,score:“80”}]

第二个输出：[{id:1,name:“My”,score:“90”}, “1”，“2”，“3”, {id:2,name:“枷”,score:“98”} ]

示例3：

var ah=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

]

console.log(ah.splice(1,1));

console.log(ah)

第一个输出：[{id:3,name:“123”,score:“80”}]

第二个输出：[{id:1,name:“My”,score:“90”}, {id:2,name:“枷”,score:“98”} ]

解释：这一种相当于删除某个索引位置的元素

Array.prototype.fill(value[,start[,end]])

-使用给定的值填充从起始位置到结束位置之间的全部元素

-参数

• value：用来填充数组的值（注意：用来填充的数组会循环填充每一个位置，并不是截取当中的某一段替换）

• start：起始位置，可选，默认为0

• end：结束位置，可选，默认为数组长度（例如结束位置是2，意思是到2前面，不包含2），如果是负数，那么从数组的结尾开始倒数算起

-返回值

• 修改后的数组

示例1：

var ai=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

]

console.log(ai.fill({id:4,name:“32”,score:“32”},1,2));

console.log(ai)

第一个输出：[ {id:1,name:“My”,score:“90”},{id:4,name:“32”,score:“32”}, {id:2,name:“枷”,score:“98”} ]

第二个输出：[ {id:1,name:“My”,score:“90”},{id:4,name:“32”,score:“32”}, {id:2,name:“枷”,score:“98”} ]

示例2：

var ai=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

]

console.log(ai.fill({id:4,name:“32”,score:“32”},1,3));

console.log(ai)

第一个输出：[ {id:1,name:“My”,score:“90”},{id:4,name:“32”,score:“32”},{id:4,name:“32”,score:“32”}]

第二个输出：[ {id:1,name:“My”,score:“90”},{id:4,name:“32”,score:“32”},{id:4,name:“32”,score:“32”} ]

Array.prototype.copyWithin(target,start[,end])

-浅复制数组的一部分到同一个数组的另外一个位置

-参数

• target：复制的目标位置，从数组的0位置开始算

• start：复制的起始位置，可选，从数组的0位置开始算

• end：复制的结束位置，可选，从数组的0位置开始算，注意不包括这个，是到这个的前一个

-返回值

• 修改后的数组

• 原数组会被改变

var al=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”},

{id:4,name:“999”,score:“99”},

{id:5,name:“888”,score:“89”}

]

console.log(al.copyWithin(1,2,3));

console.log(al)

第一个输出：[ {id:1,name:“My”,score:“90”}, {id:2,name:“枷”,score:“98”}, {id:2,name:“枷”,score:“98”}, {id:4,name:“999”,score:“99”}, {id:5,name:“888”,score:“89”} ]

第二个输出：[ {id:1,name:“My”,score:“90”}, {id:2,name:“枷”,score:“98”}, {id:2,name:“枷”,score:“98”}, {id:4,name:“999”,score:“99”}, {id:5,name:“888”,score:“89”} ]

解释：al.copyWithin(1,2,3)，是在数组al上，将数组al[2]-al[3]（不包括3）之间的内容复制到1的位置，然依次后往后覆盖

如果：console.log(al.copyWithin(-1));，那么会变成数组的第一个值被复制到了最后一个

Array.prototype.slice(start,end)

-截取数组中开始位置到结束位置的元素（不包括结束位置），浅拷贝生成新的数组

-参数

• start：开始提取的位置，整数，如果为负数的话，从数组的结束开始往前倒数

• end：结束提取的位置，可选，不写的话默认到数组结束

-返回值

• 包含提取元素的新数组

示例：

var am=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

]

console.log(am.slice(-1)); //输出：[{id:2,name:“枷”,score:“98”}]

console.log(am.slice(0,2)); //输出：[{id:1,name:“My”,score:“90”},{id:3,name:“123”,score:“80”}]

console.log(am.slice(0)); //输出：[{id:1,name:“My”,score:“90”},{id:3,name:“123”,score:“80”},{id:2,name:“枷”,score:“98”}]

另外，注意，因为是浅拷贝，所以slice()得到的是对象的引用，所以对这个引用修改，会导致原数组也会修改，如下例：

am.slice(-1)[0].name=“oop”; //修改里面的name值

console.log(am); //打印出来的发现am[2]里面的name值变了

Array.prototype.concat(…arguments)：合并2个或多个数组，参数…arguments是任意多的值，返回值是合并后的数组

var an=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

]

var ao=[1,2,3]

console.log(an.concat(ao)); //输出：[{id:1,name:“My”,score:“90”},{id:3,name:“123”,score:“80”},{id:2,name:“枷”,score:“98”},1,2,3]

Array.prototype.join(sepatator)：将数组中的元素连接到一个字符串里，参数sepatator是元素之间的分隔符，可选，返回值是元素拼接的字符串

示例：

var ap=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

]

var aq=[“我”,“是”,“ta”]

console.log(ap.join()); //输出：[object Object],[object Object],[object Object]

console.log(aq.join()); //输出：我,是,ta

console.log(aq.join(“|”)); //输出：我|是|ta

遍历数组

var a=[“,”,‘…’,…,‘asd’]

for(var i=0;i<a.length;i++){

console.log(a[i]);

}

简单方法

Array.pototype.forEach(callbackfn[,thisArg])

遍历数组中的每个元素，对每个元素执行callbackfn函数

-参数

• callbackfn：数组中每个元素执行的函数，这个函数有三个参数

1. -currentValue：数组中正在处理的当前元素

2. -index：数组中正在处理的当前元素的索引

3. -array：正在操作的数组

• thisArg：callbackfn函数里this的指向，可选

-返回值，无

var ar=[“我”,“是”,“ta”];

var numfn=function (currentValue,index,array) {

console.log(currentValue,index,array);

}

console.log(ar.forEach(numfn)); //输出：我 0 [“我”, “是”, “ta”] 是 1 [“我”, “是”, “ta”] ta 2 [“我”, “是”, “ta”]

示例2：

var as={

name:[“我”,“是”,“ta”],

isLikeSong:function(value) {

return value===this.name[0]

},

like:function (song) {

if(this.isLikeSong(song)){

console.log(“我喜欢”+song)

}

}

}

console.log(as.name.forEach(as.like,as));

解释：对as.name数组进行遍历，每一次遍历都执行了as.like方法，然后在as.like方法里进行了isLikeSong的判断，判断是否和我们指定的值相等，如果相等，则返回true，并且，如果是true的话，执行了打印，这边目标数组需要填入，否则，默认的是window对象，window对象中没有this.name[0]值，和没有isLikeSong()方法，会报错

Array.prototype.map(callbackfn[,thisArg])

-创建一个新数组，新数组的元素是callbackfn函数的返回结果

-参数

• callbackfn：生成新数组元素的函数，这个函数有3个参数，分别是

1. currentValue：数组中正在处理的当前元素

2. index：数组中正在处理的元素的索引

3. array：正在操作的数组

• thisArg：callbackfn函数里this的指向，可选

-返回值：新数组，元素为执行callbackfn函数后的返回值

示例1：

var au=[

{id:1,name:“My”,score:“90”},

{id:3,name:“123”,score:“80”},

{id:2,name:“枷”,score:“98”}

];

var getName=function (item,index,array) {

return item.name;

}

console.log(au.map(getName))

**解释：**获取歌单的歌曲名，通过方法getName每次获取到对象中的name值并返回

var at={

name:[“123”,“223”,“323”],

operationN:function (value) {

return parseInt(this.name[value])+10;

},

fuc:function (num,index) {

console.log(this.operationN(index))

}

}

at.name.map(at.fuc,at)

解释：对对象at的name数组进行+10后返回，通过方法是at.fnc方法，获取当前传入数组的索引，索引值传入at.operationN方法，然后获得name数组对应的值，通过parseInt()方法，将字符串转换成数字+10然后返回

Array.prototype.reduce(callbackfn,[,initialValue])

-使用callbackfn函数从左向右累加处理每个元素，返回累加处理后的值

-参数

• callbackfn：处理每个元素的函数，函数有4个默认参数

1. accumulator：累加器累加回调的返回值

2. currentValue：数组中正在处理的当前元素

3. index：数组中正在处理的当前元素的索引

4. array：正在操作的数组

• initialValue：调用callbackfn的第一个输入值，可选

-返回值

• 函数累加处理后的结果

var av=[

{id:1,name:“My”,score:“80”},

{id:3,name:“123”,score:“90”},

{id:2,name:“枷”,score:“88”}

];

var getScore=function (accumulator,item,index,array) {

return accumulator+parseInt(item.score);

}

console.log(av.reduce(getScore,2)) //输出260，是2+80+90+88

**解释：**通过函数getScore，返回了累加的结果，参数accumulator初始值是2，之后每次+item.scroe的值，因为值是字符串，所以通过parseInt()转换成数字，再累加

Array.prototype.reduceRight(callbackfn,[,initialValue])

-和reduce()相对，使用callbackfn函数从右向左累加处理每个元素，返回累加处理后的值

-参数

• callbackfn：处理每个元素的函数，函数有4个默认参数

1. accumulator：累加器累加回调的返回值

2. currentValue：数组中正在处理的当前元素

3. index：数组中正在处理的当前元素的索引

4. array：正在操作的数组

• initialValue：调用callbackfn的第一个输入值，可选

-返回值

• 函数累加处理后的结果

var av=[

{id:1,name:“My”,score:“80”},

{id:3,name:“123”,score:“90”},

{id:2,name:“枷”,score:“88”}

];

var getScore=function (accumulator,item,index,array) {

return accumulator+parseInt(item.score);

}

console.log(av.reduceRight(getScore,2)) //输出260，是2+88+90+80

Array.prototype.indexOf(searchElement[,fromIndex])

-在数组中找到给定元素的第一个索引值

-参数

• searchElement：要查找的元素

• fromIndex：开始查找的位置，可选，默认是0

-返回值

• 指定元素在数组中第一次出现的位置，或者-1

var aw=[

{id:1,name:“My”,score:“80”},

{id:3,name:“123”,score:“90”},

{id:2,name:“枷”,score:“88”}

];

var getNameS=function (item,index) {

return item.name;

}

var nameS=aw.map(getNameS);

console.log(nameS.indexOf(“123”)); //输出1

判断123是否存在在歌单中？

解释：先通过map方法，将歌单aw中的歌名提取出来，然后将所有的歌名组成一个新的数组，然后通过indexOf判断是否存在

Array.prototype.lastIndexOf(searchElement[,fromIndex])

-在数组中找到给定元素的最后一个索引值，这个方法和indexOf对应

-参数

• searchElement：要查找的元素

• fromIndex：开始查找的位置，可选，默认是0

-返回值

• 指定元素在数组中最后一次出现的位置，或者-1

Array.prototype.includes(searchElement[,fromIndex])

-判断一个数组中是否包含一个给定的值

-参数

• searchElement：要查找的元素

• fromIndex：开始查找的位置，可选，默认是0

-返回值

• boolean值，true或false

示例：

var aw=[

{id:1,name:“My”,score:“80”},

{id:3,name:“123”,score:“90”},

{id:2,name:“枷”,score:“88”}

];

var getNameS=function (item,index) {

return item.name;

}

var nameS=aw.map(getNameS);

console.log(nameS.includes(“123”)) //返回true

Array.prototype.find(predicate[,thisArg])

-返回数组中满足提供的测试函数的第一个元素的值

-参数

• predicate：测试数组每个元素的函数，有3个默认参数

1. currentValue：数组中正在处理的当前元素

2. index：数组中正在处理的当前元素的索引

3. array：正在操作的数组

• thisArg：执行predicate时用于this的值，可选

-返回值

• 找到的元素，或者undefined

var ax=[

{id:1,name:“My”,score:“80”},

{id:3,name:“123”,score:“90”},

{id:2,name:“枷”,score:“88”},

];

var scoreL=function (item,index,array) {

if(parseInt(item.score)>70)

{

return item.name;

}

}

console.log(ax.find(scoreL)) //输出：{id:1,name:“My”,score:“80”}

Array.prototype.findIndex(predicate[,thisArg])

-返回数组中满足提供的测试函数的第一个元素的值的索引

-参数

• predicate：测试数组每个元素的函数，有3个默认参数

1. currentValue：数组中正在处理的当前元素

2. index：数组中正在处理的当前元素的索引

3. array：正在操作的数组

• thisArg：执行predicate时用于this的值，可选

-返回值

• 找到的元素的索引，或者-1

var ax=[

{id:1,name:“My”,score:“80”},

{id:3,name:“123”,score:“90”},

{id:2,name:“枷”,score:“88”},

{id:3,name:“123”,score:“60”},

{id:2,name:“枷”,score:“58”}

];

var scoreL=function (item,index,array) {

return parseInt(item.score)>70

}

console.log(ax.filter(scoreL)) //输出0

ArraY.prototype.filter(callbackfn[,thisArg])

-创建一个新数组，该数组包括了通过callbackfn测试的原数组的所有元素

-参数

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

];

var scoreL=function (item,index,array) {

if(parseInt(item.score)>70)

{

return item.name;

}

}

console.log(ax.find(scoreL)) //输出：{id:1,name:“My”,score:“80”}

Array.prototype.findIndex(predicate[,thisArg])

-返回数组中满足提供的测试函数的第一个元素的值的索引

-参数

• predicate：测试数组每个元素的函数，有3个默认参数

1. currentValue：数组中正在处理的当前元素

2. index：数组中正在处理的当前元素的索引

3. array：正在操作的数组

• thisArg：执行predicate时用于this的值，可选

-返回值

• 找到的元素的索引，或者-1

var ax=[

{id:1,name:“My”,score:“80”},

{id:3,name:“123”,score:“90”},

{id:2,name:“枷”,score:“88”},

{id:3,name:“123”,score:“60”},

{id:2,name:“枷”,score:“58”}

];

var scoreL=function (item,index,array) {

return parseInt(item.score)>70

}

console.log(ax.filter(scoreL)) //输出0

ArraY.prototype.filter(callbackfn[,thisArg])

-创建一个新数组，该数组包括了通过callbackfn测试的原数组的所有元素

-参数

最后

[外链图片转存中…(img-OUkxmwih-1720093959987)]

[外链图片转存中…(img-6kaM8giI-1720093959989)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容