ES6
以下是個(gè)人對ES6 數(shù)組方法的理解和學(xué)習(xí)
map（）
map方法 是數(shù)組的遍歷方法 類似于JQ的foreach（） JS 的for循環(huán) 遍歷。
map方法: 調(diào)用map時(shí),會(huì)生成一個(gè)新的數(shù)組,需要傳入一個(gè)回調(diào)函數(shù),新數(shù)組的內(nèi)容,取決于該回調(diào)函數(shù)的返回值
用法 ：
var arr = ["小明","小紅","小蘭"]
//這里我把a(bǔ)rr 進(jìn)行遍歷,重新構(gòu)造成 數(shù)組嵌套對象的結(jié)構(gòu)
let newArr = arr.map(item=> {name:item} );
// newArr 輸出后的數(shù)組為
[{name:'小明'},{name:'小紅'},{name:'小蘭'}]
你或許看不懂,那我們可以這樣換一下
var arr = ["小明","小紅","小蘭"]
arr.map(function(item,index){
return { name: item}
});
// 一樣的結(jié)果
[{name:'小明'},{name:'小紅'},{name:'小蘭'}]
filter（）
filter方法 生成一個(gè)新的數(shù)組,數(shù)組的內(nèi)容,取決于 回調(diào)函數(shù)中的 返回值, 返回true 就會(huì)被添加進(jìn)去數(shù)組,如果返回false,則不會(huì)添加進(jìn)去數(shù)組
filter( (item,index) => {} )
const arr = [1,2,3,4,5];
const newArray = arr.filter( item => item >1 )
console.log(newArray) [2,3,4,5]
forOf遍歷方法
? 用于快速遍歷數(shù)組中的每一個(gè)元素；
? 可以用來遍歷字符串（遍歷出來的字符串會(huì)拆分成單個(gè)單個(gè)的形式輸出）
遍歷出來的值, 是對應(yīng)的項(xiàng)的值,而不是index索引
?
const colors = ['red','blue','green'];
for(let color of colors)
{
console.log(color);
}
//輸出結(jié)果為 red blue green仰楚；
額外用法：可用于 const lis = document.querySelectorAll('li');
for(let li of lis)
{
li.onclick = function(){}；
}
Array.from()
Array.from( item,fn )方法主要用于：將類數(shù)組和數(shù)組對象(arguments)轉(zhuǎn)換成數(shù)組链烈；遍歷類數(shù)組跨晴；
? item 表示遍歷的元素 fn是每次循環(huán)的回調(diào)函數(shù) (等同于map方法)
? dom查詢生成的數(shù)組是類數(shù)組 沒有map方法 proto是NodeList 所以類數(shù)組只能用Array.from()方法
[圖片上傳中...(image.png-2fc461-1585363998575-0)]
const lis= document.getElementById("li");
ali.map(li =>{ console.log(li)} );
//輸出結(jié)果為報(bào)錯(cuò) ali.map不是一個(gè)函數(shù)蓖谢。因?yàn)楂@取出來的ali是給類數(shù)組沒有map方法
正確應(yīng)該如下
Array.from(lis).map() //其他就和正常一樣
Array.of()
? Array.of(n,n)方法 可以將你輸入的值 轉(zhuǎn)換為一個(gè)有n值的數(shù)組;
const aa = Array.of(45,5);
console.log(aa);
//輸出結(jié)果為 [45,5] 是一個(gè)數(shù)組
const aa = Array.of(1,2,333333,{});
console.log(aa);
//輸出結(jié)果為 [1,2,333333,{}] 是一個(gè)數(shù)組
find() **
? find( fn( item,index,array) )方法 ：用于查找數(shù)組中有沒有符合條件的的字符串或則是數(shù)字
? find() 方法返回的是值,當(dāng)函數(shù)return true 時(shí), find 的 返回的是當(dāng)前的值不是索引,也不是true 或 false标锄。
? Caution:find方法找到符合條件后就不會(huì)在遍歷后面的元素!!!靡挥；
意思就是 當(dāng)回調(diào)中有一個(gè)返回值為 true時(shí), 就會(huì)自動(dòng)跳出循環(huán),不再執(zhí)行函數(shù)
const arr = [{name:'apples'},{'oranges'},{'bananas'}];
const findApple = arr.find(item=>{item.name==='apples'})
輸出結(jié)果為 {name：apples}；
因?yàn)槔胒ind的方法 如果找到則返回該元素 鸯绿，找不到返回undefined
find() 方法為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行：
當(dāng)數(shù)組中的元素在測試條件時(shí)返回 true 時(shí), find() 返回符合條件的元素，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)簸淀。
如果沒有符合條件的元素返回 undefined
注意: find() 對于空數(shù)組瓶蝴，函數(shù)是不會(huì)執(zhí)行的。
注意: find() 并沒有改變數(shù)組的原始值租幕。
利用 find（）檢查一個(gè)字符串中是否含有你想要的值可以這樣做
const arr = ['q','w','e'];
const findW = arr.find(item=>{item==='w'});
if(findw!=undefined)
{
console.log('找到w啦')
}else{
console.log('沒找到');
}
findIndex()
? 在數(shù)組中尋找匹配你輸入的值舷手，找到的話則返回?cái)?shù)組，找不到就返回-1 劲绪；
? 用法： 跟find（）差不多: find 返回的是對應(yīng)值, findIndex返回的是索引
some()
? 用于遍歷循環(huán)數(shù)組男窟，并尋找數(shù)組中是否含有你要的數(shù)值；有就返回true 后面不進(jìn)行遍歷;
const arr = [{age:15},{age:18}];
const findjack = arr.some(item=>{item.age>0});
//輸出結(jié)果為true 因?yàn)閍ge中有一個(gè)大于0 贾富；
//一旦有一個(gè)符合{}里的表達(dá)式 就停止遍歷歉眷，返回true
every()
循環(huán)一個(gè)數(shù)組，只要有一個(gè)元素不符合表達(dá)式颤枪，立馬停止循環(huán)汗捡，返回false；
const arr = [{age:15},{age:18}];
const findage = arr.every(item=>{item.age<18});
//輸出結(jié)果為false
暫時(shí)更新到這里......
有什么問題需要修正可以直接在下方提,
