class="article_content clearfix">
class="htmledit_views">
class="blogpost-body cnblogs-markdown" style="font-size: 16px;">
ES6( ECMAScript 6.0)语法
一、let/const与var的区别
var 会进行预解析，let/const不会
var可以声明两个重名的变量，let/const不能
var没有块级作用域，let/const有块级作用域
二、箭头函数
1.普通函数
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">//xxx.onclick=function(a=10,b=20){ } 可以为函数设置默认值，没传参数就用默认值
xxx.onclick=function(){ }
var xxx={fn:function(){} }
xxx.forEach(function(){})
setTimeout(function(){})
var xxx=function(){}
2.箭头函数
格式：把普通函数的function去掉，再在小括号后面加上j箭头符号(=>)
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">xxx.onclick=()=>{ }
var xxx={fn:()=>{} }
xxx.forEach(()=>{})
setTimeout(()=>{})
var xxx=()=>{}
三、结构赋值
1.以前数组
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">let arr=['hello','world']
let a=arr[0]
let b=arr[1]
2.解构赋值
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">let [a,b]=['hello','world']
console.log(a)
console.log(b)
四、解构赋值-解构对象(键值对)
1.以前获取对象
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">let obj={
name:"小明"
age:20
}
let name=obj.nam
let age=obj.nam
2.解构赋值
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">let obj={
name:"小明"
age:20
}
//定义两个变量name和age，并获取obj里的name和age的值
let{name,age}=obj //如同 let name=obj.nam ,let age=obj.nam
console.log(name,age)
//定义一变量a(为name取个别名a)
let{name:a}=obj
五、E6_模板字符串反引号使用
作用：
- 给变量赋值时可以换行
- 可以配合${ 变量 }来解析变量
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">//给变量赋值时可以换行
var a=`hello
world`
//输出也保持换行
console.log(a)
//可以配合${ 变量 }来解析变量
var name="小明"
var s=`他的名字是${name}`
console.log(s)
//输出为：他的名字是小明
六、E6_展开运算符
格式： . . . 数组或 . . . 对象(键值对)
作用：把数组或键值对展开(把中括号和大括号去掉)
用途1：合并数组或键值对
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">//数组合并
var s1=[10,20]
var s2=[30,40]
var s3=[50,60,70]
var s=[...s1,...s2,...s3]
console.log(s)
//输出结果:[10,20,30,40,50,60,70]
//键值对合并
var s1={name:"小明",age:12}
var s2={sex:"男",hight:170}
var s={...s1,...s2}
console.log(s)
//结果：{name: '小明', age: 12, sex: '男', hight: 170}
用途2：给函数传值
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">//求数组里的最大值
var s=[2,4,5,7,20,4]
var max=Math.max(...s)//如同：max=Math.max(2,4,5,7,20,4)
//结果为：20
七、E6_类语法
格式：
class 类名{
constructor( 形参列表 ){
this.属性名=形参1
this.属性名=形参2
}
//直接写方法就行
方法名( ){ 方法体 }
//静态属性和方法，加一个static
static a=100
static hi( ){ 方法体 }
}
class="has">class="language-class="tags" href="/tags/JS.html" title=js>js">//E6的类
class Person{
constructor(name,age){
this.name=name
this.age=age
}
//方法
sayHi(){ console.log("你好，世界！") }
//静态属性和方法，加一个 static
static a=100
static to()function{ console.log("大家好") }
}
//创建对象
var p1=new Person("小明",20)
//执行方法
p1.sayHi()
//执行静态属性和方法
Person.a
Person.to()
