es6學習筆記一數組(下)


entries() 方法:

概述:    entries() 方法返回一個 Array Iterator(數組迭代) 對象,該對象包含數組中每一個索引的鍵值對。

示例:

      let arr = ["a", "b", "c"];
      let eArr = arr.entries();
      console.log(eArr);//數組迭代對象
      console.log(eArr.next().value); // [0, "a"]
      console.log(eArr.next().value); // [1, "b"]
      console.log(eArr.next().value); // [2, "c"]

keys()方法:

概述:   數組的 keys() 方法返回一個數組索引的迭代器。(該方法和entries方法相似)

示例:

示例1:

      var arr = ["a", "b", "c"];
      var iterator = arr.keys();
      console.log(iterator.next()); // { value: 0, done: false }
      console.log(iterator.next()); // { value: 1, done: false }
      console.log(iterator.next()); // { value: 2, done: false }
      console.log(iterator.next()); // { value: undefined, done: true }

示例2:

      var arr = ["a", "b", "c"];
      var iterator = arr.keys();
      for(var i=0;i<arr.length;i++){
        console.log(iterator.next());
      }

 打印結果:

示例3:索引迭代器會包含那些沒有對應元素的索引

      var arr = ['a','b',,'f'];
      var sparseKeys = Object.keys(arr);
      var denseKeys = [...arr.keys()];
      console.log(sparseKeys); //["0", "1", "3"]
      console.log(denseKeys);  // [0, 1, 2, 3]

示例4:

      var arr = ['a','b',,'f'];
      var iterator = arr.keys();
      for(var i=0;i<arr.length;i++){
        console.log(iterator.next());
        console.log('數組arr第'+(i+1)+'個元素的值是:'+arr[i]);
      }

 打印結果:

forEach()方法:

概述:   forEach() 方法讓數組的每一項都執行一次給定的函數。

參數:

     callback:用來測試每個元素的函數;(注意:callback 只會被有值的索引調用,不會被那些被刪除或從來未被賦值的索引調用)

                 currentValue:當前項(指遍歷時正在被處理那個數組項)的值。

                 index:當前項的索引(或下標)。

                 array:數組本身。

     thisArg:執行 callback 時使用的 this 值。(thisArg傳:number、string、object、Boolean、null、undefined這幾種類型的值都可以)並不說只能傳這幾種類型的值哦

描述:

     如果給forEach傳遞了thisArg 參數,它將作為 callback 函數的執行上下文,類似執行如下函數callback.call(thisArg, element, index, array)。如果 thisArg 值為 undefined 或 null,函數的this 值取決於當前執行環境是否為嚴格模式(嚴格模式下為 undefined,非嚴格模式下為全局對象)。

  forEach 遍歷的范圍在第一次調用 callback 前就會確定。調用forEach 后添加到數組中的項不會被 callback 訪問到。如果已經存在的值被改變,則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值。已刪除的項不會被遍歷到。

示例:

      var obj=[{
        id:1,
        name:'張甜甜',
        age:20
      },{
        id:2,
        name:'一丟丟',
        age:22
      },{
        id:3,
        name:'zen',
        age:28
      },{
        id:4,
        name:'張小穎',
        age:22
      },{
        id:5,
        name:'五河士道',
        age:20
      }];
      obj.forEach(function(item){
        console.log('第'+item.id+'個學生:'+item.name+'的年齡是:'+item.age);
      });

 打印結果:

map()方法:

概述:   map() 方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組。

參數:

     callback:用來測試每個元素的函數;(注意:callback 只會被有值的索引調用,不會被那些被刪除或從來未被賦值的索引調用)

                 currentValue:數組中當前被傳遞的元素。

                 index:數組中當前被傳遞的元素的索引。

                 array:調用 map 方法的數組。

     thisArg:執行 callback 時使用的 this 值。(thisArg傳:number、string、object、Boolean、null、undefined這幾種類型的值都可以)並不說只能傳這幾種類型的值哦

