ECMAScript6与之后的语法

注意：具体内容可以去参考ECMA官方文档，这里只是对某些语法进行总结与参考

ES6语法

变量声明

let不能重复声明var可以重复声明

let用来声明变量const用来声明常量const声明后不可以重新赋值，let可以重新赋值。const一定要赋初始值。

cs6后新增了块级作用域，使用let和const声明只在代码块中生效

let和const不存在变量提升，用var声明变量会参与预加载

而且不影响作用域链

{
   
    let example = '例子'
    function fn(){
   
        console.log(example)
    }
    fn() //最终输出'例子'
}

解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这称为解构赋值

//数组解构
const example = ['例子1','例子2','例子3']
let ['example1','example2','example3'] = example
//对象解构
const exampleObj = {
   
    title: 'title',
    content: 'content',
    fn: function(){
   
        console.log('这是一个方法')
    }
}
//let {title,content,fn} = exampleObj
//可以单独解构出某一条你想用的方法或参数，可以直接调用函数
let {
   fn} = exampleObj
fn();

//可以多级解构赋值，以对象为例子
const reduplicate = {
   
    title: 'title',
    content: 'content',
    obj:{
   
        innterTitle: '内部标题'
    }
}
let {
   obj:{
   innterTitle}} = reduplicate
console.log(innterTitle)//控制台输出'内部标题'

模板字符串

ES6引入了新的声明字符串方式[``]

特性：

//内容可以直接出现换行符
let str = `<ul>
			<li>不会报错</li>
			</ul>`
//可以进行变量拼接
let example = '例子1'
let out = `${
     example}是第一个例子` //${}是固定格式，里面放要拼接的变量名
console.log(out)//输出'例子1是第一个例子'

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

let example = '例子1'
let fn = function(){
   
    console.log('fn')
}
const obj = {
   
    //完整写法
    //example:example,
    //fn:fn
    //简化写法
    example,
    fn,
    //可以简化对象写法，不用再加function
    Second:(){
   
    console.log('第二个')
}
}

箭头函数

箭头函数this始终指向函数声明时所在作用域下的this的值

普通函数this谁调用指向谁

//判断箭头函数this指向
function fn1(){
   
    console.log(this.a)
}
let fn2 = () => {
   
    console.log(this.a)
}
//设置window的a属性
window.a = 'window中的a'
const obj = {
   
    a: '对象中的a'
}
fn1()//输出'window中的a'
fn2()//输出'window中的a'

//接下来用call方法来调用改变this
fn1.call(obj)//对象中的a
fn2.call(obj)//输出'window中的a'

箭头函数不能作为构造实例化对象

//判断箭头函数是否能构造实例化对象
let Person = (name,age) =>{
   
    this.name = name
    this.age = age
}
let i = new Person('h',20)
console.log(i)//结果报错Person is not a constructor

箭头函数不能使用arguments变量（arguments是函数内部用来保存实参）

//判断箭头函数是否能使用使用arguments变量
let fn = function (){
   
	console.log(arguments)
}
fn(1,2,3)//输出Arguments

let fn2 = ()=>{
   
    console.log(arguments)
}
fn(1,2,3)//结果报错arguments is not defined

箭头函数的简写

//当形参有且只有一个的时候可以省略小括号
let add = n => {
   
    return n + n ;
}
console.log(add(1))//输出'2'
//当代码提只有一条需要return语句的时候，可以省略花括号
let pow = n => n*n
console.log(pow(2))//输出'4'

函数参数默认值

ES6允许给函数参数赋值初始值

//具有默认值的参数，一般位置要靠后
function add(a=1,b=2,c=3){
   
    return a + b + c
}
let result = add()
console.log(result)//输出'6'

可以与解构赋值相结合

//没有传参数则用初始值
function connect({
   host='127.0.0.1',username}){
   
    console.log(host)//输出'127.0.0.1'
    console.log(username)//输出'root'
}
connect({
   
    username:'root'
})

rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments

function date(...args){
   
    console.log(args)//输出的是数组，可以使用数组的API，arguments输出的是对象
}
date('数据','数据2')
//如果要形参有多个，rest参数必须要放在最后

拓展运算符

[…]扩展运算符能将[数组]转换为逗号分隔的[参数序列]

//声明一个数组
const example = ['例子1','例子2','例子3']