javascript數(shù)組方法&類數(shù)組

arr.push(...items)?—— 從尾端添加元素,

arr.pop()?—— 從尾端提取元素牵寺,

arr.shift()?—— 從首端提取元素绰更,

arr.unshift(...items)?—— 從首端添加元素。

1屉凯、刪除數(shù)組

數(shù)組是對象与殃,所以可以使用delete

let arr = ['dd', 'go', 'home']

delete arr[1]

console.log(arr, arr[1]) //?["dd", '', "home"] undefined

delete obj.key?是通過?key?來移除對應(yīng)的值单山。對于對象來說是可以的。但是對于數(shù)組來說幅疼,我們通常希望剩下的元素能夠移動并占據(jù)被釋放的位置米奸。我們希望得到一個更短的數(shù)組。

2爽篷、splice它可以做所有事情悴晰,添加、刪除逐工、插入元素

語法:splice(start,[deleteNum, elem1....elemN])

它從索引start開始修改數(shù)組铡溪,刪除deleteNum個元素并在當(dāng)前位置插入elem1....elemN

let arr = ["I", "study", "JavaScript"];

arr.splice(1,1);// 從索引 1 開始刪除 1 個元素

alert( arr ) //?["I", "JavaScript"]

let arr = ["I","study","JavaScript", "right", "now"];

arr.splice(0, 3, "Let's", "dance");

alert( arr ) //? ["Let's", "dance", "right", "now"]

let arr = ["I", "study", "JavaScript"];

// 從索引 2 開始, 刪除 0 個元素,然后插入 "complex" 和 "language"

arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

3、arr.slice([start], [end])

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s(復(fù)制從位置 1 到位置 3 的元素)

alert( arr.slice(-2) ); // s,t(復(fù)制從位置 -2 到尾端的元素)

4泪喊、concat數(shù)組合并

5棕硫、數(shù)組搜索

arr.indexOf(item, from)?從索引?from?開始搜索?item,如果找到則返回索引袒啼,否則返回?-1哈扮。

arr.lastIndexOf(item, from)?—— 和上面相同,只是從右向左搜索蚓再。

arr.includes(item, from)?—— 從索引?from?開始搜索?item滑肉,如果找到則返回?true(譯注:如果沒找到,則返回?false)摘仅。

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1

alert( arr.indexOf(false) ); // 2

alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

請注意靶庙,這些方法使用的是嚴(yán)格相等?===?比較。所以如果我們搜索?false娃属,會精確到的確是?false?而不是數(shù)字?0六荒。

如果我們想檢查是否包含某個元素,并且不想知道確切的索引膳犹,那么?arr.includes?是首選恬吕。

此外签则,includes?的一個非常小的差別是它能正確處理NaN须床,而不像?indexOf/lastIndexOf:

const arr = [NaN];

alert( arr.indexOf(NaN) ); // -1(應(yīng)該為 0,但是嚴(yán)格相等 === equality 對 NaN 無效)

alert( arr.includes(NaN) );// true(這個結(jié)果是對的)

find 和 findIndex

let result = arr.find(function(item,index,array) {?

?// 如果返回 true渐裂,則返回 item 并停止迭代?

?// 對于假值(falsy)的情況豺旬,則返回 undefined

});

如果它返回?true钠惩,則搜索停止,并返回?item族阅。如果沒有搜索到篓跛,則返回?undefined

arr.findIndex?方法(與?arr.find?方法)基本上是一樣的,但它返回找到元素的索引坦刀,而不是元素本身愧沟。并且在未找到任何內(nèi)容時返回?-1。

6鲤遥、sort

let arr = [ 1, 2, 15 ];

arr.sort(function(a,b) { return a - b; });

alert(arr); //1, 2, 15

7沐寺、arr.reverse?方法用于顛倒?arr?中元素的順序。

let arr = [1, 2, 3, 4, 5];

arr.reverse();

alert( arr ); // 5,4,3,2,1

8盖奈、split和join

let str = "test";

alert( str.split('') ); // t,e,s,t 字符串拆為字母數(shù)組

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 使用分號 ; 將數(shù)組粘合成字符串

alert( str ); // Bilbo;Gandalf;Nazgul

9混坞、reduce/reduceRight 它們用于根據(jù)數(shù)組計算單個值。

let value = arr.reduce(function(accumulator,item,index,array) {?

?// ...

}, [initial]);

accumulator?—— 是上一個函數(shù)調(diào)用的結(jié)果钢坦,第一次等于?initial(如果提供了?initial?的話)究孕。

item?—— 當(dāng)前的數(shù)組元素。

index?—— 當(dāng)前索引爹凹。

arr?—— 數(shù)組本身厨诸。

initial —— 初始值

應(yīng)用函數(shù)時,上一個函數(shù)調(diào)用的結(jié)果將作為第一個參數(shù)傳遞給下一個函數(shù)禾酱。

因此泳猬,第一個參數(shù)本質(zhì)上是累加器,用于存儲所有先前執(zhí)行的組合結(jié)果宇植。最后得封,它成為?reduce?的結(jié)果。

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum,current) => sum + current, 0);

alert(result); // 15

arr.reduceRight?和?arr.reduce?方法的功能一樣指郁,只是遍歷為從右到左忙上。

let arr = [];

// Error: Reduce of empty array with no initial value

