ES6语法(3)

模板字符串

1. 基本语法

   let name = 'nano'
   let str = `你好${name}`
   console.log(str) --> '你好nano'

2. 拓展语法
   (1) 标签模板字符串
   定义:将模板字符串设置为一种调用函数的方式,第一个参数为数组,里面是模板字符串中的字符串,会根据${}分割,如果没有${}就是存放一整个字符串的数组,${}中的变量会依次传递给剩下的形参

   let foo = (m,n,y)=>{
     console.log(m,n,y)
   }
   foo`ab${18}cd${20}e`  --> ['ab','cd','e'],18,20

函数参数默认值

// 默认参数配合解构
function add ({name,age} = { name:'nano', age:19 }){
  console.log( name,age ) -> 'nano',19
}

function add ({name = 'nano',age = 19} = {}){
  console.log( name,age ) -> 'nano',19
}

备注: 有默认参数的形参最好放在最后
注意: 设置默认值的形参以及该形参之后的形参,都不算在函数的length之内
注意: 设置函数参数默认值后,会形成一个参数作用域,包裹函数作用域,用于保存参数的值

收集剩余参数(…)

1. 定义: 函数参数中以…为前缀的,它会将剩余的参数放到该参数中并且作为一个数组(必须放到最后一个)
2. 主要用法:
   (1) 搭配箭头函数使用
   (2) 收集指定参数[arguments是函数中所有的参数,而剩余参数则是收集未被形参接住的参数]

   function add(a,b,...args){
     console.log(args) 
   }

箭头函数

1. this永远指向声明箭头函数的那个作用域
2. 箭头函数的this不受this绑定规则的影响,永远指向声明箭头函数的那个作用域
3. 箭头函数没有显示原型(prototype)
4. 箭头函数不能用来作为构造函数
5. 箭头函数没有arguments,通过搭配剩余参数写法收集参数
6. 箭头函数都是匿名函数
7. 箭头函数不能用作生成器(generator)

展开语法(…)

1. 展开语法都是浅拷贝

   ES6:
     字符串和数组的展开
     let str = 'abc'
     let arr = ['f','g']
     console.log( [...str,...arr] ) --> [ 'a','b','c','f','g' ]
   ES9:
     对象的展开
     let obj = { a:1,b:2 }
     console.log( {c:3,...obj} ) --> { c:3,a:1,b:2 }

   注意: es6字符串和数组的展开语法是因为迭代器的原因,而ES9的对象展开则是内部实现了一个新方法

Symbol

1. 定义:新增的数据基础类型,但是用法跟函数类似,每次调用都会生成一个独一无二的值
2. 使用场景: 防止对象key值重名
3. 用法: Symbol(description) –> description描述符

let key1 = Symbol('key1')
console.log(key1.description) --> 'key1'

let key2 = Symbol('key2')

// Symbol作为对象的key
let obj = { [key1]:1,[key2]:2 }

obj[s2] = '18'

Object.defineProperty( obj, s2, {
  ...
} )

/* 
  Symbol设置为相同的值 
  Symbol.for(key)
*/
let s1 = Symbol.for('aaa')
let s2 = Symbol.for('aaa')
console.log( s1 === s2 ) --> true

// 如果不用.for的写法,他们是不相等的,因为Symbol每次创建的都是不同的值,即使key相同

// 获取.for的key值
const key = Symbol.keyFor(s1)
console.log(key) --> 'aaa'

注意: Symbol作为key的属性名时,只能通过Object.getOwnPropertySymbol( )的方法获取属性名,其它如遍历,Object.keys( ),Object.getOwnPropertyNames( )都是无法获取的