【乾貨】js 數組操做合集（前端自我修養）
前言
前端的童鞋們都知道，關於js的數據操做方法有許多，最近有時間因而整理了一下，與諸位分享。有不對的地方還請你們不吝賜教（allan_liu986@163.com）。下面開始正文：
複製代碼
按照功能劃分：前端
- 普通方法：直接操做數組元素（增、刪、替換、轉字符串）
- 遍歷方法：對數組的遍歷（for循環等）
普通方法：數組
1. Array.push(item, item1, item2...)微信
參數：item能夠是多個參數，也能夠是數組變量
新數組：只返回新數組的長度
舊數組：返回push後的包含全部的元素的數組
注意：
1.將push的參數放在數組的最後一位
2.若是push一個數組變量時，新數組的數組長度只會+1；
舊數組會根據增長的數據變爲多維數組。
複製代碼
eg:
//原數組：
const arr = [1, 2];
const item = [3, '4']
//新數組：只返回新數組的長度
const newPush = arr.push(item);
console.log(arr) //[1, 2, [3, '4']]
console.log(newPush) //3
複製代碼
2. Array.pop()app
參數：該方法不接收任何參數
新數組：返回刪除的元素
原數組：刪除原數組的最後一個元素
注意：
該方法刪除的是原數組的最後一個元素
複製代碼
eg:
//原數組
const arr = [1, 2, 3];
//新數組
const newPop = arr.pop();
console.log(arr); //[1,2]
console.log(newPop);//3
複製代碼
3. Array.unshift()函數
注意：unshift()方法和push()的用法基本一致，不過是將添加的參數放在了數組的第一位。
複製代碼
eg:
//原數組：
const arr = [1, 2];
const item = [3, '4']
//新數組：只返回新數組的長度
const newUnshift = arr.unshift(item);
console.log(arr) //[ [3, '4'], 1, 2]
console.log(newUnshift) //3
複製代碼
4. Array.shift()測試
shift()方法的介紹請參考pop()方法，可是刪除的數組第一個元素。
複製代碼
eg:
//原數組
const arr = [1, 2, 3];
//新數組
const newPop = arr.shift();
console.log(arr); //[2, 3]
console.log(newPop);//1
複製代碼
5. Array.splice()this
用法：splice(刪除原/添加新 元素的起始下標，刪除的長度， 要添加的元素1，元素2， 元素3)
新數組：返回刪除元素
舊數組：刪除元素之後的新數組 (splice添加的元素，會插入刪除的元素的位置)
注意：
1. 當splice的第一個參數爲負數時，-1爲最後一個元素，-2爲倒數第二個參數，-3 以此類推。。
2. 當splice的第二個參數爲0時，該方法只向舊數組添加元素
複製代碼
eg:
//原數組
const arr = [4, 5, 6, 7, 1, 7];
//新數組
const arrSplice = arr.splice(-2, 2, 9, 8)
console.log(arrSplice) //[1,7]
console.log(arr) //[4, 5, 6, 7, 9, 8]
複製代碼
6. Array.sort()spa
sort()
做用：默認升序顯示（按值升序、字母升序排序）
注意：
1. 是直接做用在原數組上的方法，不會有返回值。
2. 若是是兩位數字，只會比較第一位
3. 自定義用法: a -b (升序)
b -a (降序)
補充：a, b爲默認參數，表明每次參與對比的兩個元素。
複製代碼
eg1:
const arrSort = [4, 5, 6, 7, 1, 7].sort()
console.log(arrSort) //[1, 4, 5, 6, 7, 7]
eg2:
const newSort = [4, 1, 12, 25, 113, 7].sort(
(a, b) => {
return b - a;
}
)
console.log(newSort)//[113, 25, 12, 7, 4, 1]
複製代碼
7. Array.reverse()指針
reverse()
做用：返回反轉元素後的數組。
注意：是直接做用在原數組上的方法，不會有返回值。
複製代碼
eg:
const arr = [4, 5, 6, 7, 1, 7];
const arrReverse = arr.reverse()
console.log(arrReverse)//[7, 1, 7, 6, 5, 4]
複製代碼
8. Array.slice()code
ES5:
1.slice(要拷貝的開始下標，結束下標) 不包括結束； 淺拷貝數組元素
新數組：返回拷貝的數組
舊數組：視拷貝的狀況決定會不會改變原數組
注意：若是隻寫一個參數（ 默認爲起始下標 ），後面的全部元素都會拷貝
簡單數據類型：若是數組的元素是number類型，或者str類型，新數組會淺拷貝原來的數組。改變以後互不影響。
複雜數據類型：若是元素被改變，原數組和新數組都會變
（拷貝的只是指向原數組的指針，因此不管改變原數組，仍是淺拷貝的數組，都是改變原數組的數據）
複製代碼
eg1:
const arr = [4, 5, 6, 7, 1, 7];
const arrSlice = arr.slice(2)
console.log(arrSlice) //[6, 7, 1, 7]
eg2:
let a= ['hello','world'];
let b=a.slice(0,1); // ['hello']
a[0]='改變原數組';
console.log(a,b); // a = ['改變原數組','world'] b = ['hello']
b[0]='改變拷貝的數組';
console.log(a,b); // ['改變原數組','world'] ['改變拷貝的數組']
eg3:
let c = [{name: 'liu'}]
let d = c.slice()
c[0].name = '改變name'
console.log(c, d) //[{name: "改變name"}], [{{name: "改變name"}}]
複製代碼
9. Array.join()
ES5:
2.join(參數a) 在數組的每個元素後面添加參數a；默認是用，作爲分隔符
新數組： 返回一個字符串
舊數組：沒有改變
注意：join()/toString()方法在數組元素是數組的時候，會將裏面的數組也調用join()/toString()；多維數組扁平化最快處理辦法
若是是對象的話，對象會被轉爲[object Object]字符串。
補充：js的序列化和反序列化
序列化：對象轉字符串
反序列化： 字符串轉對象
複製代碼
//eg1:
const arr = [4, 5, 6, 7, 1, 7];
const arrJoin = arr.join()
console.log(arr, arrJoin) //[4, 5, 6, 7, 1, 7] "4,5,6,7,1,7"
// eg2: 多維數組扁平化（挺好用）
let a= [['liu','23', [1,2,['21','13']]],'test'];
let str1=a.join();
console.log(str1) //liu,23,1,2,21,13,test
// eg3: 爲對象數組時
let b= [{name:'liu',age:'23'}];
let str2 = b.join();
console.log(JSON.stringify(str2));// [object Object],test
// 對象轉字符串推薦JSON.stringify(obj);只是改變了序列化而已，並不能還原數組
複製代碼
10. Array.toLocaleString()
ES5:
3. toLocaleString() 數組轉字符串，沒有參數
新數組： 轉成字符串
舊數組： 不變
做用：數組轉字符串
注意：
1.toLocaleString()仍是調用的join()方法
2.調用數組的toLocaleString方法，數組中的每一個元素都會調用自身的toLocaleString方法，
3.對象調用對象的toLocaleString,Date調用Date的toLocaleString
複製代碼
//eg1:
const arr = [4, 5, 6, 7, 1, 7];
const arrToLocaleString = arr.toLocaleString()
const arrJoin = arr.join()//和join的做用同樣，都是數組轉字符串
console.log(arr,arrJoin, arrToLocaleString) //[4, 5, 6, 7, 1, 7] "4,5,6,7,1,7" "4,5,6,7,1,7"
//eg2:
let a=[{name:'OBKoro1'},23,'abcd',new Date()];
let str=a.toLocaleString();
console.log(str, '--str--')//[object Object],23,abcd,2019/4/11 下午10:01:08
複製代碼
11. Array.toString()
ES5:
4. toString()數組轉字符串
注意：
1.和join()方法效果同樣，可是沒有優點。由於不能自定義分割
2.當數組和字符串操做的時候，js會調用這個方法將數組自動轉換成字符串
3.數組的元素之間依然有逗號分割，最後一個元素會與數組外面全部的字符串連爲一體。
複製代碼
//eg1:
const arr = [4, 5, 6, 7, 1, 7];
const arrToString = arr.toString()
console.log(arr, arrToString)//[4, 5, 6, 7, 1, 7] "4,5,6,7,1,7"
//eg2:
let a= [ 'toString','演示'].toString();
let b= ['調用toString','123', '鏈接在我後面']+'啦啦啦' + '12';
console.log(a) // toString,演示
console.log(b) // 調用toString,鏈接在我後面啦啦啦
複製代碼
12. Array.concat()
ES6:
1. concat(): 將多個數組拼接成一個數組,能夠接收多個數組參數(參數也能夠是具體的值)
新數組：按照老數組+參數數組1+參數數組2...的方式進行合併
老數組：沒有發生變化
複製代碼
//eg1:
const arr = [4, 5, 6, 7, 1, 7];
const arr1 = 'e'
const arr2 = [{name: 'liu'},1]
const arrConcet = arr.concat(arr2, arr1)
console.log(arrConcet) //[4, 5, 6, 7, 1, 7, {name: 'liu'}, 1, "e"]
複製代碼
13. ...展開運算符
ES6:
1. ...Array:
做用：常規用法能夠展開 數組/對象 元素
補充：更多關於展開運算符請看這裏[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax]()
複製代碼
//字面量數組構造或字符串：
const arr = [4, 5, 6, 7, 1, 7];
const arr1 = [...arr, 'a']
console.log(arr1, '---展開運算符---')
//eg2: 這裏提一點：ECMAScript 2018規範新增特性
const obj = {name: 'liu', sex: '男'}
const obj1 = {...obj, age: 20}
console.log(obj1, '---obj1---')
//eg3：
function myFunction(x, y, z) {
console.log(x, y, z, '---xyz---')
}
var args = [0, 1, 2];
myFunction(args)//[0, 1, 2] undefined undefined
//apply語法：func.apply(thisArg, [argsArray]);這裏thisArg爲null， [0,1,2]傳值給[argsArray]
myFunction.apply(null, args); //0,1,2
myFunction(...args);//0,1,2 能夠看出，使用了展開運算符更加簡潔
複製代碼
14. indexOf()
ES6:
1. Array.indexOf():
用法：indexOf() 查找數組是否存在某個元素,返回下標；不存在則返回-1
注意：數組的indexOf是嚴格匹配「 === 」 ; 不識別NaN
字符串類型的indexOf是能夠找到的
複製代碼
eg1:
const arr = [4, 5, 6, 7, 1, 7];
const arr1 = ['aa', 1, 3, NaN, undefined]
console.log(arr1.indexOf('a')) //-1
console.log(arr1.indexOf(NaN)) //-1
console.log(arr1.indexOf(undefined))//4
eg2:
const str = 'qwe'
console.log(str.indexOf('d')) //-1
複製代碼
15. lastIndexOf()
ES6:
1. Array.lastIndexOf(): 逆向查找
用法：接收兩個參數：第一個：要查找的元素；第二個：要從下標幾向前查找(-1爲數組最末位，-2，-3類推。。)
複製代碼
eg1:
const arr = [4, 5, 6, 7, 1, 7];
console.log(arr.lastIndexOf(7, -1)); //5
let a=['a',4,'b',1,2,'b',3,4,5,'b']; // 數組長度爲10
let b=a.lastIndexOf('b',4); // 從下標4開始往前找 返回下標2
let b1=a.lastIndexOf('b',100); // 大於或數組的長度 查找整個數組 返回9
let b2=a.lastIndexOf('b',-11); // -1 數組不會被查找
let b3=a.lastIndexOf('b',-9); // 從第二個元素4往前查找，沒有找到 返回-1
console.log(b, b1, b2, b3);//2,9,-1,-1
複製代碼
16. includes()
ES6:
1. Array.includes(): 判斷數組是否包含某個值
用法：接收兩個參數：第一個參數是要查找的元素（能夠是變量），第二個參數是查找的起始下標
注意：第二個參數：接受負值。正值超過數組長度，數組不會被搜索，返回false。
負值絕對值超過長數組度，重置從0開始搜索。
由於indexOf方法不能識別NaN；indexOf方法檢查是否包含某個值不夠語義化，須要判斷是否不等於-1，表達不夠直觀
複製代碼
eg1:
const arr = [4, 5, 6, 7, 1, 7];
const flag = 4
const arrIncludes = arr.includes(flag, -6) //true
複製代碼
---------------數組的操做方法到此結束了，下面開始數組的遍歷方法---------
1. forEach()
ES5:
1. Array.forEach():
用法：接收三個參數：第一個參數是遍歷的當前元素，第二個參數是當前元素的索引，第三個參數：原數組
注意：1.沒法中途退出循環，只能用return退出本次回調，進行下一次回調。
2.空元素會直接跳過本次回調。
3. 遍歷次數再第一次循環前就會肯定，循環過程當中添加到數組中的元素不會被遍歷。
複製代碼
eg1:
let a = [1, 2, ,3]; // 最後第二個元素是空的，不會遍歷(undefined、null會遍歷)
let obj = { name: 'liu' };
let result = a.forEach(function (value, index, array) {
a[3] = '改變元素';
a.push('添加到尾端，不會被遍歷')
console.log(value, 'forEach傳遞的第一個參數'); // 分別打印 1 ,2 ,改變元素
console.log(this.name); // liu 打印三次 this綁定在obj對象上
// break; // break會報錯
return value; // return只能結束本次回調 會執行下次回調
console.log('不會執行，由於return 會執行下一次循環回調')
}, obj);
console.log(result); // 即便return了一個值,也仍是返回undefined
複製代碼
2. filter()
ES5:
1. var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
用法: 建立一個新數組,其包含經過所提供函數實現的測試的全部元素。
thisArg： 執行 callback 時，用於 this 的值。
複製代碼
//eg1:
var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers);
console.log(max);//7
var min = Math.min.apply(null, numbers);
console.log(min);//2
//eg2:
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]
複製代碼
3. every()
返回布爾值； 檢查數組的每一個元素是否知足條件,若是有一項不知足條件則整個表達式返回false
複製代碼
//eg1:
let arr = [4, 5, 6, 7, 1, 7];
let value = arr.every( (item, index, arr) => {
return item > 1
})
console.log(value) //false
複製代碼
4. some()
返回布爾值； 數組中是否有一項知足條件的元素，整個表達式返回true。都不知足纔會返回false
複製代碼
//eg1:
let arr = [4, 5, 6, 7, 1, 7];
let value1 = arr.some((item) => {
return item >= 7
})
console.log(value1) //true
複製代碼
5. filter()
返回知足條件的新數組
複製代碼
//eg1:
let arr = [4, 5, 6, 7, 1, 7];
let value2 = arr.filter((item) => {
return item >= 6
})
console.log(value2) //[6,7,7]
複製代碼
6. map()
返回一個作完邏輯運算的新數組
複製代碼
//eg1:
let arr = [4, 5, 6, 7, 1, 7];
let value3 = arr.map((item) => {
return item + '5'
})
console.log(value3) //["45", "55", "65", "75", "15", "75"]
複製代碼
7. reduce()
reduce()： 能夠作一個多維數組轉一維數組，比較簡便，有效
補充：1.a,b 是數組的第一個、二個元素；以後是兩個元素運算的結果，繼續去和第3個元素做運算
2.eg中的 -1 設置了箭頭函數之外的參數，會把該參數值做爲數組的第一個元素去作運算
複製代碼
//eg1:
let arr2 = [1,2, 3, 4]
let arrReduce = arr2.reduce((a, b) => {
return a * b
}, -1)
console.log(arrReduce) //-24
//eg2：
let arr3 = [[3,4], [-1, 1], ['qwe', {name: 'liu'}]]
let arrConcat = arr3.reduce((a, b) => {
return a.concat(b)
})
console.log(arrConcat) //[3, 4, -1, 1, "qwe", {name: 'liu'}]
複製代碼
8. reduceRight()
reduceRight() 從右往左累加;除了和reduce的方向相反，其餘用法同樣
複製代碼
let arr4 = [[3,4], [-1, 1], ['qwe', {name: 'liu'}]]
let arrReduceRight = arr4.reduceRight((a, b) => {
return a.concat(b)
})
console.log(arrReduceRight) //["qwe", {name: 'liu'}, -1, 1, 3, 4]
複製代碼
9. find()
find() 返回數組中第一個知足條件的元素，沒有則返回undefined
複製代碼
//eg1:
let arr = [4, 5, 6, 7, 1, 7]
let arrFind = arr.find((item) => {
return item > 16
})
console.log(arrFind) //undefined
複製代碼
10. findIndex()
findIndex() 返回數組元素第一個知足條件的元素下標，沒有則返回-1
這兩個方法都識別NaN
複製代碼
//eg1:
let arr = [4, 5, 6, 7, 1, 7]
let arrFindIndex = arr.findIndex((item) => {
return item > 16
})
console.log(arr, arrFindIndex) //-1
複製代碼
12. ES6 keys()&values()&entries() 遍歷鍵名、遍歷鍵值、遍歷鍵名+鍵值
findIndex() 返回數組元素第一個知足條件的元素下標，沒有則返回-1
這兩個方法都識別NaN
複製代碼
//eg1:
for(let item of ['a', 'b'].keys()) {
console.log(item, '--index---') //1,2
}
//eg2:
for(let item of ['a', 'b'].values()) {
console.log(item, '--values---') //a,b
}
//eg3:
for(let [item, index] of ['a', 'b'].entries()) {
console.log(item, index, '--index---') //0 'a', 1 'b'
}
複製代碼
13. flat()
flat()：返回一個新數組默認拉伸一維數組；
新數組：拉伸後的新數組
舊數組：沒有發生改變
注意：若是有空位，會直接跳過
參數有兩種形式：1.直接用Infinity關鍵字便可（建議）
2. 多維數組時拉伸的維數-1是接收參數值。
複製代碼
//eg1:
let arrFlat = [1,[2,3, [4, , ['q','w']]],6].flat(Infinity)
console.log(arrFlat, '---flat---')//[1, 2, 3, 4, "q", "w", 6]
複製代碼
14. flatMap()
flatMap():接收3個參數：當前元素，當前元素索引，原數組
做用：只能將二維數組拉伸爲一維數組，三維數組拉伸爲二維數組。。。。（仍是一個用來遍歷的方法，可是參照返回值，並很差用。。。）
舊數組： 沒有影響
新數組： 返回拉伸一個維度後的新數組， 不知足條件的元素會顯示undefined
複製代碼
//eg1:
let array = [1,[2,3, [7, 8]],[4,5],6]
let arrFlatMap = array.flatMap((item, index) => {
if(item > 5) return index
})
console.log(array, arrFlatMap, '---flatMap---') // [undefined, undefined, undefined, 6]
複製代碼
結語：
到這裏就結束了，大概寫了兩天多，本身總結一番，鞏固記憶，也方便你們查閱。文章若有不正確的地方歡迎各位大佬鞭策！但願你們看完能夠有所收穫，喜歡的話，趕忙點波關注/喜歡。
複製代碼
但願看完的朋友能夠點個喜歡/關注，您的支持是對我最大的鼓勵。
微信：
相關文章
- 1. 【乾貨】js 數組詳細操做方法及解析合集
- 2. 一個前端的自我修養
- 3. 前端程序員的自我修養
- 4. 前端語言學習乾貨合集！
- 5. 鹹魚的自我修養 - 前言
- 6. js 數組操做集錦
- 7. 前端乾貨
- 8. 前端 操做數組
- 9. 自我修養一
- 10. 一個前端程序猿的Sublime Text3的自我修養
- 更多相關文章...
- • Scala Set(集合) - Scala教程
- • C# 集合（Collection） - C#教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • RxJava操作符（十）自定義操作符
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 【乾貨】js 數組詳細操做方法及解析合集
- 2. 一個前端的自我修養
- 3. 前端程序員的自我修養
- 4. 前端語言學習乾貨合集！
- 5. 鹹魚的自我修養 - 前言
- 6. js 數組操做集錦
- 7. 前端乾貨
- 8. 前端 操做數組
- 9. 自我修養一
- 10. 一個前端程序猿的Sublime Text3的自我修養