目录
ES6
本篇文章只写了ES6部分常用的相较ES5变化的写法,并不全面,详细学习ES6可在官方文档学习。可供参考的地址如下:
官方文档:
https://www.ecma-international.org/publications/standards/Ecma-262.htm
Mozilla 开发者网络(MDN)的 JavaScript 参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
ES6 特性概览:
http://es6-features.org/
let命令
ES5新增了let命令,用来声明变量。用法类似于var,但所声明的变量,只在let命令所在的代码块内有效。
var存在变量提升。
let不存在变量提升,也不允许重复声明。
const声明的是常量。
解构赋值 数组解构 变量解构
var arr=[1,2,3,4,5]
let[a,b,c,d,e]=arr
变量拼接
函数扩展
rest参数
ES6引入rest参数,用于获取函数的实参,用来代替arguments
展开运算符
数组展开到另一个数组里不会去重,
对象展开到另一个对象里会去重。
箭头函数
const materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium'];
console.log(materials.map((material) => material.length));
Es6模块化
模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。
// profile.js
//分别暴露
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export的写法,除了像上面这样,还有另外一种。
// profile.js
//统一暴露
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };
export最后一种写法
//默认暴露
export default {
school: 'ATGUIGU',
change: function(){
console.log("我们可以改变你!!");
}
}
使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。
// main.js
import { firstName, lastName, year } from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
上面代码的import命令,用于加载profile.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。
如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。
import { lastName as surname } from './profile.js';
export default 命令
// export-default.js
export default function foo() {
console.log('foo');
}
// 或者写成
function foo() {
console.log('foo');
}
export default foo;
下面比较一下默认输出和正常输出。
// 第一组
export default function crc32() { // 输出
// ...
}
import crc32 from 'crc32'; // 输入
// 第二组
export function crc32() { // 输出
// ...
};
import {crc32} from 'crc32'; // 输入
上面代码的两组写法,第一组是使用export default时,对应的import语句不需要使用大括号;第二组是不使用export default时,对应的import语句需要使用大括号。
export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。