ES6新增常用方法

dreams發表於2021-05-13

字串新增方法

padStart、padEnd

  • 如果原字串不夠指定長度，則會在左側（右側）填充字串，用以補全

  • padStart( length: number, fillStr?: string )

  • padEnd( length: number, fillStr?: string )

    引數 是否必選 描述
    length true 指定的長度
    fillStr true 要填充的字串 
let str = 'Hello'
console.log(str.padStart(10, 'ha')); //hahahHello
console.log(str.padEnd(10, 'ha')); //Hellohahah

repeat()

  • 將原字串重複n次後返回
  • repeat (count: number) 
let str = 'Hello'
console.log(str.repeat(3)); //HelloHelloHello

includes(), startsWith(), endsWith()

  • includes()：判斷一個字串是否包含在另一個字串中

  • startsWith()：判斷一個字串是否在另一個字串頭部

  • endsWith()：判斷一個字串是否在另一個字串尾部

  • startsWith(searchString: string, position?: number)

    引數 是否必選 描述
    searchString true 要搜尋的字串
    position false 要搜尋的起始索引 
let s = 'Hello world!';
console.log(s.includes('wo')) //true
console.log(s.startsWith('el')); //false
console.log(s.startsWith('el', 1)); //true
console.log(s.endsWith('d')); //false

陣列新增方法

Array.from

  • 將其他資料型別轉換為陣列

  • 其它資料型別包括所有可遍歷的字串、Set、Map等

  • Array.from(iterable: Iterable | ArrayLike): any[]

    引數 是否必選 描述
    iterable true 用於遍歷的物件
    ArrayLike false 陣列中每個元素需要呼叫的函式，類似於map() 
let str = 'Hello'
console.log(Array.from(str, v => v + 2)); //[ 'H2', 'e2', 'l2', 'l2', 'o2' ]

map()、filter()、every()、some()、find()、findIndex()

  • map()：傳入一個回撥函式，將原陣列對映成一個新陣列

  • filter：過濾器。傳入一個回撥函式，對原陣列的每一項按照相同規則做一些轉變後返回。

  • every()：判斷陣列中是否每一項都符合條件

  • some()：判斷陣列中是否有一項符合條件

  • find()：找到滿足條件的一個值立即返回

  • findIndex()：找到滿足條件的一個值的索引，立即返回

  • array.filter(function(currentValue,index,arr), thisValue)

    引數 描述
    currentValue true 當前元素的值
    index false 當前元素的索引值
    arr false 原陣列
    thisValue false 用作this的值，省略則this為undefined 
let arr = [1, 5, 7, 3, 2]

let res1 = arr.map((value, index, originArr) => {
    return index % 2 === 0 ? value * 2 : value * 3
})
let res2 = let res1 = arr.filter(item => item > 3)
let res3 = arr.every(item => item > 3)
let res4 = arr.some(item => item > 3)
let res5 = arr.find(item => value > 5)
let res6 = arr.findIndex(item => value > 5)

console.log(res1); //[ 2, 15, 14, 9, 4 ]
console.log(res2); //[ 5, 7 ]
console.log(res3); //false
console.log(res4); //true
console.log(res5); //7
console.log(res6); //2

reduce()

  • 傳入一個回撥，對原陣列每一項累加求和

  • array.reduce(function(total,currentValue,currentIndex,arr), initialValue)

    引數 是否必選 描述
    total true 初始值, 或者計算結束後的返回值。
    currentValue true 當前元素的值
    currentIndex false 當前元素的索引
    arr false 原陣列
    initialValue false 初始值。預設為0 
let arr = [1, 5, 7, 3, 2]
let num =  arr.reduce((total, pre) => total + pre)
console.log(num); //18

forEach()

  • 迴圈-迭代

  • array.forEach(function(currentValue, index, arr), thisValue)

    引數 是否必選 描述
    currentValue true 當前元素
    index false 當前元素的索引值
    arr false 原陣列 
let arr = [1, 5, 7, 3, 2]
arr.forEach(item => console.log(item)) //1 5 7 3 2

物件新增方法

Object.assign()

  • 合併物件，將後面的物件合併到第一個物件中；

  • Object.assign(目標物件, 源物件1,源物件2,...)

  • 同名屬性覆蓋，不同名屬性新增，後面的覆蓋前面的

  • 基本資料型別作為源物件時會自動轉換為物件再合併

let KangKang = {
    age: 24,
    name:'kangkang'
}
let Maria = {
    age: 21,
    name: 'maria',
    gender: 'female'
}
let Jane = {
    name: 'jane'
}
console.log(Object.assign(KangKang, Maria, Jane)); //{ age: 21, name: 'jane', gender: 'female' }

Object.keys ()、Object.value()、Object.entries ()

  • Object.keys() ：獲取物件中屬性名的集合
  • Object.value()：獲取物件中屬性值的集合
  • Object.entries ()：獲取物件中屬性名和屬性值的集合
let Maria = {
    age: 21,
    name: 'maria',
    gender: 'female'
}
console.log(Object.keys(Maria)); //[ 'age', 'name', 'gender' ]
console.log(Object.values(Maria)); //[ 21, 'maria', 'female' ]
console.log(Object.entries(Maria)); //[ [ 'age', 21 ], [ 'name', 'maria' ], [ 'gender', 'female' ] ]

後續補充……

相關文章