javascript中Array常用方法總結(jié)

harriszh 發(fā)布于2019-08-22 15:42 / 562人閱讀

摘要：函數(shù)接受個(gè)參數(shù)前一個(gè)值，當(dāng)前值，項(xiàng)索引，數(shù)組本身。更多數(shù)組方法請(qǐng)看

js內(nèi)置對(duì)象之Array

一，會(huì)改變?cè)瓟?shù)組 1.移除數(shù)組末尾最后一項(xiàng).pop()

返回刪除的元素

如果你在一個(gè)空數(shù)組上調(diào)用 pop()，它返回 undefined

    let word = ["a", "b", "c", "d"];  
    let newArr = word.pop();  
    console.log(word);      //["a", "b", "c"]  
    console.log(newArr);    //d  
  
    let nullArr = [];  
    console.log(nullArr.pop()); //undefined

2.在數(shù)組末尾添加一個(gè)或多個(gè)元素.push()

返回修改后數(shù)組長(zhǎng)度

    let word = ["a", "b", "c", "d"];  
    let newArr = word.push("e","f");  
    console.log(word);      //["a", "b", "c", "d", "e", "f"]  
    console.log(newArr);    //6

3.移除數(shù)組第一項(xiàng).shift()

返回移除的元素

    let word = ["a", "b", "c", "d"];  
    let newArr = word.shift();  
    console.log(word);      //["b", "c", "d"]  
    console.log(newArr);    //a

4.在數(shù)組頭部添加一個(gè)或多個(gè)元素.unshift()

返回修改后數(shù)組長(zhǎng)度

    let word = ["a", "b", "c", "d"];  
    let newArr = word.unshift("11","22");  
    console.log(word);      //["11", "22", "a", "b", "c", "d"]  
    console.log(newArr);    //6

5.對(duì)數(shù)組元素排序.sort()

返回排序后的數(shù)組

默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)

    let fruit = ["cherries", "apples", "bananas"];  
    console.log(fruit.sort());       // ["apples", "bananas", "cherries"]  
      
    let scores = [1, 10, 21, 2];   
    console.log(scores.sort());  
    // [1, 10, 2, 21]  
    // 注意10在2之前,  
    // 因?yàn)樵?Unicode 指針順序中"10"在"2"之前  
  
    let things = ["word", "Word", "1 Word", "2 Words"];  
    console.log(things.sort());   
    // ["1 Word", "2 Words", "Word", "word"]  
    // 在Unicode中, 數(shù)字在大寫字母之前,  
    // 大寫字母在小寫字母之前.  
  
    function compare(a, b) {  
        if(a < b) {  
            return -1;  
        }else if(a > b) {  
            return 1;  
        }else {  
            return 0;  
        }  
    }  
    let num = [1, 10, 21, 2];  
    console.log(num.sort(compare)); //[1, 2, 10, 21]

6.顛倒數(shù)組元素.reverse()

返回顛倒后的數(shù)組

    let word = ["a", "b", "c", "d"];  
    let newArr = word.reverse();  
    console.log(word);      //["d", "c", "b", "a"]  
    console.log(newArr);    //["d", "c", "b", "a"]

7.刪除或插入元素.splice()

返回?cái)?shù)組刪除的項(xiàng)

沒有刪除的項(xiàng)，返回空數(shù)組

    var word = ["a", "b", "c", "d"];  
    //刪除,前閉后開  
    var newArr = word.splice(0,2);  
    console.log(word);      //["c", "d"]  
    console.log(newArr);    //["a", "b"]  
  
    //插入,當(dāng)前數(shù)組索引1處插入hello  
    var newArr = word.splice(1,0,"hello");  
    console.log(word);      //["c", "hello", "d"]  
    console.log(newArr);    //[]  
  
    //替換  
    var newArr = word.splice(1,1,"world");  
    console.log(word);      //["c", "world", "d"]  
    console.log(newArr);    //["hello"]

二，不會(huì)改變?cè)瓟?shù)組 1.合并兩個(gè)或多個(gè)數(shù)組.concat()

