1. 程式人生 > 實用技巧 >前端易忽略的小知識點彙總

前端易忽略的小知識點彙總

數字中,只有0轉boolean時為false。負數轉boolean值時也是true;

filter() 返回值為新的陣列,不會改變原陣列

splice() 返回的是刪除後的陣列元素,splice()會改變原來陣列 新增時第二個引數設定成0就可以

//語法
arrayObject.splice(index,howmany,item1,.....,itemX)
//使用
arr.splice(0,0,1);//在起始位置新增數字‘1’
arr.splice(1,1); // 刪除陣列中第二位元素

和splice相似的slice

slice() 方法可從已有的陣列中返回選定的元素。原陣列不變(這一點與splice不同)
使用方法: arr.slice(start,end); //start為初始位置,end為結尾位置,返回的結果是從start到end(不取)的新陣列      arr.slice(start);   //選取從start開始直至最後一個元素 Array.from()方法可以讓我們通過類陣列(array-like)或可迭代物件來建立一個新的 Array(陣列) 例項。
//1、該類陣列物件必須具有length屬性,用於指定陣列的長度。如果沒有length屬性,那麼轉換後的陣列是一個空陣列。
//2、該類陣列物件的屬性名必須為數字(可加引號,也可不加)
// 使用
let arrayLike = {
    
0: '1111', 1: '2222', 2: '3333', 3: ['apple','banana','paper'], 'length': 4 } let arr = Array.from(arrayLike) console.log(arr) // ['1111','2222','3333',['apple','banana','paper']]

for...of允許你遍歷 Arrays(陣列), Strings(字串), Maps(對映), Sets(集合)等可迭代的資料結構等。支援新的ES6的迭代協議.
// array-example    輸出 各個元素
const iterable = ['mini', 'mani', 'mo']; for (const value of iterable) { console.log(value); } // map-example 輸出 Key: one and Value: 1 const iterable = new Map([['one', 1], ['two', 2]]); for (const [key, value] of iterable) { console.log(`Key: ${key} and Value: ${value}`); } // set-example 輸出 1,2 const iterable = new Set([1, 1, 2, 2, 1]); for (const value of iterable) { console.log(value); } // string-example 輸出 "j" "a" "v" "a" "s" "c" "r" "i" "p" "t" const iterable = 'javascript'; for (const value of iterable) { console.log(value); } // arguments-example 輸出 a b c function args() { for (const arg of arguments) { console.log(arg); } } args('a', 'b', 'c'); // 終止迭代時使用 break、continue、return 和 throw //普通物件不可以用 for of 迭代 會報錯:TypeError: obj[Symbol.iterator] is not a function。

for...of for...in map foreach filter的使用方式和區別

for...of 與 for...in的區別

for in 會遍歷陣列內或物件上所有可列舉的屬性,包括原型上的屬性和方法(更適合於物件的遍歷,儘量不要使用 for in 遍歷陣列) for of 不會遍歷建構函式原型上的可列舉屬性。即若Array.prototype.newArr = () => {}; 也不會遍歷newArr,一般不用於物件屬性和方法的迭代 foreach會從頭到尾對數組裡的每個元素遍歷一遍 ,他不會生成新陣列,也不改變原陣列,回撥函式接收三個值,分別是 陣列的元素,索引和當前陣列
    let arr = ["a","b","c","d"]
    arr.forEach((el,index,array) => {
        if(el == "b" ) return
        console.log(el,index,array)
    })

上邊的例子中加一個判斷,如果滿足元素等於b,return出去,按理說遍歷時滿足這個條件後邊就不遍歷了,但是foreach不會,他會接著向下進行

map和foreach類似,map也會把陣列的每一項都遍歷一遍,會返回一個新陣列,原陣列保持不變,值得注意的是,map不會對空陣列進行檢測
//新陣列會將return後邊的值計算得出新的陣列,如果是表示式會返回boolean值
let arr = [1,2,3,4,5]
let  b =  arr.map((el,val,array) => {
   return el > 2
})
console.log(b)
//返回結果  [false,false,true,true,true]

filter為過濾的意思,也就是說它會把滿足條件的元素拿出來形成一個新的陣列

    let arr = [1,2,3,4,5,6,7,8,9]
    let result = arr.filter(el => {
        return el % 2 == 0
    })
    console.log(result)
// 返回結果  [2,4,6,8]

運用filter去除陣列中重複的元素:

let phone = ['蘋果','錘子','三星','華為','錘子','蘋果','小米','錘子']
let result = phone.filter((el,index,arr) => {
  return arr.indexOf(el) == index
})
console.log(result)

(不定期更新中...) 參考文章:https://www.cnblogs.com/qisi007/p/9973887.html      https://www.cnblogs.com/m2maomao/p/7743143.html      https://www.cnblogs.com/jf-67/p/8440758.html