js数组方法汇总

简介: js数组方法汇总

对数组方法的学习和汇总,分为三大类:

一,改变原数组的方法(10种):
1,arr[key]='tom';

2,arr.splice();

3,arr.reverse();

4,arr.sort();

5,arr.push();

6,arr.pop();

7,arr.unshift();

8,arr.shift();

9,arr.fill();

10,arr.copyWithin();

二,不动原数组,只产生新数据的方法(14种):
1,arr.concat();

2,arr.slice();

3,arr.join();

4,arr.toString();

5,arr.map();

6,arr.filter();

7,arr.reduce()和arr.reduceRight();

8,arr.find();

9,Array.from();

10,Array.of();

11,Object.keys(arr);

12,arr.values();

13,arr.keys();

14,arr.entries();

三,不动原数组,只依据原数组进行判断/处理的方法(10种):
1,arr.forEach()---遍历方法1;

2,for()---遍历方法2;

3,for...of....---遍历方法3;

4,for...in...---遍历方法4;

5,...(spread);

6,arr.indexOf()||arr.lastIndexOf();

7,arr.every()||arr.some();

8,Array.isArray();

9,arr.includes();

10,arr.findIndex();

正文:
一,改变原数组的方法
1,arr[key]='tom';依据下标直接赋值
代码如下,说明一点:索引和关联数组不是互斥的,这里为了方便说明定义了两个空数组,实际上,可以同时用数字和字符串作为下标为同一个数组赋值;

//定义一个空数组
let indexArr=[];
//以索引数组赋值方式
indexArr[0]='tom';
console.log(indexArr);//['tom']
//定义一个空数组
let associativeArr=[];
//以关联数组方式赋值
associativeArr['age']=30;
console.log(associativeArr);//[age:30]

image
2,arr.splice()
(1)作用:允许从指定的数组中,删除一部分元素,同时还可以添加另外一部分元素;

(2)语法:var res=数组名.splice(start,count,e1,e2,e3);

(3)语法解释:start:开始删除和(或)添加元素的位置;count:删除的数量,0表示不删除任何元素,省略表示从开始位置全部删除;e1,e2,e3:新添加的元素;

(4)返回值:返回的是删除的元素组成的数组,原数组会被删除对应的元素;

(5)示例代码:

// 定义一个数组
let arr=[1,2,3,4,5,6];
// 用splice方法处理
let res=arr.splice(1,2,'new1','new2','new3');
// 查看返回值
console.log('res',res);// [2,3]
// 查看修改后的数组
console.log('arr',arr);// [1, "new1", "new2", "new3", 4, 5, 6]
// 验证为count为0的情况
let newRes=arr.splice(1,0);
console.log(newRes);// []
console.log(arr);// [1, "new1", "new2", "new3", 4, 5, 6]
// 验证count空着的情况
let myNewRes=arr.splice(1);
console.log(myNewRes);// ["new1", "new2", "new3", 4, 5, 6]
console.log(arr);// [1]

image
3,arr.reverse()
(1)作用:将一个数组反转(次序反转);

(2)语法:var res=数组名.reverse();

(3)语法解释:#;

(4)返回值:该函数会改变原有数组,返回的时反转后的新数组;

(5)示例代码:

let arr=[1,2,3,4,5,6];
let res=arr.reverse();
console.log(res);// [6, 5, 4, 3, 2, 1]
console.log(arr);// [6, 5, 4, 3, 2, 1]

4,arr.sort()
(1)作用:将数组中的元素排序;

(2)语法:arr.sort();

(3)语法解释:小括号内可以带参数,如果不带参数,默认依照字母表顺序排列,如果数组中有unefined值,将会被排到数组尾部;小括号内也可以带一个函数作为参数:

function(a,b){
// value是a和b比较的结果
return value;
}

image
函数解释:a,b分别代表数组的两个元素,数组元素采用冒泡方法比较,每个元素至少会比较一次;value值如果小于0,从小到大排序,value如果大于0,从大到小排序,value如果等于0,不动顺序(如果是a===b的情况value需要等于0,其实可以忽略这个判断);

函数个人理解如下,仅供参考,完整用例见(5)示例代码:

// 从小到大排序
function(a,b){
// 个人来理解:如果a小于b,a-b强制等于-1=>a小于b,a排前面(升序)
// 基于a-b的判断,结果可以强制定义,依据定义的结果,小值永远在前
if(a<b)return -1;
return 1;
}

