"@

ES6新增了关于变量的定义，函数扩展，数据结构，类，模块等概念，本文将详细介绍常用的ES6语法。

1. 变量的定义

let

ES6中新增了let语法，用来声明变量，用法类似var。

let定义的变量只在当前代码块内有效.

如下示例：

<script>

    if (true) {

        var username = 'zyk';

        let age = 60;

    }

    console.log(username);  // zyk

    console.log(age);  // 错误

</script>

ES5中只有全局作用域和函数作用域，没有块级作用域，所以下面代码中的var变量定义会被提升到函数作用域顶部：

<script>

    var username = 'zyk';

    function foo() {

        console.log(username);  // 打印结果为：undefined

        if (true) {

        	var username= "无名";

        	// var定义的变量会被提升至作用域的顶部

        }

    }

    foo()

</script>

而将var修改为let后，即可避免全局变量username被if代码块中username替代。

还有一种情况，使用var定义变量时，用来计数的循环变量会泄漏为全局变量，如下示例：

<script>

    // ES5中没有块级作用域

    for (var i = 0; i < 10; i++) {}

    // 此时i在全局作用域生效，值为10

    console.log(i);

</script>

同样，我们可以将var改为let来定义变量，使得循环变量只在当前代码块生效。

# . 变量提升

·

在ES5或更早的版本，我们使用var定义变量，使用该语法定义变量时，JavaScript引擎默认会将函数及变量的定义提升到代码块顶端，也就是说，除了在函数中定义的变量会被提升到函数作用域顶端外，在其它地方定义的变量，都会被定义在全局。

·

var定义的变量会发生"变量提升"现象，即变量可以在声明之前使用，值为"undefined"，这不符合大多数编程语言的规范，也会多多少少带来一些问题，为了解决这个问题，ES6中引入了let命令。使用let定义的变量，必须在声明之后才能使用，否则报错。

let不能重复定义变量：

<script>

    let username = 'zyk01';

    let username = 'zyk02';

    console.log(username);  // 错误

</script>

const

定义后不能修改

const定义一个只读常量，常量一旦被声明，就不能被更改.

声明时必须赋值

const声明的变量，必须在声明时赋值，否则会报错.

不能重复定义

与let命令一样，使用const定义的常量不能重复定义.

不存在变量提升

. 关于const的可变与不可变问题

·

使用const定义的常量，不可改变，这里的不可改变，指的是该数据类型本身不可改变，比如字符串，数字，假设使用const定义一个对象或者数组，因为对象和数组这两种数据类型本身是可以被新增或者删除元素的，所以，此时const定义的常量可以被改变。

·

const实际上保证的，并不是变量的值不可改变，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（比如对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

2. 模版字符串

在ES5中，字符串拼接我们使用“+”号，ES6中新增了一种方式，叫做模板字符串，下面我们来使用该功能进行字符串的拼接：

<body>

    <div id="app"></div>

    <script>

        let oDiv = document.getElementById('app');

        // ==== ES5用法 ====

        // oDiv.innerHTML = "<h1>Hello Vue</h1>" + "<h2>Hello Vue</h2>" + "<h3>Hello Vue</h3>";

        // ==== ES6用法 ====

        // 反引号进行字符串的拼接

        // 可用用${}将定义的变量传入网页展示

        let username01 = 'zyk01';

        let username02 = 'zyk02';

        oDiv.innerHTML = `

            <h1>Hello Vue</h1>

            <h2>Hello ${username01}</h2>

            <h3>Hello ${username02}</h3>

        `

    </script>

</body>

3. 数据解构

迭代访问数组或对象

在ES5中，我们访问数组或对象的数据只能一个个访问，但是在ES6中我们可以使用数据的解构。

<script>

    let obj = {

        name: 'zyk',

        sex: 'male',

    };

    let userinfo = ['zyk', 'male'];

    // ==== ES6用法 ====

    // 访问对象

    let {name, sex} = obj;

    // 访问数组

    let [name, sex] = userinfo;

	// 访问对象

    let { name: username, sex: usersex} = obj;

    console.log(username, usersex);  // zyk male

</script>

4. 函数扩展

设置默认值

在ES5中，由于函数不支持设置默认值，所以当遇到需要设置默认值的情况的时候，只能采用变通的方式，不过这种变通的方式会存在一些问题。ES6中引入了函数的默认值参数，解决了这些问题。

<script>

    // ES5中不能使用函数参数默认值，只能采用变通的方法

    // 这种方式会出现一些问题

    function foo01(num) {

        num = num || 2;

        console.log(num);

    }

    foo01(1);  // 1

    foo01();  // 2

    foo01(0);  // 2   问题就在这里，传入整数0就相当于false

    // ES6中引入了函数参数默认值，完美解决了ES5中存在的问题

    function foo02(num=2) {

        console.log(num);

    }

