JavaScriptarray 일반 메소드 코드 인스턴스 상세 정보

6413 단어 JavaScriptarray
1.map/reduce
map()
맵 () 은array의 한 방법이다
역할:array의 모든 요소에 사용자 정의 함수 호출

'use strict';
function pow(x){
return x*x;
}
var arr=[1,2,3,4,5]
var newarray=arr.map(pow)
맵의 콜백 함수는 세 가지 매개 변수가 있습니다.
callback(currentValue, index,array)은 보통 첫 번째 인자만 있으면
PS:map()에 전달된 매개 변수는 pow, 즉 함수 대상 자체입니다
보통 맵에서 호출되는 사용자 정의 방법은 매개 변수만 포함합니다
reduce()
reduce () 도array의 한 방법이다
작용: 수조의 두 원소부터 함수 매개 변수로 함수를 전송하여 결과를 얻고,
결과는 다음 그룹 요소와 함수를 다시 호출합니다. 그룹 끝까지
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
PS: 보통 reduce()에서 호출하는 사용자 정의 방법은 두 개의 매개 변수만 포함합니다
2.filter(필터링)
작용: Array의 일부 원소를 여과하고 나머지 원소를 되돌려줍니다.
맵()과 유사하게 Array의 filter()도 함수를 수신합니다.맵 () 과 달리 Filter () 는 전송된 함수를 각 요소에 순서대로 작용한 다음 반환값이true인지false인지에 따라 이 요소를 보존할지 버릴지 결정합니다.
//빈 문자열 제거

var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
  return s && s.trim(); //  :IE9 trim() 
});
r; // ['A', 'B', 'C']
리셋 함수
일반적으로 Array의 요소를 나타내는 첫 번째 매개변수만 사용합니다.리셋 함수는 요소의 위치와 배열 자체를 나타내는 다른 두 개의 매개변수를 수신할 수도 있습니다.

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
  console.log(element); //  'A', 'B', 'C'
  console.log(index); //  0, 1, 2
  console.log(self); // self arr
  return true;
});
필터링 소수점:

function get_primes(arr){
if(elem===1){
return false;
}
for(var i=2;i<=elem/2;i++){
if(elem%i==0)
{
return false;
}
}
return true;
});
return x;
}
PS: 관건은 필터링 함수를 정확하게 실현하는 것이다
3.sort(정렬)
기본 정렬은 모든 요소를 하나의 요소의 ASCII 값에 따라 정렬하는 String으로 변환합니다(TimSort 알고리즘).
두 개의 비교, 리셋 함수 리셋 값이 0보다 크면 교환 원소 값
사용자 정의 숫자 정렬

'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 = [10, 20, 1, 2];
arr.sort(function (x, y) {
  if (x < y) {
    return 1;
  }
  if (x > y) {
    return -1;
  }
  return 0;
}); // [20, 10, 2, 1]
4. 다른 Array 방법
every () 및 some ()
작용: 수조의 모든 요소가 테스트 조건을 충족하는지 판단할 수 있음(함수를 통해 제공)
every () 는 모두 만족할 때true로 돌아가고, 불만족은false로 돌아가며, 검사를 종료합니다.
some () 은 모두 만족하지 않을 때false로 돌아가고, 만족이 있으면true로 돌아간다
find()
역할: 첫 번째 기준 요소 찾기
조건에 맞는 첫 번째 요소를 찾습니다. 찾으면 이 요소를 되돌려줍니다. 그렇지 않으면undefined를 되돌려줍니다.
findindex()
역할: 첫 번째 조건에 맞는 요소의 인덱스 찾기
조건에 맞는 첫 번째 원소를 찾으면 이 원소를 찾으면 그의 인덱스로 돌아가고, 찾지 못하면 -1
forEach()
역할: 반복 그룹
(맵과 유사) 수조의 모든 요소를 함수에 순서대로 전송하지만 새로운 수조는 되돌아오지 않습니다.
함수를 반환값으로 하다
함수에 함수를 하나 더 정의하고, 반환값은 안에 정의된 함수로 한다
함수를 반환값으로 호출하는 함수식으로, 매번 호출할 때마다 새로운 함수를 반환합니다. 같은 매개 변수를 불러와도

