ESMAScript6基本介绍

ESMAScript6基本介绍

ESMAScript6.0

是一个标准，javascript是它的遵循语言，大部分都是用es6

ES5:2015年发布的

ES6:代码更加简洁，但浏览器兼容性差

基本语法

//js定义,无作用范围
var a = true;
//es6定义，有范围，代码块内有效
let a = true;

//let相同名字只能声明一次
let m=1;
let m=2;

常量

//定义时必须初始化
const PI='3.14159265354'
PI = 3 //报错

解构赋值

// 传统
let a=1,b=2,c=3
// es6
let [a,b,c] = [1,2,3]
// 对象解构
let user={name:'Dean',age:18}
// 传统
age = user.age
name =user.name
// es6
let {name,age}=user

模板字符串:反引号 tab上边那个

// 按照原格式输出
let str1 = `hello
world`;
console.log(str1)
// 格式化
let name="Dean"
let info=`my name is ${name}`
// 还可以格式化函数
function f1(){return 'hello'}
let str2=`demo,${f1()}`

声明对象

const name='dean'
const age=18
// 传统方式
const p1 = {name:name,age:age}
// es6
const p2 = {name,age}  //效果相同

定义方法简写

// 传统
const p1={sayHi:function(){console.log('hello')}
}
p1.sayHi() //调用
// es6
const p1={sayHi(){console.log('hello')}
}
p1.sayHi() //调用

对象扩展运算符(...)浏览器可能不支持

// 对象复制
let p1= {name:'Dean',age:18}
let p2={...p1}
// 对象合并
let name='Dean'
let age=18
let p3={...age,...name} // {age:18,name:'Dean'}

箭头函数

// 传统
var f1=function(a){return a
}
// es6
var f2=a=>a
var f3=(a,b)=>a+b