描述:

     如果 thisArg 參數有值,則每次 callback 函數被調用的時候,this 都會指向 thisArg 參數上的這個對象。如果省略了 thisArg 參數,或者賦值為 null 或 undefined,則 this 指向全局對象 。

  map 不修改調用它的原數組本身(當然可以在 callback 執行時改變原數組)

     使用 map 方法處理數組時,數組元素的范圍是在 callback 方法第一次調用之前就已經確定了。在 map 方法執行的過程中:原數組中新增加的元素將不會被 callback 訪問到;若已經存在的元素被改變或刪除了,則它們的傳遞到 callback 的值是 map 方法遍歷到它們的那一時刻的值;而被刪除的元素將不會被訪問到。

示例:

      var nameData=['豆豆','大雲','小二']
      function findName(single){
        if(single=='大雲'){
          single+='good';
        }
        return single;
      }
      let mapData1=nameData.map(findName);
      console.log(mapData1);//["豆豆", "大雲good", "小二"],
      console.log(nameData);//["豆豆", "大雲", "小二"]

fill()方法:

概述:   fill() 方法,可以將一個數組中指定區間的所有元素的值, 都替換成或者說填充成為某個固定的值。會改變原數組的值

參數:

                 value:用來填充數組元素的值。

                 start:可選,開始索引。

                 end:可選,結束索引。

描述:

    具體要填充的元素區間是 [start, end) , 一個半開半閉區間.

  fill 方法接受三個參數 value, start 以及 endstart 和 end 參數是可選的, 其默認值分別為 0 和 this 對象的 length 屬性值.

    如果 start 是個負數, 則開始索引會被自動計算成為 length+start, 其中 length 是 this 對象的 length 屬性值. 如果 end 是個負數, 則結束索引會被自動計算成為 length+end.

    fill 方法故意被設計成通用方法, 也就是說它不需要 this 值必須是個數組對象, 類數組對象也是可以調用該方法的 .

    fill 方法是個可變方法, 它會改變調用它的 this 對象本身, 然后返回它, 而並不是返回一個副本.

示例:

      var a=[1,2,,4,6],b=[2,0,5,,6,8],c=['a','b','c',,'e',5,6,6],d=['a','b',,'e',5,6,8],e=['a','b',,'e',5,6,8];
      console.log(a.fill(4));//
      console.log(a);//
      console.log(b.fill(1, 1, 7));//
      console.log(b);//
      console.log(c.fill(1, -3, -1));//
      console.log(c);//
      console.log(d.fill(1, -1, -3));//
      console.log(d);//
      console.log(e.fill(2, -5, -8));//
      console.log(e);//

 打印結果:

 

includes()方法:

概述:   includes() 方法用來判斷當前數組是否包含某指定的值,如果是,則返回 true,否則返回 false。

參數:

                 searchElement:需要查找的元素值。

                 fromIndex:可選參數。從該索引處開始查找 searchElement,默認為 0。

示例:

      console.log([1, 2, 3].includes(2,1));//true
      console.log([1, 2, 3].includes(2,2));//false
      console.log([1, 2, 3].includes(2,-2));//true

indexOf()方法:

概述:  indexOf()方法返回給定元素能找在數組中找到的第一個索引值,否則返回-1。

參數:

                 searchElement:需要查找的元素值。

                 fromIndex:開始查找的位置。如果該索引值大於或等於數組長度,意味着不會在數組里查找,返回-1。如果參數中提供的索引值是一個負值,則將其作為數組末尾的一個抵消,即-1表示從最后一個元素開始查找,-2表示從倒數第二個元素開始查找 ,以此類推。 注意:如果參數中提供的索引值是一個負值,仍然從前向后查詢數組。如果抵消后的索引值仍小於0,則整個數組都將會被查詢。其默認值為0.

描述:

   indexOf 使用strict equality (無論是 ===, 還是 triple-equals操作符都基於同樣的方法)進行判斷searchElement與數組中包含的元素之間的關系。

示例:

示例1:

