es6语法概要

es6语法概要

let/const

在es6以后就不建议使用var变量了，let和const在语义上比var更清晰，使代码的可读性、安全性更符合现代JS的编程标准

// 使用 var 声明变量
var a = 1;
var a = 2; // 可以重复声明

// 使用 let 声明变量
let b = 3;
// let b = 4; // 无法重复声明，会报错

// 使用 const 声明常量
const c = 5;
// c = 6; // 无法重新赋值，会报错

// 块级作用域示例
function example() {
  var varVariable = "var";
  let letVariable = "let";
  const constVariable = "const";

  if (true) {
    var varVariable = "var updated";
    let letVariable = "let updated"; // 不会影响外部的 letVariable
    const constVariable = "const updated"; // 会报错，const 在块级作用域中也是不可重复声明的

    console.log(varVariable); // var updated
    console.log(letVariable); // let updated
    console.log(constVariable);
  }

  console.log(varVariable); // var updated
  console.log(letVariable); // let
  console.log(constVariable); // const
}

example();

• **const声明常量：**使用 const 声明的变量不能再次被赋值，防止意外的数据变动
• **let声明局部变量：**它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束
• 暂时性死区：let 和 const 在声明之前不可访问
• **不可重复声明：**使用 let 和 const 声明的变量不允许重复声明，而 var 可以重复声明相同的变量名，容易引起混乱

箭头函数

es6 新增了箭头函数，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数，并且在Vue中使用箭头函数不会出现this指向不同的问题，同时还能一定程度的简化代码

// 普通函数
var f = function (a){
    console.log(a)
}
// 箭头函数[无参无返回值]
var f = () => {
    console.log('无参无返回值箭头函数')
}
// 箭头函数[单参无返回值]
var f = a => {
    console.log(a)
}
// 箭头函数[多参无返回值]
var f = (a,b) => {
    console.log(a, b)
}
// 箭头函数[单参有返回值]
var f = a => {
    return a + 'Hello World'
}
// 箭头函数[单参有返回值简写]
var f = a => a + 'Hello World'

• 示例：按钮绑定函数，使目标数组完成过滤

<div id="app">
    <button @click="handleFunc1(info)">按钮1</button>
    <p>{{info}}</p>
</div>

• 原函数

handleFunc1(a){
    this.info = this.info.filter(function (a){
        return a===1
    })

• 箭头函数

handleFunc1(a){
    this.info = this.info.filter(a => a === 1)
})

• 如果只有一个参数，那也可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号

模版字符串

模版字符串在需要大量字符串拼接时会比老语法''+''简便很多

es6之前的字符串拼接

let name = '张三'
let age = 18
console.log('我是'+name+',今年'+age)

es6模版字符串拼接

let name = '张三'
let age = 18
console.log(`我是${name},今年${age}`)

解构赋值

数组结构

let nameList = ['张三','李四','陈五']

let [name1,name2,name3] = nameList
console.log(name1,name2,name3)
// 张三 李四 陈五

let [name4,name5] = nameList
console.log(name4,name5)
// 张三 李四

对象解构

let nameDict = {'name1': '张三', 'name2': '李四', 'name3': '陈五'}

let {name1, name2, name3} = nameDict
console.log(name1, name2, name3)
// 张三 李四 陈五

let {name4, name5} = nameDict
console.log(name4, name5)
// undefined undefined

对象名与接受参数名不符时则不会被解构

let nameDict = {'name1': '张三', 'name2': '李四', 'name3': '陈五'}

let {name7, name2, name3} = nameDict
console.log(name7, name2, name3)
// undefined  李四 陈五

函数返回值解构

function getuserInfo() {
    return {name: '张三', age: 18, hobby: ['run', 'drink']}
}

let {name, hobby} = getuserInfo()
console.log(name, hobby)
// 张三 ['run', 'drink']

默认参数

如果调用函数时不传参则会以默认参数为准

function test(name, age = 19) {
    console.log(name, age)
}

test("张三", )
// 张三 19

模块化

• 在要导出的文件中用export将数据导出

// test.js
export const name = '张三'
export function add(a,b){return a+b}

• 在要导入的文件用import {} from '...'导入

// test.html
import {name, add} from './test.js'

console.log(name, add(10, 5))
// 张三 15

• *导入全部和as重命名

// test.html
import * as q from './test.js'

console.log(q.name, q.add(10, 5))
// 张三 15

• export default，将所有参数合并到对象中导出

// test.js
export default {
    name: '张三',
    add: function (a, b) {
        return a + b
    }
}

// test.html
import xxx from './test.js'

console.log(xxx.name, xxx.add(10, 5))
// 张三 15