// 从大到小排序
function(a,b){
// 个人来理解:如果a小于b,a-b强制等于1=>a大于b,b排前面(降序)
// 基于a-b的判断,结果可以强制定义,依据定义的结果,小值永远在前
if(a<b)return 1;
return -1;
}

(4)返回值:返回排序后的数组,注意undefined值总会被默认排在最后,无论升序还是降序;

(5)示例代码:

let arr=['b','c','a',undefined,'e','d'];
// 不带参数排序
let res=arr.sort();
// 验证返回值
console.log(res);// ["a", "b", "c", "d", "e",undefined]
// 验证原数组
console.log(arr);// ["a", "b", "c", "d", "e",undefined]
// 验证返回值是否指向原数组
console.log(res===arr); // true
// 验证排序规则-从小到大
let arr1=['b','c','a',undefined,'e','d'];
arr1.sort((a,b)=>{
if(a{
if(a{
// 个人来理解:如果a是‘d’,a-b强制等于-1=>a小于b,a排前面
if(a==='d')return -1;
// 个人理解:如果b是‘d’,a-b强制等于1=>b小于a,b排前面
if(b==='d')return 1;
return 0;
})
console.log(arr); // ["d", "c", "b", "a", "e"]

5,arr.push()
(1)作用:在数组尾部(栈顶)添加新元素;

(2)语法:var res=数组名.push(n);

(3)语法解释:n是需要插入数组的元素;

(4)返回值:更新后的原数组的长度;

(5)示例代码:

let arr=[10,20,30];
let res=arr.push(40);
console.log(arr);// [10, 20, 30, 40]
console.log(res);// 4

image
6,arr.pop()
(1)作用:删除数组尾部(栈顶)的元素;

(2)语法:var res=数组名.push();

(3)语法解释:#;

(4)返回值:被删除的元素;

(5)示例代码:

let arr=[10,20,30];
let res=arr.pop();
console.log(arr);// [10, 20]
console.log(res);// 30

7,arr.unshift()
(1)作用:在数组头部(栈底)添加新元素;

(2)语法:var res=数组名.unshift(n);

(3)语法解释:n是需要插入数组的元素;

(4)返回值:更新后的原数组的长度;

(5)示例代码:

let arr=[10,20,30];
let res=arr.unshift(40);
console.log(arr);// [40, 10, 20, 30]
console.log(res);// 4

8,arr.shift()
(1)作用:删除数组头部(栈底)的元素;

(2)语法:var res=数组名.shift();

(3)语法解释:#;

(4)返回值:被删除的元素;

(5)示例代码:

let arr=[10,20,30];
let res=arr.shift();
console.log(arr);// [20, 30]
console.log(res);// 10

9,arr.fill()
(1)作用:用一个固定值填充一个数组中从起始索引到终止索引内的全部元素;

(2)语法:arr.fill(value,start,end);

(3)语法解释:value某个值,start起始下标,end结束下标;

(4)返回值:修改后的原数组;

(5)示例代码:

let arr=[1,2,3,4,5,6,7,8,9];
const res=arr.fill('tom',2,14);
console.log(res);// [1, 2, "tom", "tom", "tom", "tom", "tom", "tom", "tom"]
console.log(arr);// [1, 2, "tom", "tom", "tom", "tom", "tom", "tom", "tom"]
console.log(res===arr);// true

10,arr.copyWithin()
(1)作用:浅拷贝数组的部分元素到同一数组的不同位置,且不改变数组的长度;

(2)语法:arr.copyWithin(target,start,end);

(3)语法解释:target---复制序列即将覆盖元素的目标位置,如果是负数,target 将从末尾开始计算,如果 target 大于等于 arr.length,将会不发生拷贝,如果 target 在 start 之后,复制的序列将被修改以符合 arr.length;start 被复制元素的起始位置,如果是负数,start 将从末尾开始计算,如果 start 被忽略,copyWithin 将会从0开始复制;end 被复制元素的结束位置,如果是负数,end 将从末尾开始计算,如果 end 被忽略,copyWithin 将会复制到 arr.length;以上位置遵循数组索引规则(即位于元素的左下角);

(4)返回值:修改后的原数组;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.copyWithin(0,1,3)
console.log(res);// [2, 3, 3, 4, 5, 6, 7, 8, 9]
console.log(res===arr);// true

二,不动原数组,只产生新数据的方法
1,arr.concat()
(1)作用:拼接两个或多个数组;

(2)语法:let res=数组名.concat(arr1,arr2,arr3.......);

(3语法解释:arr指代数组;

(4)返回值:拼接后的新数组;

(5)示例代码:

const arr=["中国","俄罗斯","英国"];
const arr1=["日本","韩国","朝鲜"];
const arr2=["美国","巴西","西班牙"];
const res=arr.concat(arr1,arr2);
console.log(res);// ["中国", "俄罗斯", "英国", "日本", "韩国", "朝鲜", "美国", "巴西", "西班牙"]
console.log(arr);// ["中国", "俄罗斯", "英国"]

2,arr.slice()
(1)作用:用来截取子数组,从指定的数组中,截取几个连续的元素,组成一个新数组;

(2)语法:let res=数组名.slice(start,[end]);

(3)语法解释:start截取的开始下标,end截取的结束下标(可省略,如果省略,一直截取到数组末尾),[]表示可以省略;

(4)返回值:截取的元素组成的新数组;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.slice(2,5);
console.log(res);// [3, 4, 5]
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9]

3,arr.join()
(1)作用:将数组的元素值通过指定的字符连接到一起,并组成一个新的字符串;

(2)语法:let res=arr.join(str);

(3)语法解释:str指代一个字符串;

(4)返回值:返回数组元素加分割字符串组成的一个新数组;和字符串方法arr.split(str)有互反的作用;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.join('-');
console.log(res);// 1-2-3-4-5-6-7-8-9
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9]
const test=res.split('-');
console.log(test);// ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
console.log(res);// 1-2-3-4-5-6-7-8-9

4,arr.toString()
(1)作用:将数组的元素值通过逗号连接到一起,并组成一个新的字符串;

(2)语法:let res=arr.toString();

(3)语法解释:#;

(4)返回值:返回用数组元素加逗号分隔组成的新字符串;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.toString();
console.log(res);// 1,2,3,4,5,6,7,8,9
console.log(arr)// [1, 2, 3, 4, 5, 6, 7, 8, 9]

5,arr.map()
(1)作用:将数组的每个元素传递给指定函数, 并返回一个数组;

(2)语法:arr.map(function(item){return item*item});

(3)语法解释:item指代数组的元素,每个元素都会调用后面的函数处理一次;

(4)返回值:函数处理后的新数组;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.map((item)=>{
   return item*item});
console.log(res);// [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9]

6,arr.filter()
(1)作用:依据指定的函数逻辑判断,并返回原数组的一个元素的子集组成的新数组;

(2)语法:arr.filter(function(item){return item<n});

(3)语法解释:item指代数组元素,符合条件(判定为true)的item会被返回;

(4)返回值:返回符合判断条件的元素组成的新数组;

(5)示例代码:

// 示例1
const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.filter((item)=>{
   return item<5});
console.log(res);// [1, 2, 3, 4]

// 示例2
const arr2=[0,1,2,3];
const res2=arr2.filter((item)=>{
   return true});
console.log(res2);// [0, 1, 2, 3]

// 示例3--true过滤空元素
const arr3=[0,,1,2,3];
const res3=arr3.filter((item)=>{
   return true})
console.log(res3);// [0, 1, 2, 3]

// 示例4--true过滤不掉null
const arr4=[0,null,1,2,3];
const res4=arr4.filter((item)=>{
   return true})
console.log(res4);// [0, null, 1, 2, 3]

//示例5--true过滤不掉undefined
const arr5=[0,undefined,1,2,3];
const res5=arr5.filter((item)=>{
   return true})
console.log(res5);

//示例6--过滤null和undefined
const arr6=[0,undefined,1,2,null,3];
const res6=arr6.filter((item)=>{
   return item!==undefined && item!==null})
console.log(res6);// [0, 1, 2, 3]

7,arr.reduce()和arr.reduceRight()
(1)作用:依据指定函数对数组进行收敛/缩减,最终返回单一值作为计算结果;

(2)语法:arr.reduce(function(res,value,index,arr){return res+value},n);

(3)语法解释:res为每次计算的结果,初始值是n,如果n没给,则延取数组第一个元素作为其初始值,value则延取数组第二个元素;value是数组的元素值,index是数组的下标,arr是数组本身;res和value必须给,index/arr/n可选;注意arr为空数组且未给参数n时报错;arr为单元素数组,未给n时,简单返回单元素;arr为空数组,n给了时,简单返回n;reduce从左到右处理,reduceRight从右到左处理;

(4)返回值:返回最终计算后的res值;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
const res1=arr.reduce((res,value)=>{
   return res+value},0);
console.log(res1);// 45 求和
const res2=arr.reduce((res,value)=>{
   return res*value},1);
console.log(res2);// 362880 求积
const res3=arr.reduce((res,value)=>{
   return res>value?res:value});
console.log(res3);// 9 求最大值

8,arr.find()
(1)作用:判断数组内是否有符合条件的元素,并返回这个元素;

(2)语法:arr.find(function(item,index,arr){return item<9});

(3)语法解释:item数组元素,index数组下标,arr数组本身;

(4)返回值:返回数组内通过判断的第一个元素的值,若找不到返回undefined;空数组不执行函数;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.find((item)=>{
   return item<4})
console.log(res);// 1
const arr1=[{
   name:'tom',age:30},{
   name:'jery',age:35}];
const res1=arr1.find((item)=>{
   return item.name==='tom'});
console.log(res1);// {name: "tom", age: 30}
const res2=arr1.find((item)=>{
   return item.name==='tomBro'});
console.log(res2);// undefined

9,Array.from()
(1)作用:从一个类似数组或可迭代对象中创建一个新的数组;

(2)语法:Array.from(arrayLike, mapFn, thisArg);

(3)语法解释:arrayLike(必须)想要转换成数组的伪数组对象或可迭代对象;mapFn(可选)如果指定了该参数,新数组中的每个元素会执行该回调函数;thisArg(可选)执行回调函数 mapFn 时的 this 对象;

(4)返回值:一个新的数组;

(5)示例代码:

function fun() {
   
  return Array.from(arguments);
}
const res=fun('tom', 'jery');
console.log(res);// ["tom", "jery"]

const res1=Array.from('test');
console.log(res1);// ["t", "e", "s", "t"]

const res4=Array.from('test',item=>item+2);
console.log(res4);// ["t2", "e2", "s2", "t2"]

const set = new Set(['test', window]); 
const res2=Array.from(set);
console.log(res2);// ["test", Window]

const map = new Map([[1, 2], [2, 4], [4, 8]]);
const res3=Array.from(map);
console.log(res3);// [[1, 2], [2, 4], [4, 8]]

10,Array.of()
(1)作用:将任意数量的参数,按顺序组成新数组;

(2)语法:Array.of(n);

(3)语法解释:n任意格式的数据;

(4)返回值:参数按照顺序组成的新数组;和Array()的区别,当参数是Number且是>=0的整数时,Array()默认返回对应长度的数组(元素为空),否则报错;而Array.of()一律将参数当作元素看待。

(5)示例代码:

const res=Array.of('tom');
console.log(res);// ["tom"]
const res1=Array.of('tom',1,[1,2],{
   name:'tom'});
console.log(res1);// ["tom", 1, [1, 2], {name: "tom"}]

11,Object.keys(arr)
(1)作用:遍历数组的键(下标);

(2)语法:Object.keys(arr);

(3)语法解释:arr指代某个数组;

(4)返回值:返回原数组的键(下标)组成的新数组;

(5)示例代码:

const arr1=[1,2,3,4,5,6,7,8,9];
const res1=Object.keys(arr1);
console.log(res1);// ["0", "1", "2", "3", "4", "5", "6", "7", "8"]
let arr2=[];
arr2['name']='tom';
arr2['age']=30;
arr2['female']='man';
const res2=Object.keys(arr2);
console.log(res2);// ["name", "age", "female"]

12,arr.values()
(1)作用:该方法获取一个数组迭代器对象,该对象包含数组中每一个索引的值;

(2)语法:arr.values();

(3)语法解释:迭代器对象Iterator具有next()方法,可以用来依次调用它的值;

(4)返回值:返回原数组的迭代器对象,通过next()方法的value属性获取迭代器对象的值;

(5)示例代码:

const arr=['tom','jery','jack','wilson'];
const res=arr.values();
console.log(res.next().value);// tom
console.log(res.next().value);// jery
console.log(res.next().value);// jack
console.log(res.next().value);// wilson
console.log(res.next().value);// undefined

13,arr.keys()
(1)作用:该方法获取一个数组迭代器对象,该对象包含数组中每一个索引的键;

(2)语法:arr.keys();

(3)语法解释:迭代器对象Iterator具有next()方法,可以用来依次调用它的值;

(4)返回值:返回原数组的迭代器对象,通过next()方法的value属性获取迭代器对象的值;

(5)示例代码:

const arr=['tom','jery','jack','wilson'];
const res=arr.keys();
console.log(res.next().value);// 0
console.log(res.next().value);// 1
console.log(res.next().value);// 2
console.log(res.next().value);// 3
console.log(res.next().value);// undefined

14,arr.entries()
(1)作用:该方法获取一个数组迭代器对象,该对象包含数组中每一个索引的键值对;

(2)语法:arr.entries();

(3)语法解释:迭代器对象Iterator具有next()方法,可以用来依次调用它的值;

(4)返回值:返回原数组的迭代器对象,通过next()方法的value属性获取迭代器对象的值;

(5)示例代码:

const arr=['tom','jery','jack','wilson'];
const res=arr.entries();
console.log(res.next().value);// [0, "tom"]
console.log(res.next().value);// [1, "jery"]
console.log(res.next().value);// [2, "jack"]
console.log(res.next().value);// [3, "wilson"]
console.log(res.next().value);// undefined

三,不动原数组,只依据原数组进行判断/处理的方法
1,arr.forEach()
(1)作用:遍历数组,为每个元素调用指定的函数;

(2)语法:arr.forEach(function(item,index,arr){arr[index]=item+1;});

(3)语法解释:item指代元素,index指代下标,arr指代数组本身;

(4)返回值:undefined;

(5)示例代码:

// 示例1.1
const arr=[1,2,3,4,5,6,7,8,9];
let sum=0;
const res=arr.forEach((item)=>{
   sum+=item});
console.log(res)// undefined
console.log(sum);// 45

// 示例1.2
const res1=arr.forEach((item,index,arr)=>{
   arr[index]=item+1})
console.log(res1)// undefined
console.log(arr);// [2, 3, 4, 5, 6, 7, 8, 9, 10]

// 示例1.3
const res2=arr.forEach((item)=>{
   return item+1});
console.log(res2);// undefined

// 示例2
let arr2=[];
arr.forEach((item,index)=>{
   arr2[index]=item+1});
console.log(arr2);// [2, 3, 4, 5, 6, 7, 8, 9, 10]

2,for
(1)作用:遍历数组;

(2)语法:for(let key=0;key<arr.lenth;key++){};

(3)语法解释:arr指代某个数组;

(4)返回值:无;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
for(let key=0;key<arr.length;key++){
   
  console.log(arr[key]);
}
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

3,for...of...
(1)作用:遍历数组;

(2)语法:for(let item of arr){};

(3)语法解释:arr指代数组,item指代数组的元素;

(4)返回值:无;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
for(let item of arr){
   
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

4,for...in...
(1)作用:遍历数组;

(2)语法:for(let key in arr){};

(3)语法解释:arr指代数组,key指代数组的下标;

(4)返回值:无;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
for(let item of arr){
   
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

5,...(spread)
(1)作用:如果函数需要传入多个参数值,但是给定的参数却是数组,函数无法处理时,可以用...实现数组的打散和逐个分配;

(2)语法:function computed(arr){};let arr=[1,2,3];computed(...arr);

(3)语法解释:arr指代某个数组;

(4)返回值:无;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
console.log(...arr);// 1 2 3 4 5 6 7 8 9 
const res=Math.min(...arr);
console.log(res);// 1
// 分解步骤
function getMin(){
   
  const arrLike=arguments;
  let min;
  for(let key in arrLike){
   
    if(key===0){
   
      min=arrLike[key]
    }else{
   
      min=min<=arrLike[key]?min:arrLike[key];
    }
  } 
  return min;
}
const res1 = getMin(...arr);
console.log(res1);// 1

6,arr.indexOf()
(1)作用:搜索整个数组中是否有给定的值;

(2)语法:arr.indexOf(n) || arr.lastIndexOf(n);

(3)语法解释:n代表某个元素值;

(4)返回值:返回找到的第一个元素的索引,如果没找到,返回-1;indexOf从前往后找,lastIndexOf从后往前找;

(5)示例代码:

const arr=['tom','jery','tom','jack'];
const res1=arr.indexOf('tom');
console.log(res1);// 0
const res2=arr.lastIndexOf('tom')
console.log(res2);// 2
const res3=arr.indexOf('kity')
console.log(res3);// -1

7,arr.every()和arr.some()
(1)作用:对数组元素应用指定的函数进行判定,判定是否符合条件;

(2)语法:arr.every(function(item){return item<n}),arr.some(function(item){return item<n});

(3)语法解释:<n是某判断条件;every要求所有元素符合条件,some只要求最少有一个元素符合要求

(4)返回值:返回true或者false;

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.every((item)=>{
   return item<10});
console.log(res);// true
const res1=arr.every((item)=>{
   return item<8});
console.log(res1);// false
const res2=arr.some((item)=>{
   return item <8});
console.log(res2);// true
const res3=arr.some((item)=>{
   return item >10});
console.log(res3);// false

8,Array.isArray()
(1)判断一个数据是否是数组格式;

(2)语法:Array.isArray();

(3)语法解释:n是一个待判断的数据;

(4)返回值:布尔值;

(5)示例代码:

const data1=[1,2,3,,4,5,6];
const data2={
   name:'tom',age:30};
const data3='tom';
const res1=Array.isArray(data1);
console.log(res1);// true
const res2=Array.isArray(data2);
console.log(res2);// false
const res3=Array.isArray(data3);
console.log(res3);// false

9,arr.includes()
(1)作用:判断一个数组中是否包含一个指定的值;

(2)语法:arr.includes(n);

(3)语法解释:n某个指定的值;

(4)返回值:布尔值;

(5)示例代码:

const arr=['中国','日本','韩国'];
const res1=arr.includes('中国');
console.log(res1);// true
const res2=arr.includes('china');
console.log(res2);// false

image
10,arr.findIndex();
(1)作用:判断数组内是否有符合条件的元素,并返回这个元素的下标;

(2)语法:arr.findIndex(function(item,index,arr){return item<9});

(3)语法解释:item数组元素,index数组下标,arr数组本身;

(4)返回:返回数组内通过判断的第一个元素的下标,若找不到返回-1;空数组不执行函数;

和arr.indexOf(n)的区别:indexOf直接检查某个数组是否包含某个元素,findIndex是判断数组内是否有符合条件的元素,后者功能更丰富,但是前者更简洁;另外,借助Object.is后者可以判断NaN,前者不可以。

(5)示例代码:

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.findIndex((item)=>{
   return item<4})
console.log(res);// 0
const arr1=[{
   name:'tom',age:30},{
   name:'jery',age:35}];
const res1=arr1.findIndex((item)=>{
   return item.name==='tom'});
console.log(res1);// 0
const res2=arr1.findIndex((item)=>{
   return item.name==='tomBro'});
console.log(res2);// -1
// indexOf方法不能判定NaN
const res3=[NaN].indexOf(NaN);
console.log(res3);// -1
// finIndex借助Object.is方法可以判断NaN
const res4=[NaN].findIndex(y => Object.is(NaN, y));
console.log(res4);// 0
相关文章
|
13天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
27天前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
8天前
|
JavaScript 前端开发
JavaScript基础知识-方法
文章通过示例代码讲解了JavaScript中如何给对象添加方法以及如何调用这些方法。
13 2
JavaScript基础知识-方法
|
8天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
9 1
JavaScript基础知识-数组的常用方法
|
13天前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作,包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
JS算法必备之String常用操作方法
|
13天前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等,提供了数组操作的全面指南。
JS算法必备之Array常用操作方法
|
6天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
13天前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
|
19天前
|
JavaScript 前端开发 开发者
JS 继承之谜:究竟有哪些神秘方法?Web 前端开发者必知的关键技巧待你揭开谜底!
【8月更文挑战第23天】JavaScript (JS) 是 Web 前端开发的关键语言,其中继承是面向对象编程的重要概念。本文探讨了 JS 中几种继承机制:原型链继承、构造函数继承及组合继承。原型链继承利用原型对象实现属性和方法的共享;构造函数继承通过在子类构造器内调用父类构造器实现私有属性的复制;组合继承结合两者优点,既支持属性共享又避免了属性被意外覆盖的风险。理解这些模式有助于开发者更高效地组织代码结构,提升程序质量。
27 1
|
23天前
|
JavaScript Linux
2022年超详细在CentOS 7上安装Node.js方法(源码安装)
这篇文章介绍了在CentOS 7系统上通过源码安装Node.js的详细步骤,包括从官网下载Node.js源码包、将安装包上传至虚拟机、解压安装包、删除压缩文件、编译安装Node.js、检查Node.js和npm版本,以及切换npm源到淘宝镜像以加速下载。此外,还提供了一个获取Linux下Node.js离线安装包的微信公众号搜索方式。