使用indexOf方法確定多個值在數組中的位置。

      var a=["1", "3", "2", "3", "0"];
      console.log(a.indexOf ('3'));//1
      console.log(a.indexOf (5,'0'));//-1
      console.log(a.indexOf ('0'));//4
      console.log(a.indexOf ('0',-5));//4
      console.log(a.indexOf ('3',-1));//-1
      console.log(a.indexOf ('3',-3));//3
      console.log(a.indexOf ('1',5));//-1
      console.log(a.indexOf (3));//-1
      console.log(a);//["1", "3", "2", "3", "0"]

 示例2:

使用indexOf方法找出指定元素出現的所有位置

      var indices = [];
      var array = ['a', 'b', 'a', 'c', 'a', 'd'];
      var element = 'a';
      var idx = array.indexOf(element);
      while (idx != -1) {
        indices.push(idx);
        idx = array.indexOf(element, idx + 1);
      }
      console.log(indices);//[0, 2, 4]

示例3:

 使用indexOf方法判斷一個元素是否在數組里,不在則更新數組

      function updateVegetablesCollection (veggies, veggie) {
        if (veggies.indexOf(veggie) === -1) {
          veggies.push(veggie);                                 //新的蔬菜集合:土豆、番茄、辣椒、青椒、菠菜
          console.log('New veggies collection is : ' + veggies);//New veggies collection is : potato,tomato,chillies,green-pepper,spinach
        } else if (veggies.indexOf(veggie) > -1) {                          //番茄已經存在於蔬菜集合
          console.log(veggie + ' already exists in the veggies collection.');//tomato already exists in the veggies collection.
        }
      }              //土豆      番茄       辣椒         青椒
      var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
                                           //菠菜
      updateVegetablesCollection(veggies, 'spinach');
      updateVegetablesCollection(veggies, 'tomato'); 

lastIndexOf()方法:

概述:  lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或變量)在數組中的最后一個的索引,如果不存在則返回 -1。從數組的后面向前查找,從 fromIndex 處開始。

參數:

                 searchElement:需要查找的元素值。

                 fromIndex:開始查找的位置。如果該索引值大於或等於數組長度,意味着不會在數組里查找,返回-1。如果參數中提供的索引值是一個負值,則將其作為數組末尾的一個抵消,即-1表示從最后一個元素開始查找,-2表示從倒數第二個元素開始查找 ,以此類推。 注意:如果參數中提供的索引值是一個負值,仍然從前向后查詢數組。如果抵消后的索引值仍小於0,則整個數組都將會被查詢。其默認值為0.

描述:

    lastIndexOf 使用嚴格相等(strict equality,即 ===)比較 searchElement 和數組中的元素。

示例:

示例1:

使用lastIndexOf 定位數組中的值的位置

      var array = [2, 5, 9, 2];
      console.log(array.lastIndexOf(2));//3
      console.log(array.lastIndexOf(7));//-1
      console.log(array.lastIndexOf(2, 3));//3
      console.log(array.lastIndexOf(2, 2));//0
      console.log(array.lastIndexOf(2, -2));//0
      console.log(array.lastIndexOf(2, -1));//3
      console.log(array.lastIndexOf(2, -4));//0
      console.log(array.lastIndexOf(2, -5));//-1

示例2:

使用lastIndexOf 查找到一個元素在數組中所有的索引(下標)

      var indices = [];
      var array = ['a', 'b', 'a', 'c', 'a', 'd'];
      var element = 'a';
      var idx = array.lastIndexOf(element);
      while (idx != -1) {
        indices.push(idx);
        idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
      }
      console.log(indices);//[4, 2, 0]

join()方法:

概述:  join() 方法將數組中的所有元素連接成一個字符串。

參數:

                separator:可選,用於指定連接每個數組元素的分隔符。分隔符會被轉成字符串類型;如果省略的話,默認為一個逗號。如果 seprator 是一個空字符串,那么數組中的所有元素將被直接連接。

