ES6新增常用方法

Posted 2021-05-13 journey-of-dreams

字符串新增方法

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\' ] ]

后续补充……