Array.map()
必須有傳回值;不會對空數組進行檢查;不會改變原始數組
(1)錯誤示例
let arr = [1,2,3,4,5]
let newArr = arr.map((item)=>{
if(item>3) return item;
})
console.log(newArr); // [undefined, undefined, undefined, 4, 5]
注:使用map方法會産生一個新的數組,數組的每一項就是我們return出去的值(是以map方法必須有傳回值,如果沒有return,那麼新數組的每一項都為undefined),數組的個數與原數組一樣
(2)正确示例
const configs = {
umdDev: {
format: 'umd',
env: 'development'
},
umdProd: {
format: 'umd',
env: 'production'
}
}
const obj = Object.keys(configs); // ["umdDev", "umdProd"]
const m = obj.map(key => configs[key]); // [{format: ,env: },{format: ,env: }]
(3)正确示例:重組數組為[{"":""},{"":""}]key-value格式
const arr = [{key: 1, value: 10}];
const arr1 = arr.map(obj=>{
let newObj = {};
newObj[obj.key] = obj.value;
return newObj;
});
console.log(arr1); // [{1:10}]
Array.forEach()
沒有傳回值,針對每個元素調用回調,會直接改變原始數組
(1)正确示例,直接改變原數組
const array1 = [1,2,3,4,5];
array1.forEach((item,index,arr) => arr[index] = item+1);
console.log(array1); // [2,3,4,5,6]
(2)正确示例,常用,針對每個元素調用回調
const array1 = [1,2,3,4,5];
let sum = 0;
array1.forEach(item => sum += item);
console.log(sum); // 15
(3)正确示例,跳出forEach循環,不能用continue或break,可以用if或return
arryAll.forEach((item) => {
if(item % 2 === 0) {
arrySpecial.push(item);
return;
}
})
(4)正确示例:根據數組的某一項進行分類,如例根據type分類
const update = [
{"type":"DM-1","content":"90"},
{"type":"DM-2","content":"90"},
{"type":"DM-2","content":"90"},
{"type":"DM-3","content":"90"},
{"type":"DM-3","content":"90"}
];
const arr = [];
const obj = {};
update.forEach((item,index) => {
if (arr.includes(item.type)) {
obj[item.type].push(item);
} else {
arr.push(item.type);
obj[item.type] = [item];
}
})
console.log(arr); // ["DM-1","DM-2","DM-3"]
console.log(obj);
Array.filter()
對所有元素進行判斷,将滿足條件的元素作為一個新的數組傳回
(1)正确示例,不會改變原數組
let array1 = [1,2,3,4,5];
let arr = array1.filter(item => item>2);
console.log(array1); // [1,2,3,4,5]
console.log(arr); // [3,4,5]
(2)正确示例,也可以直接原數組接,這樣就改變原數組,例如做删除操作時常常直接改變原數組
let array1 = [1,2,3,4,5];
array1 = array1.filter(item => item>2);
console.log(array1); // [3,4,5]
(3)數組去重,但隻限普通數組去重,對象數組去重不可用
let arr = [1,2,4,2,3,4,5];
arr = arr.filter((item,index,self)=>self.indexOf(item)===index);
console.log(arr); // [1,2,3,4,5];
(4)求兩個數組的交集和并集
const arr = [1,2,6];
const brr = [1,2,5,6];
let intersection = arr.filter(v => brr.includes(v)) //交集
console.log(intersection); // [1,2,6]
let difference = arr.concat(brr).filter(v => !arr.includes(v) || !brr.includes(v)) // 差集
console.log(difference); // [5]
Array.reduce()
函數累加器,将前一次的函數結果,和下一次的資料再次執行此回調函數
參數 | 必須 | 描述 |
---|---|---|
func | 是 | 接受4個參數得函數,previous, current, index, array,之前值,目前值,索引,數組本身。func的傳回值,會作為下一次疊代時previous的值 |
initialValue | 否 | 表示初始值,如果指定initialValue,則作為初始時previous的值,如果預設,數組得第一個元素為previous值,第二個元素為current |
(1)正确示例
let brr = [[0, 1], [2, 3], [4, 5]]
brr = brr.reduce((a,b) => a.concat(b));
console.log(brr); // [0,1,2,3,4,5]
(2)正确示例,對象數組去重,reduce中第一個參數為回調函數,第二個參數即空數組為item的初始值
let arr = [{
key: '01',
value: '樂樂'
}, {
key: '02',
value: '博博'
}, {
key: '01',
value: '樂樂'
}];
let obj = {};
arr = arr.reduce((item,next)=>{
obj[next.key] ? '' : obj[next.key]=true && item.push(next);
return item;
},[])
Array.some(),Array.every()
some: 所有元素
every: 有一個元素滿足判斷條件就傳回true;
(1)正确示例
let arr = [
{name:'gao',age:22},
{name:'he',age:0}
];
let all = arr.every(item=>item.age>0);
let or = arr.some(item=>item.age>0)
console.log(all); // false
console.log(or); // true
Array.join()
将數組轉化為字元串并以特定字元分開
(1)正确示例
let arr = [1, 2, 3];
let str1 = arr.toString();
let str2 = arr.join('');
let str3 = arr.join('#');
console.log(str1) // 1,2,3
console.log(str2) // 123
console.log(str3) // 1#2#3
(2)正确示例:String.split()
let str = '1&b&cc&a';
console.log(str.split('&')); // ['1','b','cc','a']
Array.slice()
參數 | 必須 | 描述 |
---|---|---|
下标 | 是 | 索引 |
下标 | 否 | 索引 |
(1)正确示例 slice(); substring()同理
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.slice(0,2);
console.log(arr1); // [1,2]
console.log(arr); // [1,2,3,4,5],不會改變原數組
Array.splice()
參數 | 必須 | 描述 |
---|---|---|
下标 | 是 | 索引 |
删除個數 | 是 | 個數 |
新增元素 | 否 | 元素 |
(1)正确示例 splice(); substr()同理
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.splice(0,2,'aa');
console.log(arr); // ['aa',3,4,5]; 改變了原數組
console.log(arr1); // [1,2];傳回了被删除的元素
Array.push(),Array.pop(),Array.unshift(),Array.shift()
push: 末尾添加
pop: 删除末尾
unshift: 頭部添加
shift: 删除頭部
都會改變原數組
(1)正确示例 push
let arr = [1];
let arr1 = arr.push('aaa');
console.log(arr); // [1,'aaa']
console.log(arr1); // 2 新數組長度
arr.push('aaa');
console.log(arr) // [1,'aaa'] 可以直接這樣寫改變原數組
(2)正确示例 pop,shift,unshift,和push用法同理,示例忽略
Array.isArray()
判斷一個對象是不是數組,傳回布爾
(1)正确示例
console.log(Array.isArray('11')); // false
console.log(Array.isArray([1,2])); // true
Array.concat()
連接配接數組,es6可以用拓展操作符
(1)正确示例
let arr1 = [1, 2, 3],
arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr) // [1, 2, 3, 4, 5]
(2)正确示例 es6
const arr = [...arr1,...arr2]; // 連接配接數組
Array.indexOf(),Array.lastIndexOf()
檢索數組或字元串,傳回下标,如果不存在傳回-1
(1)正确示例
let arr = ['orange', '2016', '2017'];
arr.indexOf('orange'); // 0
arr.indexOf('o'); // -1
Array.find()
參數是回調函數,數組成員依次執行該回調函數,找出第一個傳回值為true的成員,并傳回該成員
(1)正确示例
let arr = [
{id:1, age:10},
{id:2, age:20},
];
let obj = arr.find(item=>item.id<2);
let num = arr.findIndex(item=>item.id<2);
console.log(obj); // {id:1, age:10}
console.log(num); // 0
Array.fill()
使用給定值,填充一個數組,用于空數組的初始化非常友善,如果數組中已有元素則會全部被抹去
參數 | 必須 |
---|---|
填充元素 | 是 |
填充起始位置 | 否 |
結束位置 | 否 |
(1)正确示例
['a', 'b', 'c'].fill(7); // [7,7,7];
(2)正确示例
['a', 'b', 'c'].fill(7, 1, 2); // ['a',7,'c']
(3)正确示例:如果填充的類型為對象,那麼被指派的是同一個記憶體位址的對象,而不是深拷貝對象。
let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
console.log(arr); // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
Array.entries(),Array.keys(),Array.values()
周遊數組,可以用for…of循環進行周遊,entries()指鍵值對
(1)正确示例
let arr = [];
for (let elem of ['a', 'b'].values()) {
arr.push(elem);
}
console.log(arr); // ['a','b']
(2)正确示例
for (let [index,elem] of ['a', 'b'].entries()) {
console.log(index,elem) // 0,a 1,b
}
Array.includes()
查找元素,可以用includes()代替indexOf(),indexOf方法内部使用(===)進行判斷,會導緻對NaN的誤判,傳回布爾值
(1)正确示例,如果用indexOf就導緻了對NaN的誤判
[NaN].indexOf(NaN); // -1
[NaN].includes(NaN); // true
Array.copyWithin()
在目前數組内部,将指定位置的成員複制到其他位置(覆寫原有成員),然後傳回目前數組,會修改原數組
(1)正确示例
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
注:從 3 号位直到數組結束的成員(4 和 5),複制到從 0 号位開始的位置,結果覆寫了原來的 1 和 2。
Array.reverse(),Array.sort()
reverse: 反轉數組的順序
sort: 排序
都會直接改變原數組
(1)正确示例
let arr = [1,2,3,4,5]
let newArr = arr.reverse();
console.log(newArr) //[5, 4, 3, 2, 1]
console.log(arr) //[5, 4, 3, 2, 1]
(2)正确示例
let arr = [12,33,512,6,38]
let newArr = arr.sort((a,b) => a-b)
console.log(newArr) //[6, 12, 33, 38, 512]
console.log(arr) //[6, 12, 33, 38, 512]
更多知識可關注公衆号:前端百态
公衆号剛剛成立,歡迎一起學習。