0基础前端学习---第九天-CSDN博客

本文链接：https://blog.csdn.net/qq_47807509/article/details/142636246

ES6

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命令。