ECMAScript 6

ECMAScript 6

1. 简介

我们之前学习的js 其实是 ecmascript 5.0 简称 es5

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

2. 基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

1）let声明变量 （常用）

var 声明的变量没有局部作用域
let 声明的变量  有局部作用域

var 可以声明多次
let 只能声明一次

var 会变量提升
let 不存在变量提升 

// var 声明的变量没有局部作用域
// let 声明的变量  有局部作用域
{
var a = 0
let b = 1
}
console.log(a)  // 0
console.log(b)  // ReferenceError: b is not defined
 
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m)  // 2
console.log(n)  // Identifier 'n' has already been declared
 
// var 会变量提升
// let 不存在变量提升 
console.log(x)  //undefined
var x = "apple"
console.log(y)  //ReferenceError: y is not defined
let y = "banana"

2）const声明常量

// 1、声明之后不允许改变    
const PI = "3.1415926"
PI = 3  // TypeError: Assignment to constant variable.
 
// 2、一但声明必须初始化，否则会报错
const MY_AGE  // SyntaxError: Missing initializer in const declaration

3）解构赋值(常用)

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值</title>

    <script>

        // let arr = ["a","b","c"];
        //把数组中的所有元素分别赋值给不同的变量
        //之前的写法
        // let a = arr[0];
        // let b = arr[1];
        // let c = arr[2];
        
        //使用es6 数组解构
        // let [a,b,c] = arr;
        // console.log(a,b,c);

        let person = {"name":"张四","age":10,"gender":"男"};
        //之前的写法
        // let name = person.name;
        // let age = person.age;
        // let gender = person.gender;
        let {name,age,gender} = person;  // 要求：  变量名需要和对象的属性一致
        console.log(name,age,gender);
    </script>
</head>
<body>
    
</body>
</html>

4）模板字符串(常用)

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>

    <script>
            // let name = '张小包';
            // let age = 20;
            // let gender = "男";

            // //以前的写法
            // console.log("我的名字叫"+name+"，今天"+age+"岁,我是"+gender+"生");

            // //es6 模板字符串 反引号 `
            // console.log(`我的名字叫${name},今天${age}岁,我是${gender}生`);


            // let str = "今天星期四，"+
            // "明天就是星期五了，然后"+
            // "又要周考了";


            let str = `今天星期四，
            明天星期五，
            后天星期六，没有作业，贼爽`;

            console.log(str);

            
    </script>
</head>
<body>
    
</body>
</html>

5）声明对象简写(常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声明对象</title>


    <script>

        //声明对象
        let name = '小宝';
        let age = 1;

        //let person = {"name":name,"age":age};
        let person = {name,age};  //以变量名作为对象的属性名
        
        console.log(person);
    </script>
</head>
<body>
    
</body>
</html>

6）定义方法简写(常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声明方法</title>

    <script>
        
        // let name = "外面的";
        // let age = 100;
        // let person = {
        //                 "name":"张三",
        //                 "age":20,
        //                 show:function(){
        //                     //打印当前对象的name 和 age
        //                     console.log(this.name,this.age);
        //                     console.log(name,age);
        //                 }
        //             };

        // person.show();



        let person  = {
                "name":"张三",
                "age": 10,
                show(){
                    console.log(this.name,this.age);
                }
        }
            
        person.show();
    </script>
</head>
<body>
    
</body>
</html>

7）对象拓展运算符(常用)

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)  //{name: "Amy", age: 15}
 
// 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)  //{age: 15, name: "Amy"}

8）函数的默认参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认参数</title>

    <script>

        function show(a,b=18){
            console.log(a,b);
        }

        //show(1,2);           1 2
        //show(1);             1 18
        //show(1,"");           1 
        //show(1,null);         1 null
        //show(1,undefined);   1 18
    </script>
</head>
<body>
    
</body>
</html>

9）不定参数(常用)

不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不定参数</title>

    <script>
        function show(...a){
            console.log(a);
        }

        //调用方法
        show();
        show("张三");
        show("张三","李四");
        show("张三","李四",123);
    </script>
</head>
<body>
    
</body>
</html>

10）箭头函数(慢慢习惯)

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>

    <script>

        // function show(){

        // }

        // let show = function(){
        //     console.log("展示数据");
        // }

        // let fun1 = function(a){
        //     return a;
        // }

        // let fun1 = (a)=>a;

        // console.log(fun1(10));

        // let fun2 = function(a){
        //     return a+101;
        // }

        // let fun2 =(a)=> a+101;

        // console.log(fun2(1));


        // let fun3 = function(a,b){
        //     return a+b;
        // }

        // let fun3 = (a,b)=> a+b;
        // console.log(fun3(10,20));

        // let fun4 = function (){
        //     let a = 20;
        //     console.log(a);
        // }

        // let fun4 = ()=>{
        //     let a = 20;
        //     console.log(a);
        // };

        // fun4();

        //定时器
        // setInterval(function(){
        //     console.log(new Date().toLocaleString());
        // },1000);

        setInterval(() => {
            console.log(new Date().toLocaleString());
        }, 1000);
    </script>
</head>
<body>
    
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/conglingkaishi/p/15315226.html