ES6快速上手 —— 基础篇

Zwe1
835 阅读6分钟

前言

2015年正式通过ECMAScript6标准。前端技术日新月异，现如今ES6已纳入许多企业的开发标准之中。ES6相较ES5有了巨大的变换，新增内容令人目不暇接，看到这冗长的列表目录，是否你也会觉得脑壳疼？
我将在本篇文章中整理出ES6中一些十分利好的技能点，让大家能够更快上手ES6。
本系列文章，目的在于让还不熟悉ES6的同学快速上手，找到一个学习ES6的切入点，想要了解更全面的知识点，需要大家自行摸索。
话不多说，我们开门见山，直接进入正题。

let const

ES6新增了两种变量声明方式。

let: 声明一个块内有效的变量。
const: 声明一个常量，只可赋值一次，且需在声明时初始化值。

let a = 1;
const b = 2;
b = 3; //  Uncaught TypeError: Assignment to constant variable.

还记得，在for循环语句中用var声明变量常发生得意想不到的问题嘛？

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();  //10

这个问题通过let就可以得到很好的解决。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();  //6

const则可以用于声明一些常用的不变值，如 const PI = 3.141。

变量解构赋值

ES6允许按照一定模式，从数组和对象中提取值，这被称为解构。你需要按照目标对象的结构来构造一套映射结构，其中的变量会取对应的值。用通俗的话说，一个萝卜一个坑，成熟时间到了，你挖开对应的坑就可以取到相应的萝卜。

以前为变量赋值，需要一个个指定值。

let a = 1;
let b = 2;

使用解构赋值：

let [a, b, c] = [1,2,3];
a === 1; //true
b === 2; //true
c === 3; //true

坑和萝卜的位置和结构必须一一对应，你才能拿到想要的萝卜。

对象的解构赋值：

var obj = {foo: 'aaa', bar: 'ccc'};
const { foo, bar } = obj;
console.log(foo, bar);// aaa  ccc

模板字符串

以前组合输出变量和字符串时需要用双引号一段段拼接，需要换行尤其头疼，还需要插入换行符，这样既不美观也很难写，现在我们可以使用模板字符串，它更加快捷，并且能够保持你的输出格式。

var name = 'Ein';
console.log(
  `
  hello,
  ${name},
  my dear love!
  `
);
//

  hello,
  Ein,
  my dear!

使用“ ` ”符号包裹你的字符串，变量“ ${ } ”来包裹你的变量，大胆使用空格和换行符，所写即所见，模板字符串会完全保留你的输入格式。

箭头函数

箭头函数可以让你的代码更优雅，你无需再一遍又一遍的拼写“function”。

var f = funciton (v) {
  return v;
};

同下：

var f = (v) => {return v};

只有一个参数时，可以省略小括号。函数体只有一条语句时，可以省略大括号，若这条语句是一个值，将作为函数的返回值。

var f = v => v;

注意： 箭头函数会绑定this到函数定义时所在的对象，这有时是一个优势点，代替bind和call方法。有时也会造成意想不到的问题。

函数参数默认值

ES6之前，如果要为函数参数添加默认值，你需要这样写。

function log(y) {
  y = y || 'ein';
  console.log('hello ' + y);
};

log('world');  //hello world
log(); //hello ein
log(''); //hello ein

这种写法的缺点在于，如果参数y转化为布尔值后值为false，则该赋值不起作用。

使用ES6，添加默认参数

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
};

const p = new Point(); //{x: 0, y: 0}

双冒号运算符（绑定this）

ES6之前绑定this,我们需要使用bind,call,apply等方法，ES6中我们可以使用箭头函数，但是箭头函数在某些场合也不适用。我们可以使用双冒号来绑定this。

bar.bind(foo);
//等同于
foo::bar

bar.apply(foo, arguments);
//等同于
foo::bar(...arguments);

class

ES6的最重要改进，大概是在写法上更加贴近于面向对象语言了。class关键字的引入，让Javasript更加优美。 如果在使用高版本React，你一定对class不会陌生。

ES6之前生成实例对象的常用方法是使用构造函数。

function Prophet (x, y) {
  this.x = x;
  this.y = y;
};
Prophet.prototype.intro = function () {
  console.log(`I'm a prophet, I have ${this.x} and ${this.y}!`);
};

var p  = new Prophet('soul', 'special power');

p.intro();
//I'm a prophet, I have soul and special power!

ES6的class可以看作只是一个语法糖，作为对象的模板，使用class关键字，可以定义类。上面的例子可以这样写：

class Prophet {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  intro () {
    console.log(`I'm a prophet, I have ${this.x} and ${this.y}!`);
  }
};

let p = new Prophet();

通过类构建对象实例的方法和使用构造函数相同，通过new操作符生成一个类的实例对象,不适用new会报错。

p.constructor === Prophet.prototype.constructor //true

Prophet.prototype
//{constructor: ƒ, intro: ƒ}

类的所有方法都定义在类的prototype属性上面。

super关键字

The super keyword is used to access and call functions on an object's parent. (摘自MDN)
作用：super关键字用于访问和调用对象父类上的函数。

  • super关键字可以当函数调用，也可以当作对象使用。

super作为函数调用，代表父类的构造函数。

class A {};
class B extends A {
  constructor() {
    super();
  }
}`

Module

为了更好的构建大型的，复杂的项目，Javascript需要支持模块体系，ES6引入了模块语法。

  • 通过export和import命令来导出和导入模块。

export

一个模块就是一个独立的文件，该文件内部的变量，外部无法获取。export命令可以对外部开放访问权限。

export let name = 'zwei';
export let age = 1000;
export let sex = 'male';

let name = 'zwei';
let age = 1000;
let sex = 'male';

export { name, age, sex };

上面两种方法都可以输出变量，少量变量可以采用第一种方式；若存在许多变量需要输出，第二种写法会更加清晰直观，便于阅读。
export 命令同样可以输出函数或类（clss）。

重命名

根据需要可以使用as关键字对输出的变量进行重命名。

export {
  p1 as name,
  p2 as age,
  p3 as sex
};

export dafalut

export default class Tree extends React.Component {}

export default命令用于指定模块的默认输出。

import

模块中的变量输出后，我们便具备了访问权限。但要使用这些模块中的变量，还需要使用import命令引入模块。 我们此前所输出的三个变量在名为'utils.js'的文件中。

import { name, age, sex } from 'utils.js';

function say () {
  console.log(`my name is ${name}, I'm ${age} years old, I'm a ${sex}`);
};

整体加载

import * as variables from 'utils.js';

function say () {
  console.log(`my name is ${variables.name}, I'm ${variables.age} years old, I'm a ${variables.sex}`);
};

根据你要使用的情况，引入变量，名称需要与输出的变量名称相同，接着便可以使用了。

后续

本篇文章对ES6中常用的一些功能点进行了简单介绍，旨在引导大家快速了解ES6语法，并未对各个知识点进行详细讲解，需要深入学习可以查找其它资料。

后续还将介绍ES6中一些简单方便的API以及强大的js异步解决方案，敬请期待！

avatar
文章
阅读
粉丝