>  기사  >  웹 프론트엔드  >  JavaScript의 배열 배열에 대한 팁 설명

JavaScript의 배열 배열에 대한 팁 설명

不言
不言원래의
2018-07-13 10:01:301513검색

이 글은 주로 JavaScript의 배열 배열에 대한 팁을 소개합니다. 이제 이를 공유합니다. 필요한 친구들이 참고할 수 있습니다

1. push()

객체를 배열처럼 사용하세요:

var obj = {
    length: 0,

    addElem: function addElem (elem) {
        // obj.length is automatically incremented 
        // every time an element is added.
        [].push.call(this, elem);
    }
};

// Let's add some empty objects just to illustrate.
obj.addElem({});
obj.addElem({});
console.log(obj.length);
// → 2

obj는 배열이 아니지만 push 메서드는 우리가 했던 것처럼 obj의 길이 속성을 성공적으로 늘립니다. 실제 배열.

2.Array.prototype.sort()

arr.sort(compareFunction)
arr.sort(compareFunction)

参数:compareFunction
可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

如果指明了compareFunction,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:

  • 如果compareFunction(a, b)小于 0 ,那么 a 会被排列到 b 之前;

  • 如果compareFunction(a, b)等于 0 , a 和 b 的相对位置不变;

  • 如果compareFunction(a, b)大于 0 , b 会被排列到 a 之前。

比较函数格式如下(字符串与数组都可以比较):

function compare(a, b) {
    if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
        return -1;
    }
    if (a > b ) {
        return 1;
    }
    // a must be equal to b
    return 0;
}

3. Array.prototype.unshift()

var arr = [1, 2];
arr.unshift(-2, -1);    // = 5
// arr is [-2, -1, 1, 2]

4. Array.prototype.concat()

返回新的数组(浅拷贝),不会影响原数组。

  • 如果参数是数组,则把数组的元素放入结果中;

  • 如果参数不是数组,则把参数本身放入结果中。

var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

console.log(nums); 
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9];

var alpha = ['a', 'b', 'c'];

var alphaNumeric = alpha.concat(1, [2, 3]);

console.log(alphaNumeric); 
// results in ['a', 'b', 'c', 1, 2, 3]

5. Array.prototype.forEach()

array.forEach(callback(currentValue, index, array){
    //do something
}, thisArg)

array.forEach(callback[, thisArg])

其中:thisArg为可选参数,当执行回调 函数时用作this的值(参考对象)。

下列函数也有thisArg这个可选参数,用法与Array.prototype.forEach()一致:

  • Array.prototype.forEach()

  • Array.prototype.every()

  • Array.prototype.some()

  • Array.prototype.filter()

  • Array.prototype.map()

  • Array.prototype.reduce()

  • Array.prototype.reduceRight()

6. Array.prototype.map()

使用技巧案例

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.
// 但实际上,parseInt可以有两个参数.第二个参数是进制数.
// 可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 
// 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,
// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 意料之中的结果

// 也可以使用简单的箭头函数,结果同上
['1', '2', '3'].map( str => parseInt(str) );

// 一个更简单的方式:
['1', '2', '3'].map(Number); // [1, 2, 3]
// 与`parseInt` 不同,下面的结果会返回浮点数或指数:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

7.Array.prototype.reduce()

arr.reduce(callback[, initialValue])

Array.prototype.reduceRight()是与其用法类似,是从右向左遍历。

参数:

  • callback: 执行数组中每个值的函数,包含四个参数:

    • accumulator: 累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(如下所示)。

    • currentValue: 数组中正在处理的元素。

    • currentIndex: 可选,数组中正在处理的当前元素的索引。 如果提供了initialValue,则索引号为0,否则为索引为1。

    • array: 可选,调用reduce的数组。

  • initialValue: 可选,用作第一个调用 callback的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用reduceParameters: 비교함수

    선택사항. 특정 순서로 배열된 기능을 지정하는 데 사용됩니다. 생략하면 변환된 문자열의 각 문자의 유니코드 위치에 따라 요소가 정렬됩니다.
