史上最全JavaScript数组方法


一、以下是不改变数组本身的方法

1.concat()用于合并两个或多个数组

const a = ['你是','什么']
const b = ['牛马']
const c = a.concat(b)
const d = b.concat(a);
console.log(c);
console.log(d);
console.log(a);
console.log(b);

输出结果:
史上最全JavaScript数组方法_第1张图片

2.slice(start,end)用于返回从start开始(包括),到end(不包括)之间的元素组成的数组

注意1:该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 splice()方法。

const a = ['我的','老婆','是','薇尔利特']
const b = a.slice(3,4)
console.log(b);
console.log(a);

输出结果:
史上最全JavaScript数组方法_第2张图片

注意2:a !== a.slice()

const a = ['我的','老婆','是','薇尔利特']
console.log(a.slice());
console.log(a === a.slice());

输出结果:
在这里插入图片描述

注意3:

  • 如果是负数,则表示从数组尾部开始算起(-1指最后一个元素,-2 指倒数第二个元素,以此类推)。
  • 如果 start 为负,将它作为 length + start处理,此处 length 为数组的长度,比如a.slice(-3,3),相当于a.slice(1,3)。
  • 如果 end 为负,就将它作为 length + end 处理,此处 length 为数组的长度,比如a.slice(1,-1),相当于a.slice(1,3)。
const a = ['我的','老婆','是','薇尔利特']
console.log(a.slice(-3,3))
console.log(a.slice(1,-1));
console.log(a.slice(-3,3) === a.slice(1,-1))

输出结果:
史上最全JavaScript数组方法_第3张图片


二、以下是改变数组本身的方法

1, splice()实现数组的增,删,改(增可以理解为不删再增,改可以理解为删了再增)

(1) 删除功能,第一个参数为第一项位置,第二个参数为要删除几个;array.splice(index,insertValue)

const a = ['Saber','间桐樱','伊莉雅','凌']
array.splice(index,num)
a.splice(3,1)
console.log(a);

输出结果:
在这里插入图片描述

(2) 插入功能,第一个参数(插入位置),第二个参数(0,删除0个的意思),第三个参数(插入的项);array.splice(index,insertValue)

const a = ['Saber','间桐樱','伊莉雅','凌']
a.splice(1,0,'弓兵');
console.log(a);

输出结果:
在这里插入图片描述

(3)替换功能,第一个参数(起始位置),第二个参数(删除的项),第三个参数(插入任意数量的项);array.splice(index,num,insertValue)

const a = ['Saber','间桐樱','伊莉雅','凌']
a.splice(3,3,'我');
console.log(a);

输出结果:
在这里插入图片描述

2,push(),该方法可以向数组的末尾添加一个或多个元素,并返回新的长度

const a = ['Saber','间桐樱','伊莉雅','凌']
a.push('我')
console.log(a);

输出结果:
在这里插入图片描述

3,unshif(),该方法可以向数组的开头添加一个或多个元素,并返回新的长度

const a = ['Saber','间桐樱','伊莉雅','凌']
a.unshift('我')
console.log(a);

输出结果:
在这里插入图片描述

4,pop(),该方法从数组的最后删除一个元素,返回值是最后一个元素

const a = ['Saber','间桐樱','伊莉雅','凌']
a.pop()
console.log(a);

输出结果:
史上最全JavaScript数组方法_第4张图片

5,shift(),该方法从数组的头部删除一个元素,返回值是第一个元素

const a = ['Saber','间桐樱','伊莉雅','凌']
a.shift()
console.log(a);

输出结果:
在这里插入图片描述

6,sort(),该方法对数组进行排序,默认进行升序排列,可以传递函数类型的参数决定排序的方式

比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,即 a - b 小于零,则返回一个小于零的值,数组将按照升序排列。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b, 即 a - b 大于零,则返回一个大于零的值,数组将按照降序排列。
const a = [18,19,22,21,18,16]
a.sort((a,b) => a - b )
console.log(a);

const b = [18,19,22,21,18,16]
b.sort((a,b) => b - a ) 
console.log(b);

输出结果:
在这里插入图片描述

7,reverse(),该方法翻转数组

const a = ['Saber','间桐樱','伊莉雅','凌']
a.reverse()
console.log(a);

输出结果:
在这里插入图片描述

8,reduce()该方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

const a = [18,19,22,21,18,16]
const total = a.reduce((sumSofar,item) => sumSofar + item,0)
console.log(a);
console.log(total);

输出结果:
史上最全JavaScript数组方法_第5张图片


二、循环遍历相关方法

1,forEach(item,index) 遍历数组的每个元素,参数为一个函数,参数函数的两个参数为数组项相应的索引

const a = ['Saber','间桐樱','伊莉雅','凌']
a.forEach((item,index)=>{
console.log(item);
console.log(index);
})

输出结果:
史上最全JavaScript数组方法_第6张图片

2,map((item,index)=>{}) 遍历数组的每一个元素,参数为一个函数,参数函数的两个参数为数组项和对应的索引,根据参数函数的执行结果,把这些结果组成一个新数组返回

const a = ['Saber','间桐樱','伊莉雅','凌']
const b = a.map((item,index) => '我的老婆是' + item)
console.log(b);

输出结果:
在这里插入图片描述

3,some((item,index)=>{}) 循环数组,对每一项执行参数函数中的条件,有条件的项返回true,不再继续遍历;如果全部便利完还没有找到符合项则返回false

检测数组中有没有我的老婆伊莉雅

const a = ['Saber','间桐樱','伊莉雅','凌']
const b = a.some((item,index) => item === '伊莉雅')
console.log(b);

输出结果:
在这里插入图片描述

4,indexOf() 查找某个元素的索引值,若有重复的,则返回第一个查到的索引值;若不存在,则返回-1(常用于检测数组中是否含有某个元素)

const a = ['Saber','间桐樱','伊莉雅','凌']
console.log(a.indexOf('伊莉雅')); 
console.log(a.indexOf('我')); 

输出结果:
在这里插入图片描述

5,every((item)=>{}) 根据条件判断数组中的数据是否全部满足条件,若满足则返回true,否则就返回false

const a = [1,2,8,3,4,5,6,7]
console.log(a.every(item => item < 9))
console.log(a.every(item => item > 9))

输出结果:
在这里插入图片描述

6,filter((item,index)=>{}) 过滤数组,返回值是满足条件的数组,包含两个参数,item是当前元素,index是当前元素的索引

const a = ['Saber','间桐樱','伊莉雅','凌']
console.log(a.filter((item,index) => item === 'Saber' || item === '伊莉雅'));

输出结果:
在这里插入图片描述

7,find((item,index)=>{}) ,找到一个符合条件的数组成员

const a = ['Saber','间桐樱','伊莉雅','凌']
console.log(a.find((item,index) => item === 'Saber'));

输出结果:
在这里插入图片描述

8,findIndex((item,index)=>{}),找到一个符合条件的数组成员的索引

const a = ['Saber','间桐樱','伊莉雅','凌']
console.log(a.findIndex((item,index) => item === 'Saber'));

输出结果:
在这里插入图片描述

你可能感兴趣的:(javascript,前端,typescript,web)