javascript數組經常使用函數與實戰總結

前言

在node.js後端開發過程當中，數組這種數據類型（Object類型）再常見不過，本文主要介紹數組的一些常見函數，以及在實戰開發過程當中能更好的操做數組的lodash包。

函數介紹

向數組末尾添加值

push

說明：向數組的末尾添加一個或多個元素，並返回新的長度 代碼：

let array=[11,22];
let arrayChange=array.push("333");
console.log(arrayChange)
//返回的結果就是數組改變後的長度：3
console.log(arrayChange.length)//undefined
複製代碼

向數組頭部添加值

unshift

說明：將參數添加到原數組開頭，並返回數組的長度 代碼：

let array=[11,22];
let arrayChange=array.unshift("333");
console.log(array) //[333,11,22]
console.log(arrayChange)
//返回的結果就是數組改變後的長度：3
console.log(arrayChange.length)//undefined
複製代碼

刪除數組元素

splice

說明： 當splice傳遞兩個參數的時候，參數1:開始刪除的下標位置,參數2:刪除數組元素的個數，返回新的數組。當splice傳遞三個參數的時候，參數1:開始刪除的下表位置,參數2:刪除數組元素的個數，參數3:向數組添加的新元素。注意數組下標0開始。

代碼：

let array=[11,22,33,44];
let arrayChange=array.splice(1,2);//movePos.splice(開始刪除的下表位置,刪除數組元素的個數);
console.log(arrayChange) ; //返回新的數組：22,11
console.log(arrayChange.length) ;//返回數組長度2

let array =[111,222,333,444];
let arrayChange=array.splice(2,1,"666")//movePos.splice(開始刪除的下表位置,刪除數組元素的個數，向數組添加的新項目。);從下標2開始刪除一位，並用666替換刪除下表位置的元素
console.loge(arrayChange + "<br />")
//返回新的數組 11,22,666,44
複製代碼

獲取數組的最後一個元素

常規獲取元素最後一個值

let array=['1','2','3','312哦哦'];
console.log(array[array.length-1]);
複製代碼

pop 也能夠說是刪除數組的最後一個元素，與刪除數組的第一個元素shift用法基本相同

說明：注意使用pop獲取數組最後一個元素的時候，同時會刪除掉數組的最後一個元素；使用shift獲取數組最後一個元素的時候，同時會刪除掉數組的最後一個元素，兩者都是返回的那個元素的值，原始數組也發生變化。

let array=['1','2','3','312哦哦'];
console.log(array.pop())
console.log(array)
複製代碼

Lodash中的函數_last

說明:不會改變原始數組

let array=['1','2','3','312哦哦'];
console.log(_.last(array))
複製代碼

顛倒數組元素(數組的反轉)

• 數組傳統方法 reverse

  說明:顛倒數組元素後返回新的數組

代碼：

let array=[11,22];

let arrayChange=movePos.reverse();

console.log(arrayChange) //返回新的數組：22,11

console.log(arrayChange.length) //返回數組長度2
複製代碼

• lodash提供的函數 _.reverse

代碼：

let array=[11,22];
console.log(_.reverse(array))

複製代碼

分隔數組放入字符串

join

說明:用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的。返回一個字符串 代碼

let array=[11,22];

let arrayChange=array.join("+");
console.log(arr)  //11+22
複製代碼

鏈接兩個或多個數組

contact

說明：用於鏈接兩個或多個數組,並返回一個新數組，新數組是將參數添加到原數組中構成

let array=[11,22];
let arrayChange=array.concat(4,5);
console.log(arrayChange);//[11, 22, 4, 5]
複製代碼

數組元素的去重

• 傳統方法遍歷去重 for of

代碼：

let arr = ['數字','花朵','數字'];
    let result=[];
    for (let i of arr) {
        if (!result.includes(i)) {
            result.push(i)
        }
    }
複製代碼

• ES6 新增了Set這一數據結構 相似數組 可是Set成員具備惟一性，基於惟一性適合作數組去重

代碼：

let array=['數字','花朵','數字','地球','人類','頭髮','眼睛','細胞'];
console.log(...(new Set(array)))
複製代碼

• lodash提供的函數 _uniq

代碼：

let array=['數字','花朵','數字','地球','人類','頭髮','眼睛','細胞'];
console.log(_.uniq(array));
複製代碼