返回新數(shù)組

    let word = ["a", "b", "c", "d"];  
    let word2 = ["hello","world"];  
    let newArr = word.concat(word2);  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr);    //["a", "b", "c", "d", "hello", "world"]

2.將數(shù)組所有元素連接成一個(gè)字符串.join()

返回連接后的字符串

    let word = ["a", "b", "c", "d"];  
    let newArr = word.join("---");  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr);    //a---b---c---d

3.截取數(shù)組元素到新數(shù)組中.slice()

返回新數(shù)組

    let word = ["a", "b", "c", "d"];  
    //原數(shù)組索引為1開始截取后面所有元素  
    let newArr = word.slice(1);  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr);    //["b", "c", "d"]  
      
    //截取原數(shù)組索引為1到3之間的元素，前閉后開  
    let newArr2 = word.slice(1,3);  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr2);    //["b", "c"]  
  
    //截取原數(shù)組倒數(shù)第三個(gè)元素與倒數(shù)第一個(gè)元素之間的元素，前閉后開  
    let newArr3 = word.slice(-3,-1);  
    console.log(word);      //["a", "b", "c", "d"]  
    console.log(newArr3);    //[["b", "c"]

4.獲取查詢?cè)氐谝淮纬霈F(xiàn)的索引.indexOf()

找不到查詢?cè)?，則返回-1

    let word = ["a", "b", "b", "c", "d"];  
    let index = word.indexOf("b");      //1,第一次出現(xiàn)b的索引值  
    let index2 = word.indexOf("hello"); //-1  
    console.log(index);  
    console.log(index2);

5.獲取查詢?cè)刈詈笠淮纬霈F(xiàn)的索引.lastIndexOf()

找不到查詢?cè)?，則返回-1

    let word = ["a", "b", "b", "c", "d"];  
    let index = word.lastIndexOf("b");      //2,最后一個(gè)b的索引值為2  
    let index2 = word.lastIndexOf("hello"); //-1  
    console.log(index);  
    console.log(index2);

6.toString()返回由數(shù)組每個(gè)元素的字符串形式拼接而成的以逗號(hào)分隔的字符串

    let word = ["a", "b", "b", "c", "d"];  
    let str = word.toString();      //a,b,b,c,d  
    console.log(str);

7.toLocaleString()返回一個(gè)字符串表示數(shù)組中的元素，更多了解查看MDN 三，迭代方法

每個(gè)方法接受含有三個(gè)參數(shù)的函數(shù)，三個(gè)參數(shù)為：數(shù)組中的項(xiàng)，元素索引，數(shù)組本身

1.every()，數(shù)組所有元素都滿足要求則返回true，否則返回false
2.some()，只要有滿足要求的就返回true
3.filter()，返回過濾后的結(jié)果數(shù)組
4.map()，返回在函數(shù)中處理過的數(shù)組
5.forEach()，遍歷整個(gè)數(shù)組

    var number = [1,2,3,4,5,6,7,8];  
    var res = number.every(function(item, index, array) {  
        return (item > 2);  
    })  
    console.log(res);   //false  
  
    var res = number.some(function(item, index, array) {  
        return (item > 2);  
    })  
    console.log(res);   //true  
  
    var res = number.filter(function(item, index, array) {  
        return (item > 2);  
    })  
    console.log(res);   //[3, 4, 5, 6, 7, 8]  
  
    var res = number.map(function(item, index, array) {  
        return (item * 2);  
    })  
    console.log(res);   //[2, 4, 6, 8, 10, 12, 14, 16]  
  
    var res = number.forEach(function(item, index, array) {  
        //執(zhí)行某些操作 
    })

四，歸并方法

