成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

數(shù)組 es5 常用方法

TIGERB / 492人閱讀

摘要：通常我們在項(xiàng)目過程中，難免會(huì)碰到各種對于數(shù)組的操作，或是是一些業(yè)務(wù)邏輯中，使用數(shù)組自帶方法，可以更加靈活的達(dá)到預(yù)期效果。

通常我們在項(xiàng)目過程中，難免會(huì)碰到各種對于數(shù)組的操作，或是是一些業(yè)務(wù)邏輯中，使用數(shù)組自帶方法，可以更加靈活的達(dá)到預(yù)期效果。


這里對一些常用的數(shù)組方法進(jìn)行總結(jié)，順便記錄下使用中的小技巧，方便后面進(jìn)行查詢
forEach

使用頻率最高的數(shù)組遍歷方法，效果與for循環(huán)相似，對數(shù)組中每一項(xiàng)進(jìn)行遍歷，但時(shí)間效率要比for 循環(huán)低，從代碼簡潔上看，推薦使用forEach，如果在有條件的情況下進(jìn)行遍歷時(shí)，推薦使用some 和 every 進(jìn)行遍歷，會(huì)在滿足具體條件后停下，節(jié)約不必要的循環(huán)

  
    [1,2,3].forEach(function(value, index, array) {
        cosole.log(value);                                
    });

  // output 
  //   1
  //   2
  //   3

對應(yīng)的在jQUery 中也實(shí)現(xiàn)了相同功能的遍歷方法 $.each()，對選中的數(shù)組或者對象進(jìn)行遍歷，這里還有$().each() 在dom 操作中使用較多，表示對子元素集合進(jìn)行遍歷。詳細(xì)解釋

 $.each([1,2,3],function(){
   console.log(this);
 }
// output 
   1
   2
   3

// 對象進(jìn)行遍歷
 $.each({a:1,b:2,c:3},function(key,val){
       console.log(obj[key])
  })
// output 
    1
    2
    3
map

對舊數(shù)組進(jìn)行"映射"，同時(shí)生成對應(yīng)的新數(shù)組，用法簡單，不改變原來的舊數(shù)組

var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
        return item * item;
});

最后返回的新的數(shù)組arrarOfSquares [1,4,9,16]

filter

數(shù)組過濾方法，返回判斷條件為true 的數(shù)組項(xiàng)形成的數(shù)組，不改變原數(shù)組

var arrayFilter = [1,2,3,4,5].filter(function(item,index){
                  rerutn item>3; 
           })
 console.log(arrayFilter);
 // output  [4,5]
some

數(shù)組中的判斷方法，更邏輯運(yùn)算中的或操作非常相似，|| ，只要數(shù)組中有任何一項(xiàng)滿足條件,就返回true,并且停止后面的遍歷.所以some方法在實(shí)際使用中也可以計(jì)較準(zhǔn)確的找到指定數(shù)組項(xiàng)的同時(shí)，得到相應(yīng)的下標(biāo)，更indexOf 方法有一些類似

[1,2,3,4,5].some(function(item,index){
                        console.log(index);
                        return item<3;
         }) 
   // output  0;

數(shù)組在遍歷的過程中，在第一個(gè)數(shù)組項(xiàng)處就停止循環(huán)了，并且整個(gè)數(shù)組返回 true

find

找到符合條件的第一個(gè)數(shù)組元素，與filter 類，如果沒有找到任何一個(gè)就返回undefined

var inventory = [
    {name: "apples", quantity: 2},
    {name: "bananas", quantity: 0},
    {name: "cherries", quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === "cherries";
}

console.log(inventory.find(findCherries)); 
// { name: "cherries", quantity: 5 }
every

與some方法相反的效果，只有數(shù)組中所有的項(xiàng)全都滿足條件，就會(huì)返回true，與邏輯運(yùn)算中的與，&& 操作類似

if([1,2,3,4,5].every(functionI(item,index){
                       console.log(index);
                       return item<3;
               })
     // output 0,1,2;

在帶條件的遍歷中，every 使用頻率比較高。既可以得到滿足條件的數(shù)組項(xiàng)，也可以判斷數(shù)組項(xiàng)中所有的值情況。

indexOf

查找匹配的項(xiàng)， 返回匹配的索引值，如果沒有匹配，則返回-1，在搭配邏輯運(yùn)算中非運(yùn)算時(shí) ~ ,有意想不到的效果

      ~ value 值， 當(dāng)value = -1 的時(shí)候，得到的才是0； false
                    其他任何值的時(shí)候，等到的是非0，   true
 if(!~[1,2,3,4,5].indexOf(1)){
       cnosole.log()
}

對于上面這種情況，在數(shù)組中沒有滿足條件的數(shù)組項(xiàng)時(shí)，才會(huì)返回true,如果有滿足條件的數(shù)組項(xiàng)，就會(huì)返回false,對于處理一些特定的業(yè)務(wù)邏輯有非常奇妙的效果

lastIndexOf

從后往前找，返回匹配項(xiàng)的索引值，如果沒有匹配的話，就返回 -1，

reduce

遞歸遍歷

var sum = [1,2,3,4].reduce(function(previous,current,index,array){
                        return previous + current;
                  });
              console.log(sum);
            // output 10;

默認(rèn)是從 第一個(gè)元素開始遍歷，

reduceRight 
從后往前進(jìn)行遞歸遍歷

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88783.html

相關(guān)文章

  • JavaScript es5中的Array常用的forEach、map、filter、indexOf

    摘要：的的區(qū)別和相同之處就是數(shù)組的遍歷循環(huán)，回調(diào)支持三個(gè)參數(shù)，第個(gè)是遍歷的數(shù)組內(nèi)容第個(gè)是對應(yīng)的數(shù)組索引，第個(gè)是數(shù)組本身他是沒有返回值得，不需要再下面，更進(jìn)一步，除了接受一個(gè)必須的回調(diào)函數(shù)參數(shù)，還可以接受一個(gè)可選的上下文參數(shù)改變回調(diào)函數(shù)里面 Array的forEach、map的區(qū)別和相同之處 forEach 1、 forEach就是數(shù)組的遍歷、循環(huán) ，回調(diào)支持三個(gè)參數(shù)，第1個(gè)是遍歷的數(shù)組內(nèi)容；...

    xuexiangjys 評論0 收藏0

  • 細(xì)說數(shù)組常用遍歷的方法

    摘要：需要返回值，如果不給，默認(rèn)返回使用場景假定有一個(gè)數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個(gè)對象數(shù)組將數(shù)中對象某個(gè)屬性的值存儲(chǔ)到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

    阿羅 評論0 收藏0

  • 細(xì)說數(shù)組常用遍歷的方法

    摘要：需要返回值，如果不給，默認(rèn)返回使用場景假定有一個(gè)數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個(gè)對象數(shù)組將數(shù)中對象某個(gè)屬性的值存儲(chǔ)到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

    AlphaWatch 評論0 收藏0

  • 細(xì)說數(shù)組常用遍歷的方法

    摘要：需要返回值，如果不給，默認(rèn)返回使用場景假定有一個(gè)數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個(gè)對象數(shù)組將數(shù)中對象某個(gè)屬性的值存儲(chǔ)到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

    ?xiaoxiao, 評論0 收藏0

發(fā)表評論

0條評論

TIGERB

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<