前言
在node.js后端開發(fā)過程中,數(shù)組這種數(shù)據(jù)類型(Object類型)再常見不過块茁,本文主要介紹數(shù)組的一些常見函數(shù)唇兑,以及在實(shí)戰(zhàn)開發(fā)過程中能更好的操作數(shù)組的lodash包。
函數(shù)介紹
向數(shù)組末尾添加值
push
說明:向數(shù)組的末尾添加一個(gè)或多個(gè)元素露该,并返回新的長度
代碼:
let array=[11,22];
let arrayChange=array.push("333");
console.log(arrayChange)
//返回的結(jié)果就是數(shù)組改變后的長度:3
console.log(arrayChange.length)//undefined
向數(shù)組頭部添加值
unshift
說明:將參數(shù)添加到原數(shù)組開頭,并返回?cái)?shù)組的長度
代碼:
let array=[11,22];
let arrayChange=array.unshift("333");
console.log(array) //[333,11,22]
console.log(arrayChange)
//返回的結(jié)果就是數(shù)組改變后的長度:3
console.log(arrayChange.length)//undefined
刪除數(shù)組元素
splice
說明:
當(dāng)splice傳遞兩個(gè)參數(shù)的時(shí)候琳疏,參數(shù)1:開始刪除的下標(biāo)位置,參數(shù)2:刪除數(shù)組元素的個(gè)數(shù)有决,返回新的數(shù)組。當(dāng)splice傳遞三個(gè)參數(shù)的時(shí)候空盼,參數(shù)1:開始刪除的下表位置,參數(shù)2:刪除數(shù)組元素的個(gè)數(shù),參數(shù)3:向數(shù)組添加的新元素新荤。注意數(shù)組下標(biāo)0開始揽趾。
代碼:
let array=[11,22,33,44];
let arrayChange=array.splice(1,2);//movePos.splice(開始刪除的下表位置,刪除數(shù)組元素的個(gè)數(shù));
console.log(arrayChange) ; //返回新的數(shù)組:22,11
console.log(arrayChange.length) ;//返回?cái)?shù)組長度2
let array =[111,222,333,444];
let arrayChange=array.splice(2,1,"666")//movePos.splice(開始刪除的下表位置,刪除數(shù)組元素的個(gè)數(shù),向數(shù)組添加的新項(xiàng)目苛骨。);從下標(biāo)2開始刪除一位篱瞎,并用666替換刪除下表位置的元素
console.loge(arrayChange + "<br />")
//返回新的數(shù)組 11,22,666,44
獲取數(shù)組的最后一個(gè)元素
常規(guī)獲取元素最后一個(gè)值
let array=['1','2','3','312哦哦'];
console.log(array[array.length-1]);
pop 也可以說是刪除數(shù)組的最后一個(gè)元素苟呐,與刪除數(shù)組的第一個(gè)元素shift用法基本相同
說明:注意使用pop獲取數(shù)組最后一個(gè)元素的時(shí)候,同時(shí)會刪除掉數(shù)組的最后一個(gè)元素俐筋;使用shift獲取數(shù)組最后一個(gè)元素的時(shí)候牵素,同時(shí)會刪除掉數(shù)組的最后一個(gè)元素,二者都是返回的那個(gè)元素的值澄者,原始數(shù)組也發(fā)生變化笆呆。
let array=['1','2','3','312哦哦'];
console.log(array.pop())
console.log(array)
Lodash中的函數(shù)_last
說明:不會改變原始數(shù)組
let array=['1','2','3','312哦哦'];
console.log(_.last(array))
顛倒數(shù)組元素(數(shù)組的反轉(zhuǎn))
-
數(shù)組傳統(tǒng)方法 reverse
說明:顛倒數(shù)組元素后返回新的數(shù)組
代碼:
let array=[11,22];
let arrayChange=movePos.reverse();
console.log(arrayChange) //返回新的數(shù)組:22,11
console.log(arrayChange.length) //返回?cái)?shù)組長度2
- lodash提供的函數(shù) _.reverse
代碼:
let array=[11,22];
console.log(_.reverse(array))
分隔數(shù)組放入字符串
join
說明:用于把數(shù)組中的所有元素放入一個(gè)字符串。元素是通過指定的分隔符進(jìn)行分隔的粱挡。返回一個(gè)字符串
代碼
let array=[11,22];
let arrayChange=array.join("+");
console.log(arr) //11+22
連接兩個(gè)或多個(gè)數(shù)組
contact
說明:用于連接兩個(gè)或多個(gè)數(shù)組,并返回一個(gè)新數(shù)組赠幕,新數(shù)組是將參數(shù)添加到原數(shù)組中構(gòu)成
let array=[11,22];
let arrayChange=array.concat(4,5);
console.log(arrayChange);//[11, 22, 4, 5]
數(shù)組元素的去重
- 傳統(tǒng)方法遍歷去重 for of
代碼:
let arr = ['數(shù)字','花朵','數(shù)字'];
let result=[];
for (let i of arr) {
if (!result.includes(i)) {
result.push(i)
}
}
- ES6 新增了Set這一數(shù)據(jù)結(jié)構(gòu) 類似數(shù)組 但是Set成員具有唯一性,基于唯一性適合做數(shù)組去重
代碼:
let array=['數(shù)字','花朵','數(shù)字','地球','人類','頭發(fā)','眼睛','細(xì)胞'];
console.log(...(new Set(array)))
- lodash提供的函數(shù) _uniq
代碼:
let array=['數(shù)字','花朵','數(shù)字','地球','人類','頭發(fā)','眼睛','細(xì)胞'];
console.log(_.uniq(array));
數(shù)組求和
lodash中的函數(shù) _sum
代碼:
let sorce=_.sum([32,45,86,43]);
獲取數(shù)組中指定鍵值對的值組成數(shù)組
lodash中的函數(shù) _map
說明:例如這樣一個(gè)包含對象的數(shù)組[{id:1,name:'koala'},{id:2,name:'koala1'}],想拿到數(shù)組對象中id的數(shù)據(jù)組成一個(gè)數(shù)組询筏。map的參數(shù)1:原型數(shù)組榕堰,參數(shù)2對象中的某一個(gè)鍵值對
代碼:
let array=[{id:1,name:'koala'},{id:2,name:'koala1'}];
let result=_map(array,'id');
//[1,2]
獲取數(shù)組中某個(gè)值的角標(biāo)
注意:下面兩個(gè)函數(shù)都是返回遇到的第一個(gè)符合的值的下標(biāo)值。
indexOf
說明:
- 用于在字符串和數(shù)組中找到目標(biāo)的索引
- 在字符串中使用的話會轉(zhuǎn)換類型為 "hello1".indexOf(1) //結(jié)果5
- 在數(shù)組中使用不會轉(zhuǎn)換類型 [1,2,3,"4"].indexOf(4) //-1
- [,,,,,].indexOf(undefined) //-1
- [null,undefined,NaN].indexOf(NaN)] //-1 NaN是找不到的其他可以喲
- let num = 2019; (""+num).indexOf(0) //1
7.正常情況下indexOf返回?cái)?shù)組中第一個(gè)數(shù)的位置是0
代碼:
console.log('哈哈',("hello1".indexOf(1)))// 哈哈 5
console.log('哈哈',("hello1111".indexOf(1)))// 哈哈 5
console.log('哈哈',("hello1".indexOf('h')))//0
lodash中的函數(shù)_.findIndex
說明:對于一個(gè)數(shù)組嫌套,里面每個(gè)值是對象的時(shí)候逆屡,這個(gè)函數(shù),可以不完全判斷對象一定是相同的踱讨。
代碼:
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
數(shù)組包含值判斷
-
indexOf
說明:返回對應(yīng)元素下標(biāo)魏蔗,在上面已經(jīng)詳細(xì)介紹過。
-
includes
說明:返回的直接是true/false勇蝙,同時(shí)對NaN找不到的問題也得到解決沫勿。效率應(yīng)該會比indexOf高一些。includes可以有兩個(gè)參數(shù)味混,參數(shù)1:表示要判斷的值产雹,參數(shù)2:表示判斷的起始位置,可以是負(fù)數(shù)翁锡,表示從右數(shù)過來第幾個(gè)蔓挖,但是不改變判斷搜索的方向,搜索方向還是從左到右馆衔。
代碼:
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
把一個(gè)字符串分割成字符串?dāng)?shù)組
split
說明:split函數(shù)兩個(gè)參數(shù)瘟判,參數(shù)1:字符串或正則表達(dá)式,從該參數(shù)指定的地方分割 (必須)角溃,參數(shù)2:可選拷获。該參數(shù)可指定返回的數(shù)組的最大長度。如果設(shè)置了該參數(shù)减细,返回的子串不會多于這個(gè)參數(shù)指定的數(shù)組匆瓜。如果沒有設(shè)置該參數(shù),整個(gè)字符串都會被分割,不考慮它的長度
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"]
附:
注意驮吱,文中提到的所有l(wèi)odash中的函數(shù)茧妒,在使用的時(shí)候需要先
const _ = require('lodash');
一道面試題:
給定任意非負(fù)整數(shù),反復(fù)累加各位數(shù)字直到結(jié)果為個(gè)位數(shù)為止左冬。例如給定非負(fù)整數(shù)912桐筏,第一次累加9+1+2 = 12, 第二次累加1+2 = 3, 3為個(gè)位數(shù),循 環(huán)終止返回3拇砰。請編程實(shí)現(xiàn)梅忌。
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
<center>覺得本文對你有幫助?請分享給更多人<center>
歡迎大家關(guān)注我的公眾號——程序員成長指北毕匀。請自行微信搜索——“程序員成長指北”