js中数组常用方法总结

js中数组常用方法总结

• 调用函数相关接口

1. Array.map()
   将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，此方法没有改变原来的数组

	let arr = [1, 2, 3, 4, 5]
    let newArr = arr.map(x => x*2)
    //arr= [1, 2, 3, 4, 5]   原数组保持不变
    //newArr = [2, 4, 6, 8, 10] 返回新数组

2. Array.forEach()
   将数组中的每个元素执行传进提供的函数，该函数可接收三个值：数组元素、元素的索引、数组本身，没有返回值，此方法改变了原数组

    let arr = [1, 2, 3, 4, 5]
    num.forEach(x => x*2)
    // arr = [1, 2, 3, 4, 5]  数组改变,注意和map区分

JS中Map和ForEach的区别

3. Array.filter()
   将所有元素进行判断，将满足条件的元素作为一个新的数组返回，没有改变原来的数组

	let arr = [1, 2, 3, 4, 5]
	const isBigEnough = value => value >= 3
	let newArr = arr.filter(isBigEnough )
	//newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

4. Array.every()
   将所有元素进行判断返回一个布尔值，判断所有元素是否满足判断条件，是则返回true，否则为false，没有改变原来的数组

	let arr = [1, 2, 3, 4, 5]
	const isLessThan4 = value => value < 4
	const isLessThan6 => value => value < 6
	arr.every(isLessThan4 ) //false
	arr.every(isLessThan6 ) //true

5. Array.some()
   将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false，没有改变原来的数组

	let arr= [1, 2, 3, 4, 5]
    const isLessThan4 = value => value < 4
    const isLessThan6 = value => value > 6
    arr.some(isLessThan4 ) //true
    arr.some(isLessThan6 ) //false

一旦every()和some()确认该返回什么值时它们就会停止遍历元素

6. Array.reduce()
   所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型，没有改变原来的数组
   点击查看Array.reduce()全面用法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
/*
  total: 必需。初始值, 或者计算结束后的返回值。
  currentValue： 必需。当前元素。
  currentIndex： 可选。当前元素的索引；                     
  arr： 可选。当前元素所属的数组对象。
  initialValue: 可选。传递给函数的初始值，相当于total的初始值。
*/

    const arr = [12, 34, 23];
	const sum = arr.reduce((total, num) => total + num);
	<!-- 设定初始值求和 -->
	const arr = [12, 34, 23];
	const sum = arr.reduce((total, num) => total + num, 10);  // 以10为初始值求和
	<!-- 对象数组求和 -->
	var result = [
	  { subject: 'math', score: 88 },
	  { subject: 'chinese', score: 95 },
	  { subject: 'english', score: 80 }
	];
	const sum = result.reduce((accumulator, cur) => accumulator + cur.score, 0); 
	const sum = result.reduce((accumulator, cur) => accumulator + cur.score, -10);  // 总分扣除10分
    与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的

• 数组元素操作（增删改）相关方法

7. Array.push()
   在数组的后面添加新加元素，此方法改变了数组的长度
8. Array.pop()
   在数组后面删除最后一个元素，并返回对应删除元素的数组，此方法改变了数组的长度

	const arr = [1, 2, 3, 4, 5];
    // console.log(arr.pop()); // 5
    arr.pop();
    console.log(arr); // [1, 2, 3, 4]

9. Array.shift()
   在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度

	const arr = [1, 2, 3, 4, 5];
    // console.log(arr.shift()); // 1
    arr.shift();
    console.log(arr); // [2, 3, 4, 5]

10. Array.unshift()
    将一个或多个元素添加到数组的开头，并返回新数组的长度，此方法改变了数组的长度

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

11. Array.splice()
    万能方法，可以实现增删改。入参：开始位置， 删除的个数，元素，返回被删除的元素（数组形式），此方法改变了原数组
    返回的数组包含第一个参数位置但不含第二个参数位置之间的元素，如果只有一个参数，则返回开始位置到数组结尾的所有元素。如参数中出现负数，表示相对于数组中最后一个元素的位置。（参数左闭右开 [ 参数1, 参数2 ) ）

	const arr = [1, 2, 3, 4, 5];
    // const arr1 = arr.splice(2, 0, 'haha');     // arr1: [], arr: [1, 2, 'haha', 3, 4, 5]
    // const arr2 = arr.splice(2, 3);             // arr2: [3, 4, 5], arr: [1, 2]
    // const arr3 = arr.splice(2, 1, 'haha');     // arr3: [3], arr: [1, 2, 'haha', 4, 5]

