JavaScript 원본 배열 함수 인스턴스 요약

JavaScript에서 수조를 만드는 데는 Array 구조 함수를 사용하거나 수조의 직접 양[]을 사용할 수 있습니다. 후자가 가장 좋은 방법입니다.Array 객체는 Object에서 상속됩니다.prototype, 그룹 실행 typeof 조작부호는array가 아닌object로 되돌아옵니다.그러나 [] instance of Array도true로 돌아갑니다.즉, 클래스 그룹의 대상의 실현은 더욱 복잡하다. 예를 들어strings 대상,arguments 대상,arguments 대상은array의 실례가 아니지만length 속성이 있고 색인을 통해 값을 얻을 수 있기 때문에 그룹처럼 순환 조작을 할 수 있다.
본고에서 나는 몇 개의 수조 원형 방법을 복습하고 이런 방법의 용법을 탐색할 것이다.
  • 순환:.forEach
  • 판단:.일부와.every
  • 구분.join과.concat
  • 창고와 대기열의 실현:.pop, .push, .shift, 및.unshift
  • 모델 매핑:.map
  • 조회:.filter
  • 정렬:.sort
  • 계산:.reduce와.reduceRight
  • 복제:.slice
  • 강력한.splice
  • 찾기:.indexOf
  • 조작부호: in
  • 다가오다.reverse
  • 순환:.forEach
    이것은 JavaScript에서 가장 간단한 방법이지만 IE7 및 IE8에서는 지원되지 않습니다.
    .forEach는 매개 변수로 리셋 함수를 가지고 있으며, 리셋 함수는 세 개의 매개 변수를 받아들입니다.
  • value: 현재 요소
  • index: 현재 요소의 인덱스입니다
  • array: 두루 훑어볼 수조
  • 또한 선택할 수 있는 두 번째 매개 변수를 매번 함수로 호출되는 상하문 (this) 으로 전달할 수 있습니다.
    ['_', 't', 'a', 'n', 'i', 'f', ']'].forEach(function (value, index, array) {
    this.push(String.fromCharCode(value.charCodeAt() + index + 2))
    }, out = [])
    out.join('')
    //<- 'awesome'
    뒷글에서 언급할 것이다.join, 이 예시에서 이것은 수조의 서로 다른 원소를 결합하는 데 사용되며, 효과는out[0]+'+out[1]+'+out[2]+'+out[n]과 유사하다.
    중단할 수 없습니다.forEach 순환, 그리고 이상을 던지는 것도 현명하지 못한 선택이다.다행히도 우리는 다른 방식으로 조작을 중단할 수 있다.
    판단:.일부와.every
    니가 써봤으면.NET의 열거, 이 두 가지 방법과.Any(x => x.IsAwesome) 、 .All(x = > x.IsAwesome)과 유사합니다.
    그리고forEach의 매개 변수는 유사합니다.value, index,array 세 개의 매개 변수를 포함하는 리셋 함수와 선택할 수 있는 두 번째 상하문 매개 변수가 필요합니다.DN 맞습니다.some의 설명은 다음과 같습니다.
    some는 리셋 함수가true로 돌아갈 때까지 그룹의 모든 요소에 리셋 함수를 실행합니다.대상 요소를 찾으면,some는 바로true로 돌아가고, 그렇지 않으면some는false로 돌아갑니다.리셋 함수는 이미 지정된 값의 그룹 인덱스에만 실행됩니다.삭제되거나 지정되지 않은 요소는 호출되지 않습니다.
    
    max = -Infinity
    satisfied = [10, 12, 10, 8, 5, 23].some(function (value, index, array) {
      if (value > max) max = value
      return value < 10
    })
    console.log(max)
    // <- 12
    satisfied
    // <- true
    함수의value<10을 리셋할 때 함수 순환을 중단합니다.every의 운행 원리와.some는 유사하지만, 리셋 함수는true가 아니라false를 되돌려줍니다.
    구분join과.concat
    .join과.concat 자주 헷갈려...join (separator) 은 separator를 구분 문자로 연결하고 문자열 형식으로 되돌려줍니다. separator를 제공하지 않으면 기본적으로,...concat은 원본 그룹의 얕은 복사본으로 새 그룹을 만들 것입니다.
  • .concat 상용 용법:array.concat(val, val2, val3, valn)
  • .concat이 새 그룹을 되돌려줍니다.
  • array.concat () 는 매개 변수가 없는 상황에서 원본 그룹의 얕은 복사본을 되돌려줍니다
  • 얕은 복사는 새 그룹과 원수 그룹이 같은 대상 인용을 유지하는 것을 의미하는데, 이것은 통상적으로 좋은 일이다.예:
    var a = { foo: 'bar' }
    var b = [1, 2, 3, a]
    var c = b.concat()
    console.log(b === c)
    //<- false
    b[3] === a && c[3] === a
    //<- true
    창고와 대기열의 실현:.pop, .push, .shift와.unshift
    누구나 다 알고 있다.push는 그룹 끝에 요소를 추가할 수 있지만, []를 사용할 수 있다는 것을 알고 있습니다.push('a','b','c','d','z')는 한꺼번에 여러 개의 요소를 추가합니까?
    .팝 방법은.push의 반동작입니다. 삭제된 그룹의 마지막 요소를 되돌려줍니다.그룹이 비어 있으면void 0 (undefined) 을 되돌려줍니다.팝과.push는 LIFO(last in first out) 스택을 만들 수 있습니다.
    
    function Stack () {
      this._stack = []
    }
    Stack.prototype.next = function () {
      return this._stack.pop()
    }
    Stack.prototype.add = function () {
      return this._stack.push.apply(this._stack, arguments)
    }
    stack = new Stack()
    stack.add(1,2,3)
    stack.next()
    // <- 3
     , .shift  .unshift FIFO (first in first out) 。
    
    function Queue () {
      this._queue = []
    }
    Queue.prototype.next = function () {
      return this._queue.shift()
    }
    Queue.prototype.add = function () {
      return this._queue.unshift.apply(this._queue, arguments)
    }
    queue = new Queue()
    queue.add(1,2,3)
    queue.next()
    // <- 1
    Using .shift (or .pop) is an easy way to loop through a set of array elements, while draining the array in the process.
    list = [1,2,3,4,5,6,7,8,9,10]
    while (item = list.shift()) {
      console.log(item)
    }
    list
    // <- []
    모델 매핑:.map
    .맵은 그룹의 모든 요소에 리셋 방법을 제공하고 호출 결과로 구성된 새로운 그룹을 되돌려줍니다.리셋 함수는 이미 지정된 값의 그룹 인덱스에만 실행됩니다.삭제되거나 지정되지 않은 요소는 호출되지 않습니다.
    Array.prototype.맵과 위에서 언급한 것.forEach、.일부와.every는 같은 매개 변수 형식을 가지고 있습니다.map(fn(value, index, array), thisArgument)
    
    values = [void 0, null, false, '']
    values[7] = void 0
    result = values.map(function(value, index, array){
      console.log(value)
      return value
    })
    // <- [undefined, null, false, '', undefined × 3, undefined]
    undefined × 3 잘 설명했어요.맵은 삭제되었거나 지정되지 않은 요소에 호출되지 않지만, 결과 그룹에 포함됩니다.map은 그룹을 만들거나 변경할 때 유용합니다. 다음 예제를 보십시오.
    
    // casting
    [1, '2', '30', '9'].map(function (value) {
      return parseInt(value, 10)
    })
    // 1, 2, 30, 9
    [97, 119, 101, 115, 111, 109, 101].map(String.fromCharCode).join('')
    // <- 'awesome'
    // a commonly used pattern is mapping to new objects
    items.map(function (item) {
      return {
        id: item.id,
        name: computeName(item)
      }
    })
    조회:.filter
    filter는 모든 그룹 요소에 대해 리셋 함수를 실행하고, 리셋 함수가true로 되돌아오는 요소로 구성된 새로운 그룹을 되돌려줍니다.리셋 함수는 이미 지정된 값의 그룹 항목에만 호출됩니다.
    일반용법:.filter(fn(value, index,array),thisArgument), C#의 LINQ 표현식과 SQL의 where 문장과 유사합니다.filter는 리셋 함수에true 값을 되돌려주는 요소만 되돌려줍니다.
    
    [void 0, null, false, '', 1].filter(function (value) {
      return value
    })
    // <- [1]
    [void 0, null, false, '', 1].filter(function (value) {
      return !value
    })
    // <- [void 0, null, false, '']
    정렬:.sort(compareFunction)
    compareFunction이 제공되지 않으면 요소는 문자열로 변환되어 사전에 따라 정렬됩니다.예를 들어 80〃은 그 다음이 아니라 9〃 앞에 있다.
    대부분의 정렬 함수와 유사합니다, Array.prototype.sort(fn(a,b))는 두 개의 테스트 매개 변수를 포함하는 리셋 함수가 필요합니다. 그 리셋 값은 다음과 같습니다.
  • a는 b 이전에 반환값이 0보다 적다
  • a와 b가 같으면 반환값은 0이다
  • a는 b 이후에 되돌아오는 값이 0보다 작다
  • [9,80,3,10,5,6].sort()
    //<- [10, 3, 5, 6, 80, 9]
    [9,80,3,10,5,6].sort(function (a, b) {
    return a - b
    })
    //<- [3, 5, 6, 9, 10, 80]
    계산:.reduce와.reduceRight
    이 두 함수는 비교적 이해하기 어렵다.reduce는 왼쪽에서 오른쪽으로 수조를 훑어볼 것입니다.reduceRight는 오른쪽에서 왼쪽으로 수조를 훑어보는 전형적인 용법:.reduce(callback(previousValue,currentValue, index, array), initialValue).
    previous Value는 마지막으로 리셋 함수를 호출하는 리셋 값입니다. initial Value는 초기 값이고,current Value는 현재 요소 값이고,index는 현재 요소 인덱스이고,array는 호출됩니다.reduce의 배열.
    전형적인 용례, 사용.reduce의 구화 함수.
    Array.prototype.sum = function () {
    return this.reduce(function (partial, value) {
    return partial + value
    }, 0)
    };
    [3,4,5,6,10].sum()
    //<- 28
    그룹을 문자열로 연결하려면 사용할 수 있습니다.join 실현.그러나 그룹 값이 대상이라면.join은 우리의 기대에 따라 값을 되돌려 주지 않을 것입니다. 대상이 합리적인 value Of나 toString 방법이 없는 한 사용할 수 있습니다.Reduce 구현:
    
    function concat (input) {
      return input.reduce(function (partial, value) {
        if (partial) {
          partial += ', '
        }
        return partial + value
      }, '')
    }
    concat([
      { name: 'George' },
      { name: 'Sam' },
      { name: 'Pear' }
    ])
    // <- 'George, Sam, Pear'
    복사:.slice
    그리고concat과 유사합니다. 매개 변수가 없는 것을 호출합니다.slice () 방법은 원본 그룹의 얕은 복사본을 되돌려줍니다.slice에는 두 가지 인자가 있습니다. 하나는 시작 위치와 끝 위치입니다.
    Array.prototype.slice는 클래스 그룹을 진정한 그룹으로 변환하는 데 사용될 수 있습니다.
    Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
    //<- ['a', 'b']
    이거.concat은 클래스 대상을 그룹으로 감싸기 때문에 적용되지 않습니다.
    Array.prototype.concat.call({ 0: 'a', 1: 'b', length: 2 })
    //<- [{ 0: 'a', 1: 'b', length: 2 }]
    그 밖에slice의 또 다른 일반적인 사용법은 매개 변수 목록에서 일부 요소를 삭제하는 것입니다. 이것은 클래스 그룹 대상을 진정한 그룹으로 변환할 수 있습니다.
    
    function format (text, bold) {
      if (bold) {
        text = '<b>' + text + '</b>'
      }
      var values = Array.prototype.slice.call(arguments, 2)
      values.forEach(function (value) {
        text = text.replace('%s', value)
      })
      return text
    }
    format('some%sthing%s %s', true, 'some', 'other', 'things')
    강력했어splice
    .splice는 내가 가장 좋아하는 원생수 그룹 함수이다. 한 번만 호출하면 원소를 삭제하고 새로운 원소를 삽입할 수 있으며 삭제, 삽입 작업을 동시에 할 수 있다.주의해야 할 것은 다르다는 것이다.concat 및.slice, 이 함수는 원본 그룹을 바꿉니다.
    var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
    var spliced = source.splice(3, 4, 4, 5, 6, 7)
    console.log(source)
    //<- [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13]
    spliced
    //<- [8, 8, 8, 8]
    보시다시피..splice는 삭제된 요소를 되돌려줍니다.삭제된 그룹을 훑어보고 싶을 때, 이것은 매우 편리할 것이다.
    var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
    var spliced = source.splice(9)
    spliced.forEach(function (value) {
    console.log('removed', value)
    })
    //<- removed 10
    //<- removed 11
    //<- removed 12
    //<- removed 13
    console.log(source)
    //<- [1, 2, 3, 8, 8, 8, 8, 8, 9]
    찾기:.indexOf
    이용하다indexOf는 배열에서 원소의 위치를 찾을 수 있으며, 일치하는 원소가 없으면 -1을 되돌려줍니다.자주 사용합니다.indexOf의 경우 비교가 있을 때 예를 들어 a==='a'|a===='b'|a====='c', 또는 두 개만 비교할 수 있습니다. 이때 사용할 수 있습니다.indexOf:['a', 'b', 'c'].indexOf(a) !== -일.
    제공된 인용이 같다면,.indexOf도 객체를 찾을 수 있습니다.두 번째 선택 가능한 매개 변수는 찾기 시작할 위치를 지정하는 데 사용됩니다.
    var a = { foo: 'bar' }
    var b = [a, 2]
    console.log(b.indexOf(1))
    //<- -1
    console.log(b.indexOf({ foo: 'bar' }))
    //<- -1
    console.log(b.indexOf(a))
    //<- 0
    console.log(b.indexOf(a, 1))
    //<- -1
    b.indexOf(2, 1)
    //<- 1
    만약 네가 뒤에서 앞으로 수색하고 싶다면 사용할 수 있다.lastIndexOf.
    조작부호:in
    면접에서 초보자가 범하기 쉬운 실수는 혼동이다.indexOf 및 in 작업자:
    var a = [1, 2, 5]
    1 in a
    //<- true, but because of the 2!
    5 in a
    //<- false
    문제는 in 조작부호가 검색 대상의 키이지 값이 아니라는 것이다.물론 이것은 성능상 비교된다.index Off가 훨씬 빠르다.
    var a = [3, 7, 6]
    1 in a === !!a[1]
    //<- true
    다가오다reverse
    이 방법은 수조의 원소를 거꾸로 놓는다.
    var a = [1, 1, 7, 8]
    a.reverse()
    //[8, 7, 1, 1]
    .reverse는 그룹 자체를 수정합니다.
    이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

    좋은 웹페이지 즐겨찾기