ES6基本概念，对比JS使用和区别

 

变量定义

let变量和var变量的区别


 
  作用域
      js定义变量为var，var定义的变量，代码块里外都能用
      es6定义变量为let，let定义的变量，只能在当前代码块里面使用
  特点
      var可多次定义同一变量
      let只能定义一次变量，不能在定义同一个变量

const常量

     const定义变量时，需要赋值，复制之后就是一个常量，不能再改变了
     如果用conse定义对象时，对象不能重新赋值，但对象的属性可以重新定义或赋值
 
 const person = { age : 20}
 
 const persoon.age = 30  可
 
 const person = {age:30} 不可

 

　　

数据类型，数值结构

//传统写法
let a=1,b=2,c=3
console.log(a, b, c)

//es6写法
let [x,y,z] = [10,20,30]
console.log(x, y, z)

　

//定义对象
let user = {"name":"lucy","age":20}

//传统从对象里面获取值
let name1 = user.name
let age1 = user.age
console.log(name1+"=="+age1)

//es6获取对象值，定义的变量必须和对象的键一致
let {name,age} = user
console.log(name+"**"+age)

 

模板字符串

自动换行
let str1 = `hello,
  es6 demo up!`


其里面可使用表达式获取变量值
let name = "Mike"
let age = 20
let str2 = `hello,${name},age is ${age+1}`


调用方法
function f1() {
  return "hello f1"
}
let str3 = `demo, ${f1()}`

 

方法简写，省略:function

 

//传统方式定义的方法
const person1 = {
    sayHi:function(){
        console.log("Hi")
    }
}


//调用
person1.sayHi()


//es6
const person2 = {
    sayHi(){
        console.log("Hi")
    }
}

　　

三个点，对象拓展运算符

 

对象复制
let person1 = {"name":"lucy","age":20}
let person2 = {...person1}


对象合并
let name = {name:'mary'}
let age = {age:30}
let person3 = {...name,...age}

 

箭头函数

 

//1.传统方式创建方法
//参数 => 函数体
var f1 = function(m) {
  return m
}


//使用箭头函数改造
var f2 = m => m


//2.复杂一点方法
var f3 = function(a, b) {
  return a+b
}


//使用箭头函数
var f4 = (a,b) => a+b


//xxx.onclick=function(a=10,b=20){ }  可以为函数设置默认值，没传参数就用默认值

xxx.onclick=function(){ }
var xxx={fn:function(){} }
xxx.forEach(function(){})
setTimeout(function(){})
var xxx=function(){}
格式：把普通函数的function去掉，再在小括号后面加上j箭头符号（=>）


//箭头函数
xxx.onclick=()=>{ }
var xxx={fn:()=>{} }
xxx.forEach(()=>{})
setTimeout(()=>{})
var xxx=()=>{}

 

ES6类语法

 

//E6的类
class  Person{
    constructor(name,age){
        this.name=name
        this.age=age
    }   
    //方法
     sayHi(){ console.log("你好，世界！") }
    
    //静态属性和方法，加一个 static
    static a=100
    static to(){ console.log("大家好") }
    
 }


//创建对象
var p1=new Person("小明",20)
 //执行方法
  p1.sayHi()


//执行静态属性和方法
Person.a
Person.to()