// 如果初始值存在,則 reduce 將為空 arr 返回它(即這個初始值)闲坎。

arr.reduce((sum, current) => sum + current, 10);

所以建議始終指定初始值疫粥。

10、Array.isArray

數(shù)組是基于對象的腰懂,不構(gòu)成單獨的語言類型梗逮。

所以?typeof?不能幫助從數(shù)組中區(qū)分出普通對象

alert(typeof {}); // object

alert(typeof []); // object

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

11、function?camelize(str)?{

????return?str.split('-').map((item,?index)?=>?{

??????return?index?===?0???item?:?item[0].toUpperCase()+item.slice(1)

????}).join('')

??}

??console.log(camelize('background-color')) //?backgroundColor

??console.log(camelize('list-style-image')) //?listStyleImage

??console.log(camelize('-webkit-transition')) //?WebkitTransition

12绣溜、類數(shù)組array-like有索引和length屬性的對象慷彤,所以看起來很像數(shù)組

let arrayLike = {?

// 有索引和 length 屬性 => 類數(shù)組對象

?0: "Hello",?

?1: "World",?

?length: 2

};

// Error (no Symbol.iterator)

for(letitemofarrayLike){}

可迭代對象和類數(shù)組對象通常都?不是數(shù)組,它們沒有?push?和?pop?等方法。

13底哗、Array.from

有一個全局方法?Array.from?可以接受一個可迭代或類數(shù)組的值岁诉,并從中獲取一個“真正的”數(shù)組。然后我們就可以對其調(diào)用數(shù)組方法了跋选。

let arrayLike = {?

?0: "Hello",?

?1: "World",

?length: 2};

let arr = Array.from(arrayLike);// (*)

alert(arr.pop()); // World(pop 方法有效)

console.log(arr) // ['Hello', 'World']

let str = 'xy';// 將 str 拆分為字符數(shù)組

let chars = Array.from(str);

alert(chars[0]); // x

alert(chars[1]); // y

alert(chars.length); // 2

Array.from與split方法不同涕癣,它依賴于字符串的可迭代性,因此就i像for...of一樣前标,可以正確的處理代理對坠韩。

其實Array.from就跟下面一些代碼做著同樣的事:

let str = 'xy'

let chars = []

for (let char of str) {

? chars.push(char)

}

console.log(chars) // ['x','y']

14、可以應(yīng)用?for..of?的對象被稱為?可迭代的炼列,Symbol.iterator?方法會被?for..of?自動調(diào)用同眯,但我們也可以直接調(diào)用它。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末唯鸭,一起剝皮案震驚了整個濱河市须蜗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌目溉,老刑警劉巖明肮,帶你破解...
    沈念sama閱讀 221,406評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異缭付,居然都是意外死亡柿估,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評論 3 398
  • 文/潘曉璐 我一進(jìn)店門陷猫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秫舌,“玉大人,你說我怎么就攤上這事绣檬∽阍桑” “怎么了?”我有些...
    開封第一講書人閱讀 167,815評論 0 360
  • 文/不壞的土叔 我叫張陵娇未,是天一觀的道長墨缘。 經(jīng)常有香客問我,道長零抬,這世上最難降的妖魔是什么镊讼? 我笑而不...
    開封第一講書人閱讀 59,537評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮平夜,結(jié)果婚禮上蝶棋,老公的妹妹穿的比我還像新娘。我一直安慰自己忽妒,他們只是感情好玩裙,可當(dāng)我...
    茶點故事閱讀 68,536評論 6 397
  • 文/花漫 我一把揭開白布兼贸。 她就那樣靜靜地躺著,像睡著了一般献酗。 火紅的嫁衣襯著肌膚如雪寝受。 梳的紋絲不亂的頭發(fā)上坷牛,一...
    開封第一講書人閱讀 52,184評論 1 308
  • 那天罕偎,我揣著相機(jī)與錄音,去河邊找鬼京闰。 笑死颜及,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蹂楣。 我是一名探鬼主播俏站,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼痊土!你這毒婦竟也來了肄扎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,668評論 0 276
  • 序言:老撾萬榮一對情侶失蹤赁酝,失蹤者是張志新(化名)和其女友劉穎犯祠,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酌呆,經(jīng)...
    沈念sama閱讀 46,212評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡衡载,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,299評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了隙袁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片痰娱。...
    茶點故事閱讀 40,438評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖菩收,靈堂內(nèi)的尸體忽然破棺而出梨睁,到底是詐尸還是另有隱情,我是刑警寧澤娜饵,帶...
    沈念sama閱讀 36,128評論 5 349
  • 正文 年R本政府宣布而姐,位于F島的核電站,受9級特大地震影響划咐,放射性物質(zhì)發(fā)生泄漏拴念。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,807評論 3 333
  • 文/蒙蒙 一褐缠、第九天 我趴在偏房一處隱蔽的房頂上張望政鼠。 院中可真熱鬧,春花似錦队魏、人聲如沸公般。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽官帘。三九已至瞬雹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間刽虹,已是汗流浹背酗捌。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留涌哲,地道東北人胖缤。 一個月前我還...
    沈念sama閱讀 48,827評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像阀圾,于是被迫代替她去往敵國和親哪廓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,446評論 2 359

推薦閱讀更多精彩內(nèi)容