詳解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():
(在開(kāi)頭)向數(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ù)組
也可以通過(guò)設(shè)置參數(shù)來(lái)刪除數(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"。我們通過(guò)一個(gè)比值函數(shù)來(lái)修正此問(wèn)題。
sort()也可以通過(guò)修改比較函數(shù)來(lái)排序?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():
通過(guò)合并(連接)現(xiàn)有數(shù)組來(lái)創(chuàng)建一個(gè)新數(shù)組。可以連接多個(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ù)組返回,并沒(méi)有改變?cè)瓉?lái)的數(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ù),沒(méi)有返回值,注意和map方法區(qū)分
let arr = [1, 2, 3, 4, 5] arr.forEach(x => { console.log(2*x) //return x*2 返回值沒(méi)有用,此函數(shù)沒(méi)有返回值 })
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é)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務(wù)器的功能
這篇文章主要介紹了vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務(wù)器的功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01js 判斷各種數(shù)據(jù)類型的簡(jiǎn)單方法(推薦)
下面小編就為大家?guī)?lái)一篇js 判斷各種數(shù)據(jù)類型的簡(jiǎn)單方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JavaScript學(xué)習(xí)筆記之取值函數(shù)getter與取值函數(shù)setter詳解
這篇文章主要介紹了JavaScript取值函數(shù)getter與取值函數(shù)setter,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08JS棧stack類的實(shí)現(xiàn)與使用方法示例
這篇文章主要介紹了JS棧stack類的實(shí)現(xiàn)與使用方法,結(jié)合實(shí)例形式分析了棧的原理,以及javascript定義與使用棧的基本操作技巧,需要的朋友可以參考下2019-01-01javaScript事件學(xué)習(xí)小結(jié)(四)event的公共成員(屬性和方法)
這篇文章主要介紹了javaScript事件學(xué)習(xí)小結(jié)(四)event的公共成員(屬性和方法)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06微信小程序?qū)崿F(xiàn)指定顯示行數(shù)多余文字去掉用省略號(hào)代替
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)指定顯示行數(shù)多余文字去掉用省略號(hào)代替的方法,需要的朋友可以參考下2018-07-07