介绍
JS的es6 es7的一些经典新特性
# 属性名和属性值 赋值es6规则
- 如果属性名 属性值 两者名称一致 可以简写一个名
属性名属性值一致 赋值 老方法
属性名 : 属性值00000
info : info
es6规则 可以简写成一个
info // 属性名 和 导入的熟悉值名称一样 可以省略一个
# es6的动态属性名(键)
- es6支持动态绑定属性名(键) 可以通过三元表达式 来动态切换属性名(键)
演示案例
// 创建一个 控制动态属性名的状态位
const flag = true
const obj = {
// 创建三元表达式 动态切换属性名 (字符串直接动态绑定属性名)
[flag ? 'msg' : 'info']: '动态属性名字符串直接绑定'
}
- 通过变量方式 绑定动态属性名
- 通过变量绑定的动态属性名 变量里的内容 才是真正的属性名
// 创建一个 控制动态属性名的状态位
const flag = true
// 创建动态绑定属性名的变量
const msg = 'mag'
const info = 'info'
const obj = {
// 创建三元表达式 动态切换属性名 (通过对象方式 绑定对象内容为属性名)
[flag ? msg : info]: '动态属性名字符串直接绑定'
}
# 动态方法
- 通过三元表达式配合匿名函数 (opens new window)进行方法的动态判断
let name = '小刘'
let age = 18
let saySome = true
// 方法A
function sayName (name, age) {
console.log(`我叫${name}`)
}
// 方法B
function sayOld (name, age) {
console.log(`今年${age}岁`)
}
// 根据三元表达式 进行方法的动态
const ret = (saySome ? sayName : sayOld)(name, age)
# 给方法设置默认值
- 在es6中可以给方法在形参中设置默认值
(参数 = 默认值)代替之前的|| 逻辑或赋值 (opens new window)参数虚 (opens new window)值(undefined)时赋值 - 注意: 不能省略括号 箭头函数只有一个参数的时候 可省略括号 但是赋值默认值的情况 不可省略
// es6之前使用默认值的方法
const animal = type => {
// 判断type是否为虚值 如果是那么赋值一个默认值
type = type || 'cat'
console.log(type)
}
animal() // 通过 || 判断为虚值(undefined)时候赋值为cat
// es6给方法设置默认值
const animal = (type = 'cat') => { // 注意: 不能省略括号 (箭头函数只有一个参数的时候 可省略括号 但是赋值默认值的情况 不可省略)
console.log(type)
}
animal() // cat