参考:http://es6.ruanyifeng.com/
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准
ES6代码简洁,浏览器兼容性差
ES5代码复杂,浏览器兼容性好
let声明变量
<script>//es6如何定义变量,定义变量特点// js定义变量: var a =10;// es6写法定义变量: 使用关键字 let;let a = 10;{//代码块var a = 10;let b = 20;}//在代码块,外面输出变量console.log(a);console.log(b);
// a=10 b未定义
</script>
var 可以声明多次 let 只能声明一次
const声明常量
<script>//const 声明之后不允许改变const PI = "3.1415926"PI = 3
</script>
<script>//const 一但声明必须初始化,否则会报错const w;
</script>
解构赋值
一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值
<script>
//数组解构// 传统let a=1 ,b = 2, c= 3console.log(a,b,c)// ES6let [x,y,z]=[1,2,3]console.log(x,y,z)</script>
<script>let user = {name:'achang',age:18}//传统let name1 = user.name;let age1 = user.age;console.log(name1,age1);//ES6let {name,age} = user //注意:结构的变量必须是user中的属性console.log(name,age);</script>
模板字符串
多行字符串:
<script>let str = `Hey,how are you?`console.log(str);//Hey,//how are you?
</script>
字符串插入变量和表达式:
<script>let name = 'w'let age = 21let info = `My Name is ${name},I am ${age+1} years old next year.`console.log(info);//My Name is w,I am 22 years old next year.</script>
字符串中调用函数
<script>function f(){return 'have fun!'}let str = `the game start,${f()}`console.log(str);//the game start,have fun!</script>
声明对象简写
<script>const age = 12const name ='w'//传统const person1 = {age: age,name: name}console.log(person1);//ES6const person2 = {age,name}console.log(person2);</script>
定义方法简写
<script>//传统const person1 = {sayHi:function(){console.log("hi");}}person1.sayHi();//hi//ES6const person2 = {sayHi(){console.log("h1");}}person2.sayHi();//h1</script>
对象拓展运算符
拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
<script>//拷贝对象let person1 = {name:'w',age:21}let someone = {...person1}console.log(someone); //{name:'w',age:21}</script>
<script>//合并对象let age = {age:21}let name = {name:'w'}let person2 = {...age,...name}console.log(person2); //{age:21,name:'w'}</script>
箭头函数
// 传统
var f1 = function(a){return a
}
console.log(f1(1))// ES6
var f2 = a => a
console.log(f2(1))
// 当箭头函数没有参数或者有多个参数,要用 () 括起来。
// 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
// 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {let result = a+breturn result
}
console.log(f3(6,2)) // 8
// 前面代码相当于:
var f4 = (a,b) => a+b