詳解JS數(shù)組方法
一、會(huì)修改原數(shù)組
1.push():
(在數(shù)組結(jié)尾處)向數(shù)組添加一個(gè)新的元素
push() 方法返回新數(shù)組的長(zhǎng)度
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
2.pop():
方法從數(shù)組中刪除最后一個(gè)元素
可以接收pop()的返回值,是被彈出的值"Mango"
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
3.shift():
刪除首個(gè)數(shù)組元素
可以接收刪除的值
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift();
4.unshift():
(在開頭)向數(shù)組添加新元素
返回新數(shù)組的長(zhǎng)度。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
5.splice():
用于向數(shù)組添加新項(xiàng)
第一個(gè)參數(shù)(2)定義了應(yīng)添加新元素的位置(拼接)。
第二個(gè)參數(shù)(0)定義應(yīng)刪除多少元素。
其余參數(shù)(“Lemon”,“Kiwi”)定義要添加的新元素。
splice() 方法返回一個(gè)包含已刪除項(xiàng)的數(shù)組
也可以通過設(shè)置參數(shù)來刪除數(shù)組中元素
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi"); //["Banana","Orange","Lemon","Kiwi","Apple","Mango"] var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(0, 1); //["Orange", "Apple", "Mango"]
6.sort():
以字母順序?qū)?shù)組進(jìn)行排序
如果是對(duì)數(shù)字進(jìn)行排序,則需要注意。 "25" 大于 "100",因?yàn)?"2" 大于 "1"。我們通過一個(gè)比值函數(shù)來修正此問題。
sort()也可以通過修改比較函數(shù)來排序?qū)ο髷?shù)組
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});//升序
points.sort(function(a, b){return b - a});//降序
points.sort((a, b)=>{return b - a});//箭頭函數(shù)
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
]
cars.sort(function(a, b){return a.year - b.year});//比較年份(數(shù)字)
cars.sort(function(a, b){//比較類型(字符串)
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
7.reverse():
反轉(zhuǎn)數(shù)組中的元素
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.reverse();
二、不修改原數(shù)組
1.toString():
把數(shù)組轉(zhuǎn)換為數(shù)組值(逗號(hào)分隔)的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"] console.log(fruits.toString()) //Banana,Orange,Apple,Mango
2.join():
可將所有數(shù)組元素結(jié)合為一個(gè)字符串。
它的行為類似 toString(),但是還可以規(guī)定分隔符
var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log(fruits.join(" * "))
//Banana * Orange * Apple * Mango
3.concat():
通過合并(連接)現(xiàn)有數(shù)組來創(chuàng)建一個(gè)新數(shù)組??梢赃B接多個(gè)
var myGirls = ["Cecilie", "Lone"]; var myBoys = ["Emil", "Tobias", "Linus"]; var myChildren = myGirls.concat(myBoys); // 連接 myGirls 和 myBoys var arr1 = ["Cecilie", "Lone"]; var arr2 = ["Emil", "Tobias", "Linus"]; var arr3 = ["Robin", "Morgan"]; var myChildren = arr1.concat(arr2, arr3); // 將arr1、arr2 與 arr3 連接在一起
4.slice() :
方法用數(shù)組的某個(gè)片段切出新數(shù)組。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1);//從第一個(gè)到最后 //["Orange", "Lemon", "Apple", "Mango"] var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1,3);//從第一個(gè)到第三個(gè)(不包括3) //["Orange", "Lemon"]
5.map():
將數(shù)組中的每個(gè)元素調(diào)用一個(gè)提供的函數(shù),結(jié)果作為一個(gè)新的數(shù)組返回,并沒有改變?cè)瓉淼臄?shù)組
let arr = [1, 2, 3, 4, 5] let newArr = arr.map(x => x*2)//簡(jiǎn)寫的箭頭函數(shù) //arr= [1, 2, 3, 4, 5] 原數(shù)組保持不變 //newArr = [2, 4, 6, 8, 10] 返回新數(shù)組
6.forEach():
將數(shù)組中的每個(gè)元素執(zhí)行提供的函數(shù),沒有返回值,注意和map方法區(qū)分
let arr = [1, 2, 3, 4, 5]
arr.forEach(x => {
console.log(2*x)
//return x*2 返回值沒有用,此函數(shù)沒有返回值
})
7.filter():
此方法是將所有元素進(jìn)行判斷,將滿足條件的元素作為一個(gè)新的數(shù)組返回。函數(shù)里面寫的是條件?。?!
let arr = [1, 2, 3, 4, 5]
let newArr = arr.filter(value => value >= 3 )
//或者
let newArr = arr.filter(function(value) {return value >= 3} )
console.log(newArr)
//[3,4,5]
8.every():
此方法是將所有元素進(jìn)行判斷返回一個(gè)布爾值,如果所有元素都滿足判斷條件,則返回true,否則為false
let arr = [1, 2, 3, 4, 5] const isLessThan4 = value => value < 4 const isLessThan6 => value => value < 6 arr.every(isLessThan4 ) //false arr.every(isLessThan6 ) //true
9.some():
此方法是將所有元素進(jìn)行判斷返回一個(gè)布爾值,如果存在元素滿足判斷條件,則返回true,若所有元素都不滿足判斷條件,則返回false
let arr= [1, 2, 3, 4, 5] const isLessThan4 = value => value < 4 const isLessThan6 = value => value > 6 arr.some(isLessThan4 ) //true arr.some(isLessThan6 ) //false
10.reduce():
此方法是所有元素調(diào)用返回函數(shù),返回值為最后結(jié)果,傳入的值必須是函數(shù)類型
let arr = [1, 2, 3, 4, 5] const add = (a, b) => a + b let sum = arr.reduce(add) console.log(sum) //sum = 15 相當(dāng)于累加的效果 //與之相對(duì)應(yīng)的還有一個(gè) Array.reduceRight() 方法,區(qū)別是這個(gè)是從右向左操作的
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
前端防止用戶重復(fù)提交js實(shí)現(xiàn)代碼示例
這篇文章主要給大家介紹了關(guān)于前端防止用戶重復(fù)提交js實(shí)現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起看看吧2018-09-09
javascript iframe內(nèi)的函數(shù)調(diào)用實(shí)現(xiàn)方法
用下面的方法可以調(diào)用iframe中的函數(shù),實(shí)現(xiàn)一些比較特殊的效果,不過能跨域的。2009-07-07
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦base.js
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦base.js...2006-12-12
使用JavaScript實(shí)現(xiàn)鏈表的數(shù)據(jù)結(jié)構(gòu)的代碼
鏈表(Linked list)是一種常見的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu),是一種線性表,但是并不會(huì)按線性的順序存儲(chǔ)數(shù)據(jù),而是在每一個(gè)節(jié)點(diǎn)里存到下一個(gè)節(jié)點(diǎn)的指針(Pointer) 。下面我們用 JavaScript 代碼對(duì)鏈表的數(shù)據(jù)結(jié)構(gòu)進(jìn)行實(shí)現(xiàn)2017-08-08
javascript單例模式的簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了javascript單例模式的簡(jiǎn)單實(shí)現(xiàn)方法,以javascript創(chuàng)建唯一實(shí)例的形式分析了javascript單例模式的簡(jiǎn)單實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
js自定義trim函數(shù)實(shí)現(xiàn)刪除兩端空格功能
這篇文章主要介紹了js自定義trim函數(shù)實(shí)現(xiàn)刪除兩端空格功能,結(jié)合實(shí)例形式分析了javascript基于正則替換實(shí)現(xiàn)類似trim函數(shù)刪除字符串兩端空格的相關(guān)操作技巧,并附帶jQuery類似功能函數(shù)使用方法,需要的朋友可以參考下2018-02-02
BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法
這篇文章主要介紹了BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法,需要的朋友可以參考下2016-12-12