compareFunction을 지정하면 함수 호출의 반환 값에 따라 배열이 정렬됩니다. 즉, a와 b는 비교할 두 요소입니다.

  • If compareFunction(a, b) 0보다 작으면 a가 b보다 먼저 정렬됩니다.

  • compareFunction(a, b)가 0이면 상대 위치입니다. a 및 b 변경되지 않음

  • compareFunction(a, b)가 0보다 크면 b가 a 앞에 정렬됩니다.

    비교 함수 형식은 다음과 같습니다(문자열과 배열 모두 비교 가능):
    [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
      return accumulator + currentValue;
    }, 10);
    
    // 20
    3. )#🎜 🎜#
    var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
      function(a, b) {
        return a.concat(b);
      },
      []
    );
    // flattened is [0, 1, 2, 3, 4, 5]
    4. Array.prototype.concat()
    원래 배열에 영향을 주지 않고 새 배열(얕은 복사본)을 반환합니다.
    • 매개변수가 배열인 경우 배열의 요소를 결과에 넣습니다.
    • # 🎜🎜#매개변수가 배열이 아닌 경우 매개변수 자체를 결과에 넣습니다. #🎜🎜##🎜🎜#
      // friends - an array of objects 
      // where object field "books" - list of favorite books 
      var friends = [{
        name: 'Anna',
        books: ['Bible', 'Harry Potter'],
        age: 21
      }, {
        name: 'Bob',
        books: ['War and peace', 'Romeo and Juliet'],
        age: 26
      }, {
        name: 'Alice',
        books: ['The Lord of the Rings', 'The Shining'],
        age: 18
      }];
      
      // allbooks - list which will contain all friends' books +  
      // additional list contained in initialValue
      var allbooks = friends.reduce(function(prev, curr) {
        return [...prev, ...curr.books];
      }, ['Alphabet']);
      
      // allbooks = [
      //   'Alphabet', 'Bible', 'Harry Potter', 'War and peace', 
      //   'Romeo and Juliet', 'The Lord of the Rings',
      //   'The Shining'
      // ]
      #🎜🎜#5. Array.prototype.forEach()#🎜🎜#
      let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
      let result = arr.sort().reduce((init, current)=>{
          if(init.length===0 || init[init.length-1]!==current){
              init.push(current);
          }
          return init;
      }, []);
      console.log(result); //[1,2,3,4,5]
      #🎜🎜#여기서: thisArg는 선택적 매개변수입니다. 콜백 함수 실행시 this로 사용되는 값(참조 객체)입니다. #🎜🎜##🎜🎜#다음 함수에도 선택적 매개변수 thisArg가 있으며 사용법은 Array.prototype.forEach()와 일치합니다. #🎜🎜#
      • #🎜🎜#Array.prototype.forEach()#🎜🎜##🎜🎜#
      • #🎜🎜#Array.prototype.every()#🎜 🎜##🎜 🎜#
      • #🎜🎜#Array.prototype.some()#🎜🎜##🎜🎜#
      • #🎜🎜#Array.prototype.filter()#🎜🎜##🎜🎜#
      • # 🎜🎜#Array.prototype.map()#🎜🎜##🎜🎜#
      • #🎜🎜#Array.prototype.reduce()#🎜🎜##🎜🎜#
      • #🎜🎜 #Array.prototype .reduceRight()#🎜🎜##🎜🎜##🎜🎜##🎜🎜#6.Array.prototype.map()#🎜🎜##🎜🎜#사용 기술 사례#🎜🎜#rrreee# 🎜🎜#7 .Array.prototype.reduce()#🎜🎜##🎜🎜#arr.reduce(callback[,initialValue])#🎜🎜#배열. 프로토타입.reduceRight( )는 사용법과 유사하며 오른쪽에서 왼쪽으로 이동합니다. #🎜🎜##🎜🎜#Parameters: #🎜🎜#
        • #🎜🎜#콜백: 배열의 각 값을 실행하는 함수 , 4개의 매개변수 포함: #🎜🎜##🎜🎜#
          • #🎜🎜#accumulator / code>: 누산기는 콜백의 반환 값을 누적합니다. 이는 콜백이 마지막으로 호출되었을 때 반환된 누적 값 또는 <code>initialValue(아래 참조)입니다. #🎜🎜##🎜🎜#
          • #🎜🎜#currentValue: 배열에서 처리 중인 요소입니다. #🎜🎜##🎜🎜#
          • #🎜🎜#currentIndex: 선택 사항, 배열에서 처리 중인 현재 요소의 인덱스입니다. initialValue가 제공되면 인덱스 번호는 0이고, 그렇지 않으면 인덱스는 1입니다. #🎜🎜##🎜🎜#
          • #🎜🎜#배열: 선택 사항, reduce를 호출할 배열입니다. #🎜🎜##🎜🎜##🎜🎜#
          • #🎜🎜#initialValue: 선택 사항, 첫 번째 콜백 호출의 첫 번째 매개변수 값으로 사용됩니다. 초기값이 제공되지 않으면 배열의 첫 번째 요소가 사용됩니다. 초기값이 없는 빈 배열에 대해 reduce를 호출하면 오류가 보고됩니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#리듀스 실행 방법 Spread 연산자와initialValue는 객체 배열에 포함된 배열을 바인딩합니다. 도움이 필요하면 PHP 중국어 웹사이트에서 더 많은 관련 내용을 참고하세요! #🎜🎜##🎜🎜#관련 권장 사항: #🎜🎜##🎜🎜##🎜🎜#Angular-UI 부트스트랩 구성 요소를 사용하여 알림을 구현하는 방법#🎜🎜##🎜🎜##🎜🎜##🎜🎜# #🎜🎜#JavaScript를 사용하여 스택을 구현하는 방법#🎜🎜##🎜🎜##🎜🎜#

위 내용은 JavaScript의 배열 배열에 대한 팁 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.