javaweb进阶-ECMAScript 6

本文主要是介绍javaweb进阶-ECMAScript 6，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

ECMAScript 6基础

一、简介

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

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

二、基本语法

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

一、let声明变量

let和var的对比：
	`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"

二、const声明常量

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

三、解构赋值

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

<script>
        let arr = [1,2,3];
        // var a = arr[0];
        // var b = arr[1];
        // var c = arr[2];
        let [a,b,c] = arr;  `解构赋值更方便`
        console.log(a,b,c);

        // let arr = [ 1,2,3,[ 4,5,[6] ] ];
        // let [a,b,c,[d,e,[f]]] = arr;   
        // console.log(a,b,c,d,e,f);

        let person = {
                "name":"张三",
                "age":20,
                "sex":"男"
        };

        let {name,age,sex} = person;
        console.log(name,age,sex);

        // let {a,b,c} = person;
        // console.log(a,b,c);   错误， `对象解构赋值要求变量名和对象的属性名要一致`
    </script>

四、模板字符串

	模板字符串相当于加强版的字符串，用反引号 ``引起来,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。【反引号的位置：tab上面、1的左边，其实就是~】
	let name = '张小包';
    let age = 20;
    let gender = "男";
    //es6 模板字符串 反引号 `
   console.log(`我的名字叫${name},今天${age}岁,我是${gender}生`);

五、声明对象简写

		//声明变量
        let name = '小宝';
        let age = 1;
        //以变量名作为对象的属性名
        let person = {name,age};  
        console.log(person);

六、定义方法简写

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

    person.show();
</script>

七、对象拓展运算符

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

<script>
    // let person = {"name":"张三","age":20};
    // let person2 = person;   拷贝地址  浅拷贝  对象的值变了，另一个对象的值也会跟着变
     let person2 = {...person}; //拷贝值  深拷贝（对于简单类型对象）

    //合并对象
    let a = {name:'张三',age:10};
    let b = {age:20};
    let c = {...a,...b};
    console.log(c);

</script>

`浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象`

八、函数的默认参数

<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>

九、不定参数

	不定参数用来表示不确定参数个数，如 ...变量名，由...加上一个具名参数标识符组成。`具名参数只能放在参数列表的最后，并且有且只有一个不定参数。`
	
<script>
    function show(...a){
      console.log(a);
    }

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

十、箭头函数

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

<script>
        //定时器【原写法】
        // setInterval(function(){
        //     console.log(new Date().toLocaleString());
        // },1000);

		//箭头函数写法
        setInterval(() => {
            console.log(new Date().toLocaleString());
        }, 1000);
</script>

这篇关于javaweb进阶-ECMAScript 6的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！