es6에서 새 배열을 추가하는 데 일반적으로 사용되는 4가지 방법은 무엇입니까?

es6에서 배열을 추가하는 데 일반적으로 사용되는 네 가지 방법은 다음과 같습니다. 1. 배열을 순회하는 데 사용되며 반환 값이 없습니다. 2. 배열에서 반환 값이 없는 필터(); 3. map(), 배열을 순회하고 새 배열을 반환합니다. 4. Reduce(), 배열의 첫 번째와 마지막 두 항목이 일부 계산을 수행하도록 한 다음 해당 값을 반환합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES6에는 forEach, 필터, 매핑 및 축소라는 매우 실용적인 4가지 배열 방법이 추가되었습니다.

1.forEach

배열을 트래버스하고 반환 값은 없으며 원래 배열을 변경하지 않고 트래버스만 합니다. for 루프 traversal

 let arr=[23,44,56,22,11,99]
   let res=arr.forEach(item=>{
     console.log(item);
     //23,44,56,22,11,99
   })
   let res2=arr.forEach((item,index)=>{
     console.log(item,index);
     //23 0
     //44 1
     //....
   })

2.filter:

filter () 함수는 배열에서 조건에 맞지 않는 값을 걸러냅니다. 콜백 함수가 true를 반환하면 원래 배열을 변경하지 않고 그대로 유지되어 새 배열을 반환합니다! ! ! 배열 중복을 제거하는 데 사용할 수 있습니다

   let arr = [1,5,2,16,4,6]
   //1.找出数组中的偶数
   let newArr=arr.filter((v,i)=>
     v%2==0)
     console.log(newArr,'newArr');//2,16,4,6

   //2.过滤器 保留为TRUE的结果
   let arrTue=[13,14,9,33]
   let newArr2=arrTue.filter(item=>(item%3===0)?true:false)
   console.log(newArr2,'newArr2');//9,33
   //3.利用filter去重‘
 // 第一种
   let arr3=[2,3,5,1,2,3,4,5,6,8],newArr3
   function unique(arr){
    const res = new Map()
    return arr.filter((item)=>
      !res.has(item) && res.set(item,1)
    )
    }
   console.log(newArr3=unique(arr3),'newArr3');//2,3,5,1,4,6,8
//第二种
  let testArray = [
        {key:"01",name:'张三'},
        {key:"02",name:'小李'},
        {key:"03",name:'小罗'},
        {key:"04",name:'张三'},
        {key:"03",name:'小李'},
      ];
      let deduplicationAfter = testArray.filter((value,index,array)=>{
      //findIndex符合条件的数组第一个元素位置。
        return array.findIndex(item=>item.key === value.key && item.name === value.name) === index
      })
      console.log(deduplicationAfter)

3.map:

map은 배열을 순회하고, 새 배열을 반환하고, 원래 배열을 변경하지 않고, 일대일 매핑하고, 새 배열에 매핑합니다

let arr = [6,10,12,5,8]
let result = arr.map(function (item) {
    return item*2
})
let result2 = arr.map(item=>item*2) // es6的箭头函数简写，若想了解，后面的文章有介绍
console.log(result)
console.log(result2)

let score = [18, 86, 88, 24]
let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
console.log(result3)

4.reduce:

reduce()는 여러 항목을 하나로 요약하고(예: 합계 계산, 평균 계산), 감소는 배열 전후의 두 항목이 일부 작업을 수행하도록 합니다. 그 값을 반환하고 원래 배열을 변경하지 않고 계속 계산하여 계산의 최종 결과를 반환합니다. 초기 값이 주어지지 않으면 배열의 두 번째 항목

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 에서 첫 번째 항목부터 순회합니다. 매개변수 콜백 함수, 두 번째 매개변수 초기값

4.1 Summing

//第一种给定初始值
       var arr = [1, 3, 5, 7];
        // 原理: 利用reduce特性 prev初始值设置0 并把函数的返回值再次带入函数中
        var sum = arr.reduce(function (tmp, item,index) { // prev 初始为0 以后则为函数返回的值
          console.log(tmp,item,index);
		    //  0 1  0
			//	1 3  1
			//	 4 5  2
			//	 9 7  3
            return tmp + item; // 数组各项之间的和
        }, 0);
       console.log(sum); //16
   //第二种不给初始值
   var arr2 = [1, 3, 5, 7]
	var result = arr2.reduce(function (tmp, item, index) {
	    //tmp 上次结果，item当前数，index次数1开始
	    console.log(tmp, item, index)
	        //1 3 1 
		   // 4 5 2 
		   // 9 7 3 
	    return tmp + item;
	})
console.log(result,)   //16

4.2 평균 찾기

var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
  console.log(tmp,item,index);
  // 1 3  1
 //  4 5  2
 //  9 7  3
    if (index != arr.length - 1) { // 不是最后一次
        return tmp + item
    } else {
        return (tmp + item)/arr.length
    }
})
console.log(result,'[[[u99')  // 平均值  4

[관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드]

위 내용은 es6에서 새 배열을 추가하는 데 일반적으로 사용되는 4가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!