ES6入门基础-白红宇

ES6入门基础

阅读量：6035 次

发布时间：2019-06-20

本文共 20417 字，大约阅读时间需要 68 分钟。

let和const

一、块级作用域

ES5 只有全局作用域和函数作用域，没有块级作用域，这样的缺点是：1.用来计数的循环变量泄露为全局变量。2.内层变量可能会覆盖外层变量

var tmp = new Date();function f() {  console.log(tmp);  if (false) {    var tmp = 'hello world';  }}f(); // undefined

输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量

var声明的变量,出了{}依然可以正确输出

{    for (var i = 0; i < 1; i++){}    console.log(i); //1}

let声明的变量和const声明的常量只能在{}内有效,const声明的常量不能进行修改

for (let i = 0; i < 1; i++){    const a = 123;    a = 12; //Uncaught TypeError: Assignment to constant variable.}console.log(i); //01let和const.html:17 Uncaught ReferenceError: i is not definedconsole.log(a); //01let和const.html:17 Uncaught ReferenceError: a is not defined

const声明变量不能在声明之后再赋值,只能声明的时候进行赋值

const p; //Uncaught SyntaxError: Missing initializer in const declarationp = 2;

二、let、const声明变量不存在变量提升

a = 1;var a;console.log(a); //1b = 2; //Uncaught ReferenceError: b is not definedlet b;console.log(b);c = 3;const c; //Uncaught SyntaxError: Missing initializer in const declarationconsole.log(c);

三、不允许重复声明

var a = 1;var a = 2;console.log(a); //2let b = 1;let b = 2; //Uncaught SyntaxError: Identifier 'b' has already been declaredconsole.log(b);

四、注意

const在声明对象的时候，const常量指向的是对象存储的指针，此时修改对象内部的属性并不会报错。

const k = {    a:1};k.b = 2;console.log(k); //{a:1, b:@}

结构赋值

一、结构赋值的分类

数组结构赋值

let a, b, rest;[a, b] = [1, 2];console.log(a, b);//1 2

对象结构赋值

let a, b;({a, b} = {a:1, b:2});console.log(a, b);//1  2

字符串结构赋值

布尔结构赋值

函数参数结构赋值

数值结构赋值

二、结构赋值的简单应用

变量交换

let a = 1,b = 2;[a, b] = [2, 1];console.log(a, b); //2, 1

取出json中某个值

let metaData = {    title: 'abc',    test: [{        title: 'test',        desc: 'description'    }]};let {title: esTitle, test:[{title:cnTitle}]} = metaData;console.log(esTitle, cnTitle); //abc, test

字符串的扩展

一、常用方法的扩展

includes(str)字符串中是否包含某个字符

let str = 'string';console.log(str.includes('r')); //true

startsWith(str)字符串是不是以某些字符开始，endsWith(str)字符串是不是以某些字符结束

let str = 'string';console.log(str.startsWith('s'));// trueconsole.log(str.endsWith('g'));// true

repeat(int)方法返回一个新字符串，表示将原字符串重复n次。

let str = 'string';console.log(str.repeat(3)); //stringstringstring

padStart()，padEnd() ES2017 引入了字符串补全长度的功能,如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全,这两个方法接收两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串

let str = '1';console.log(str.padStart(2, '0')); //01console.log(str.padEnd(2, '0')); //10

String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

console.log(String.raw`h\n23\45`);// h\n23\45console.log('h\n23\45');//h //23%

二、模板字符串

模板字符串是增强版的字符串，用反引号（`）标识

const name = 'FangFeiyue';console.log(`My name is ${name}`);//My name is FangFeiyue

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中

let str = `我是一个终生学习者`console.log(str);//我是//一个//终生学习者

数值扩展

二进制、八进制的表示方法

//二进制console.log(0b11111);//八进制console.log(0o011111);

Number.isFinite()用来检查一个数值是否为有限的（finite）

console.log(Number.isFinite(12)); // trueconsole.log(Number.isFinite(NaN)); // false

Number.isNaN()用来检查一个值是否为NaN

console.log(Number.isNaN(1)); //falseconsole.log(Number.isNaN(NaN)); //trueconsole.log(Number.isNaN('1')); //false

Number.isInteger()用来判断一个值是否为整数。需要注意的是，在 JavaScript 内部，整数和浮点数是同样的储存方法，所以 3 和 3.0 被视为同一个值

console.log(Number.isInteger(1)); //trueconsole.log(Number.isInteger(1.0)); //trueconsole.log(Number.isInteger('1')); //falseconsole.log(Number.isInteger(1.2)); //false

Number.isSafeInteger判断一个数字是否在有效范围内

console.log(Number.MAX_SAFE_INTEGER);//最大数console.log(Number.MIN_SAFE_INTEGER);//最小数console.log(Number.isSafeInteger(10));

Math.trunc方法用于去除一个数的小数部分，返回整数部分。

console.log(Math.trunc(4.5)); // 4

Math.sign()用来判断一个值的正负，但是如果参数是-0，它会返回-0。

console.log(Math.sign(-5)); // -1console.log(Math.sign(5));  // 1console.log(Math.sign(0));  // 0console.log(Math.sign(-0));  // -0console.log(Math.sign("40"));  // 1console.log(Math.sign("hello")); //NaN

Math.cbrt方法用于计算一个数的立方根,对于非数值，Math.cbrt方法内部也是先使用Number方法将其转为数值。x³=a，那么x叫做a的立方根

console.log(Math.cbrt(8)); //2

数组对象的扩展

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map

let pArr = Array.from(document.getElementsByTagName('p'));pArr.forEach(item => {    console.log(item.textContent);});

Array.of方法用于将一组值，转换为数组

console.log(Array.of(1, 2, 3, 'sdf', [1, 2,3]));// [1, 2, 3, 'sdf', [1, 2, 3]]console.log(Array.of()); //[]

fill方法使用给定值，填充一个数组,方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

console.log([1, 23, NaN].fill(8));  // [8, 8, 8]console.log([1, 3, 23, 're', undefined, NaN].fill(7, 1, 3));//[1, 7, 7, "re", undefined, NaN]

keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for(let index of [1, 2, 3, 4, 5].keys()){    console.log(index);// 0, 1, 2, 3, 4}for (let [index, value] of [1, 23, 234, 4, 5, 34].entries()){    console.log(index, value);    // 0 1    // 1 23    // 2 234    // 3 4    // 4 5    // 5 34}

copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。它接受三个参数。target（必需）：从该位置开始替换数据。start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

console.log([17,26,53,44,25,6, 23, 84, 92].copyWithin(2, 3, 5)); //[17, 26, 44, 25, 25, 6, 23, 84, 92]

find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined

console.log([1, 23, 45, 3, 5, 56, 23].find(item => item > 20));// 23

findIndex方法返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

console.log([1, 23, 45, 3, 5, 56, 23].findIndex(item => item > 20));// 1

includes方法返回一个布尔值，表示某个数组是否包含给定的值

console.log([1, 2, ,3, NaN].includes(NaN)); //trueconsole.log([1, 2, 34].includes(2)); //true

函数扩展

一、参数默认值

function test(x = 'Fang'){    console.log(x);}test('Feiyue');function test2 (x = 'Fang', y){//默认值后面不能在跟没有默认值的变量,参数默认值要放在函数参数最后面    console.log(x, y);//feiyue, undefined}test2('feiyue');//作用域let  x = 'test';function test2(x, y=x){    console.log(x, y);}test2('love'); //love, lovetest2(); // undefined, undefinedlet y = 'test2';function test3(c, x = y){    console.log(c, y);}test3('love'); //love, test2test3(); //undefined, "test2"

二、rest参数,ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

function test(...arg){ //数组    for (let v of arg){        console.log(v);    }}test(1, 2, 3, 4, 5, 6);

三、扩展运算符

console.log(...[1,2,3,4]); //1 2 3 4

四、箭头函数

ES6允许使用“箭头”（=>）定义函数。

var f = v => v;等同于var f = function(v) {  return v;};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;// 等同于var f = function () { return 5 };var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) {  return num1 + num2;};

箭头函数注意点

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

五、this绑定

六、尾调用

尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。

function f(x){  return g(x);}

f函数最后一步调用的是一个函数，属于尾调用，下面这种情况不属于尾调用

function f(x){  g(x);}

因为它等同于

function f(x){  g(x);  return undefined;}

尾调用实践：

递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。

function factorial(n) {  if (n === 1) return 1;  return n * factorial(n - 1);}factorial(5) // 120换成递归如下function factorial(n, total) {  if (n === 1) return total;  return factorial(n - 1, n * total);}factorial(5, 1) // 120

对象扩展

一、简洁表示法

let o = 1,    y = 2;const obj = {    o: o,    y: y,    test: function(){        console.log('test');    }};console.log(obj); //{o: 1, y: 2, test: f()}//简洁表示法const obj2 = {    o,    y,    test(){        console.log(test);    }};console.log(obj2); //{o: 1, y: 2, test: f()}

二、属性表达式

let name = 'FangFei';const obj = {    [name]: 'yue'};console.log(obj); //{FangFei: "yue"}

三、Object新增方法

Object.is()它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

console.log(Object.is('111', '111')); //trueconsole.log(Object.is([], [])); //false

不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

+0 === -0 //trueNaN === NaN // falseObject.is(+0, -0) // falseObject.is(NaN, NaN) // true

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

console.log(Object.assign({a:1}, {b:2})); //{a: 1, b: 2}

注意点： - Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。 ``` const obj1 = {a: {b: 1}}; const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;obj2.a.b // 2```- 对于这种嵌套的对象，一旦遇到同名属性，Object.assign的处理方法是替换，而不是添加。```let obj = {name: 'fang'};let obj2 = {name: 'feiyue'};console.log(Object.assign(obj, obj2)); //{name: "feiyue"}```

Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

let obj = {id:'12', name:'fang'};for (let [key, value] of Object.entries(obj)){    console.log(key, value); //name fang}

四、扩展运算符

let {a, b, ...rest} = {a:123, b:456, c:34, d:23};console.log(a, b, rest);//123 456 {c: 34, d: 23}

注意：解构赋值必须是最后一个参数，否则会报错。

let { ...x, y, z } = obj; // 句法错误let { x, ...y, ...z } = obj; // 句法错误

扩展运算符的解构赋值，不能复制继承自原型对象的属性。

let o1 = { a: 1 };let o2 = { b: 2 };o2.__proto__ = o1;let { ...o3 } = o2;o3 // { b: 2 }o3.a // undefined

上面代码中，对象o3复制了o2，但是只复制了o2自身的属性，没有复制它的原型对象o1的属性。

const o = Object.create({ x: 1, y: 2 });o.z = 3;let { x, ...{ y, z } } = o;x // 1y // undefinedz // 3

上面代码中，变量x是单纯的解构赋值，所以可以读取对象o继承的属性；变量y和z是扩展运算符的解构赋值，只能读取对象o自身的属性，所以变量z可以赋值成功，变量y取不到值。

Symbol

JavaScript 语言的数据类型：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）、Symbol

一、作用

简单来说就是这种类型提供独一个一无二的值

二、初步操作

声明

// Symbol函数前不能使用new命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。let a1 = Symbol(),    a2 = Symbol();console.log(a1 === a2);  // false console.log(a1, a2);    // Symbol() Symbol()// Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。let a1 = Symbol.for('a1');let a2 = Symbol.for('a1');console.log(a1 === a2); //true

简单使用

let a1 = Symbol.for('abc');let obj = {    [a1]: '123',    'abc': 345,    'c': 456};console.log(obj);   //{abc: 345, c: 456, Symbol(abc): "123"}

注意：对象中有用Symbol做key话通过for...in是拿不到key值的

let a1 = Symbol.for('abc');let obj = {    [a1]: '123',    'abc': 345,    'c': 456};console.log(obj);   //{abc: 345, c: 456, Symbol(abc): "123"}for (let [key, value] of Object.entries(obj)){    console.log(key, value);    //abc 345    //c 45    //可见并没有输出Symbol(abc): "123"}

那我们怎么才能获取对象中key值为Symbol的值呢？可以使用Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj).forEach(function(item){    console.log(item); //Symbol(abc)    console.log(obj[item]); //123});

从上面的代码for...of拿到了对象普通属性的key，Object.getOwnPropertySymbols拿到了对象中Symbol类型key的值，那我们怎么把他们一块拿到呢？可以用Reflect.ownKeys

Reflect.ownKeys(obj).forEach(item=>{    console.log(item);    // abc    // c    // Symbol(abc)});

Set、Map数据结构

Set的用法

声明、添加、获取元素个数

let list = new Set();list.add(1);list.add(2);console.log(list); //Set(2)console.log(list.size); //2let arr = [2, 4, 345, 45, 23];let list = new Set(arr);console.log(list); //Set(5) {2, 4, 345, 45, 23}console.log(list.size); //5

Set数据元素必须是唯一的

let list = new Set();list.add(1);list.add(2);list.add(1);console.log(list); //Set(2) {1, 2}，只输出了一个1let arr = [1, 23, 23, 34, 5, 56, 56];let list = new Set(arr);console.log(list); //Set(5) {1, 23, 34, 5, 56}

判断是否包含某个元素

let arr = [1, 1, 2, 3, 4, 5, 6],    list = new Set(arr);console.log(list.has(6));   //true

删除指定元素

let arr = [1, 2, 3, 4];let list = new Set(arr);list.delete(1);console.log(list); //Set(3) {2, 3, 4}

Set遍历

let arr = [1, 23, 23, 34, 5, 56, 56];let list = new Set(arr);for (let item of list){    console.log('item====>>>', item);    //item====>>> 1    //item====>>> 23    //item====>>> 34    //item====>>> 5    //item====>>> 56}let arr = [1, 2, 3, 4, 435, 45, 23, 12];let list = new Set(arr);list.forEach(item=>{    console.log(item);//1, 2, 3, 4, 435, 45, 23, 12})

WeakSet用法

WeakSet的数值必须是对象，任何具有 Iterable 接口的对象，都可以作为 WeakSet 的参数。

let arr = [1, 2, 3, 4, 5, 6];let list3 = new WeakSet(arr);//报错let arr2 = [[1, 2, 3, 3,4, 5, 6, 6]];let list4 = new WeakSet(arr2);console.log(list4); // WeakSet {Array(8)}

由上面的代码可以看出，数组的成员成为 WeakSet 的成员，而不是数组本身。这意味着，数组的成员只能是对象，而不能是其他数据类型。

Map的用法

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

声明方式一

let map = new Map(),    arr = [1];//添加元素map.set(arr, 123);//获取制定的key值：getconsole.log(map.get(arr)); //123 console.log(map); //Map(1) {Array(1) => 123}

声明方式二注意：这种方式Map的传值必须为[[key, value], [key, value]...],每个小数组中只能有两个值一个key，一个value不能再有其他的

let map = new Map([['key1', 2], ['key2', 5]]);console.log(map); //Map(2) {"key1" => 2, "key2" => 5}console.log(map.size); //2console.log(map.delete(1),map);//false Map(2) {"key1" => 2, "key2" => 5}let map2 = new Map([['name','fangfeiyue', 'age', 18]]);console.log(map2); //Map(1) {"name" => "fangfeiyue"}

clear清空Map

let map = new Map([['name', 'fangfeiyue'], ['age', 18]]);console.log(map);   //Map(2) {"name" => "fangfeiyue", "age" => 18}map.clear();console.log(map); //Map(0) {}

WeakMap的用法

WeakMap和WeakSet都是不可以遍历的

let weakMap = new WeakMap();let o = {};weakMap.set(o, 123);console.log(weakMap);   //WeakMap {
   {…} => 123}console.log(weakMap.get(o)); //123

Map和Array的对比

//增let map = new Map(),    arr = [];map.set('name', 'fangfeiyue');arr.push({'name': 'fangfeiyue'});console.log(map);   //Map(1) {"name" => "fangfeiyue"}console.log(arr);   //[{…}]//查let map_isExit = map.has('name'),    arr_isExit = arr.find(item => item.name);console.log(map_isExit);    //trueconsole.log(arr_isExit);    //{name: "fangfeiyue"}//改map.set('name', 'yuenong');arr.forEach(item => item.name ? item.name='yuenong' : '');console.log(map);   //Map(1) {"name" => "yuenong"}console.log(arr);   //[{name : "yuenong"}]//删除元素map.delete('name');let index = arr.findIndex(item => item.name);arr.splice(index, 1);console.log(map); // Map(0) {}console.log(arr); // []

Set和Array的对比

let index,    set_isExit,    arr_isExit,    set = new Set(),    arr = [];// 增set.add({name: 'fang'});arr.push({name: 'fang'});console.log(set); //Set(1) {
   {…}}console.log(arr); //[{…}]//查//has({name:'fang'})是一个新生成的对象，返回肯定是false//要想输出true，这个对象必须被保存到一个才行let obj = {age:12};set.add(obj);console.log('sdsdf====>', set.has(obj)); //trueset_isExit = set.has({name:'fang'});arr_isExit = arr.find(item => item.name);console.log('let',set_isExit, arr_isExit); //false {name: "fang"}// 改console.log('改改改改改改');console.log(arr);set.forEach(item=>item.name ? item.name='yue' : '');arr.forEach(item=>item.name ? item.name='yue' : '');console.log(set); //Set(2) {
   {…}, {…}}console.log(arr); //{[name: 'yue']}// 删set.forEach(item => item.name ? set.delete(item) : '');index = arr.findIndex(item => item.name);arr.splice(index, 1);console.log(set); //Map(0) {}console.log(arr); //[]

Map、Set、Object对比

let item = {name   : 'fang'},    obj  = {},    map  = new Map(),    set  = new Set();//增map.set('name', 'fang');set.add(item);obj['name'] = 'fang';console.log(map); //Map(1) {"name" => "fang"}console.log(set); //Set(1) {
   {…}}console.log(obj); //{name: "fang"}//查console.info(map.has('name'), set.has(item), 'name' in obj);// true true true//改map.set('name', 'yue');item.name   = 'yue';obj['name'] = 'yue';console.log('改',obj);   //{name: "yue"}console.log(map);   //Map(1) {"name" => "yue"}console.log(set);   //Set(1) {
   {…}}//删map.delete('name');set.delete(item);delete obj['name'];console.info(map); //Map(0) {}console.info(set); //Set(0) {}console.info(obj); //{}

类

一、基本语法

class Parent{    constructor(name = 'fangfeiyue'){        this.name = name;    }}let parent = new Parent('fangyuenong');console.log('构造函数和实例', parent); //Parent {name: "fangyuenong"}

二、类的继承

class Parent{    constructor(name = 'fangfeiyue'){        this.name = name;    }}class Child extends Parent{}let parent = new Parent('fangyuenong'),    child = new Child();console.log(child); //Child {name: "fangfeiyue"}

三、继承传递参数

class Parent{    constructor(name = 'fangfeiyue'){        this.name = name;    }}class Child extends Parent{    constructor(name='child'){        super(name);//一定要在第一行,如果不传值，则默认继承父类的值        this.age = 12;    }}let parent = new Parent('fangyuenong'),    child = new Child('hello');console.log(child); //Child {name: "hello", age: 12}console.log(parent); //Parent {name: "fangyuenong"}

四、getter、setter

class Parent{    constructor(name = 'feiyue'){        this.name = name;    }    get longName(){        return 'fang' + this.name;    }    set longName(value){        this.name = value;    }}let parent = new Parent();console.log(parent.longName ); //fangfeiyue

五、静态方法

注意：静态方法通过类去调用而不是通过类的实例去调用

class Parent{    constructor(name = 'fangfeiyue'){        this.name = name;    }    static tell(){        console.log('执行了静态方法');    }}Parent.tell(); //执行了静态方法

六、静态属性

class Parent{    constructor(name = 'fangfeiyue'){        this.name = name;    }}//静态属性Parent.age = 18;console.log(Parent.age); //18

Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。简单使用：

let ajax = function(){    console.log('执行2');    return new Promise(function(resolve, reject){        setTimeout(() => {            resolve();        }, 1000);    });};     ajax().then(function(){    console.log('Promise', 'timer2');});

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例

function loadImg(src){    return new Promise((resolve, reject)=>{        let img = document.createElement('img');        img.src = src;        img.onload=function(){            resolve(img);        };        img.onerror=function(){            reject(err);        };    });}function showImgs(imgs){    imgs.forEach(img => {        document.body.appendChild(img);    });}Promise.all([    loadImg('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=49366202,632101467&fm=27&gp=0.jpg'),    loadImg('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=594559231,2167829292&fm=27&gp=0.jpg'),    loadImg('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1501729109,4046516680&fm=27&gp=0.jpg')]).then(showImgs);

只有这 3 个实例的状态都变成fulfilled，或者其中有一个变为rejected，才会调用Promise.all方法后面的回调函数。

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。只要有一个实例率先改变状态，变量状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给变量的回调函数。

function loadImg(src){    return new Promise((resolve, reject)=>{        let img = document.createElement('img');        img.src = src;        img.onload = function(){            resolve(img);        };        img.onerror = function(){            reject(err);        };    });}function showImg(img){    document.body.appendChild(img);}Promise.race([    loadImg('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517420881,1284406776&fm=27&gp=0.jpg',),    loadImg('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2546506461,4214746746&fm=11&gp=0.jpg'),    loadImg('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517420881,1284406776&fm=27&gp=0.jpg')]).then(showImg);

模块化

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

一、export 命令

export命令用于规定模块的对外接口，一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

export var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;

export的写法，除了像上面这样，还有另外一种。

var firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系

// 报错export 1;// 报错var m = 1;export m;

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。

// 写法一export var m = 1;// 写法二var m = 1;export {m};// 写法三var n = 1;export {n as m};

上面三种写法都是正确的，规定了对外的接口m。其他脚本可以通过这个接口，取到值1。它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系。

二、import 命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块

Iterator

JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。

遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

简单demo

let arr = ['hello', 'world'];let map = arr[Symbol.iterator]();console.log(JSON.stringify(map.next())); //{"value":"hello","done":false}console.log(JSON.stringify(map.next())); //{"value":"world","done":false}console.log(JSON.stringify(map.next())); //{"done":true}

部署Iterator接口

let obj = {    start:[1, 3, 2],    end:[7, 8, 9],    [Symbol.iterator](){        let self = this;        let index = 0;        let arr = self.start.concat(self.end);        let len = arr.length;        return {            next(){                if (index < len){                    return {                        value: arr[index++],                        done: false                    };                    }else{                    return {                        value: arr[index++],                        done: true                    };                }            }        };    }};for (let key of obj){    console.log(key);//1, 3, 2, 7, 9, 8}

转载于:https://www.cnblogs.com/axl234/p/8390777.html

你可能感兴趣的文章

Oracle 12c 多租户手工创建 pdb 与手工删除 pdb

查看>>

shell初涉

查看>>

[浪子学编程][MS Enterprise Library]ObjectBuilder之创建策略祥解(二)

查看>>

ASP.NET 中设置路径的三种方式

查看>>

EBS使用 Distributed AD在多个节点并行adpatch

查看>>