描述:

   所有的數組元素被轉換成字符串,再用一個分隔符將這些字符串連接起來。如果元素是undefined 或者null, 則會轉化成空字符串。

示例:

        var a = ['蘋果', '火龍果', '榴蓮'];
        console.log('我愛吃:'+a.join());// 我愛吃:蘋果,火龍果,榴蓮
        console.log('我愛吃:'+a.join(', '));   //我愛吃:蘋果, 火龍果, 榴蓮
        console.log('我愛吃:'+a.join(' + '));  //我愛吃:蘋果 + 火龍果 + 榴蓮
        console.log(a);//["蘋果", "火龍果", "榴蓮"]
        console.log('我愛吃:'+a.join(''));    //我愛吃:蘋果火龍果榴蓮

reduce()方法:

概述:  reduce() 方法接收一個函數作為累加器(accumulator),數組中的每個值(從左到右)開始合並,最終為一個值。

參數:

          callback:執行數組中每個值的函數,包含四個參數

                    previousValue:上一次調用回調返回的值,或者是提供的初始值

                    currentValue:數組中當前被處理的元素

                    index:當前元素在數組中的索引

                    array:調用 reduce 的數組

          initialValue:作為第一次調用 callback 的第一個參數。

描述:

  reduce 為數組中的每一個元素依次執行回調函數,不包括數組中被刪除或從未被賦值的元素,接受四個參數:初始值(或者上一次回調函數的返回值),當前元素值,當前索引,調用 reduce 的數組。

      回調函數第一次執行時,previousValue 和 currentValue 的取值有兩種情況,如果 initialValue 在調用 reduce 時被提供,那么第一個 previousValue 等於 initialValue ,並且currentValue 等於數組中的第一個值;如果initialValue 未被提供,那么previousValue 等於數組中的第一個值,currentValue等於數組中的第二個值。

    如果數組為空並且沒有提供initialValue, 會拋出TypeError 。如果數組僅有一個元素(無論位置如何)並且沒有提供initialValue, 或者有提供initialValue但是數組為空,那么此唯一值將被返回並且callback不會被執行。

示例:

 示例1:

        var reduceValue = [0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) {
            return previousValue + currentValue;
        });
        console.log(reduceValue);//10
  previousValue currentValue index array return value
first call 0 1 1 [0,1,2,3,4] 1
second call 1 2 2 [0,1,2,3,4] 3
third call 3 3 3 [0,1,2,3,4] 6
fourth call 6 4 4 [0,1,2,3,4] 10

示例2:

        var reduceValue=[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) {
            return previousValue + currentValue;
        }, 10);
        console.log(reduceValue);//20
  previousValue currentValue index array return value
first call 10 0 0 [0,1,2,3,4] 10
second call 10 1 1 [0,1,2,3,4] 11
third call 11 2 2 [0,1,2,3,4] 13
fourth call 13 3 3 [0,1,2,3,4] 16
fifth call 16 4 4 [0,1,2,3,4] 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]

reduceRight()方法:

概述:  reduceRight() 方法接受一個函數作為累加器(accumulator),讓每個值(從右到左,亦即從尾到頭)縮減為一個值。(與 reduce() 的執行方向相反)

參數:

          callback:執行數組中每個值的函數,包含四個參數

                    previousValue:上一次調用回調返回的值,或者是提供的初始值

                    currentValue:數組中當前被處理的元素

                    index:當前元素在數組中的索引

                    array:調用 reduce 的數組

          initialValue:作為第一次調用 callback 的第一個參數。

描述:

  reduceRight 為數組中每個元素調用一次 callback 回調函數,但是數組中被刪除的索引或從未被賦值的索引會跳過。回調函數接受四個參數:初始值(或上次調用回調的返回值)、當前元素值、當前索引,以及調用 reduce 的數組。

首次調用回調函數時,previousValuecurrentValue 可以是兩個值之一。如果調用 reduceRight 時提供了 initialValue 參數,則 previousValue 等於 initialValuecurrentValue 等於數組中的最后一個值。如果沒有提供 initialValue 參數,則 previousValue 等於數組最后一個值, currentValue 等於數組中倒數第二個值。