迭代數(shù)組所有項(xiàng)，構(gòu)建最終返回值，每個(gè)方法接受兩個(gè)參數(shù)：調(diào)用的函數(shù)和作為歸并基礎(chǔ)的初始值。函數(shù)接受4個(gè)參數(shù)：前一個(gè)值，當(dāng)前值，項(xiàng)索引，數(shù)組本身。函數(shù)返回的值都會(huì)作為第一個(gè)參數(shù)自動(dòng)傳給下一項(xiàng)，第一次迭代從數(shù)組第二項(xiàng)開始，當(dāng)前值為數(shù)組第二項(xiàng)

1.reduce()，從數(shù)組第一項(xiàng)開始遍歷到最后
2.reduceRight()，從數(shù)組最后一項(xiàng)開始遍歷到第一項(xiàng)

     /* 
        開始執(zhí)行回調(diào)函數(shù)cur為2，prev為1， 
        第二次執(zhí)行回調(diào)函數(shù)，在之前的基礎(chǔ)上加1 
        函數(shù)返回的值都會(huì)作為一個(gè)參數(shù)傳給下一項(xiàng)， 
        最后執(zhí)行函數(shù)時(shí)就是28+8 
    */  
    var number = [1,2,3,4,5,6,7,8];  
    var res = number.reduce(function(prev, cur, index, array) {  
        return prev + cur;  
    })  
    console.log(res);   //1+2+3+4+5+6+7+8=36  
  
    var res = number.reduceRight(function(prev, cur, index, array) {  
        return prev + cur;  
    })  
    console.log(res);   //8+7+6+5+4+3+2+1=36

五，結(jié)束語(yǔ)

數(shù)組是除了函數(shù)對(duì)象之外在js中使用最多的數(shù)據(jù)類型，掌握一些數(shù)組中常用方法在使用js做開發(fā)時(shí)還是會(huì)有幫助的，而且有些面試中也會(huì)問到相關(guān)問題，比如數(shù)組操作方法中哪些會(huì)改變?cè)瓟?shù)組，哪些不會(huì)。更多數(shù)組方法請(qǐng)看MDN

GPU云服務(wù)器云服務(wù)器 array方法方法總結(jié) 使用方法總結(jié) javascript學(xué)習(xí)總結(jié)

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

harriszh

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

BUI Webapp用于項(xiàng)目中的一點(diǎn)小心得

閱讀 1694·2019-08-30 15:54
前端面試題總結(jié)——綜合問題(持續(xù)更新中)

閱讀 3346·2019-08-26 17:15
在瀏覽器調(diào)起本地應(yīng)用的方法

閱讀 3536·2019-08-26 13:49
leetcode 鏈表相關(guān)題目解析

閱讀 2589·2019-08-26 13:38
【刷算法】丑數(shù)

閱讀 2301·2019-08-26 12:08
webstorm預(yù)覽html配置localhost為本機(jī)ip地址

閱讀 3065·2019-08-26 10:41
籃球即時(shí)比分api接口調(diào)用示例代碼

閱讀 1378·2019-08-26 10:24
Webpack包教不包會(huì)

閱讀 3387·2019-08-23 18:35

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

javascript中Array常用方法總結(jié)

相關(guān)文章

（轉(zhuǎn)）JavaScrit常用數(shù)組算法總結(jié)

**「JavaScript」Array方法的詳細(xì)總結(jié)及常用數(shù)組操作(附完整示例)**

JavaScript數(shù)組——常用數(shù)組方法匯總

***JavaScript：對(duì)Object對(duì)象的一些常用操作總結(jié)***

JavaScript-總結(jié)常用代碼書寫規(guī)范

發(fā)表評(píng)論

0條評(píng)論

harriszh

男|高級(jí)講師

TA的文章

BUI Webapp用于項(xiàng)目中的一點(diǎn)小心得

前端面試題總結(jié)——綜合問題(持續(xù)更新中)

在瀏覽器調(diào)起本地應(yīng)用的方法

leetcode 鏈表相關(guān)題目解析

【刷算法】丑數(shù)

webstorm預(yù)覽html配置localhost為本機(jī)ip地址

籃球即時(shí)比分api接口調(diào)用示例代碼

Webpack包教不包會(huì)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

javascript中Array常用方法總結(jié)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！