(三) 数组_字符串_对象新特性

1. 字符串扩展方法

1.1 模板字符串

语法: `` 反引号, 以及 ${expression} 的占位符

基本使用

let txt = `
  这是一段
  换行的
  文字
`
console.log(txt);

占位符的使用

// 传递变量
const name = '猫13'
let info = `我的名字是${name}`

// 调用函数
function fn() {
  return '猫13';
}
let showInfo = `我的名字是${fn()}`
console.log(showInfo);

嵌套使用

let arr = [1,2,3,4]
const str = (arr)=>`
	我是第一级字符串
	${arr.map(v=>`${v}`)}
`
console.log(str(arr))

1.2 includes()

str.includes(value, start) : 判断value是否在str中, 存在则返回true, 不存在则返回false

• value: 传入的值
• start: 开始查找的下标

let str = 'hello world'
console.log(str.includes('ld', 3));		// true

1.3 repeat()

str.repeat(n): 表示str重复n次

不会改变原字符串

let str = 'ab'
console.log(str.repeat(2));		// abab

1.4 startsWith()和endsWith()

两个方法都可以接受两个参数, 第一个参数是查找的字符串, 第二个参数是起始下标

str.startsWith() : 表示参数字符串是否在str的头部

str.endsWith() : 表示参数字符串是否在str的尾部

let str = 'hello world'
console.log(str.startsWith('llo', 2))		// true
console.log(str.endsWith('world'))		// true

1.5 padStart()和padEnd()

padStart和padEnd用于补全字符串, 接受两个参数, 第一个是字符串长度, 第二个是补全的字符

不会改变原字符串

let str = 'hello'
console.log(str.padStart(10, 'abc'))	 // abcabhello
console.log(str.padEnd(10, 'abc'))  // helloabcab

2. 数组扩展方法

2.1 拓展运算符 ...

基本使用

let arr = [1, 2, 3, 4]
console.log(...arr)   // 1 2 3 4

结合数组解构赋值使用

// 注意: 这种写法, 拓展运算符只能写在最后使用
let [a, ...args] = [1, 2, 3, 4]
console.log(a, args)  // 1  [2, 3, 4]

对比apply()方法的传参

function sum(n1, n2) {
  console.log(n1 + n2);
}

sum.apply(null, [100, 200])   // 300
// 使用拓展运算符进行解包传参
sum(...[300, 400])    // 700

拼接数组

let arr1 = [1, 2, 3], arr2 = [4, 5]
console.log([...arr1, ...arr2])   // [1,2,3,4,5]

复制数组: 本质是浅拷贝

let arr = [{ id: 1 }, 100, 200]
let newArr = [...arr]
newArr[0].id = 2
newArr[1] = 300
console.log(arr)  // [{ id: 2 }, 100, 200]

2.2 Array.from()

Array.from()方法将以下两类对象转换成真正的数组:

• 类数组
• 部署了 iterator 接口的对象, 如 Set、Map、Array

注意: 不会改变原数组

function fn() {
  console.log(arguments)
  arguments = Array.from(arguments)
  console.log(arguments)
}

fn(1, 2, 3, 4)

2.3 Array.of()

Array.of() 用于将一组值转换成数组

返回一个数组, 如果不传值, 则返回一个空数组

let arr = Array.of(1, 2, 3, 4)
console.log(arr)  // [1,2,3,4]

2.4 copyWithin()

arr.copyWithin(target,start,end): 将指定位置的元素复制到其他位置(覆盖原位置的元素)

会对原数组进行修改并返回修改后的数组

2.5 find()和findIndex()

find()方法用于找出第一个符合条件的数组成员, 都不符合则返回undefined

语法: arr.find(callBack(value, index, arr), thisArg)

let arr = [1, 2, 3, 4, 5]
let res = arr.find(value => value > 3)
console.log(res)		// 4

findIndex()返回第一个符合条件的数组成员的下标值, 如果都不符合则返回 -1

let arr = [100, 200, 300]
let res = arr.findIndex(value => value > 100)
console.log(res)  // 1

2.6 includes()

与字符串的includes方法用法一致

3. 对象扩展方法

3.1 对象属性的新写法

let name = '猫13'
let person = {
  // name: name
  name
}

console.log(person.name)