</script>

箭头函数

ES6中引入了箭头函数，其实就相当于Python当中的匿名函数lambda，接下来我们详细看看箭头函数的使用方式以及使用箭头函数时需要注意的地方。

定义箭头函数

// 定义一个箭头函数

var f = v => v;

// 等同于：

var f = function (v) {

	return v;

}

零个或多个参数的函数定义方式如下：

var f = (a, b) => a + b;

如果箭头函数的代码块部分多于一条语句，就需要使用大括号将它们括起来，并且使用return语句返回：

var f = (a, b) => { return a + b; };

// 所以，箭头函数的定义也可以是如下形式：

var f = () => {};

箭头函数的用途

1、箭头函数可以简化代码，比如如下需求：

<script>

    // ==== 判断一个数是否是偶数 ====

    // 普通函数

    function isEven01(num) {

        if (num % 2 === 0) {

            return true

        } else {

            return false

        }

    }

    // 箭头函数

    var isEven02 = n => n % 2 === 0;

</script>

2、箭头函数可以简化回调函数的写法，比如map和sort中的回调函数：

<script>

    // ==== map ====

    let ary = [1, 2, 3];

    //普通函数写法

    let ary01 = ary.map(function (x) {

        return x * x;

    });

    // 箭头函数写法

    let ary02 = ary.map(x => x * x);

    // ==== sort倒序排列数组 ====

    lst = [ 0, 2, 4, 6, 8, 1, 3, 5, 7, 9];

    // 普通函数写法

    lst.sort(function (a, b) {

        return b - a;

    });

    // 箭头函数写法

    lst.sort((a, b) => { return b - a });

</script>

箭头函数的this指向问题

首先，箭头函数中的this不再随着调用它的对象而改变，this对象变成固定的了，它固定的指向该箭头函数被定义时的作用域，而不是像普通函数那样，指向函数调用时的作用域。

<script>

    function foo() {

        console.log(this);

    }

    let obj = {

        func: foo

    };

    foo(1, 2);  // 此时this指向window对象

    obj.func(1, 2);  // 此时this指向obj对象

</script>

下面的代码中this对象指向该箭头函数定义时所在的作用域：

<script>

    function foo() {

        setTimeout(() => {

            console.log('id01:', this.id);

        }, 1000);

        setTimeout(function () {

            console.log('id02:', this.id);

        }, 2000);

    }

    var id = 21;

    foo.call({id: 42});

</script>

这个是非常重要的不同点，也是vue.js中比较常用的一个知识点。

5. 类的定义 class

ES5实例化对象的方式

ES5中我们常使用构造函数的方式，创建一个实例化对象，如下示例：

<script>

    function Person(username, sex, hobby) {

        this.username = username;

        this.sex = sex;

        this.hobby = hobby;

    }

    Person.prototype.showInfo = function () {

        console.log(this.username, this.sex, this.hobby);

    };

    let zyk = new Person('zyk', 'male', 'ES6');

    zyk.showInfo();  // zyk male ES6

</script>

ES6实例化对象方式

ES6给我们引入了class关键字，我们可以使用class关键字来创建一个类：

<script>

    // 类中必须要有constructor方法，如果没有，默认会给一个空的constructor方法：constructor () {};

    // 必须要用new调用，不能直接调用，否则会报错；

    class Person {

        constructor (username, sex, hobby) {

            this.username = username;

            this.sex = sex;

            this.hobby = hobby;

        }

        showInfo () {

            console.log(this.username, this.sex, this.hobby);

        }

    }

    let zyk = new Person('zyk', 'male', 'ES6');

    zyk.showInfo();  // zyk male ES6

</script>

类的继承

如下示例：

<script>

    // 父类

    class Up {

        constructor (user, sex) {

            this.user = user;

            this.sex = sex;

            this.money = 10000;

        }

        showInfo () {

            console.log(this.user, this.sex, this.money);

        }

    }

    // 子类

    class Load extends Up {

        constructor (user, sex) {

            super();  // 子类必须执行super方法

            this.user = user;

            this.sex = sex;

        }

    }

    let zyk = new Load('zyk', 'male');

    // 子类的对象执行父类的方法：

    zyk.showInfo()  // zyk male 10000

</script>

6. 对象的单体模式

如下示例：

<script>

    let obj = {

        name: 'zyk',

        foo01: () => console.log(this.name),

        foo02: () {

            console.log(this.name);

        }

    };

    obj.foo01();  // 												


											
