ES6 新增功能点整理

学习文档地址：https://www.runoob.com/w3cnote/es6-tutorial.html

注意：本文是作者自己学习时做到记录，不作为es6的学习材料。杠精勿扰！

 

1、webpcak  打包工具

详细资料参考webpack中文文档  https://www.webpackjs.com/concepts/

这篇文章学习文章还可以 ：https://www.jianshu.com/p/6aee48560403

范例

const path = require('path');

module.exports = {
    mode: 'production',
    // 入口文件配置
    entry: './js/test.js',
    // 输出配置
    output: {
        // 出口文件
        filename: 'bundle.js',
        // 设置全路径
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        // 规则数组, 里面的每一个对象都是在描述一个loader
        rules: [
            {
                //css文件加载，正则表达式css文件的路径
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                图片文件加载
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        query: {
                            name: 'img/[name]-[hash:5].[ext]'
                        }
                    },
                ],
            },
        ]
    },
    devServer:{
        contentBase: './dist'
    }
};

常用loader：

 ① ES6语法转化    babel-loader

 ② 打包CSS   style-loader、css-loader

 ③ 图片路径处理  url-loader  

④ html-withimg-loader   解决HTML文件中引入 Img标签的问题

⑤ extract-text-webpack-plugin   CSS与Js分离（一般不推荐）

⑥ 自动处理CSS3属性前缀  postcss-loader 和 autoprefixer

⑦ 消除冗余的CSS样式  purifycss-webpack

⑧ 图片压缩         image-webpack-loader

常用插件(plugins)

① html-webpack-plugin  插件    HTML文件的发布

② 配置JS压缩  uglifyjs-webpack-plugin

2、gulp 自动化构建工具

详细资料参考 gulp  中文网 https://www.gulpjs.com.cn/docs/getting-started/quick-start/

这篇文章作为入门还可以  https://blog.csdn.net/weixin_43932245/article/details/90212725

常用的gulp插件： 

• 编译Lass (gulp-lass) 
• Autoprefixer (gulp-autoprefixer) 
• 缩小化(minify)CSS (gulp-minify-css) 
• JSHint (gulp-jshint) 
• 拼接 (gulp-concat) 
• 丑化(Uglify) (gulp-uglify) 
• 图片压缩 (gulp-imagemin) 
• 即时重整(LiveReload) (gulp-livereload) 
• 清理档案 (gulp-clean) 
• 图片快取，只有更改过得图片会进行压缩 (gulp-cache) 
• 更动通知 (gulp-notify)

 

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');   图片压缩
var cleanCSS = require('gulp-clean-css');  css压缩
 
// 检查脚本
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译less
gulp.task('less', function() {
    gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('lib.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('build_dev', function(){
    gulp.run('lint', 'less', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'less', 'scripts');
    });
});

运行gulp，执行命令为： gulp build_dev

 

3、新的关键字 let 、 const

let

1. 作用域在当前代码块  （var 是全局）
2. 不能重复声明
3. let 不存在变量提升，var 会变量提升（let的字段需要先声明在使用）:

const

1. 定义只读变量，值不能变化（尽量值定义简单常量，不要定义复合类型）
2. 一旦声明必须初始化，否则会报错

for 循环计数器很适合用 let

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}
// 输出十个 10
for (let j = 0; j < 10; j++) {
  setTimeout(function(){
    console.log(j);
  })
}
// 输出 0123456789

变量 i 是用 var 声明的，在全局范围内有效，所以全局中只有一个变量 i, 每次循环时，setTimeout 定时器里面的 i 指的是全局变量 i ，而循环里的十个 setTimeout 是在循环结束后才执行，所以此时的 i 都是 10。

变量 j 是用 let 声明的，当前的 j 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出 12345。（若每次循环的变量 j 都是重新声明的，如何知道前一个循环的值？这是因为 JavaScript 引擎内部会记住前一个循环的值）。

 

4、解构赋值

解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

• 解构的源，解构赋值表达式的右边部分。

• 解构的目标，解构赋值表达式的左边部分。

可嵌套 、可忽略 、不完全解构 、解构默认值

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

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

剩余运算符...

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

 

5、数据类型 Symbol  

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。 

Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"
 
// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
sy === sy1;       // false

注意点

Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for...in 、 for...of 的循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

Symbol.for()

Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。

let yellow = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow === yellow1;      // false
 
let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2;     // true
Symbol.keyFor()

Symbol.keyFor()

Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。

 

6、Map 对象

Maps 和 Objects 的区别:

• 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。

• Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。

• Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。

• Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

forEach()

var myMap = new Map();
 myMap.set(0, "zero");
 myMap.set(1, "one"); 
// 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one" 
myMap.forEach(function(value, key) { 
console.log(key + " = " + value); 
}, myMap)

for...of

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
/* 这个 entries 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。 */
 
// 将会显示两个log。 一个是 "0" 另一个是 "1"
for (var key of myMap.keys()) {
  console.log(key);
}
/* 这个 keys 方法返回一个新的 Iterator 对象， 它按插入顺序包含了 Map 对象中每个元素的键。 */
 
// 将会显示两个log。 一个是 "zero" 另一个是 "one"
for (var value of myMap.values()) {
  console.log(value);
}
/* 这个 values 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的值。 */

Map 对象的操作

//Map 与 Array的转换
var kvArray = [["key1", "value1"], ["key2", "value2"]];
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
 // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);


//Map 的克隆
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
 console.log(original === clone); 
// 打印 false。 Map 对象构造函数生成实例，迭代出新的对象。


//Map 的合并

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
 // 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);

 

7、set 对象

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：

• +0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；

• undefined 与 undefined 是恒等的，所以不重复；

• NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。

// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];
String
// String 转 Set
var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法是不能将 Set 转换成 String

Set 对象作用

//数组去重
var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

//并集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

//交集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

//差集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

 

8、Reflect 与 Proxy

Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

let target = {
    name: 'Tom',
    age: 24
}
let handler = {
    get: function(target, key) {
        console.log('getting '+key);
        return target[key]; // 不是target.key
    },
    set: function(target, key, value) {
        console.log('setting '+key);
        target[key] = value;
    }
}
let proxy = new Proxy(target, handler)
proxy.name     // 实际执行 handler.get
proxy.age = 25 // 实际执行 handler.set
// getting name
// setting age
// 25

注意：通过构造函数新建实例时其实是对目标对象进行了浅拷贝，因此目标对象与代理对象会互相影响

target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为

1. get(target, propKey, receiver)

2. set(target, propKey, value, receiver)//receiver 表示原始操作行为所在对象，一般是 Proxy 实例本身。

3. ownKeys(target)//用于拦截对象自身属性的读取操作。主要包括以下操作：

4. apply(target, ctx, args)//用于拦截函数的调用、call 和 reply 操作。target 表示目标对象，ctx 表示目标对象上下文，args 表示目标对象的参数数组。

5. has(target, propKey)//用于拦截 HasProperty 操作，即在判断 target 对象是否存在 propKey 属性时，会被这个方法拦截。此方法不判断一个属性是对象自身的属性，还是继承的属性。

6. construct(target, args)//用于拦截 new 命令。返回值必须为对象。

7. deleteProperty(target, propKey)//用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，propKey 属性就无法被 delete 命令删除。

8. defineProperty(target, propKey, propDesc)//用于拦截 Object.definePro若目标对象不可扩展，增加目标对象上不存在的属性会报错；若属性不可写或不可配置，则不能改变这些属性。

9. getOwnPropertyDescriptor(target, propKey)//用于拦截 Object.getOwnPropertyD() 返回值为属性描述对象或者 undefined 

10. getPrototypeOf(target)//主要用于拦截获取对象原型的操作。包括以下操作：

 

Reflect 可以用于获取目标对象的行为（内部方法），它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。

 

9、 字符串

• includes()：返回布尔值，判断是否找到参数字符串。

• startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。

• endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

• repeat():字符串重复

• padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。

• padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true

模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。模板字符串中的换行和空格都是会被保留的

let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.

//当模板字符串中带有变量，会将模板字符串参数处理成多个参数。
function f(stringArr,...values){
 let result = "";
 for(let i=0;i<stringArr.length;i++){
  result += stringArr[i];
  if(values[i]){
   result += values[i];
        }
    }
 return result;
}
let name = 'Mike';
let age = 27;
f`My Name is ${name},I am ${age+1} years old next year.`;
// "My Name is Mike,I am 28 years old next year."
 
f`My Name is ${name},I am ${age+1} years old next year.`;
// 等价于
f(['My Name is',',I am ',' years old next year.'],'Mike',28);

注意：模板字符串中的换行和空格都是会被保留的

 

国际化处理（转化多国语言）

i18n`Hello ${name}, you are visitor number ${visitorNumber}.`;

 

10、数字

二进制表示法新写法: 前缀 0b 或 0B 。

常量  

1. 最小误差值:        Number.EPSILON 

