[问题探讨]js数组(Array)方法汇总2/3

需求：

js数组(Array)方法汇总

索引：

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

一，改变原数组的方法(10种)---1/3点此跳转到对应链接：

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种)---2/3本文阐述：

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种)---3/3点此跳转到对应链接：

1，arr.forEach()---遍历;

2，for()---遍历;

3，for...of....---遍历;

4，for...in...---遍历;

5，...(spread);

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

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

8，Array.isArray();

9，arr.includes();

10，arr.findIndex();

正文：

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

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

(6)特殊用法：产生新数组的方法

const arr = [1, 2, 3];
const newArr = arr.concat();
console.log(newArr) // [1, 2, 3]
newArr[0] = 5;
console.log(newArr) // [5, 2, 3]
console.log(arr) // [1, 2, 3]

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]

(6)特殊用法：产生新数组的方法

const arr = [1, 2, 3];
const newArr = arr.slice();
console.log(newArr) // [1, 2, 3]
newArr[0] = 5;
console.log(newArr) // [5, 2, 3]
console.log(arr) // [1, 2, 3]

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

(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

博文通览提示：

点击此超链接跳转到Tom哥的博文分类和索引页面 Tom哥的博客博文分类和索引页面地址：https://blog.csdn.net/tom_wong666/article/details/84137820