js数组方法汇总

需求：

js数组(Array)方法汇总

索引：

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

一，改变原数组的方法(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]

image

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;
}

image

(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<b)return -1;
  return 1;
})
console.log(arr1);// ["a", "b", "c", "d", "e", undefined]
// 验证排序规则-从大到小
let arr1=['b','c','a',undefined,'e','d'];
arr1.sort((a,b)=>{
  if(a<b)return 1;
  return -1;
})
console.log(arr1);// ["e", "d", "c", "b", "a", undefined]
// 让某个值排在第一位比如'd'
// 注意一个现象:如果要求'd'在第一位，而其他元素排序不变，在元素偏多时(比如10个以上)
// 'd'在第一位不会出问题，但是其他元素的排序可能不稳定
let arr=['c','b','a','d','e'];
arr.sort((a,b)=>{
  // 个人来理解：如果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"]

image

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

image

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

image

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

image

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

image

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

image

二，不动原数组，只产生新数据的方法

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);// ["中国", "俄罗斯", "英国"]

image

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]

image

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

image

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]

image

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]

image

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]

image

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 求最大值

image

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

image

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]]

image

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"}]

image

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"]

image

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

image

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

image

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

image

三，不动原数组，只依据原数组进行判断/处理的方法

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]

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,386评论 6赞 479
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,939评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,851评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,953评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,971评论 5赞 369
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,784评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,126评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,765评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,148评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,744评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,858评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,479评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,080评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,053评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,278评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,245评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,590评论 2赞 343

js数组方法汇总

需求：

索引：

一，改变原数组的方法(10种)：

二，不动原数组，只产生新数据的方法(14种)：

三，不动原数组，只依据原数组进行判断/处理的方法(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()

二，不动原数组，只产生新数据的方法

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

三，不动原数组，只依据原数组进行判断/处理的方法

1，arr.forEach()

2,for

3,for...of...

4,for...in...

5,...(spread)

6,arr.indexOf()

7,arr.every()和arr.some()

8，Array.isArray()

9,arr.includes()

10,arr.findIndex();

推荐阅读更多精彩内容