ES6快速入门（看这一篇就够了）

简介：

ES6全称ECMAScript 6，是浏览器脚本语言的一种标准，是Javascript的规格。JavaScript是ECMAScript的一种实现。

let的使用以及和var的区别

var 定义在函数外面就是全局变量，定义在函数内就是局部变量。
let 只在代码块中有效

<script>
   //1 创建代码块，定义变量
   {
       var a = 10
       let b = 20
   }
   //2在代码块 外面输出
   console.log(a)   //10
   console.log(b)  // not defined

	function hello(){
		var c=20;
		console.log("in"+c);  // in20
		console.log("in"+a);  // in10
		let d=2;
	} 
	console.log(d); // not defined
	hello();   
	console.log("out"+c);  // not defined

//var 定义在函数外面就是全局变量，定义在函数内就是局部变量。
//let 只在代码块中有效
</script>

let 只能被声明一次

<script>
   var a = 1
   var a = 2

   let m = 10
   let m = 20 //Uncaught SyntaxError: Identifier 'm' has already been declared

    console.log(a)
    console.log(m) 
    
    //let 只能被声明一次
</script>

const声明常量

<script>
    //定义常量
    const PI = "3.1415"
    //常量值一旦定义，不能改变
    PI = 3  //Uncaught TypeError: Assignment to constant variable.

    //定义常量必须初始化
    const AA  //Uncaught SyntaxError: Missing initializer in const declaration
</script>

数组

<script>
    //传统写法
    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)
    
</script>

对象

获取对象属性

<script>
    //定义对象
    let student = {"name":"tom","age":20}

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

    //es6获取对象值
    let {name,age} = user
    console.log(name+"**"+age)

//需要了解这个用法,看到后知道什么意思，我感觉这种用的少吧
</script>

定义对象

<script>
    const age = 12
    const name = "lucy"

    //传统方式定义对象
    const student = {name:name,age:age}
    console.log(student)

    //es6定义变量
    const student= {name,age}
    console.log(student)

</script>

对象复制与合并

<script>
     //1 对象复制
     let person1 = {"name":"lucy","age":20}
     let person2 = {...person1}   

     console.log(person2)   
     //2 对象合并
     let name = {name:'mary'}
     let age = {age:30}
     let student = {...name,...age}
     console.log(student)
</script>

模板字符串

注意这里" ` "不是单引号，是~那个键上面的符号`

<script>
    //1 使用`符号实现换行  
    let str1 = `hello,
        es6 demo up!`
    console.log(str1)   结果也换行了

    //2 在`符号里面使用表达式获取变量值
    let name = "Mike"
    let age = 20

    let str2 = `hello,${name},age is ${age+1}`
    //console.log(str2)

    //3 在`符号调用方法
    function f() {
        return "hello f1"
    }

    let str3 = `demo, ${f()}`
    console.log(str3)
</script>

定义方法

<script>
    //传统方式定义的方法
    const person1 = {
        sayhello:function(){
            console.log("hello")
        }
    }

    //调用
    person1.sayHello()

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

</script>

箭头函数

方法名=参数=>方法

<script>
    //1 传统方式创建方法
    var f1 = function(m) {
        return m
    }
    console.log(f1(2))

    //使用箭头函数改造 方法名=参数=方法
    var f2 = m => m
   // console.log(f2(8))

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

   //箭头函数简化
   var f4 = (a,b) => (c=a+b,c+2)
   console.log(f4(2,2))//6
</script>

帮助到您请点赞关注收藏谢谢！！