數組求和

lodash中的函數 _sum

代碼：

let sorce=_.sum([32,45,86,43]);
複製代碼

獲取數組中指定鍵值對的值組成數組

lodash中的函數 _map

說明：例如這樣一個包含對象的數組[{id:1,name:'koala'},{id:2,name:'koala1'}],想拿到數組對象中id的數據組成一個數組。map的參數1:原型數組，參數2對象中的某一個鍵值對

代碼：

let array=[{id:1,name:'koala'},{id:2,name:'koala1'}];
let result=_map(array,'id');
//[1,2]
複製代碼

獲取數組中某個值的角標

注意:下面兩個函數都是返回遇到的第一個符合的值的下標值。 indexOf

說明：

1. 用於在字符串和數組中找到目標的索引
2. 在字符串中使用的話會轉換類型爲 "hello1".indexOf(1) //結果5
3. 在數組中使用不會轉換類型 [1,2,3,"4"].indexOf(4) //-1
4. [,,,,,].indexOf(undefined) //-1
5. [null,undefined,NaN].indexOf(NaN)] //-1 NaN是找不到的其餘能夠喲
6. let num = 2019; (""+num).indexOf(0) //1 7.正常狀況下indexOf返回數組中第一個數的位置是0 代碼：

console.log('哈哈',("hello1".indexOf(1)))// 哈哈 5
console.log('哈哈',("hello1111".indexOf(1)))// 哈哈 5
console.log('哈哈',("hello1".indexOf('h')))//0
複製代碼

lodash中的函數**_.findIndex** 說明:對於一個數組，裏面每一個值是對象的時候，這個函數，能夠不徹底判斷對象必定是相同的。 代碼:

var users = [
    { 'user': 'barney',  'active': false ,'role':1},
    { 'user': 'fred',    'active': false ,'role':2},
    { 'user': 'fred', 'active': true ,'role':3}
  ];

console.log(  _.findIndex(users, { 'user': 'fred', 'role': 3 }));// 輸出2
複製代碼

數組包含值判斷

• indexOf

  說明:返回對應元素下標，在上面已經詳細介紹過。

• includes

  說明:返回的直接是true/false，同時對NaN找不到的問題也獲得解決。效率應該會比indexOf高一些。includes能夠有兩個參數，參數1：表示要判斷的值，參數2:表示判斷的起始位置，能夠是負數，表示從右數過來第幾個，可是不改變判斷搜索的方向，搜索方向仍是從左到右。

代碼：

let array111=['koala','kaola1',NaN];
console.log(array111.includes('koala'));//true
console.log(array111.includes(NaN));//true

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN]
console.log('%s', arr1.includes('d', 3))//true
console.log('%s', arr1.includes('d', 4))//false

console.log('%s', arr1.includes('k', -1))//false
console.log('%s', arr1.includes('k', -2))//true
console.log('%s', arr1.includes('i', -3))//false
複製代碼

把一個字符串分割成字符串數組

split

說明：split函數兩個參數，參數1:字符串或正則表達式，從該參數指定的地方分割 (必須)，參數2:可選。該參數可指定返回的數組的最大長度。若是設置了該參數，返回的子串不會多於這個參數指定的數組。若是沒有設置該參數，整個字符串都會被分割，不考慮它的長度

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

輸出：
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you


"2:3:4:5".split(":")	//將返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//將返回["", "a", "b", "c"]

"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]

"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]

"hello".split("", 3)	//可返回 ["h", "e", "l"]

複製代碼

附：

注意，文中提到的全部lodash中的函數，在使用的時候須要先

const _ = require('lodash');
複製代碼

一道面試題:

給定任意非負整數，反覆累加各位數字直到結果爲個位數爲止。例如給定非負整數912，第一次累加9+1+2 = 12, 第二次累加1+2 = 3, 3爲個位數，循 環終止返回3。請編程實現。

function add(num){
    if(isNaN(num)) return;
    if(num<10) return num
    const res=num.toString().split('').reduce((sum,value)=>{
        return sum+Number(value)
    },0)
    return add(res);
}
add(345);
3
複製代碼

以爲本文對你有幫助？請分享給更多人

歡迎你們關注個人公衆號——程序員成長指北。請自行微信搜索——「程序員成長指北」