一文徹底解決JavaScript數(shù)組
一、數(shù)組的原生方法
| 原生方法 | 描述 | 返回值說明 |
|---|---|---|
push() | 數(shù)組末尾添加元素 | 返回?cái)?shù)組新的長(zhǎng)度 |
pop() | 刪除并返回?cái)?shù)組的最后一個(gè)元素 | 返回被刪除的最后一個(gè)元素 |
unshift() | 在數(shù)組開頭添加一個(gè)或多個(gè)元素 | 返回?cái)?shù)組新的長(zhǎng)度 |
shift() | 刪除并返回?cái)?shù)組的第一個(gè)元素 | 返回被刪除的第一個(gè)元素 |
splice() | 截取或刪除數(shù)組中的某些內(nèi)容,可插入新元素 | 返回被刪除的元素組成的數(shù)組 |
slice() | 截取數(shù)組中的一部分,不改變?cè)瓟?shù)組 | 返回新數(shù)組 |
reverse() | 反轉(zhuǎn)數(shù)組 | 返回反轉(zhuǎn)后的數(shù)組 |
sort() | 對(duì)數(shù)組進(jìn)行排序 | 返回排序后的數(shù)組 |
concat() | 多個(gè)數(shù)組進(jìn)行拼接 | 返回拼接后的新數(shù)組 |
join() | 將數(shù)組的每一項(xiàng)連接成一個(gè)字符串 | 返回拼接后的字符串 |
let arr = [1, 2, 3];
let newArr = arr.xxx();
console.log(arr);
console.log(newArr);//返回的值
arr.push(4); // arr => [1, 2, 3, 4]
arr.pop(); // arr => [1, 2],返回 3
arr.unshift(0); // arr => [0, 1, 2, 3] 返回 4
arr.shift(); // arr => [2, 3],返回 1
arr.splice(1, 1); // arr => [1, 3],返回 [2]
arr.splice(1, 2, 'a', 'b');//arr =>[1, 'a', 'b', 2] ,返回[2,3]
arr.slice(0, 1); // arr 不變,返回 [1]
arr.reverse(); // arr => [3,2,1],返回[3,2,1]
arr.sort(); // arr => [1,2,3] ,返回[1,2,3]
arr.concat([4, 5]); // arr => [1,2,3] ,返回 [1, 2, 3, 4, 5]
arr.join('-'); // arr =>[1,2,3] 返回 1-2-3
| 原生方法 | 描述 | 返回值說明 |
|---|---|---|
toString() | 將數(shù)組轉(zhuǎn)化為字符串 | 返回字符串 |
toLocalString() | 使用本地化字符串表示數(shù)組 | 返回本地化格式的字符串 |
let arr = [1, 2, 3]
let newArr = arr.toString();
console.log(newArr);//1,2,3
console.log(arr);//[1, 2, 3]
| 原生方法 | 描述 | 返回值說明 |
|---|---|---|
indexOf() | 從前往后查某個(gè)元素第一次出現(xiàn)的位置 | 返回該元素索引,未找到返回-1 |
lastIndexOf() | 從后往前查某元素最后一次出現(xiàn)的位置 | 返回該元素索引,未找到返回-1 |
let arr = [1, 2, 3, 2];
let newArr = arr.indexOf(2);
console.log(newArr);//1
console.log(arr);//[1, 2, 3, 2]
let newArr2 = arr.indexOf(2);
console.log(newArr2);//3
| 原生方法 | 描述 | 返回值說明 |
|---|---|---|
every() | 檢查數(shù)組中是否所有元素都滿足條件 | 返回布爾值 |
some() | 檢查數(shù)組中是否有至少一個(gè)元素滿足條件 | 返回布爾值 |
filter() | 過濾出符合條件的元素 | 返回符合條件的新數(shù)組 |
forEach() | 對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù) | 沒有返回值(返回 undefined) |
map() | 對(duì)數(shù)組每個(gè)元素調(diào)用函數(shù),生成新數(shù)組 | 返回新數(shù)組 |
let arr = [1, 2, 3];
// every()
//arr.every(function (item, index, arr) {})
let allPositive = arr.every(n => n > 0);
console.log(allPositive);//true
// some()
let hasBig = arr.some(n => n > 2);
console.log(hasBig);//true
let arr = [1, 2, 3];
// forEach()
arr.forEach(n => console.log(n));
// 輸出 1 2 3
// map()
let doubled = arr.map(n => n * 2);
console.log(doubled);// doubled => [2, 4, 6]
// filter() 符合條件的被留下來
let even = arr.filter(n => n % 2 === 0);
console.log(even);// even => [2]
| 原生方法 | 描述 | 返回值說明 |
|---|---|---|
reduce() | 從左到右依次對(duì)數(shù)組元素執(zhí)行累積操作(如求和、合并) | 返回最終的累積結(jié)果 |
reduceRight() | 從右到左依次對(duì)數(shù)組元素執(zhí)行累積操作 | 返回最終的累積結(jié)果 |
let arr = [1, 2, 3];
// reduce()
//語法
//arr.reduce(function (prev, item, index, arr) {}, 初始值)
let sum = arr.reduce((acc, n) => acc + n, 0);
console.log(sum); // sum => 6
// reduceRight()
let sumRight = arr.reduceRight((acc, n) => acc + n);
console.log(sumRight);// sumRight => 6
二、數(shù)組去重
1. Array.from(new Set)
// 1.利用set去重
// Set是es6新增的數(shù)據(jù)結(jié)構(gòu),似于數(shù)組,但它的一大特性就是所有元素都是唯一的,沒有重復(fù)的值,我們一般稱為集合
// Array.from()就是將一個(gè)類數(shù)組對(duì)象或者可遍歷對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組,也是ES6的新增方法
let list = [8, 1, 1, 2, 6, 7, 8, '你是最棒的',]
//let newList = new Set(list);
let newList = Array.from(new Set(list));
console.log(newList);//[8,1,2,6,7,'你是最棒的']
2. includes
let list = [8, 1, 1, 2, 6, 7, 8, '你是最棒的',];
let newList2 = []
list.forEach((item) => {
if (!newList2.includes(item)) {
newList2.push(item)
}
})
console.log('newList2', newList2);
3. map去重
//3.利用map去重
//map數(shù)據(jù)結(jié)構(gòu)是es6中新出的語法,其本質(zhì)也是鍵值對(duì),只是其鍵不局限于普通對(duì)象的字符串
let list = [8, 1, 1, 2, 6, 7, 8, '你是最棒的',];
let newList3 = [];
let map = new Map()
list.forEach((item) => {
if (!map.has(item)) {
map.set(item, true)
newList3.push(item)
}
})
console.log('newList3', newList3);
4. indexOf去重
//4.利用indexOf去重
//indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。如果沒有找到匹配的字符串則返回 -1
let list = [8, 1, 1, 2, 6, 7, 8, '你是最棒的',];
let newList4 = [];
list.forEach((item) => {
if (newList4.indexOf(item) === -1) {
newList4.push(item)
}
})
console.log('newList4', newList4);;
5. 利用Array.filter和map對(duì)象數(shù)組去重
{} === {}
// false 引用地址不一樣
//5.利用filter加map去重
let map = new Map();
let list3 = [{
name: '學(xué)生1',
id: 1
},
{
name: '學(xué)生1',
id: 2
},
{
name: '學(xué)生2',
id: 3
},
{
name: '學(xué)生3',
id: 3
}
]
function unique(list3, key) {
return list3.filter(item => {
const val = item[key].toString();
if (!map.has(val)) {
map.set(val, true);
return true;
} else {
return false;
}
})
}
console.log(unique(list3, 'name'));
三、數(shù)組的遍歷方法
| 方法 | 是否改變?cè)瓟?shù)組 | 特點(diǎn) |
|---|---|---|
forEach() | 否 | 數(shù)組方法,不改變?cè)瓟?shù)組,沒有返回值 |
map() | 否 | 數(shù)組方法,不改變?cè)瓟?shù)組,有返回值,可鏈?zhǔn)秸{(diào)用 |
filter() | 否 | 數(shù)組方法,過濾數(shù)組,返回包含符合條件的元素的數(shù)組,可鏈?zhǔn)秸{(diào)用 |
for...of | 否 | for…of遍歷具有Iterator迭代器的對(duì)象的屬性,返回的是數(shù)組的元素、對(duì)象的屬性值,不能遍歷普通的obj對(duì)象,將異步循環(huán)變成同步循環(huán) |
every() 和 some() | 否 | 數(shù)組方法,some()只要有一個(gè)是true,便返回true;而every()只要有一個(gè)是false,便返回false |
find() 和 findIndex() | 否 | 數(shù)組方法,find()返回的是第一個(gè)符合條件的值;findIndex()返回的是第一個(gè)返回條件的值的索引值 |
reduce() 和 reduceRight() | 否 | 數(shù)組方法,reduce()對(duì)數(shù)組正序操作;reduceRight()對(duì)數(shù)組逆序操作 |
四、forEach 和 map 方法
這方法都是用來遍歷數(shù)組的,兩者區(qū)別如下:
- forEach()方法會(huì)針對(duì)每一個(gè)元素執(zhí)行提供的函數(shù),對(duì)數(shù)據(jù)的操作會(huì)改變?cè)瓟?shù)組,該方法沒有返回值;
- map()方法不會(huì)改變?cè)瓟?shù)組的值,返回一個(gè)新數(shù)組,新數(shù)組中的值為原數(shù)組調(diào)用函數(shù)處理之后的值
五、字符串和數(shù)組的轉(zhuǎn)換
1. 數(shù)組轉(zhuǎn)字符串
| 方法 | 描述 |
|---|---|
toString() | arr.toString() |
join() | join(‘’)可以傳入自定義的分隔符 |
2. 字符串轉(zhuǎn)數(shù)組
| 方法 | 描述 |
|---|---|
split() | string.split(‘’),可以傳入自定義分隔符 |
ES6展開運(yùn)算符 | [ …string ] |
ES6解構(gòu)賦值 | |
Array.from() | Array.from(string) |
六、類數(shù)組對(duì)象定義?理解?如何轉(zhuǎn)換為數(shù)組?如何遍歷類數(shù)組?
1. 類數(shù)組對(duì)象的定義
類數(shù)組對(duì)象,就是指可以通過索引屬性訪問元素并且擁有l(wèi)ength屬性的對(duì)象。它沒有 Array的 內(nèi)置方法。
2. 常見的類數(shù)組對(duì)象
- 函數(shù)里面的參數(shù)對(duì)象arguments
什么是arguments?
(1)在js中在調(diào)用一個(gè)函數(shù)的時(shí)候,我們經(jīng)常會(huì)給這個(gè)函數(shù)傳遞一些參數(shù),js把傳入到這個(gè)函數(shù)的全部參數(shù)存儲(chǔ)在一個(gè)叫做arguments的東西里面
(2)一個(gè)特殊的對(duì)象,屬性名按照傳入?yún)?shù)的序列來。第一個(gè)參數(shù)的屬性名是’0’,第二個(gè)參數(shù)的屬性名是’1’
<script>
function example() {
console.log(arguments); // { '0': 'a', '1': 'b', length: 2 }
}
example('a', 'b');
</script>

