教你学会常用的ES6语法

发布时间:2019-08-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了教你学会常用的ES6语法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_360_1@教你学会常用的ES6语法,不常用的遇到再手册,当然有时间还是整体看一遍官方文档。

letconst命令

let命令

不存在变量提升
console.LOG(ss); //undefined
console.log(xx); //报错
VAR ss = 'a';
let xx = 'b';

var存在变量提提升,实际执行

var ss;
console.log(ss); //undefined
console.log(xx); //报错
ss = 'a';
let xx = 'b';
暂时性死区

ES6明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。
凡是在声明之前就使用这些变量,就会报错。

不允许重复声明

let不允许在相同作用域内,重复声明同一个变量。无论是使用var 或者 let

块级作用域与函数声明

ES6引入了块级作用域,明确允许在块级作用域之中声明函数。
并且ES6规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

const命令

依然存在以下属性

  • 暂时性死区

  • 不存在变量提升

  • 块级作用域

  • 不允许重复声明

新属性

  • 后续不能进行赋值操作

  • 一旦声明变量,就必须立即初始化

顶层对象的属性

ES6为了改变一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从ES6开始,全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
// 如果在Node的REPL环境,可以写成global.a
// 或者采用通用方法,写成this.a
window.a // 1
let b = 1;
window.b // undefined

变量的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
(个人理解就是对象、字符串、数组的取值和赋值),有需要看参考资料

class, extendssuper

class Animal {
    constructor(){
        this.tyPE = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

代码解读

  • class定义了一个“类”,构造(constructor)方法。

  • this关键字则代表实例对象。constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

  • Class之间通过extends关键字实现继承

  • super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。

  • 子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

arrow function

function(x, y) {
    x++;
    y--;
    return x + y;
}
(x, y) => {x++; y--; return x+y}

ES5与ES6对比

ES5: function name(参数) {运算表达式;return 表达式}

ES6: (参数) => {运算表达式;return 表达式}

箭头函数解决this指向问题

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

template string

这个东西也是非常有用,当我们要插入大段的htML内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库,比如mustache等等

# ES5
$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);

我们要用一堆的'+'号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:

# ES6
$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

用反引号()来标识起始,用${}`来引用变量,而且所有的空格和缩进都会被保留在输出之中.

default, rest

default简单意思就是默认值。大家可以看下面的例子,调用animal()方法时忘了传参数,传统的做法就是加上这一句type = type || 'cat' 来指定默认值。

function animal(type = 'cat'){
    console.log(type)
}
animal()

最后一个rest语法也很简单,直接看例子:

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'Fish') //["cat", "dog", "fish"]

import export

es6的module模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种CommonJS(服务器端)和amD(浏览器端,如require.js)。

ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。

对比CommonJs 、AMD和ES6

假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果,我们要怎么做呢?

AMD写法

content.js

define('content.js', function(){
    return 'A cat';
})

index.js

require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})
CommonJS写

content.js

module.exports = 'A cat'

index.js

var animal = require('./content.js')
ES6写法

content.js

export default 'A cat'

index.js

import animal From './content'

export

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个JS文件,里面使用export命令输出变量。

// PRofile.js
var FirstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
# 使用 as关键字 可以重命名对外接口
export {firstName, lastName as ss, year};

注意

export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

import

import命令具有提升效果,会提升到整个模块的头部,首先执行。

fu();
import { foo as fu} from 'my_module';

注意

export命令规定的是对外的接口,import接口需要与export对外接口对应。

ES6 module的其他用法

export default命令

import $ from 'jquery'; #写法是不是很常见?

使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。
为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

// 输出 content.js
function foo() {
  console.log('foo');
}
export default foo;

// 输入
inport aa form 'content.js';

注意

export default默认输出只有一个,对应import文件不用使用{},由于默认输出只有一个,所以export default 只能使用一次

module的整体加载

除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

# 输出 test.js
function a (){
    console.log('a');
}
function b (){
    console.log('b');
}
export {a,b};

# 输入
import * as obj from 'test.js'
obj.a();
obj,b();

ESLint

ESLint是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

  • 全局安装ESLint

$ npm install -g eslint
  • 安装airbnb语法规则

$ npm install -g eslint-conifg-airbnb
  • 项目的根目录下创建.eslintrc 文件

{
  "extends": "eslint-config-airbnb"
}
  • 使用ESLint检查某个文件

$ eslint index.js

参考资料

脚本宝典总结

以上是脚本宝典为你收集整理的教你学会常用的ES6语法全部内容,希望文章能够帮你解决教你学会常用的ES6语法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。