【ES6新增语法详述】 𳞰

目录

  • 1. 变量的定义

    • let
    • const
  • 2. 模版字符串
  • 3. 数据解构
  • 4. 函数扩展
    • 设置默认值
    • 箭头函数
  • 5. 类的定义 class
  • 6. 对象的单体模式

原文: http://blog.gqylpy.com/gqy/275

"@

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();  // ??
    obj.foo02();  //zyk
</script>

"

原文: http://blog.gqylpy.com/gqy/275

原文地址：https://www.cnblogs.com/gqy02/p/11368099.html

时间： 2024-12-30 07:34:57

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

ECMAScript简介以及es6新增语法

ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的规格,后者是前者的实现.但通常两者是可互换的.) ESMAScript的历史 1996年11月,Netscape公司将Js提交给国际化标准组织ECMA,当初该语言能够成为国际化标准. 1997年,ECMAScript 1.0版本推出.(在这年,ECMA发布262号标准文件(ECMA-262)的第一版

ES6 新增语法

为什么是 ES6 每一次标准的诞生都意味着语言的完善,功能的加强, JavaScript 语言本身也有一些令人不满意的地方 变量提升特性增加了程序运行时的不可预测性 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码 ES6 新增语法 let ES6 中新增的用于声明变量的关键字 let 声明的变量只在所处的块级有效 防止循环变量变成全局变量 不存在变量提升 暂时性死区 和 let 所在的块级区域进行绑定 注意:使用 let 关键字声明的变量才具有块级作用域,使用 var 声明的变量不具

ES6新增语法总结

Array.prototype.keys():返回以索引值为遍历器的对象 1.Let 和 Const 在ES6以前,JS只有var一种声明方式,但是在ES6之后,就多了let跟const这两种方式.用var定义的变量没有块级作用域的概念,而let跟const则会有,因为这三个关键字创建是不一样的   var let const 变量提升 + - - 全局变量 + - - 重复赋值 + + - 重复声明 + - - 暂时死区 - + + 块作用域 - + + 只声明不赋值 + + - 2.类(Cl

ES6 数组新增语法

ES6新增语法 /* Array.from(类数组); 把一个类数组转换成一个真正的数组 类数组: 有下标有length; 返回值:转换之后的新数组 属于Array构造函数下面的方法,不是数组方法; */ { let aLis = document.querySelectorAll("#list li"); console.log(aLis); // { // aLis.map(item=>{ // return item; // }); // } { aLis = Array.

总结常见的ES6新语法特性

总结常见的ES6新语法特性 ES6给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>).class等等.用一句话来说就是: ES6给我们提供了许多的新语法和代码特性来提高javascript的体验 不过遗憾的是,现在还没有浏览器能够很好的支持es6语法,点这里查看浏览器支持情况,所以我们在开发中还需要用babel进行转换为CommonJS这种模块化标准的语法. 因为下面我会讲到一些es6新特性的例子,如果想要

ES6常用语法

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel. Babel Babel是一个广泛使用的ES6转码器,可以将

在es6的语法下 对象的构造和继承实例

es6新增了class 类 可以更方便的创建和继承对象的属性和方法 但是这个class 只是一个语法糖 让创建对象的形式更加简便和直观下面是对该方法的简单实践 //es6 实例化对象和继承 class 新语法 class person{ constructor(name,age){ this.name=name this.age=age } } const person1=new person('bob',25) console.log(person1.age)//25 //extends 继承

ES6新语法之---对象字面量扩展、模板字符串(5)

这节课学习ES6中对象字面量扩展和新增模板字符串 第一部分:对象字面量扩展 1.简洁写法 ES6对于对象字面量属性提供了简写方式. 1.1:属性简写 //传统写法 var x = 2, y = 3, o = { x: x, y: y }; //ES6简洁写法 var x = 2, y = 3, o = { x, //属性名和赋值变量名相同时,可简写 y }; 1.2:方法简写 //传统写法 var o = { x: function() { //... }, y: function() { //

es6基本语法

//let和const申明变量和常量 //作用域只限于当前代码块 //使用let申明的变量作用域不会提升 //在相同的作用域下不能申明相同的变量 //for循环体现let的父子作用域 二.es6的解构赋值:一一对应 数组: let [name, age, sex] = ["Samve", 30, "men"]; console.log(name); console.log(age); console.log(sex); 对象: let {name, age, sex