ES6新语法

image

1. 变量声明关键字

参考

  1. wsmrzx JavaScript系列
关键字 作用域 变量是否提升 能否重复定义
var 函数作用域
let、const 块级作用域
  • var声明的变量若是在函数外声明的将会变成全局变量,在浏览器环境中将会被挂载到window对象上,在Node中将会被挂载到Global对象上,但是let、const声明的全局变量在全局中可以使用但是不会被挂载
  • var声明的变量会有变量提升,但是const、let声明的变量不会
  • var可以多次声明同名变量,但是const、let不可以
  • const一旦声明必须赋值,且声明后不能再修改

2. for...of

The for...of statement creates a loop iterating(循环迭代) over iterable objects(迭代对象), including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes(调用) a custom iteration hook with statements to be executed for the value of each distinct(不同的) property of the object.

在其中可以使用 continuebreak 语句

3. 模板字符串

参考 模板字符串使用方法

在ES6之前使用模板字符串比较繁琐,比如在innerHTML中使用时需要很多括号,需要+连接等等,但是ES6中变得简单,直接使用反引号 ` 括起来就可以,其中的模板字符串用 `(反引号)标识,用 ${ } 将变量括起来,里面也可以放表达式,甚至是方法。模板字符串该可以嵌套,也就是在 ${ } 中再引入一个模板

ES5: .innerHTML = 'My name is <b>' + name + '</b> and my age is <font color="green">' + age + '</font>';

ES6: innerHTML = `My name is <b>${name}</b> and my age is <font color="green">${age}</font>`;

4. 解构语法

参考

  1. wsmrzx ES6新特性

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

      var a, b, rest;
      [a, b] = [10, 20];
      console.log(a); // 10
      console.log(b); // 20

      [a, b, ...rest] = [10, 20, 30, 40, 50];
      console.log(a); // 10
      console.log(b); // 20
      console.log(rest); // [30, 40, 50]

      ({ a, b } = { a: 10, b: 20 });
      console.log(a); // 10
      console.log(b); // 20


      // Stage 4(已完成)提案中的特性
      ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
      console.log(a); // 10
      console.log(b); // 20
      console.log(rest); // {c: 30, d: 40}

5. 拓展运算符

参考

  1. MDN Spread syntax
  2. es6 扩展运算符 三个点(...)

也叫展开语法(Spread syntax),指的是可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

      function sum(x, y, z) {
      return x + y + z;
      }

      const numbers = [1, 2, 3];

      console.log(sum(...numbers));
      // expected output: 6

      console.log(sum.apply(null, numbers));
      // expected output: 6

语法

  • 函数调用:myFunction(...iterableObj);
  • 字面量数组构造或字符串:[...iterableObj, '4', ...'hello', 6];
  • 构造字面量对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性):let objClone = { ...obj };

6. 默认参数

参考

  1. MDN Default_parameters

ES6可以设置参数的默认值

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

      Syntax:
      function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
         statements
      }  


      function multiply(a, b = 1) {
      return a * b;
      }

      console.log(multiply(5, 2));
      // expected output: 10

      console.log(multiply(5));
      // expected output: 5

7. 箭头函数

参考

  1. MDN 箭头函数

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

      const materials = [
      'Hydrogen',
      'Helium',
      'Lithium',
      'Beryllium'
      ];

      console.log(materials.map(material => material.length));
      // expected output: Array [8, 6, 7, 9]

8. Class

参考

  1. MDN Classes

实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。

注意和函数声明不一样,类声明不会提升

      class Rectangle {
      constructor(height, width) {
         this.height = height;
         this.width = width;
      }
      }

附加

之前看过作用域以及作用域链的内容,这里再次温习

参考

  1. JavaScript学习笔记(十一) 闭包

当定义一个函数时,就会保存一个作用域链;当调用这个函数时,就会创建一个新的对象用于保存局部变量,然后将这个对象添加到保存的作用域链上,并且创建一个新的作用域链表示函数调用的作用域,当函数返回的时候,就会从保存的作用域链上删除这个对象,但是这并不意味着对象马上就被当作垃圾回收,因为按照 JavaScript 的垃圾回收机制,只有当对象没有被引用的时候,才会被 JavaScript 回收

闭包的理解

如果一个函数内部包含嵌套函数(但是没有返回嵌套函数),那么外部函数返回后,嵌套函数也被回收,闭包的核心在于一个函数包含嵌套函数,并且返回这个嵌套函数,这时就有一个外部的引用指向这个嵌套的函数,这个嵌套函数就不会被当作垃圾回收,它所对应的作用域链也被保存下来。

因此闭包的缺点就是作用域链不能释放,会造成内存泄露。

      var global_scope = 'global'

      function outer_function(outer_params) {
         var outer_scope = outer_params
         console.log(outer_scope)
         var inner_function = function (inner_params) {
            var inner_scope = inner_params
            console.log(outer_scope)
            console.log(inner_scope)
         }
         return inner_function
      }
      outer_function('Tian')('hui')
      // 输出
      // Tian
      // Tian
      // hui

关于闭包的作用 参考 JavaScript 闭包

  1. 实现公有变量
  2. 做缓存
  3. 实现封装,属性私有化
  4. 模块化开发,放置污染全局变量

学技术、骑摩托

19 声望
0 粉丝
0 条评论
推荐阅读
JavaScript数据类型及变量
JavaScript的变量是松散型变量,和之前在python中的 动态机 很类似,这让我想起了之前的一篇讲python变量的文章,松散型指的是变量可以存任何类型数据,所谓变量只是仅仅是存值的占位符而已。如下操作完全没问题...

HuiDT阅读 1.3k

掌握TypeScript:10个最佳实践提高代码质量
TypeScript 是一种强类型的 JavaScript 超集,提供了很多优秀的工具和语言特性,可以帮助开发者提高代码质量和开发效率。在本文中,我们将介绍 10 个 TypeScript 最佳实践,帮助初级和中级的 Web 前端开发工程师...

pingan87874阅读 1.4k

封面图
ES6 class extends
class 是对原型继承的一种语法糖的包装。那相对于原型继承,它有什么优点呢?我们来先看一个典型的基于原型链继承的例子。部分内容来自“Javascript高级程序设计”

anleo3阅读 2.5k评论 2

头脑风暴问题而不是想法
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智1阅读 1.2k

well-known Symbol ES6 暴露内部操作
ES5的一个中心主旨是将JavaScript中的一些“神奇”的部分暴露出来,并详尽定义了这些开发者们在当时模拟不了的功能。ES6延续了这个传统,新标准中主要通过在原型链上定义与Symbol相关的属性来暴露更多的语言内部逻...

anleo1阅读 2.5k

职业建议:辞职时提前通知很重要
本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。更多开源作品请看 GitHub [链接] ,包含一线大厂面试完整考点、资料以及我的系列文章。

前端小智1阅读 458

TypeScript系列:【3】类
基础说明先来看个例子: {代码...} 这样,我们就定义了一个类,包含一个属性用于保存名称,一个构造器用于创建的时候设置名称,方法say用于获取名称描述: {代码...} 打印的结果就是:“你好,我是小强”。公共,私...

zxl200707011阅读 957

学技术、骑摩托

19 声望
0 粉丝
宣传栏