- DOM方法的返回結(jié)果
document.querySelectorAll() //返回一個(gè) NodeList,它是一個(gè)類數(shù)組對(duì)象。 document.getElementsByTagName() //返回一個(gè) HTMLCollection,也是一個(gè)類數(shù)組對(duì)象。
3. 類數(shù)組轉(zhuǎn)換為數(shù)組的方法
(1)通過 call 調(diào)用數(shù)組的 slice 方法來實(shí)現(xiàn)轉(zhuǎn)換
Array.prototype.slice.call(arrayLike);
(2)通過 call 調(diào)用數(shù)組的 splice 方法來實(shí)現(xiàn)轉(zhuǎn)換
Array.prototype.splice.call(arrayLike, 0);
(3)通過 apply 調(diào)用數(shù)組的 concat 方法來實(shí)現(xiàn)轉(zhuǎn)換
Array.prototype.concat.apply([], arrayLike);
(4)通過 Array.from 方法來實(shí)現(xiàn)轉(zhuǎn)換
Array.from(arrayLike);
4. 遍歷類數(shù)組
(1)將數(shù)組的方法應(yīng)用到類數(shù)組上,這時(shí)候就可以使用call和apply方法
(2)使用Array.from方法將類數(shù)組轉(zhuǎn)化成數(shù)組
(3)使用展開運(yùn)算符將類數(shù)組轉(zhuǎn)化成數(shù)組
總結(jié)
到此這篇關(guān)于JavaScript數(shù)組的文章就介紹到這了,更多相關(guān)js數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生js實(shí)現(xiàn)鍵盤控制div移動(dòng)且解決停頓問題
這篇文章主要給大家介紹了如何利用原生js實(shí)現(xiàn)鍵盤控制div移動(dòng),并且解決在移動(dòng)過程中的停頓問題,文中給出了詳細(xì)的示例代碼,相信對(duì)大家的理解和學(xué)習(xí)很有幫助,下面跟著小編一起來看看吧。2016-12-12
Javascript實(shí)現(xiàn)的簡(jiǎn)單右鍵菜單類
這篇文章主要介紹了Javascript實(shí)現(xiàn)的簡(jiǎn)單右鍵菜單類,通過JavaScript自定義類實(shí)現(xiàn)右鍵菜單功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼,可實(shí)現(xiàn)基本的JS響應(yīng)鼠標(biāo)事件動(dòng)態(tài)展開與折疊菜單欄的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
javascript function調(diào)用時(shí)的參數(shù)檢測(cè)常用辦法
js中并不直接支持類似c#的方法重載,所以只能變相的來解決,示意代碼:(利用了內(nèi)置屬性arguments)2010-02-02
js 字?jǐn)?shù)統(tǒng)計(jì),區(qū)分英漢
hta實(shí)現(xiàn)的字?jǐn)?shù)統(tǒng)計(jì)效果代碼,中文算兩個(gè),英文算一個(gè)2008-02-02
ECMAScript6變量的解構(gòu)賦值實(shí)例詳解
ES6允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring),下文中給大家提供了嵌套數(shù)組的解構(gòu)例子,大家一起看看吧2017-09-09
導(dǎo)航跟隨滾動(dòng)條置頂移動(dòng)示例代碼
滾動(dòng)條滾動(dòng)時(shí)如何讓導(dǎo)航置頂移動(dòng),這種效果已經(jīng)在很多網(wǎng)看到了,所以本文也來實(shí)現(xiàn)一個(gè),感興趣的朋友可以學(xué)習(xí)下2013-09-09
微信小程序使用webview打開pdf文檔以及顯示網(wǎng)頁內(nèi)容的方法步驟
在線查看PDF文件,已經(jīng)是很常見的需求了,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用webview打開pdf文檔以及顯示網(wǎng)頁內(nèi)容的方法步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
javascript 就地編輯實(shí)現(xiàn)代碼
最近正在看《javascript設(shè)計(jì)模式》,其中有一個(gè)'就地編輯'的示例,用來表現(xiàn)不同的繼承方式,看完之后想自己憑理解寫一個(gè)類似的東西。2010-05-05

