ES6 數(shù)組方法

ES6

以下是個人對ES6 數(shù)組方法的理解和學(xué)習(xí)

map()

    map方法 是數(shù)組的遍歷方法   類似于JQ的foreach() JS 的for循環(huán) 遍歷。
    map方法:  調(diào)用map時,會生成一個新的數(shù)組,需要傳入一個回調(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方法 生成一個新的數(shù)組,數(shù)組的內(nèi)容,取決于 回調(diào)函數(shù)中的 返回值,  返回true 就會被添加進(jìn)去數(shù)組,如果返回false,則不會添加進(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ù)組中的每一個元素;

? 可以用來遍歷字符串(遍歷出來的字符串會拆分成單個單個的形式輸出)

遍歷出來的值, 是對應(yī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é)果為報錯  ali.map不是一個函數(shù)。因為獲取出來的ali是給類數(shù)組沒有map方法

正確應(yīng)該如下
  Array.from(lis).map() //其他就和正常一樣

Array.of()

? Array.of(n,n)方法 可以將你輸入的值 轉(zhuǎn)換為一個有n值的數(shù)組;

const aa = Array.of(45,5);
console.log(aa);
//輸出結(jié)果為 [45,5]   是一個數(shù)組

const aa = Array.of(1,2,333333,{});
console.log(aa);
//輸出結(jié)果為 [1,2,333333,{}]   是一個數(shù)組

find() **

? find( fn( item,index,array) )方法 :用于查找數(shù)組中有沒有符合條件的的字符串或則是數(shù)字

? find() 方法返回的是值,當(dāng)函數(shù)return true 時, find 的 返回的是當(dāng)前的不是索引,也不是true 或 false。

? Caution:find方法找到符合條件后就不會在遍歷后面的元素!!!;
意思就是 當(dāng)回調(diào)中有一個返回值為 true時, 就會自動跳出循環(huán),不再執(zhí)行函數(shù)

const arr = [{name:'apples'},{'oranges'},{'bananas'}];
const findApple = arr.find(item=>{item.name==='apples'})

輸出結(jié)果為 {name:apples}; 
因為利用find的方法 如果找到則返回該元素 ,找不到返回undefined 



find() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行:

當(dāng)數(shù)組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素,之后的值不會再調(diào)用執(zhí)行函數(shù)。
如果沒有符合條件的元素返回 undefined
注意: find() 對于空數(shù)組,函數(shù)是不會執(zhí)行的。

注意: find() 并沒有改變數(shù)組的原始值。

利用 find()檢查一個字符串中是否含有你想要的值可以這樣做

const arr = ['q','w','e'];
const findW = arr.find(item=>{item==='w'});
if(findw!=undefined)
{
    console.log('找到w啦')
}else{
    console.log('沒找到');
}

   

findIndex()

? 在數(shù)組中尋找匹配你輸入的值,找到的話則返回數(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  因為age中有一個大于0  ;
//一旦有一個符合{}里的表達(dá)式   就停止遍歷,返回true

every()

循環(huán)一個數(shù)組,只要有一個元素不符合表達(dá)式,立馬停止循環(huán),返回false;
const arr = [{age:15},{age:18}];
const findage = arr.every(item=>{item.age<18});
//輸出結(jié)果為false

暫時更新到這里......

有什么問題需要修正可以直接在下方提,

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 擴(kuò)展運(yùn)算符(spread) 擴(kuò)展運(yùn)算符(spread)是三個點(diǎn)(...)。它好比 rest 參數(shù)的逆運(yùn)算,將...
    月上秦少閱讀 437評論 0 0
  • 零、數(shù)組類型判斷 Array.isArray() 將數(shù)組作為參數(shù)傳入,返回值為布爾值 一、數(shù)組創(chuàng)建 Array構(gòu)造...
    lesdom閱讀 26,680評論 0 4
  • ES6自帶嚴(yán)格模式 嚴(yán)格模式主要有以下限制 變量必須聲明后再使用 函數(shù)的參數(shù)不能有同名屬性,否則報錯 不能使用wi...
    卡布i閱讀 145評論 0 0
  • 整理目前所用過的數(shù)組方法 1 arr.push() 從后面添加元素,返回值為添加完后的數(shù)組的長度 2 arr.po...
    木偶純白思念閱讀 318評論 0 0
  • 轉(zhuǎn)載:在開發(fā)中,數(shù)組的使用場景非常多,平日中也涉及到很多數(shù)組的api/相關(guān)操作,一直也沒有對這塊內(nèi)容進(jìn)行一塊整理總...
    七色煙火閱讀 3,385評論 0 3

友情鏈接更多精彩內(nèi)容