function lazy_sum(arr) {
  var sum = function () {
    return arr.reduce(function (x, y) {
      return x + y;
    });
  }
  return sum;
}
// 
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
f(); // 15  , 
함수 lazy_sum에서 함수sum를 정의하고 내부 함수sum는 외부 함수lazy_를 인용할 수 있습니다sum의 매개 변수와 국부 변수, lazy_sum가 함수sum를 되돌릴 때 관련 매개 변수와 변수는 모두 되돌아오는 함수에 저장됩니다. 이를'폐쇄(Closure)'라고 하는 프로그램 구조는 매우 큰 위력을 가지고 있습니다.
가방을 닫다.
다른 함수 작용역 내 변수에 접근할 수 있는 함수는 모두 패키지입니다.
함수 안의 함수는 외부 정의 함수에 따라 바뀐다
PS:반환 값이 함수이기 때문에 호출할 때 괄호를 붙여야 합니다
패키지를 되돌릴 때 명심해야 할 점은 반환 함수는 어떤 순환 변수를 인용하지 않거나 다음에 변화가 발생할 변수를 인용하지 않는다는 것이다.
만약 반드시 순환 변수를 인용해야 한다면 어떻게 합니까?방법은 함수를 하나 더 만들고 이 함수의 매개 변수로 순환 변수의 현재 값을 귀속시키는 것입니다. 이 순환 변수가 다음에 어떻게 바뀌든지 간에 함수 매개 변수에 귀속된 값은 변하지 않습니다.
화살표 함수(=>)(강함)
(매개변수...) =>{함수체} function (매개 변수...){함수체}
객체가 반환될 때 함수체 대괄호 바깥쪽에 소괄호 추가
x=>({foo:x})
this
화살표 함수 내부의this는 문법 작용역으로 상하문에서 확정된다

var obj = {
  birth: 1990,
  getAge: function () {
    var b = this.birth; // 1990
    var fn = () => new Date().getFullYear() - this.birth; // this obj 
    return fn();
  }
};
obj.getAge(); // 25
화살표 함수는this지향을 완전히 복구했습니다.this는 항상 어법 작용역, 즉 외부 호출obj를 가리킵니다.
generator (생성기)
ES6 참조 Python 동명 함수 도입
쓰기 방법은 함수와 유사합니다. 단지 function 뒤에 *를 추가합니다. yield를 통해 여러 번 값을 되돌릴 수도 있고,return을 통해 값을 되돌릴 수도 있습니다.
함수가 실행되는 과정에서 리턴 문장을 만나지 못하면 (함수 끝에 리턴이 없으면 숨겨진 리턴 undefined;)제어권은 호출된 코드를 되돌릴 수 없습니다.

function* (x){
yield x
}
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() 방법:next() 방법은generator의 코드를 실행하고,yieldx를 만날 때마다;대상 {value: x,done: true/false}를 되돌려주고 "일시 정지"합니다.되돌아오는 값은yield의 되돌아오는 값입니다. done는 이generator가 실행이 끝났는지 여부를 나타냅니다.done이true라면value는return의 반환값입니다.done이true로 실행되었을 때, 이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}
두 번째 방법은 바로 for...of 순환 교체generator 대상, 이런 방식은 우리가 done를 판단할 필요가 없습니다.

for (var x of fib(10)) {
  console.log(x); //  0, 1, 1, 2, 3, ...
}
generator의 또 다른 큰 장점은 비동기 리셋 코드를 동기화 코드로 바꾸는 것이다.이 좋은 점은 뒤에서 AJAX를 배운 후에야 느낄 수 있다.

try {
  r1 = yield ajax('http://url-1', data1);
  r2 = yield ajax('http://url-2', data2);
  r3 = yield ajax('http://url-3', data3);
  success(r3);
}
catch (err) {
  handle(err);
}
동기화된 코드로 보이지만 실제 실행은 비동기적이다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

좋은 웹페이지 즐겨찾기