前言
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异步解决方案,敬请期待!