2. 最大安全整数    Number.MAX_SAFE_INTEGER   

3. 最小安全整数     Number.MIN_SAFE_INTEGE

方法

1. Number.isFinite() //一个数值是否为有限的

2. Number.parseInt()//转换为整数 ，无法被解析成浮点数，则返回 NaN

3. Number.isSafeInteger //用于判断数值是否在安全范围内。

4. Number.isInteger  //用于判断给定的参数是否为整数。

整数和浮点数采用的是同样的储存方法,因此 1 与 1.0 被视为相同的值

数字处理

1. Math.trunc：用于返回数字的整数部分。

2. Math.fround：用于获取数字的32位单精度浮点数形式。

3. Math.sign：判断数字的符号（正、负、0）

 

11、ES6 对象

属性的简洁表示法 ，ES6允许对象的属性直接写变量，这时候属性名是变量名，属性值是变量值。

const age = 12;
const name = "Amy";
const person = {age, name};
person   //{age: 12, name: "Amy"}
//等同于
const person = {age: age, name: name}

方法名也可以简写，如果是Generator 函数，则要在前面加一个星号:

 

ES6允许用表达式作为属性名，但是一定要将表达式放在方括号内。

const obj = {
 ["he"+"llo"](){
   return "Hi";
  }
}
obj.hello();  //"Hi"

注意点：属性的简洁表示法和属性名表达式不能同时使用，否则会报错。

 

拓展运算符（...）

用于取出参数对象所有可遍历属性然后拷贝到当前对象。

可用于合并两个对象
let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
person;  //{age: 15, name: "Amy"}

对象的新方法

• Object.assign(target, source_1, ···)用于将源对象的所有可枚举属性复制到目标对象中。

              assign 的属性拷贝是浅拷贝，同名属性后面的替换前面的

• Object.is(value1, value2)用来比较两个值是否严格相等，与（===）基本类似。

基本用法

Object.is("q","q");      // true
Object.is(1,1);          // true
Object.is([1],[1]);      // false
Object.is({q:1},{q:1});  // false
与（===）的区别

//一是+0不等于-0
Object.is(+0,-0);  //false
+0 === -0  //true
//二是NaN等于本身
Object.is(NaN,NaN); //true
NaN === NaN  //false

 

 

12、数组

• Array.of()将参数中所有值作为元素形成数组。

• Array.from(arrayLike[, mapFn[, thisArg]]) 将类数组对象或可迭代对象转化为数组。

   arrayLike 想要转换的类数组对象或可迭代对象。

        mapFn 可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。

        thisArg 可选，用于指定 map 函数执行时的 this 对象。

let map = {
    do: function(n) {
        return n * 2;
    }
}
let arrayLike = [1, 2, 3];
console.log(Array.from(arrayLike, function (n){
    return this.do(n);
}, map)); // [2, 4, 6]

类数组对象

一个类数组对象必须含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符。

 

扩展方法

find()查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

findIndex()查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。

let arr = Array.of(1, 2, 1, 3);
// 参数1：回调函数
// 参数2(可选)：指定回调函数中的 this 值
console.log(arr.findIndex(item => item = 1)); // 0
 
// 数组空位处理为 undefined
console.log([, 1].findIndex(n => true)); //0

fill()  将一定范围索引的数组元素内容填充为单个指定的值。

let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

copyWithin()  将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。

 

// 参数1：被修改的起始索引
// 参数2：被用来覆盖的数据的起始索引
// 参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾
console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4]
 
// 参数1为负数表示倒数
console.log([1, 2, 3, 4].copyWithin(-2, 0)); // [1, 2, 1, 2]
 
console.log([1, 2, ,4].copyWithin(0, 2, 4)); // [, 4, , 4]

includes()数组是否包含指定值。

flat()嵌套数组转一维数组

flatMap()  先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。

// 参数1：遍历函数，该遍历函数可接受3个参数：当前元素、当前元素索引、原数组
// 参数2：指定遍历函数中 this 的指向
console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]

复制数组

let arr = [1, 2],
    arr1 = [...arr];
console.log(arr1); // [1, 2]
 
// 数组含空位
let arr2 = [1, , 3],
    arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]

合并数组
console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]

 

 

13、函数

默认参数 

