JavaScript 학습 노트 (3)
1. 고급 함수
매개 변수 입력 함수
JavaScript 의 함 수 는 사실 어떤 변 수 를 가리 키 고 있 습 니 다.변 수 는 함 수 를 가리 킬 수 있 고 함수 의 매개 변 수 는 변 수 를 받 을 수 있 으 므 로 한 함수 가 다른 함 수 를 매개 변수 로 받 아들 일 수 있 습 니 다. 이런 함 수 는 고급 함수 라 고 합 니 다.
function add(x, y, f) {
return f(x) + f(y);
}
var x = add(-5, 6, Math.abs); //11
console.log(x);
map() 방법 으로 자바 스 크 립 트 Array 에 정의 되 었 기 때문에 우 리 는 Array 의 map() 방법 을 호출 하여 우리 자신의 함수 에 전달 하여 새로운 Array 을 얻 었 다. 'use strict';
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5];
var results = arr.map(pow);
console.log(results); //[1, 4, 9, 16, 25];
app.map(String); //['1', '2', '3', '4', '5']
reduce() 용법: Array 의 reduce() 한 함 수 를 이 Array 의 모든 요소 에 작용 시 켜 야 한다. reduce() 두 개의 매개 변 수 를 받 아들 이 고 두 매개 변수의 처리 결 과 를 계속 Array 의 다음 요소 와 누적 계산 해 야 한다. 그 효 과 는 다음 과 같다.[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
# Array ， reduce
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
});
filter 도 자주 사용 하 는 동작 으로 Array 의 일부 요 소 를 걸 러 내 고 나머지 요 소 를 되 돌려 주 는 데 사용 된다.map() 와 유사 하 다. Array 의 filter() 도 하나의 함 수 를 받는다. map() 와 달리 filter() 들 어 오 는 함 수 를 각 요소 에 순서대로 작용 한 다음 에 반환 값 true 이나 false 에 따라 이 요 소 를 보류 할 지 버 릴 지 결정 한다.# ，
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r;//[1, 3, 5, 7, 9]
# Array
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim();
});
r; //['A', 'B', 'C']
filter() 받 은 리 셋 함 수 는 사실 여러 개의 매개 변 수 를 가 질 수 있다.보통 우 리 는 첫 번 째 매개 변수 만 사용 하여 Array 의 특정한 요 소 를 나타 낸다.리 셋 함 수 는 또 다른 두 개의 인 자 를 받 아들 여 요소 의 위치 와 배열 자 체 를 나 타 낼 수 있 습 니 다.var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element);
console.log(index);
console.log(self);
return true;
});
sort() 방법 은 직접 Array 을 수정 합 니 다. 되 돌아 온 결 과 는 현재 Array 입 니 다. [10, 20, 1, 2].sort(); // [1, 10, 2, 20]. 이것 은 Array 의 sort () 방법 이 기본적으로 모든 요 소 를 String 으로 변환 한 다음 정렬 하기 때 문 입 니 다. 그 결과 '10' 은 '2' 의 앞 에 있 습 니 다. 문자 '1' 이 문자 '2' 의 ASCII 보다 작 기 때 문 입 니 다.sort() 방법의 기본 정렬 규칙 을 모 르 고 숫자 를 직접 정렬 하면 깜짝 놀 랄 것 입 니 다!그러나 sort() 도 고급 함수 로 비교 함 수 를 받 아 사용자 정의 정렬 을 실현 할 수 있다.#
'use strict';
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
console.log(arr); //[1, 2, 10, 20]
# ，
var arr = ['Google', 'apple', 'Microsoft'];
arr.sort (function (s1, s2) {
x1 = s1.toUpperCase();
x2 = s2.toUpperCase();
if (x1 < x2) {
return -1;
}
if (x1 > x2) {
return 1;
}
return 0;
});
2. 폐쇄
， #
function sum(arr) {
return arr.reduce(function (x, y) {
return x + y;
});
}
sum([1, 2, 3, 4, 5]); //15
， ， ？ ，
function lazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y;
});
};
}
var f = lazy_sum([1, 2, 3, 4, 5]); //function sum()
f(); //15
# ， lazy_sum sum， ， sum lazy_sum ， lazy_sum sum ， ， “ （Closure）” 。
# ， lazy_sum() ， ， ：
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false
arr 를 인용 한 것 을 알 수 있 기 때문에 한 함수 가 한 함 수 를 되 돌려 준 후에 그 내부 의 국부 변 수 는 새로운 함수 에 의 해 인용 되 기 때문에 패 킷 을 닫 는 것 은 간단 하고 실현 하기 가 쉽 지 않다.반환 함 수 는 즉각 실행 되 지 않 고 호출 될 때 까지 f() 실행 되 었 습 니 다.function count() {
var arr = [];
for (var i = 1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
#
f1(); // 16
f2(); // 16
f3(); // 16
# 16， i， 。 3 ， i 4， 16。
패 킷 을 닫 을 때 기억 하 는 것 은 반환 함수 가 순환 변 수 를 참조 하지 않 거나 나중에 변화 할 수 있 는 변 수 를 참조 하지 않 는 다 는 것 이다.순환 변 수 를 꼭 인용 해 야 한다 면 어떻게 합 니까?방법 은 함 수 를 하나 더 만 드 는 것 입 니 다. 이 함수 의 매개 변수 로 순환 변 수 를 연결 하 는 현재 값 입 니 다. 이 순환 변 수 는 나중에 어떻게 변경 하 든 함수 매개 변수 에 연 결 된 값 은 변 하지 않 습 니 다.
function count() {
var arr = [];
for(var i = 1; i<=3; i++) {
arr.push((function (n) {
return function () { return n * n};
})(i));
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 1
f2(); // 4
f3(); // 9
#
(function (x) {return x * x})(3); //9
대상 을 대상 으로 하 는 프로 그래 밍 언어, 예 를 들 어 자바 와 C + + 는 대상 내부 에 개인 변 수 를 밀봉 하려 면 private 로 구성원 변 수 를 수식 할 수 있 습 니 다.class 메커니즘 이 없고 함수 만 있 는 언어 에서 폐쇄 를 통 해 개인 변 수 를 봉인 할 수 있 습 니 다.
자 바스 크 립 트 로 계수 기 를 만 듭 니 다:
'use strict';
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
}
}
# ：
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13
되 돌아 오 는 대상 에서 패 키 지 를 닫 았 습 니 다. 이 패 키 지 는 부분 변수 x 를 가지 고 있 으 며 외부 코드 에서 변수 x 에 접근 할 수 없습니다.패 키 지 를 닫 는 것 은 휴대 상태의 함수 이 며 그 상 태 는 완전히 대외 적 으로 숨 길 수 있다 는 것 이다.
패 킷 을 닫 으 면 다 중 매개 변수의 함 수 를 단일 매개 변수의 함수 로 바 꿀 수 있다.예 를 들 어 xy 를 계산 하려 면 Math. pow (x, y) 함 수 를 사용 할 수 있 지만 x2 또는 x3 를 자주 계산 하 는 것 을 고려 하여 우 리 는 패 킷 을 닫 아 새로운 함수 pow 2 와 pow 3 를 만 들 수 있 습 니 다.
'use strict';
function make_pow(n) {
return function (x) {
return Math.pow(x, n);
}
}
var pow2 = make_pow(2);
var pow3 = make_pow(3);
console.log(pow2(5)); //25
console.log(pow3(7)); //343
3. 화살표 함수
ES6 에 새로운 함수 가 추가 되 었 습 니 다.
Arrow Function정의: x => x * x 해당: function (x) { return x * x; }화살표 함 수 는 익명 함수 에 해당 하 며 함수 정 의 를 간소화 하 였 습 니 다.화살표 함 수 는 두 가지 형식 이 있 는데 하 나 는 위 와 같은 표현 식 만 포함 하고 { ... } 과 return 까지 생략 합 니 다.또 하 나 는 여러 개의 문 구 를 포함 할 수 있 는데 이때 생략 할 수 없다 { ... } 와 return.x => {
if (x > 0) {
return x * x;
}else{
return - x * x;
}
}
매개 변수 가 하나 가 아니라면 괄호
() 로 묶 어야 합 니 다.//
(x, y) => x * x + y * y
// ：
() => 3.14
// ：
(x, y, ...rest) => {
var i , sum = x + y;
for(i = 0; i대상 을 되 돌려 주 려 면 단일 표현 식 이 라면 오류 가 발생 할 수 있 습 니 다.
x => { foo: x } 함수 체 {...} 와 문법 이 충돌 하기 때문에 다음 과 같이 바 꿔 야 합 니 다. x => ({ foo: x })화살표 함 수 는 익명 함수 의 약자 로 보이 지만 실제 화살표 함수 와 익명 함 수 는 현저 한 차이 가 있 습 니 다. 화살표 함수 내부 의
this 는 품사 작용 영역 으로 문맥 에 의 해 확 정 됩 니 다.# ，JavaScript this
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this window undefined
};
return fn();
}
};
# ， this ，this ， obj：
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; //1990
var fn = () => new Date().getFullYear() - this.birth;//this
return fn();
}
};
obj.getAge(); //25
this 화살표 함수 에서 어법 작용 도 메 인 에 따라 바 인 딩 되 었 기 때문에 call() 또는 apply() 로 화살표 함 수 를 호출 할 때 this 를 바 인 딩 할 수 없습니다. 즉, 들 어 오 는 첫 번 째 인 자 를 무시 합 니 다.var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; // 1990
var fn = (y) => y - this.birth; // this.birth 1990
return fn.call({birth:2000}, year);
}
};
obj.getAge(2015); // 25
4. generator
function* foo(x) {
yield x + 1;
yield x + 2;
yield x + 3;
}
generator 은 function* 에 의 해 정의 되 고 return 문 구 를 제외 하고 yield 로 여러 번 되 돌 릴 수 있다.#
# 0 1 1 2 3 5 8 13 21 34 ...
# ，
function fib(max) {
var
t,
a = 0,
b = 1,
arr = [0, 1];
while (arr.length < max) {
[a, b] = [b, a + b];
arr.push(b);
}
return arr;
}
fib(5); //[0, 1, 1, 2, 3]
fib(10); //[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
# ， Array。 ， generator， ， 。 generator ：
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
fib(5); //fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window} 이 generator 를 호출 하 는 것 과 호출 함수 가 다 르 면 fib(5) generator 대상 만 만 만 들 었 을 뿐 실행 하지 않 았 습 니 다.generator 대상 을 호출 하 는 방법 은 두 가지 가 있 는데 첫 번 째 는 generator 대상 을 끊임없이 호출 하 는 방법 next() 이다. var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}
next() 방법 은 generator 의 코드 를 실행 한 다음 에 만 날 때마다 yield x.대상 {value: x, done: true/false} 을 되 돌려 주 고 '일시 정지' 합 니 다.되 돌아 오 는 value 은 yield 의 반환 값 입 니 다. done 은 이 generator 가 이미 실행 이 끝 났 는 지 여 부 를 표시 합 니 다.만약 done 이 true 라면 value 은 return 의 반환 값 이다.done 이 true 로 실 행 될 때 이 generator 대상 은 모두 실 행 됩 니 다. next () 를 계속 호출 하지 마 십시오.두 번 째 는
for ... of 순환 으로 generator 대상 을 교체 하 는 것 이다. 이런 방식 은 우리 가 판단 할 필요 가 없다 done.for (var x of fib(10)) {
console.log(x); // 0, 1, 1, 2, 3,...
}
generator 는 실행 과정 에서 여러 번 되 돌아 갈 수 있 기 때문에 실행 상 태 를 기억 할 수 있 는 함수 처럼 보 입 니 다. 이 점 을 이용 하여 generator 를 쓰 면 대상 을 대상 으로 해 야 실현 할 수 있 는 기능 을 실현 할 수 있 습 니 다.예 를 들 어 한 대상 으로 상 태 를 저장 하려 면 이렇게 써 야 합 니 다.
var fib = {
a: 0,
b: 1,
n: 0,
max: 5,
next: function () {
var
r = this.a,
t = this.a + this.b;
this.a = this.b;
this.b = t;
if (this.n < this.max) {
this.n ++;
return r;
}else{
return undefined;
}
}
};
대상 속성 으로 상 태 를 저장 하 는 것 은 상당히 번거롭다.generator 의 또 다른 큰 장점 은 비동기 리 셋 프로 그래 밍
코드 를 사용 하 는 것 이다.이 좋 은 점 은 나중에 배 워 야 느 낄 수 있다 AJAX.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
