es6에서는 Reduce() 함수를 사용하여 배열의 각 요소에 대해 사용자가 제공한 콜백 함수를 왼쪽에서 오른쪽으로 실행하고 누적 결과를 "arr.reduce( callback) 구문으로 단일 반환 값으로 요약합니다. (누산기, 현재값[, 인덱스[, 배열]])[, 초기값])". Reduce() 함수는 원래 배열을 변경하지 않습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
es6 Reduce() 소개
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
첫 번째 매개변수: 콜백 함수
4개의 매개변수가 포함된 배열의 각 값을 실행하는 함수(두 번째 매개변수initialValue가 제공되지 않은 경우 첫 번째 값 제외):
누산기: 누산기 누적 콜백의 반환 값입니다. 콜백이 마지막으로 호출되었을 때 반환된 누적 값 또는 초기 값입니다(아래 참조).
currentValue: 배열에서 처리 중인 요소입니다.
currentIndex 선택 사항: 배열에서 처리 중인 현재 요소의 인덱스입니다. initialValue가 제공되면 시작 인덱스 번호는 0이고, 그렇지 않으면 인덱스 1에서 시작됩니다.
array 선택사항: Reduce() 호출 시 원래 배열
두 번째 매개변수:initialValue는 선택사항입니다.
콜백 함수가 처음 호출될 때 첫 번째 매개변수의 값입니다. 초기값이 제공되지 않으면 배열의 첫 번째 요소가 사용됩니다. 참고: 초기값이 없는 빈 배열에 대해 축소를 호출하면 오류가 발생합니다.
조금 혼란스러워 보일 수 있지만 실제로는 두 가지 상황이 있습니다. 하나는 두 번째 매개변수인initialValue의 초기값이 제공되는 것이고, 다른 하나는 초기값이 제공되지 않는다는 것입니다.
var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.reduce(reducer)
reduce는 배열을 작동하는 데 도움이 될 수 있는 배열 프로토타입 개체에 대한 메서드입니다. 이는 감속기라고 불리는 다른 함수를 매개변수로 사용합니다.
reducer에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수 param1은 마지막 감속기 실행의 결과입니다. 감속기가 처음 실행되는 경우 param1의 기본값은 배열의 첫 번째 요소 값입니다.
reduce 메서드는 for 루프와 마찬가지로 배열의 각 요소를 반복합니다. 그리고 루프의 현재 값을 매개변수 2로 전달합니다.
배열을 순회한 후, Reduce는 마지막 감속기가 계산한 결과를 반환합니다.
자세한 예시를 살펴보겠습니다.
var arr = ['a', 'b', 'c', 'd', 'e']; function add(x, y) { return x + y; } arr.reduce(add)
다음으로 위 코드가 어떻게 실행되는지 살펴보겠습니다.
이 코드에서 감속기는 add 입니다.
먼저 add를 처음 실행하기 때문에 배열의 첫 번째 요소 'a'는 add의 첫 번째 매개변수로 처리되고, 그런 다음 루프는 배열의 두 번째 요소 'b'부터 시작됩니다. 정렬. 이번에는 'b'가 추가할 두 번째 인수입니다.
첫 번째 계산 후 'ab'라는 결과를 얻습니다. 이 결과는 캐시되어 다음 덧셈 계산에서 param1로 사용됩니다. 동시에 배열의 세 번째 매개변수 'c'는 add의 param2로 사용됩니다.
마찬가지로, Reduce는 추가할 인수로 'abc'와 'd'를 실행하면서 배열의 요소를 계속 반복합니다.
마지막으로 배열의 마지막 요소를 순회한 후 계산 결과를 반환합니다.
이제 결과는 'abcde'입니다.
그래서 우리는 감소가 배열을 순회하는 방법이기도 함을 알 수 있습니다! 배열의 각 요소 값을 차례로 가져와서 감속기 기능을 실행합니다.
하지만 위의 루프에는 그 조화로운 아름다움이 없음을 알 수 있습니다. 왜냐하면 우리는 배열의 첫 번째 요소인 'a'를 초기 param1로 취한 다음 배열의 두 번째 요소를 반복하여 param2를 얻기 때문입니다.
사실, 우리는 감소 함수의 param1의 초기 값으로 감소의 두 번째 매개 변수를 지정할 수 있으므로 배열의 첫 번째 요소에서 시작하는 루프에서 param2를 얻습니다.
코드는 다음과 같습니다:
var arr = ['a', 'b', 'c', 'd', 'e']; function add(x, y) { return x + y; } arr.reduce(add, 's')
这一次,我们第一次调用reducer时将's'作为param1,然后从第一个元素开始依次遍历数组。
所以我们可以使用这个语法来重写我们的第一个代码片段。
var arr = ['a', 'b', 'c', 'd', 'e']; function add(x, y) { return x + y; } arr.reduce(add, '')
接下来,我们将进入实际编程章节,体验reduce的强大威力。
1、累加和累积乘法
如果我们想得到数组中所有元素的总和,你会怎么做?
一般来说,你可能会这样写:
function accumulation(arr) { let sum = 0; for (let i = 0; i < arr.length; i++) { sum = sum + arr[i]; } return sum; }
当然,你可能还有其他的写法,但是只要使用for循环,代码就会显得多余。
那我们看看上面的累加函数是做什么的:
- 将初始总和设置为零
- 取出数组中的第一个元素并求和
- 在 sum 中缓存上一步的结果
- 依次取出数组中的其他元素,进行上述操作
- 返回最终结果
我们可以看到,当我们用文字描述上述步骤时,很明显它符合reduce的使用。所以我们可以使用reduce来重写上面的代码:
function accumulation(arr) { function reducer(x, y) { return x + y } return arr.reduce(reducer, 0); }
如果你习惯使用箭头函数,上面的代码看起来会更简洁:
function accumulation(arr) { return arr.reduce((x, y) => x + y, 0); }
一行代码搞定!
当然,累积乘法和累加是完全一样的:
function multiplication(arr) { return arr.reduce((x, y) => x * y, 1); }
很多时候,我们在求和的时候需要加上一个权重,这样更能体现reduce的优雅。
const scores = [ { score: 90, subject: "HTML", weight: 0.2 }, { score: 95, subject: "CSS", weight: 0.3 }, { score: 85, subject: "JavaScript", weight: 0.5 } ]; const result = scores.reduce((x, y) => x + y.score * y.weight, 0); // 89
2、获取一个数组的最大值和最小值
如果要获取数组的最大值和最小值,可以这样写:
function max(arr){ let max = arr[0]; for (let ele of arr) { if(ele > max) { max = ele; } } return max; }
这和以前一样,如果我们使用reduce,我们可以在一行代码中完成。
let arr = [3.24, 2.78, 999]; arr.reduce((x, y) => Math.max(x, y)); arr.reduce((x, y) => Math.min(x, y));
3、计算数组中元素出现的频率
我们经常需要统计数组中每个元素出现的次数。reduce 方法可以帮助我们实现这一点。
function countFrequency(arr) { return arr.reduce(function(result, ele){ // Judge whether this element has been counted before if (result.get(ele) != undefined) { /** * If this element has been counted before, * increase the frequency of its occurrence by 1 */ result.set(ele, result.get(ele) + 1) } else { /** * If this element has not been counted before, * set the frequency of its occurrence to 1 */ result.set(ele, 1); } return result; }, new Map()); }
注意,我们使用map对象而不是对象来存储统计后的频率,因为数组中的元素可能是对象类型,而对象的key只能是字符串或符号类型。
这里有两个例子:
同样,如果要统计字符串中每个字符出现的频率,可以先将字符串转换为字符数组,然后按照上面的方法。
let str = 'helloworld'; str.split('').reduce((result, currentChar) => { result[currentChar] ? result[currentChar] ++ : result[currentChar] = 1; return result; }, {})
因为字符类型可以用作对象的键,所以我们这里不使用 Map。
4、多个数组的展平
function Flat(arr = []) { return arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), []) }
通过reduce依次访问数组中的每个元素。如果我们发现元素还是一个数组,就递归调用 flat 方法。
【相关推荐:javascript视频教程、web前端】
위 내용은 es6에서 Reduce()를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

在es6中,可以利用“Array.isArray()”方法判断对象是否为数组,若判断的对象是数组,返回的结果是true,若判断对象不是数组,返回的结果是false,语法为“Array.isArray(需要检测的js对象)”。

es6中遍历跟迭代的区别是:遍历强调的是要把整个数据依次全部取出来,是访问数据结构的所有元素;而迭代虽然也是依次取出数据,但是并不保证取多少,也不保证把所有的数据取完,是遍历的一种形式。

在es6中,可用Object对象的is()方法来判断两个对象是否相等,该方法检测两个变量的值是否为同一个值,判断两个对象的引用地址是否一致,语法“Object.is(对象1,对象2)”;该方法会返回布尔值,若返回true则表示两个对象相等。

转换方法:1、利用“+”给数字拼接一个空字符,语法“数字+""”;2、使用String(),可把对象的值转换为字符串,语法“String(数字对象)”;3、用toString(),可返回数字的字符串表示,语法“数字.toString()”。

在es6中,assign用于对象的合并,可以将源对象的所有可枚举属性复制到目标对象;若目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性,语法为“Object.assign(...)”

改变方法:1、利用splice()方法修改,该方法可以直接修改原数组的内容,语法为“数组.splice(开始位置,修改个数,修改后的值)”;2、利用下标访问数组元素,并重新赋值来修改数组数据,语法为“数组[下标值]=修改后的值;”。

sort排序是es6中的;sort排序是es6中用于对数组的元素进行排序的方法,该方法默认不传参,按照字符编码顺序进行排序,排序顺序可以是字母或数字,并按升序或降序,语法为“array.sort(callback(a,b))”。

在es6中,import as用于将若干export导出的内容组合成一个对象返回;ES6的模块化分为导出与导入两个模块,该方法能够将所有的导出内容包裹到指定对象中,语法为“import * as 对象 from ...”。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