function fn(name,age=17){
 console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17

只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。

注意点：使用函数默认参数时，不允许有同名参数。

不定参数

不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。

箭头函数

箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。

//适合使用的场景

// 回调函数
var Person = {
    'age': 18,
    'sayHello': function () {
      setTimeout(function () {
        console.log(this.age);
      });
    }
};
var age = 20;
Person.sayHello();  // 20
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18

//不适合使用的场景
//定义函数的方法，且该方法中包含 this

var Person = {
    'age': 18,
    'sayHello': ()=>{
        console.log(this.age);
      }
};
var age = 20;
Person.sayHello();  // 20
// 此时 this 指向的是全局对象
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
        console.log(this.age);
    }
};
var age = 20;
Person1.sayHello();   // 18
// 此时的 this 指向 Person1 对象

 

 

14、迭代器

Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：

• 迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。

• 迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。

可迭代的值:

• Array
• String
• Map
• Set

普通对象不可迭代

of 操作数必须是可迭代，这意味着如果是普通对象则无法进行迭代。如果数据结构类似于数组的形式，则可以借助 Array.from() 方法进行转换迭代

const arrayLink = {length: 2, 0: "zero", 1: "one"}
// 报 TypeError 异常
for (let item of arrayLink) {
  console.log(item);
}
 
// 正常运行
// output:
// zero
// one
for (let item of Array.from(arrayLink)) {
  console.log(item);
}

 

 

15、Class 类

class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。

类中方法不需要 function 关键字。

方法间不能加分号。

• name：属性返回跟在 class 后的类名(存在时)。

• constructor：方法 类的默认方法，创建类的实例化对象时被调用。

• new ：class 的实例化必须通过 new 关键字。

• extends：通过 extends 实现类的继承。

 

 

16、export 与 import

导出（export） @与导入（import）两个模块。

模块导入导出各种类型的变量，如字符串，数值，函数，类。

• 导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。 

• 不仅能导出声明还能导出引用（例如函数）。

• export 命令可以出现在模块的任何位置，但必需处于模块顶层。

• import 命令会提升到整个模块的头部，首先执行。

/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
 
/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!
//建议使用大括号指定所要输出的一组变量写在文档尾部，明确导出的接口。
//函数与类都需要有对应的名称，导出文档尾部也避免了无对应名称。

 

import 命令的特点

• 只读属性：不允许在加载模块的脚本里面，改写接口的引用指向，即可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值。

•  单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。

•  静态执行特性：import 是静态执行，所以不能使用表达式和变量。

export default 命令

• 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。

• export default 中的 default 是对应的导出接口变量。

• 通过 export 方式导出，在导入时要加{ }，export default 则不需要。

• export default 向外暴露的成员，可以使用任意变量来接收。

 

 17、Promise 对象

Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

const p1 = new Promise(function(resolve,reject){
    resolve('success1');
    resolve('success2');
}); 
const p2 = new Promise(function(resolve,reject){  
    resolve('success3'); 
    reject('reject');
});
p1.then(function(value){  
    console.log(value); // success1
});
p2.then(function(value){ 
    console.log(value); // success3
});

状态的缺点：

无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。

如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。

当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

then 方法

then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

在 JavaScript 事件队列的当前运行完成之前，回调函数永远不会被调用。

const p = new Promise(function(resolve,reject){
  resolve('success');
});
 
p.then(function(value){
  console.log(value);
});
 
console.log('first');
// first
// success

注意点

简便的 Promise 链式编程最好保持扁平化，不要嵌套 Promise。

注意总是返回或终止 Promise 链。

 

18、Generator 函数

ES6 新引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。Generator 有两个区分于普通函数的部分：

• 一是在 function 后面，函数名之前有个 * ；

• 函数内部有 yield 表达式。

其中 * 用来表示函数为 Generator 函数，yield 用来定义函数内部的状态。

function* func(){
 console.log("one");
 yield '1';
 console.log("two");
 yield '2'; 
 console.log("three");
 return '3';
}

执行机制

调用 Generator 函数和调用普通函数一样，在函数名后面加上()即可，但是 Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针，所以要调用遍历器对象Iterator 的 next 方法，指针就会从函数头部或者上一次停下来的地方开始执行

f.next();
// one
// {value: "1", done: false}
 
f.next();
// two
// {value: "2", done: false}
 
f.next();
// three
// {value: "3", done: true}
 
f.next();
// {value: undefined, done: true}

 

 

19、async 函数

 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。

async function name([param[, param[, ... param]]]) { statements }

• name: 函数名称。

• param: 要传递给函数的参数的名称。

• statements: 函数体语句。

sync 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效 ，await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
}
helloAsync ();
// hello world

返回值

返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。 

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
}
helloAsync ();
// hello world

await针对所跟不同表达式的处理方式：

• Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
• 非 Promise 对象：直接返回对应的值。