js面试题之ES6新特性

这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战

ES2015

• es提供了语法(ECMAScript)

• ES2015还可以称之为ES6

ES2015的变化

• 解决原有语法上的一些问题和缺陷
  • 之前是没有块级作用域的，现在利用let、const提供了块级作用域
• 对原有的语法进行增强，让语法使用时更加便捷、易用
  • 解构、展开、参数的默认值、模板字符串等
• 全新的对象、全新的方法、全新的功能
  • promise、object.assign
• 全新的数据类型和数据结构
  • symbol、map、set

let关键字和块级作用域

• 在ES2015之前,ES只有两种作用域：全局作用域和函数作用域
• let关键字提供了块级作用域
• 举例：因为let定义了块级作用域，因此下例中存在2个块级作用域

for (let i = 0; i < 10; i++) {
  let i = "ooo"
  console.log(i)
}
// 输出： 10个 ooo

const关键字常量/恒量

• 在let基础上增加了一个只读的特性
• 声明的时候必须同时赋初值
• 只读举例

const name = 'zs';
name = 'ls'; // 不被允许，会报错

const obj = {};
obj.name = 'zs'; // // 对象的指针没有改变，可以修改内部的值，不会报错
obj = {};  // 修改指针指向的地址，会报错

🔥总结

• 最佳实践：不用var,主用const,配合let

数组的解构Destructuring（下标）

• 指定取第几个

const path = "foo/bar/baz"
// 原来的操作方法
// const temp = path.split("/")
// const a = temp[1]
// 使用数组解构的操作方法,不需要取的值直接添加,
const [,a] = path.split("/")
console.log(a) // 输出：bar

• 取多个

const arr = [100,200,300]
// const [foo, bar, baz] = arr
// console.log(foo,bar,baz) // 输出：100 200 300

// ... 表示：除了foo以外的所有数据，都以数组的形式存储到baz中
// 并且... 只能放在最后面使用
// const [foo,...baz] = arr
// console.log(foo,baz) // 输出：100 [200,300]

• 默认值

// 设置默认值
// const [foo,bar,baz,more] = arr
// console.log(foo,bar,baz,more) // 输出：100 200 300 undefined
// 超出数组的元素个数，进行赋值就是undefined,此时给more设置默认值
const [foo,bar,baz,more = 123] = arr
// 默认值加载原则：没有赋值才会使用默认值
console.log(foo,bar,baz,more) // 输出：100 200 300 123

对象的解构

• 通过属性名获取

const obj = {
  name: 'zs',
  age: 18
}

// 通过属性名获取
// const { name } = obj
// console.log(name) // 输出：zs

• 设置默认值和新的变量名

// 如果变量名重复,取一个新的名字，并设置默认值
const name = 'ls'
const { name : newName = "jack"} = obj
console.log(name) // 输出：ls
console.log(newName) // 输出：zs

• 常用实例举例

// 比如经常使用的console.log(),可以解构如下
const { log } = console
log('解构成功')  // 输出：解构成功

🔥总结

• 大量简化代码的拼写
• 代码的体积变得更小，更利于传输

模板字符串字面量Template literals

• 保存回车、换行

const str = `this
is a String`
console.log(str) // 输出：this
                      // is a String

• 插值表达式（符合标准的js语句）

// 模板字符串
const name = 'hj'
const isEdit = false
// 不局限于变量，还可以是“符合标准的js语句”
const str = `hey,${name},${isEdit ? '编辑' : '添加'}`
console.log(str) // 输出：hey,hj,添加

高级用法：模板字符串标签函数

• 作用：对模板字符串进行加工，对变量进行处理，返回给用户可以理解的内容

// 模板字符串标签函数
const name = 'zs'
const gender = true
function myTagFunc (strings) {
  // 输出的内容是除插值之外的值组成的字符串
  // console.log(strings) // 输出：['hey,', ' is a ', '']
  // 对字符串处理
  const sex = gender ? 'man' : 'woman'
  // 自定义return 
  return strings[0] + name + strings[1] + sex + strings[2]
}
// 使用模板字符串标签函数
const str = myTagFunc`hey,${name} is a ${gender}`
console.log(str)  // 输出：hey,zs is a man

• 函数内部可以接收到：
  • 字符串组成的数组
  • 插值
• 自定义return
• 使用场景：
  • 中英文双文输出
  • 筛选字符串中包含的不安全字符
  • 小型的引擎模板

字符串的扩展方法

• includes()
• startsWith()
• endsWith()

const { log } = console
const str = 'Error: name is not defined.'
log(str.startsWith('Error')) // true
log(str.endsWith('.')) // true
log(str.includes('name')) // true

• 作用：检测字符串中是否包含需要的内容
• 比较：比indexof和正则检测要方便很多

参数默认值Default parameters

• 实例,注意“参数中添加默认值的变量”需要放在参数表的最后进行书写，才会生效

// 参数默认值，简化写法
function myFunc (enable = true) {
  // 常规写法：检测参数是否传递
  // enable = enable === undefined ? true : enable
  console.log(enable) // true
}

// 调用函数
myFunc()

剩余操作符Rest paramrters

• arguments会得到传递的所有实参，输出类数组对象
• ...args会接收传递的所有实参

function myFunc (n,...args) {
  console.log(n,args) // 输出：100 [200,300]
}

// 调用函数
myFunc(100,200,300)

展开操作符 Spread

• ...操作符会将数组中的每一个元素通过顺序展开，传递给实参列表

const arr = ['foo', 'bar', 'baz']
// 以前的方法
// console.log(arr[0],arr[1],arr[2])
// 展开操作符方法
console.log(...arr) // 输出：foo bar baz