【ES6新增语法详述】的更多相关文章
	

    
								
  1. ECMAScript简介以及es6新增语法
		
    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
    
		
    2. 
						
  2. ES6新增语法和内置对象（let,const, Array/String/Set 扩展方法(解构赋值，箭头函数，剩余参数)）
		
    1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...
    
		
    3. 
						
  3. ES6新增语法(一)——let、const、var的区别
		
    ES6简介 ES6是ECMAScript 6.0的简称,是javascript语言的下一代标准,已经在2015年6月正式发布上线.目的就是为了统一javascript的语法标准,可以用来开发大型应用程 ...
    
		
    4. 
						
  4. 面向对象编程-终结篇 es6新增语法
		
    各位,各位,终于把js完成了一个段落了,这次的章节一过我还没确定下面要学的内容可能是vue也可能是前后端交互,但无论是哪个都挺兴奋的,因为面临着终于可以做点看得过去的大点的案例项目了,先憋住激动地情绪 ...
    
		
    5. 
						
  5. es6新增语法之`${}`
		
    这是es6中新增的字符串方法 可以配合反单引号完成拼接字符串的功能 1.反单引号怎么打出来?将输入法调整为英文输入法,单击键盘上数字键1左边的按键. 2.用法step1: 定义需要拼接进去的字符串变量 ...
    
		
    6. 
						
  6. ES6新增语法(四)——面向对象
		
    ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 ,  ...
    
		
    7. 
						
  7. ES6新增语法(三)——面向对象
		
    ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 ,  ...
    
		
    8. 
						
  8. ES6新增语法(二)——函数和参数
		
    箭头函数 箭头函数:将原来函数的function关键字和函数名都删掉,并使用"=>"连接参数列表和函数体. 箭头函数语法: (参数1,参数2)=>{ 函数体 } 注意点 ...
    
		
    9. 
						
  9. ES6新增语法(七)——async...await
		
    什么是async async的意思是"异步",顾名思义就是有关异步操作的关键字,async 是 ES7 才有的,与我们之前说的Promise.Generator有很大的关联. 使用 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 改变容器Size后，刷新地图大小。
			
    You need to call the API to update map size. http://dev.openlayers.org/docs/files/OpenLayers/Map-js. ...
    
			
    2. 
						
  2. TCP的粘包和拆包问题及解决
			
    前言 TCP属于传输层的协议,传输层除了有TCP协议外还有UDP协议.那么UDP是否会发生粘包或拆包的现象呢?答案是不会.UDP是基于报文发送的,从UDP的帧结构可以看出,在UDP首部采用了16bit ...
    
			
    3. 
						
  3. ubuntu18 + caffe+cpu+anaconda3
			
    本记录只暂时只记录一些错误. 编译错误,opencv3.2与anaconda3下的libtiff不兼容,冲突. 问题查找(查找所有的TIFF库与编译错误提示匹配/usr/lib/x86_64-linu ...
    
			
    4. 
						
  4. Centos7部署jenkins
			
    1.       下载rpm包: a)         下载地址:https://pkg.jenkins.io/redhat-stable/ b)         点选一个下载即可,例如点选:“jen ...
    
			
    5. 
						
  5. 边捆绑: Content Importance Based Edge Bundling for Graph Visualization
			
    Problem 当图所要表达的信息较多时, 图中可能会充满交叉的线[1-2], 甚至整个显示空间都被点.线所覆盖, 这时想通过观察来获取图中的重要信息将会变得非常困难, 这种现象称为图的视觉混乱. K ...
    
			
    6. 
						
  6. StreamPipes
			
    MQTT is a machine-to-machine (M2M)/"Internet of Things" connectivity protocol. It was desi ...
    
			
    7. 
						
  7. LitElement(四)属性
			
    1.概述 LitElement管理您声明的属性及其对应的属性.默认情况下,LitElement将: 确保在任何声明的属性更改时进行元素更新. 捕获已声明属性的实例值.在浏览器注册自定义元素定义之前设置 ...
    
			
    8. 
						
  8. 托管代码中调用c++本地代码
			
    c++本地动态连接库代码 #pragma once #include "stdafx.h" #ifdef PERSON_EXPORTS #define PERSON_API __d ...
    
			
    9. 
						
  9. thinkphp中路由的基本使用
			
    1.在application中下的config.php中 以下代码改为true // 是否开启路由 'url_route_on' => true, // 是否强制使用路由 'url_route_ ...
    
			
    10. 
						
  10. Mysql5.6基础命令
			
    Centos7下mysql5.6数据库的操作 Mysql如何修改密码? 1.使用mysqladmin修改,这种修改方式需要知道mysql的原始密码 修改密码后我们测试下看看能不能登录成功 怎么才能不需 ...
    
			
    11.