12. Array.slice()
    将截取数组中指定的一个片段，并返回新的数组，不会改变原数组。它的两个参数分别指定了片段的开始和结束的位置
    返回的数组包含第一个参数位置但不含第二个参数位置之间的元素，如果只有一个参数，则返回开始位置到数组结尾的所有元素。如参数中出现负数，表示相对于数组中最后一个元素的位置。（参数左闭右开 [ 参数1, 参数2 ) ）

	var a = [1,2,3,4]
	console.log(a.slice(0,2)) //[1, 2]
	console.log(a.slice(2)) //[3, 4]
	console.log(a.slice(-2,-1)) //[3]

• 其它

13. Array.isArray()
    判断一个对象是不是数组，返回的是布尔值，没有改变原来的数组

14. Array.concat()
    可以将多个数组拼接成一个数组，返回一个新的数组，没有改变原来的数组

	let arr1 = [1, 2, 3]
    arr2 = [4, 5]
    let arr = arr1.concat(arr2)
    console.log(arr)//[1, 2, 3, 4, 5]

15. Array.toString()
    将数组转化为字符串，没有改变原来的数组

	let arr = [1, 2, 3, 4, 5];
   	let str = arr.toString()
    console.log(str)// 1,2,3,4,5

16. Array.join()
    将数组转化为字符串（与toString相区分，可以设置元素之间的间隔，如果不指定分隔符，默认使用逗号），没有改变原来的数组

	let arr = [1, 2, 3, 4, 5];
    let str1 = arr.join()
    let str2 = arr.join(',')
    let str3 = arr.join('##')
    console.log(str1)// 12345
    console.log(str2)// 1,2,3,4,5
    console.log(str3)// 1##2##3##4##5

17. Array.reverse()
    将数组中的元素颠倒顺序，并返回新的数组，此方法改变了原数组

	let a = [1, 2, 3];
    console.log(a.reverse()); // [3, 2, 1]

18. Array.sort()
    将数组中的元素进行排序（如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序，如果数组包含undefined元素，将会被安排到数组的尾部。），并返回新的数组，此方法改变了原数组

	const arr = [10, 5, 40, 25, 1000, 1];
    const arr1 = arr.sort((a, b) => a - b);
    console.log(arr, 'arr'); // [1, 5, 10, 25, 40, 1000]
    console.log(arr1, 'arr1'); // [1, 5, 10, 25, 40, 1000]

根据数组对象中的某个属性值进行排序，甚至多重排序

如下例子，我们按学生的总分排序，如果总分相等，我们再按照语文成绩排序。

	var jsonStudents = [
	    {name:"Dawson", totalScore:"197", Chinese:"100",math:"97"},
	    {name:"HanMeiMei", totalScore:"196",Chinese:"99", math:"97"},
	    {name:"LiLei", totalScore:"185", Chinese:"88", math:"97"},
	    {name:"XiaoMing", totalScore:"196", Chinese:"96",math:"100"},
	    {name:"Jim", totalScore:"196", Chinese:"98",math:"98"},
	    {name:"Joy", totalScore:"198", Chinese:"99",math:"99"}];
	jsonStudents.sort(function(a,b){
	    var value1 = a.totalScore,
	    value2 = b.totalScore;
	    if(value1 === value2){
	        return b.Chinese - a.Chinese;
	    }
	    return value2 - value1;
	});
	// 输出
	/* 0:{name: "Joy", totalScore: "198", Chinese: "99", math: "99"}
    1:{name: "Dawson", totalScore: "197", Chinese: "100", math: "97"}
    2:{name: "HanMeiMei", totalScore: "196", Chinese: "99", math: "97"}
    3:{name: "Jim", totalScore: "196", Chinese: "98", math: "98"}
    4:{name: "XiaoMing", totalScore: "196", Chinese: "96", math: "100"}
    5:{name: "LiLei", totalScore: "185", Chinese: "88", math: "97"} */

19. Array.indexOf()
    搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引或者如果没有找到就返回-1（区别lastIndexOf()是反方向搜索），此方法没有改变原数组
    第一个参数是需要搜索的值，第二个参数是可选的：它指定数组的一个索引，从指定位置开始搜索。如果省略该参数，indexOf()从头开始搜索，而lastIndexOf()从末尾开始搜索。

	var a = [0,1,2,1,0]
	console.log(a.indexOf(1)) //1
	console.log(a.lastIndexOf(1)) //3
	console.log(a.indexOf(3)) //-1