如果數組為空,且沒有提供 initialValue 參數,將會拋出一個 TypeError 錯誤。如果數組只有一個元素且沒有提供 initialValue 參數,或者提供了 initialValue 參數,但是數組為空將會直接返回數組中的那一個元素或 initialValue 參數,而不會調用 callback

示例:

 示例1:

        var reduceRightValue=[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
            return previousValue + currentValue;
        });
        console.log(reduceRightValue);//10
  previousValue currentValue index array return value
first call 4 3 3 [0,1,2,3,4] 7
second call 7 2 2 [0,1,2,3,4] 9
third call 9 1 1 [0,1,2,3,4] 10
fourth call 10 0 0 [0,1,2,3,4] 10

示例2:

        var reduceRightValue=[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
            return previousValue + currentValue;
        },2);
        console.log(reduceRightValue);//12
  previousValue currentValue index array return value
first call 2 4 4 [0,1,2,3,4] 6
second call 6 3 3 [0,1,2,3,4] 9
third call 9 2 2 [0,1,2,3,4] 11
fourth call 11 1 1 [0,1,2,3,4] 12
fifth call 12 0 0 [0,1,2,3,4] 12

示例3:

        var flattened = [
            [0, 1],
            [2, 3],
            [4, 5]
        ].reduceRight(function(a, b) {
            return a.concat(b);
        }, []);
        console.log(flattened); //[4, 5, 2, 3, 0, 1]

reverse()方法:

概述:  reverse() 方法顛倒數組中元素的位置。第一個元素會成為最后一個,最后一個會成為第一個。會改變原數組的值

描述:

  reverse 方法顛倒數組中元素的位置,並返回該數組的引用。

示例:

        var myArray = [1, 2, 3];
        myArray.reverse();
        console.log(myArray) //[3, 2, 1]

slice()方法:

概述:  slice() 方法會淺復制(shallow copy)數組的一部分到一個新的數組,並返回這個新數組。

參數:

          begin:從該索引處開始提取原數組中的元素(從0開始)。

                   如果該參數為負數,則表示從原數組中的倒數第幾個元素開始提取,slice(-2)表示提取原數組中的倒數第二個元素到最后一個元素(包含最后一個元素)。

                   如果省略 begin,則slice從索引0開始。

          end:在該索引處結束提取原數組元素(從0開始)。slice會提取原數組中索引從begin到end的所有元素(包含begin,但不包含end)。
                slice(1,4)提取原數組中的第二個元素開始直到第四個元素的所有元素(索引為1,2,3的元素)。
                如果該參數為復數,則它表示在原數組中的倒數第幾個元素結束抽取。slice(-2,-1)表示抽取了原數組中的倒數第二個元素到最后一個元素(不包含最后一個元素,也就是只有倒數第二個元素)。

                如果end被省略,則slice會一直提取到原數組末尾。

描述:

           slice不修改原數組,只會返回一個淺復制了原數組中的元素的一個新數組,原數組的元素會按照下述規則拷貝:

          如果該元素是個對象引用(不是實際的對象),slice會拷貝這個對象引用到新的數組里。兩個對象引用都引用了同一個對象。如果被引用的對象發生改變,則新的和原來的數組中的這個元素也會發生改變。

          對於字符串、數字及布爾值來說(不是String、Number或者Boolean對象),slice會拷貝這些數值到新的數組里。在別的數組里修改這些字符串或數字或是布爾值,將不會影響另一個數組。

          如果像兩個數組任意一個中添加了新元素,則另一個不會收到影響。

示例:

        var myArray = [1, 2, 3,,5,6,7];
        console.log(myArray.slice(1,9));
        console.log(myArray.slice(1,5)); 
        console.log(myArray); 
        console.log(myArray.slice(-2)); 
        console.log(myArray.slice(-4,-1)); 
        console.log(myArray.slice(-9,-1)); 

sort()方法:

