>웹 프론트엔드 >JS 튜토리얼 >JS 배열 배열 메소드 요약

JS 배열 배열 메소드 요약

一个新手
一个新手원래의
2017-10-26 10:50:182669검색

1.배열배열 메서드Array数组的方法

  • Mutator方法————"突变方法"会改变数组自身的值;

  • Accessor方法————"访问方法"不会改变数组自身的值;

  • Iteration方法————"遍历的方法" ;

2.Mutator方法

  • [ ].push作用:将一个或多个元素添加到数组的末尾,传参:(单个或多个数组元素);返回值:新数组的长度;

     //标准用法
     arr.push(el1, el2 ……elN);
     //合并两个数组
     [].push.apply(arr1, arr2)
  • [].pop()作用:删除最后一个元素,传参:无;返回值:删除的元素。

    //标准用法
    let a = [1 ,2 ,3 ];
    a.pop();//3
  • [ ].unshift作用:将一个或多个元素添加到数组的开头,传参:(单个或多个数组元素);返回值:新数组的长度;

     //标准用法
     arr.unshift(el1, el2 ……elN);
  • [].shift()作用:删除第一个元素,传参:无;返回值:删除的元素。

    //标准用法
    let a = [1 ,2 ,3 ];
    a.shift();//1
  • [].reverse()作用:数组元素颠倒位置,传参:无;返回值:颠倒后的数组。

    //标准用法
    arr.reverse()
  • [].splice()作用:数组元素颠倒位置,传参:(索引,删除个数【选】,要添加的元素【选】);返回值:被删除的元素组成的一个数组。

    //标准用法
    array.splice(start)
    array.splice(start, deleteCount) 
    array.splice(start, deleteCount, item1, item2, ...)
  • [].fill()作用:用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,传参:(用来填充数组元素的值,起始索引【选】,终止索引【选】);返回值:修改后的数组。

    //标准用法
    arr.fill(value) 
    arr.fill(value, start) 
    arr.fill(value, start, end)
    //例子
    [1, 2, 3].fill(4)            // [4, 4, 4]
    [1, 2, 3].fill(4, 1)         // [1, 4, 4]
    [1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]
  • [].sort()作用:对数组的元素进行排序,并返回数组,传参:(指定排列顺序的函数【选】);返回值:排列后的数组。

    //标准用法
    arr.sort() 
    arr.sort(compareFunction)
    //例子
    var numbers = [4, 2, 5, 1, 3];
    numbers.sort(function(a, b) {
    return a - b;
    });// [1, 2, 3, 4, 5]

3.Accessor方法

  • [ ].join作用:将数组(或一个类数组对象)的所有元素连接到一个字符串中。,传参:(指定一个字符串来分隔数组的每个元素【选】);返回值:一个所有数组元素连接的字符串;

    //标准用法
    var a = ['Wind', 'Rain', 'Fire'];
    var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
    var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
  • [ ].concat作用:并两个或多个数组。,传参:(将数组和/或值连接成新数组【选】);返回值:合并后的数组;

    //标准用法
    var alpha = ['a', 'b', 'c'];
    var numeric = [1, 2, 3];
    alpha.concat(numeric);
    //['a', 'b', 'c', 1, 2, 3]
  • [ ].slice作用:方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组。,传参:(开始索引【选】,结束索引【选】);返回值:截去后的数组;

    //标准用法
    var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
    var citrus = fruits.slice(1, 3);
    //['Orange','Lemon'] 
      //类数组转数组
    function list() {
     return [].slice.call(arguments)}
    var list1 = list(1, 2, 3); // [1, 2, 3]
  • [ ].toString作用:返回一个字符串,表示指定的数组及其元素,传参:(无);返回值:转化成的字符串;(=[].join()

    //标准用法
    var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
    var myVar = monthNames.toString(); // assigns "Jan,Feb,Mar,Apr" to myVar.
  • [ ].includes作用:判断一个数组是否包含一个指定的值,传参:(要查找的元素);返回值:true或 false;

    //标准用法
    let a = [1, 2, 3];
    a.includes(2); // true 
    a.includes(4); // false
  • [ ].indexOf作用:在数组中可以找到一个给定元素的第一个索引,传参:(要查找的元素);返回值:找不到-1,找得到索引;

    var array = [2, 5, 9];
    array.indexOf(2);     // 0
    array.indexOf(7);     // -1

4.Iteration方法


    • [ ].forEach作用:每个元素执行一次提供的函数,传参:(callback(当前元素,索引,该数组));返回值:无;

       //标准用法
       array.forEach(callback(currentValue, index, array){
       //do something
      }, this)
    • [ ].find作用:返回数组中满足提供的测试函数的第一个元素的值,传参:(callback(当前元素,索引,该数组));返回值:该元素;([].findIndex()返回索引)

       //标准用法
       array. find(callback(currentValue, index, array){
       //do something
      }, this)
    • [ ].filter作用:创建一个新数组, 其包含通过所提供函数实现的测试的所有元素,传参:(callback(当前元素,索引,该数组));返回值

      • Mutator 메서드 — ———"Mutation 방법"은 배열 자체의 값을 변경합니다. 🎜
      • 🎜Accessor 방법 ————"접근 방법"은 배열의 값을 변경하지 않습니다. 🎜
      • 🎜반복 방법————"순회 방법";🎜
      🎜🎜2.Mutator method🎜
      • 🎜①[ ].push함수: 하나 이상의 요소를 다음에 추가합니다. 배열의 끝에서 매개변수: (단일 또는 다중 배열 요소); 반환 값: 새 배열의 길이 🎜
         //标准用法
         let arr = array. filter(callback(currentValue, index, array){
         //do something
         }, this)
      • 🎜②[].pop(), 함수: 마지막 요소 삭제, 매개변수 전달: 반환 값; >: 요소를 삭제합니다. 🎜
         //标准用法
         var numbers = [1, 4, 9];
         var roots = numbers.map(Math.sqrt);
         // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
      • 🎜 ③[ ].unshift함수: 배열 시작 부분에 하나 이상의 요소를 추가하고 매개변수 전달: (단일 또는 다중 배열 요소); <code>반환 값: 새 배열의 길이 🎜
           //标准用法
           function isBigEnough(element, index, array) {
            return (element >= 10);}
           var passed = [12, 5, 8, 130, 44].every(isBigEnough);// passed is false
           passed = [12, 54, 18, 130, 44].every(isBigEnough);// passed is true
      • 🎜4[].shift(), <code>함수: 첫 번째 요소 삭제, 매개변수: 없음 반환 값: 삭제된 요소. 🎜
           //标准用法
           function isBigEnough(element, index, array) {
            return (element >= 10);}
           var passed = [1, 5, 8, 3, 4].some(isBigEnough);// passed is false
           passed = [2, 4, 18, 13, 4].some(isBigEnough);// passed is true
      • 🎜⑤[].reverse(), 함수: 배열 요소의 위치 반전, 매개변수 전달 : 없음 ;반환 값: 역방향 배열. 🎜
           //标准用法
           var total = [0, 1, 2, 3].reduce(function(sum, value) {
            return sum + value;
          }, 0);// total is 6
        
           var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
            return a.concat(b);}, []);
            // flattened is [0, 1, 2, 3, 4, 5]
      • 🎜⑥[].splice(), 함수: 배열 요소의 위치 반전, 매개변수 전달 : ( 인덱스, 삭제할 번호 [선택], 추가할 요소 [선택]) 반환값 : 삭제된 요소들로 구성된 배열. 🎜
           //标准用法
           var arr = ["a", "b", "c"];
           var iterator = arr.entries();// undefined
           console.log(iterator);// Array Iterator {}
           console.log(iterator.next().value); // [0, "a"]
           console.log(iterator.next().value); // [1, "b"]
           console.log(iterator.next().value); // [2, "c"]
      • 🎜7[].fill(), 함수: 시작 인덱스부터 끝 인덱스까지 고정된 값으로 배열을 채웁니다. 의 요소, 매개변수: (배열 요소를 채우는 데 사용되는 값, 시작 인덱스 [select], 끝 인덱스 [select]): 수정된 배열. 🎜
           //标准用法
           let arr = [&#39;w&#39;, &#39;y&#39;, &#39;k&#39;, &#39;o&#39;, &#39;p&#39;];
           let eArr = arr.values();// 您的浏览器必须支持 for..of 循环
           // 以及 let —— 将变量作用域限定在 for 循环中
          for (let letter of eArr) {
                 console.log(letter);}
      • 🎜8[].sort(), 함수: 배열의 요소를 정렬하고 배열을 반환하고, 매개변수를 전달합니다. : (정렬 순서를 지정하는 함수[선택 사항]) 반환 값: 정렬된 배열. 🎜
         //标准用法
         arr.push(el1, el2 ……elN);
         //合并两个数组
         [].push.apply(arr1, arr2)
      🎜🎜🎜3.접속자메서드🎜
      • 🎜① [ ].join함수: 배열(또는 배열 유사 객체)의 모든 요소를 ​​문자열로 결합합니다. , 매개변수 전달: (배열의 각 요소를 구분하는 문자열 지정 [선택 사항]) 반환 값: 모든 배열 요소를 연결하는 문자열 🎜
        //标准用法
        let a = [1 ,2 ,3 ];
        a.pop();//3
      • 🎜②[ ].concat함수: 두 개 이상의 배열을 연결합니다. , 매개변수 전달: (배열 및/또는 값을 새 배열에 연결[선택 사항]) 반환 값: 병합된 배열; >🎜 ③[ ].slice함수: 이 메서드는 선택한 배열 부분의 처음부터 끝까지(끝 제외)의 얕은 복사본을 새 배열로 반환합니다. . , 매개변수 전달: (시작 인덱스 [select], 끝 인덱스 [select]); 반환 값: 잘린 배열; code>[ ].toString—함수: 지정된 배열과 해당 요소를 나타내는 문자열을 반환합니다. 매개변수 전달: (없음); : 변환된 문자열; (=[].join())🎜
         //标准用法
         arr.unshift(el1, el2 ……elN);
      • 🎜⑤[ ].includes 함수: 배열에 지정된 값이 포함되어 있는지 확인합니다. 매개변수 전달: (찾을 요소) 반환 값 : true 또는 false; /li>
      • 🎜⑥[ ].indexOf함수: 배열 Index, parameters에서 주어진 요소의 첫 번째 요소를 찾습니다. : (찾을 요소); 반환 값: 찾을 수 없음 -1, 인덱스를 찾았습니다. 🎜
        //标准用法
        let a = [1 ,2 ,3 ];
        a.shift();//1
      🎜 🎜🎜4.반복 방법; 🎜
      • 🎜
        🎜
        • 🎜①[ ].forEach함수: 각 요소 제공된 함수를 한 번 실행, 매개변수 : (콜백(현재 요소, 인덱스, 배열)); 반환 값: 없음; 🎜
          //标准用法
          arr.reverse()
        • 🎜②[ ].find—함수: 제공된 테스트 함수인 매개변수 전달을 만족하는 배열의 첫 번째 요소 값을 반환합니다. ( 콜백(현재 요소, 인덱스, 배열)); >반환 값: 요소; ([].findIndex()인덱스를 반환) 🎜
          //标准用法
          array.splice(start)
          array.splice(start, deleteCount) 
          array.splice(start, deleteCount, item1, item2, ...)
        • 🎜 ③[ ].filter함수: 제공된 함수인 매개변수 전달로 구현된 테스트의 모든 요소를 ​​포함하는 새 배열을 만듭니다. >: (콜백(현재 요소, 인덱스, 배열) ); 반환 값: 테스트를 통과한 요소 컬렉션의 배열 🎜
           //标准用法
           let arr = array. filter(callback(currentValue, index, array){
           //do something
           }, this)
        • [ ].map作用:创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。,传参:(callback(当前元素,索引,该数组));返回值:一个新数组,每个元素都是回调函数的结果;

           //标准用法
           var numbers = [1, 4, 9];
           var roots = numbers.map(Math.sqrt);
           // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
        • [ ].every作用:测试数组的所有元素是否都通过了指定函数的测试;传参:(callback(当前元素,索引,该数组));返回值truefalse

             //标准用法
             function isBigEnough(element, index, array) {
              return (element >= 10);}
             var passed = [12, 5, 8, 130, 44].every(isBigEnough);// passed is false
             passed = [12, 54, 18, 130, 44].every(isBigEnough);// passed is true
        • [ ].some作用:测试数组的某些元素是否都通过了指定函数的测试;传参:(callback(当前元素,索引,该数组));返回值truefalse

             //标准用法
             function isBigEnough(element, index, array) {
              return (element >= 10);}
             var passed = [1, 5, 8, 3, 4].some(isBigEnough);// passed is false
             passed = [2, 4, 18, 13, 4].some(isBigEnough);// passed is true
        • [ ].reduce作用:对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值;传参:(callback(累加器accumulator,当前元素,索引,该数组));返回值:函数累计处理的结果;

             //标准用法
             var total = [0, 1, 2, 3].reduce(function(sum, value) {
              return sum + value;
            }, 0);// total is 6
          
             var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
              return a.concat(b);}, []);
              // flattened is [0, 1, 2, 3, 4, 5]
        • [ ].entries作用:返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对;传参:(无));返回值:一个新的 Array 迭代器对象;

             //标准用法
             var arr = ["a", "b", "c"];
             var iterator = arr.entries();// undefined
             console.log(iterator);// Array Iterator {}
             console.log(iterator.next().value); // [0, "a"]
             console.log(iterator.next().value); // [1, "b"]
             console.log(iterator.next().value); // [2, "c"]
        • [ ].values作用:数组转对象;传参:(无));返回值:一个新的 Array 迭代器对象;

             //标准用法
             let arr = [&#39;w&#39;, &#39;y&#39;, &#39;k&#39;, &#39;o&#39;, &#39;p&#39;];
             let eArr = arr.values();// 您的浏览器必须支持 for..of 循环
             // 以及 let —— 将变量作用域限定在 for 循环中
            for (let letter of eArr) {
                   console.log(letter);}

        参考资料:https://developer.mozilla.org...


        1.Array数组的方法

        • Mutator方法————"突变方法"会改变数组自身的值;

        • Accessor方法————"访问方法"不会改变数组自身的值;

        • Iteration方法————"遍历的方法" ;

        2.Mutator方法

        • [ ].push作用:将一个或多个元素添加到数组的末尾,传参:(单个或多个数组元素);返回值:新数组的长度;

           //标准用法
           arr.push(el1, el2 ……elN);
           //合并两个数组
           [].push.apply(arr1, arr2)
        • [].pop()作用:删除最后一个元素,传参:无;返回值:删除的元素。

          //标准用法
          let a = [1 ,2 ,3 ];
          a.pop();//3
        • [ ].unshift作用:将一个或多个元素添加到数组的开头,传参:(单个或多个数组元素);返回值:新数组的长度;

           //标准用法
           arr.unshift(el1, el2 ……elN);
        • [].shift()作用:删除第一个元素,传参:无;返回值:删除的元素。

          //标准用法
          let a = [1 ,2 ,3 ];
          a.shift();//1
        • [].reverse()作用:数组元素颠倒位置,传参:无;返回值:颠倒后的数组。

          //标准用法
          arr.reverse()
        • [].splice()作用:数组元素颠倒位置,传参:(索引,删除个数【选】,要添加的元素【选】);返回值:被删除的元素组成的一个数组。

          //标准用法
          array.splice(start)
          array.splice(start, deleteCount) 
          array.splice(start, deleteCount, item1, item2, ...)
        • [].fill()作用:用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,传参:(用来填充数组元素的值,起始索引【选】,终止索引【选】);返回值:修改后的数组。

          //标准用法
          arr.fill(value) 
          arr.fill(value, start) 
          arr.fill(value, start, end)
          //例子
          [1, 2, 3].fill(4)            // [4, 4, 4]
          [1, 2, 3].fill(4, 1)         // [1, 4, 4]
          [1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]
        • [].sort()作用:对数组的元素进行排序,并返回数组,传参:(指定排列顺序的函数【选】);返回值:排列后的数组。

          //标准用法
          arr.sort() 
          arr.sort(compareFunction)
          //例子
          var numbers = [4, 2, 5, 1, 3];
          numbers.sort(function(a, b) {
          return a - b;
          });// [1, 2, 3, 4, 5]

        3.Accessor方法

        • [ ].join作用:将数组(或一个类数组对象)的所有元素连接到一个字符串中。,传参:(指定一个字符串来分隔数组的每个元素【选】);返回值:一个所有数组元素连接的字符串;

          //标准用法
          var a = [&#39;Wind&#39;, &#39;Rain&#39;, &#39;Fire&#39;];
          var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
          var myVar2 = a.join(&#39;, &#39;);  // myVar2的值变为"Wind, Rain, Fire"
        • [ ].concat作用:并两个或多个数组。,传参:(将数组和/或值连接成新数组【选】);返回值:合并后的数组;

          //标准用法
          var alpha = ['a', 'b', 'c'];
          var numeric = [1, 2, 3];
          alpha.concat(numeric);
          //['a', 'b', 'c', 1, 2, 3]
        • [ ].slice作用:方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组。,传参:(开始索引【选】,结束索引【选】);返回值:截去后的数组;

          //标准用法
          var fruits = [&#39;Banana&#39;, &#39;Orange&#39;, &#39;Lemon&#39;, &#39;Apple&#39;, &#39;Mango&#39;];
          var citrus = fruits.slice(1, 3);
          //[&#39;Orange&#39;,&#39;Lemon&#39;] 
            //类数组转数组
          function list() {
           return [].slice.call(arguments)}
          var list1 = list(1, 2, 3); // [1, 2, 3]
        • [ ].toString作用:返回一个字符串,表示指定的数组及其元素,传参:(无);返回值:转化成的字符串;(=[].join()

          //标准用法
          var monthNames = [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;];
          var myVar = monthNames.toString(); // assigns "Jan,Feb,Mar,Apr" to myVar.
        • [ ].includes作用:判断一个数组是否包含一个指定的值,传参:(要查找的元素);返回值:true或 false;

          //标准用法
          let a = [1, 2, 3];
          a.includes(2); // true 
          a.includes(4); // false
        • [ ].indexOf作用:在数组中可以找到一个给定元素的第一个索引,传参:(要查找的元素);返回值:找不到-1,找得到索引;

          var array = [2, 5, 9];
          array.indexOf(2);     // 0
          array.indexOf(7);     // -1

        4.Iteration方法


        • [ ].forEach作用:每个元素执行一次提供的函数,传参:(callback(当前元素,索引,该数组));返回值:无;

           //标准用法
           array.forEach(callback(currentValue, index, array){
           //do something
          }, this)
        • [ ].find作用:返回数组中满足提供的测试函数的第一个元素的值,传参:(callback(当前元素,索引,该数组));返回值:该元素;([].findIndex()返回索引)

           //标准用法
           array. find(callback(currentValue, index, array){
           //do something
          }, this)
        • [ ].filter作用:创建一个新数组, 其包含通过所提供函数实现的测试的所有元素,传参:(callback(当前元素,索引,该数组));返回值:通过测试的元素的集合的数组;

           //标准用法
           let arr = array. filter(callback(currentValue, index, array){
           //do something
           }, this)
        • [ ].map作用:创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。,传参:(callback(当前元素,索引,该数组));返回值:一个新数组,每个元素都是回调函数的结果;

           //标准用法
           var numbers = [1, 4, 9];
           var roots = numbers.map(Math.sqrt);
           // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
        • [ ].every作用:测试数组的所有元素是否都通过了指定函数的测试;传参:(callback(当前元素,索引,该数组));返回值truefalse

             //标准用法
             function isBigEnough(element, index, array) {
              return (element >= 10);}
             var passed = [12, 5, 8, 130, 44].every(isBigEnough);// passed is false
             passed = [12, 54, 18, 130, 44].every(isBigEnough);// passed is true
        • [ ].some作用:测试数组的某些元素是否都通过了指定函数的测试;传参:(callback(当前元素,索引,该数组));返回值truefalse

             //标准用法
             function isBigEnough(element, index, array) {
              return (element >= 10);}
             var passed = [1, 5, 8, 3, 4].some(isBigEnough);// passed is false
             passed = [2, 4, 18, 13, 4].some(isBigEnough);// passed is true
        • [ ].reduce作用:对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值;传参:(callback(累加器accumulator,当前元素,索引,该数组));返回值:函数累计处理的结果;

             //标准用法
             var total = [0, 1, 2, 3].reduce(function(sum, value) {
              return sum + value;
            }, 0);// total is 6
          
             var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
              return a.concat(b);}, []);
              // flattened is [0, 1, 2, 3, 4, 5]
        • [ ].entries作用:返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对;传参:(无));返回值:一个新的 Array 迭代器对象;

             //标准用法
             var arr = ["a", "b", "c"];
             var iterator = arr.entries();// undefined
             console.log(iterator);// Array Iterator {}
             console.log(iterator.next().value); // [0, "a"]
             console.log(iterator.next().value); // [1, "b"]
             console.log(iterator.next().value); // [2, "c"]
        • [ ].values作用:数组转对象;传参:(无));返回值:一个新的 Array 迭代器对象;

             //标准用法
             let arr = [&#39;w&#39;, &#39;y&#39;, &#39;k&#39;, &#39;o&#39;, &#39;p&#39;];
             let eArr = arr.values();// 您的浏览器必须支持 for..of 循环
             // 以及 let —— 将变量作用域限定在 for 循环中
            for (let letter of eArr) {
                   console.log(letter);}


위 내용은 JS 배열 배열 메소드 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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