概述:  sort() 方法對數組的元素做原地的排序,並返回這個數組。 sort 排序可能是不穩定的。默認按照字符串的Unicode碼位點(code point)排序。會改變原數組的值

參數:

          compareFunction:可選。用來指定按某種順序進行排列的函數。如果省略,元素按照轉換為的字符串的諸個字符的Unicode位點進行排序。

描述:

           如果沒有指明 compareFunction ,那么元素會按照轉換為的字符串的諸個字符的Unicode位點進行排序。例如 "Banana" 會被排列到 "cherry" 之前。數字比大小時,9 出現在 80 之前,但這里比較時數字會先被轉換為字符串,所以 "80" 比 "9" 要靠前。

示例:

示例1:

        var fruit = ['cherries', 'apples', 'bananas'];
        console.log(fruit.sort()); //["apples", "bananas", "cherries"]
        console.log('數組fruit:'+fruit); //數組fruit:apples,bananas,cherries
        var scores = [1, 10, 2, 21];
        console.log(scores.sort()); // [1, 10, 2, 21]
        console.log('數組scores:'+scores); //數組scores:1,10,2,21
        var things = ['word', 'Word', '1 Word', '2 Words'];
        console.log(things.sort()); // ["1 Word", "2 Words", "Word", "word"]
        console.log('數組things:'+things); //數組things:1 Word,2 Words,Word,word

如果指明了 compareFunction ,那么數組會按照調用該函數的返回值排序。記 a 和 b 是兩個將要被比較的元素:

  • 如果 compareFunction(a, b) 小於 0 ,那么 a 會被排列到 b 之前;
  • 如果 compareFunction(a, b) 等於 0 , a 和 b 的相對位置不變。備注: ECMAScript 標准並不保證這一行為,而且也不是所有瀏覽器都會遵守(例如 Mozilla 在 2003 年之前的版本);
  • 如果 compareFunction(a, b) 大於 0 , b 會被排列到 a 之前。
  • compareFunction(a, b) 必須總是對相同的輸入返回相同的比較結果,否則排序的結果將是不確定的。

示例2:

        var numbers = [4, 2, 5, 1, 3,21];
        numbers.sort(function(a, b) {
            return a > b;
        });
        console.log(numbers);//[1, 2, 3, 4, 5, 21]

toLocaleString()方法:

概述:  toLocaleString() 返回一個字符串表示數組中的元素。數組中的元素將使用各自的 toLocaleString 方法轉成字符串,這些字符串將使用一個特定語言環境的字符串(例如一個逗號 ",")隔開。

描述:

          數組中的元素將會使用各自的 toLocaleString 方法:

示例:

示例1:

        var numbers = [4, 2, 5, 1, 3,21];
        console.log(numbers.toLocaleString()); //4,2,5,1,3,21
        console.log(numbers);//[4, 2, 5, 1, 3, 21]

示例2:

        var number = '今天的時間:';
        var date = new Date();
        var myArr = [number, date, "西安"];
        var str = myArr.toLocaleString();
        console.log(str);//今天的時間:,2016/10/28 下午4:06:42,西安:

toString()方法:

概述:  toString() 返回一個字符串,表示指定的數組及其元素。

描述:

     Array 對象覆蓋了 ObjecttoString 方法。對於數組對象,toString 方法返回一個字符串,該字符串由數組中的每個元素的 toString() 返回值經調用 join() 方法連接(由逗號隔開)組成。例如,下面的代碼創建了一個數組,然后使用 toString 方法把該數組轉成一個字符串。

示例:

示例1:

        var numbers = [4, 2, 5, 1, 3,21];
        console.log(numbers.toString()); //4,2,5,1,3,21
        console.log(numbers);//[4, 2, 5, 1, 3, 21]

 示例2:

        var number = '今天的時間:';
        var date = new Date();
        var myArr = [number, date, "西安"];
        var str = myArr.toString();
        console.log(str);//今天的時間:,Fri Oct 28 2016 16:52:41 GMT+0800 (中國標准時間),西安:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM