<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6新功能</title>
</head>
<body>
<h1>1.展开操作符</h1>
<script>
'use strict';
let A = [1, 2, 3, 4];
let B = [0, ...A];
console.log(B);
//[0, 1, 2, 3, 4]
</script>
<h1>2.剩余操作符</h1>
<script>
'use strict';
function need(food, drink, ...study) {
console.log(food, drink, study);
}
need('meat', 'milk', 'english', 'programming');
//meat milk ["english", "programming"]
</script>
<h1>3.块级作用域let</h1>
<script>
//不会产生全局污染
'use strict';
for (var i = 0; i < 10; i++) {
i += 1;
}
console.log(i);
//10
for (let j = 0; j < 10; j++) {
j += 1;
}
console.log(j);
//j is not defined
/////////////////////////////////////////////////////////////////////////
//不存在变量提升
//在ES5中
var a = [];
for (var i = 0; i < 10; i++) {
var c = i;
a[i] = function () {
console.log(c)
}
};
a[5]();
//9
//在ES6中
'use strict';
var b = [];
for (var j = 0; j < 10; j++) {
//d每次进来都是新d,不会与之前的d产生任何关系
let d = j;
b[j] = function () {
console.log(d)
}
};
b[5]();
//5
//////////////////////////////////////////////////////////////////////////////////////
//let在模块内不允许重复声明同一个变量,模块外可以
'use strict';
{
var a = 100;
var a = 200;
console.log(a);
//200
}
{
var b = 300;
let b = 400;
console.log(b);
//报错
}
{
let c = 500;
let c = 600;
console.log(c);
//报错
}
{
let c = 700;
console.log(c);
//700
}
//////////////////////////////////////////////////////////////////////////////////////
//在ES5中 内层变量可能会赋盖外层变量
var time = new Date();
function fun() {
console.log(time);
if (false) {
//由于time的声明提前，导致输出时的time找不到外界的time
var time = 'HELLO'
};
};
fun();
//undefined
//////////////////////////////////////////////////////////////////////////////////////
//在ES5中 内层函数可能会赋盖外层函数
function fun() {
console.log('I am outside!');
};
(function () {
if (false) {
//ES5中此方法会被声明提前，ES6中此方法不会被声明提前
function fun() {
console.log('I am inside!');
}
};
fun()
}());
// I am inside! (ES5得出的结果)
// I am outside!(ES6得出的结果)
//////////////////////////////////////////////////////////////////////////////////////
//在ES5中，用来计数的循环变量泄露为全局变量
var string = 'HELLO';
for (var i = 0; i < string.length; i++) {
console.log(string[i]);
//H
//E
//L
//L
//O
};
//循环内的i没释放，外面依然可用
console.log(i);
//5
</script>
<h1>4.模板字符串</h1>
<script>
'use strict';
//模板字符串内可以写变量
let dessert = 'cake';
let drink = 'tea';
let breakfast = `今天的早餐是 ${dessert} 与 ${drink} !`;
console.log(breakfast);
//今天的早餐是 cake 与 tea !
//////////////////////////////////////////////////////////////////////////////////////
//模板字符串内写运算符
let name = 'Augus';
let html = `
<h1>${name === 'zoe' ? 'ok' : 'no'}</h1>`
console.log(html);
//<h1>no</h1>
//////////////////////////////////////////////////////////////////////////////////////
//模板字符串内写函数
function log() {
return 'good'
}
let html = `<h1>${log()}</h1>`
console.log(html);
//<h1>good</h1>
</script>
<h1>5.带标签的模板</h1>
<script>
//标签为一个函数,用于处理模板字符串里面的字符
//示例1
'use strict';
let food = 'cake';
let water = 'tea';
let restaurant = kitchen`今天的早餐是 ${food} 与 ${water} !`;
function kitchen(strings, ...values) {
console.log(strings);
//["今天的早餐是 ", " 与 ", " !", raw: Array(3)]
console.log(values);
//["cake", "tea"]
let result = '大家好,';
for (var i = 0; i < values.length; i++) {
result += strings[i];
result += values[i];
}
result += strings[strings.length - 1];
return result;
}
console.log(restaurant);
//大家好,今天的早餐是 cake 与 tea !
////////////////////////////////////////////////////////////////////////////////////
//示例2
'use strict';
//第一个参数strArr为模板中所有字符串的集合
//第二个参数及后面的参数为模板中的变量
function tag(strArr, arg1, arg2) {
console.log(strArr);
//['','','']
console.log(arg1);
//leo
console.log(arg2);
//30
}
let name = 'leo';
let age = '30';
var result = tag`${name} ${age}`;
//////////////////////////////////////////////////////////////////////////////////////
//示例3
'use strict';
function safe(strArr) {
let result = '';
for (var i = 0, len = strArr.length; i < len; i++) {
result += strArr[i].replace(/p/g, 'a').replace(/hello/g, '你好');
//去掉结果多余的undefined
if (i < arguments.length - 1) {
result += arguments[i + 1];
}
}
return result;
}
let name = 'Augus';
let result = safe`<p>hello ${name}</p>`;
console.log(result);
// <a>你好 Augus </a>
</script>
<h1>6.常量const</h1>
<script>
'use strict';
const a = 10;
const a = 11;
console.log(a);
//Identifier 'a' has already been declared
//常量一但声明，不可更改
const b = [];
let c = [10, 11, 12];
let d = [20, 21, 22];
b.push(c, d);
console.log(b);
//[Array(3), Array(3)]=>[[10,11,12],[20,21,22]]
//常量可以声明一个空数组，然后push数组和值进去
</script>
<h1>7.函数的name属性</h1>
<script>
'use strict';
let lunch = function (argument) { }
console.log(lunch.name);
//lunch
//函数为匿名时，name为变量
let dinner = function superDinner(argument) { }
console.log(dinner.name);
//superDinner
//函数为有名时,name属性为函数名
</script>
<h1>8.结构化</h1>
<script>
'use strict';
function web() {
return ['HTML', 'CSS', 'JS'];
}
let [skill1, skill2, skill3] = web();
console.log(skill1, skill2, skill3);
// HTML CSS JS
</script>
<h1>9.导入与导出</h1>
<script>
//依赖于相关文件
//a文件 命名为a
'use strict';
let fruit = 'apple';
let dessert = 'cake';
export { fruit, dessert };
//可以导出的不仅是变量，还可以导出函数、类或是整个文件
//b文件 命名为b
'use strict';
import { fruit, dessert } from './a';
console.log(fruit, dessert);
//apple,cake
import * as chef from './a';
//或者
import chef from './a';
console.log(chef.fruit, chef.dessert);
//apple,cake
</script>
<h1>10.导入与导出重命名</h1>
<script>
//依赖于相关文件
//a文件 命名为a
'use strict';
let fruit = 'apple';
let dessert = 'cake';
function dinner(fruit, dessert) {
console.log(`今天的晚餐是 ${fruit} 与 ${dessert} !`);
}
export { fruit, dessert, dinner as supper };
//可以导出的不仅是变量，还可以导出函数、类或是整个文件
//b文件 命名为b
'use strict';
import { fruit, dessert, supper as lunch } from './a';
lunch(fruit, dessert);
//今天的晚餐是 apple 与 cake !
</script>
<h1>11.判断字符串</h1>
<script>
'use strict';
let first = 'word';
let second = 'grammar';
let english = `英语学习第一掌握${first},第二学习${second}!`;
//判断是否以指定字符串开头
console.log(english.startsWith('英语'));
//true
//判断是否以指定字符串结尾
console.log(english.endsWith('grammar!'));
//true
//判断是否包含指定字符串
console.log(english.includes('掌握'));
//true
</script>
<h1>12.给函数的参数设置默认值</h1>
<script>
'use strict';
function life(third = 'money', fourth = 'dream') {
return `生活就是${third}与${fourth}`
}
//不传参数，打印出来的是默认值
console.log(life());
//生活就是money与dream
console.log(life('rice', 'sleep'));
//生活就是rice与sleep
</script>
<h1>13.为函数设置一个对象作为参数</h1>
<script>
'use strict';
function party(dessert, drink, { location, restaurant } = {}) {
console.log(dessert, drink, location, restaurant);
};
//对象参数设置为一个空数组时，不传参不会报错
party('cake', 'tea', { location: '深圳', restaurant: '左湘右邻' });
//cake tea 深圳 左湘右邻
</script>
<h1>14.箭头函数</h1>
<script>
'use strict';
//普通写法
var cup1 = function cup1(tea) {
return tea;
}
//ES6的写法
let cup2 = tea => tea;
//有多个参数时,加上小括号
let cup3 = (tea, milk) => tea + milk;
//需要对结果处理时,加上大括号
let cup4 = (tea, milk) => {
return `渴了你可以喝${tea}与${milk}`
}
//1.在function中this是可变的，在箭头函数中是不可变的;
//2.在箭头函数中不能正常的使用arguments;
// var fun=n=>{console.log(argument[0]);};
// fun(12);结果为{},正常情况下应该是12，打印出来却是一个对象;
//3.箭头函数定义的方法不能作为构造函数,也就是不能用new 如new fun();
//4.箭头函数中一个参数可以省略(),方法语句中一行可以省略{};
//5.箭头函数中默认的有返回功能，不用return,有大括号就要return;
// var fun=n=>n*2;或者 var fun=n=>{return n*2};
// console.log(fn(5)); 结果为10;
</script>
<h1>15.用方括号添加带空格的属性</h1>
<script>
'use strict';
let weekend = {};
weekend.lunch = 'bread';
console.log(weekend);
//{lunch: "bread"}
//如果要添加的属性中包含空格，需要通过[]去添加
let monday = {};
monday['hot drink'] = 'soup';
console.log(monday);
//{hot drink: "soup"}
</script>
<h1>16.定义类class</h1>
<script>
//示例1
'use strict';
//定义类
class Chef {
//声明方法接受参数
constructor(food) {
this.food = food;
}
//声明一个方法使用函数
cook() {
console.log(this.food);
}
}
let Augus = new Chef('bread');
Augus.cook();
//bread
//示例2
//ES5中的类定义如下
function User(name, age) {
this.name = name;
this.age = age;
}
//静态方法
User.getClassName = function () {
return 'User';
};
//原型对象上添加公共方法
User.prototype.changeName = function (name) {
this.name = name;
};
//原型对象上添加公共方法
User.prototype.changeAge = function (age) {
this.age = age;
}
//添加取值函数和存值函数
Object.defineProperty(User.prototype, 'info', {
get() {
return 'name:' + this.name + ' | age:' + this.age;
}
});
var user = new User('leo', 22);
console.log(user);
//{name:'leo',age:22}
//添加子类
function Manager(name, age, password) {
User.call(this, name, age);
this.password = password;
}
//继承静态方法
Manager.__proto__ = User;
//继承原型方法
Manager.prototype = User.prototype;
//添加新方法
Manager.prototype.changePassword = function (pwd) {
this.password = password;
}
var manager = new Manager('leo', 22, '123');
manager.changeName('Augus');
console.log(manager.info);
//name:Augus | age:22
//////////////////////////////////////////////////////////////////////////////////
//采用ES6定义类
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
static getClassName() {
return 'User';
}
changeName(name) {
this.name = name;
}
changeAge(age) {
this.age = age;
}
get info() {
return 'name:' + this.name + ' | age:' + this.age;
}
}
//子类继承
class Manager extends User {
constructor(name, age, password) {
//第一行必须要写super,因为首先要创建父类的对象
super(name, age);
this.password = password;
}
changePassword(password) {
this.password = password;
}
get info() {
var info = super.info;
console.log(info);
//name:Augus | age:22
return info + '--New';
}
}
var manager = new Manager('leo', 22, '123');
manager.changeName('Augus');
console.log(manager.info);
//name:Augus | age:22 --new
//子类继承
class I extends User {
//自动加入默认constructor
constructor(..arg) {
super(..arg)
}
};
var me = new I('leo', 28);
console.log(me);
//{name:'leo',age:28}
//////////////////////////////////////////////////////////////////////////////////
//立即执行的类
let user = new class User {
constructor(name) {
this.name = name;
}
}('Augus');
console.log(user);
// {name:'Augus'}
//////////////////////////////////////////////////////////////////////////////////
//类不能被提升,此处打印user会出现未定义
var user = new User();
class User {
constructor(name) {
this.name = name;
}
}
</script>
<h1>17.获取与设置</h1>
<script>
'use strict';
class chef1 {
constructor(food) {
this.food = food;
this.dish = [];
}
get menu() {
return this.dish;
}
set menu(dish) {
this.dish.push(dish);
}
cook() {
console.log(this.food);
}
}
let zoe = new chef1();
console.log(zoe.menu = 'vegetable');
//vegetable
console.log(zoe.menu = 'fruit');
//fruit
console.log(zoe.menu);
//["vegetable", "fruit"]
</script>
<h1>18.给类添加静态的方法</h1>
<script>
'use strict';
class chef10 {
constructor(food) {
this.food = food;
this.dish = [];
}
get menu() {
return this.dish;
}
set menu(dish) {
this.dish.push(dish);
}
//添加static成静态的方法
static cook(food) {
console.log(food);
}
}
//不需要实例化对象就可以使用
chef10.cook('orange');
//orange
</script>
<h1>19.类的继承</h1>
<script>
'use strict';
//类1
class Person {
constructor(name, birthday) {
this.name = name;
this.birthday = birthday;
}
intro() {
return `${this.name},${this.birthday}`;
}
}
class worker extends Person {
constructor(name, birthday) {
//使用super调用父类里面的东西
super(name, birthday);
}
}
let grice = new worker('grice', '1987-07-25');
console.log(grice.intro());
</script>
<h1>20.对象字面量中的简写</h1>
<script>
'use strict';
let a = 100, b = 200;
let num = {
a,
//直接加上属性，不需要写成a:a,
b,
//直接加上属性，不需要写成b:b,
c() { }
//直接简写,不需要写成c:function(){},
}
console.log(num);
//{a: 100, b: 200, c: ƒ}
</script>
<h1>21.判断对象是否相等</h1>
<script>
'use strict';
console.log(+0 == -0);
//true
console.log(+0 === -0);
//true
console.log(NaN == NaN);
//false
//使用Object.is判断两个对象
console.log(Object.is(+0, -0));
//false
console.log(Object.is(NaN, NaN));
//true
</script>
<h1>22.将一个对象的属性复制到另一个对象里面</h1>
<script>
'use strict';
let container = {};
Object.assign(
//复制的目标地址
container,
//复制源地址及属性
{ drink: 'beer' },
//第二次复制的会覆盖第一次复制的
{ drink: 'water' }
);
console.log(container);
//{drink: "water"}
</script>
<h1>23.创建对象以后改变对象的prototype</h1>
<script>
'use strict';
let tuesday = {
getDrink() {
return 'tea';
}
};
let wendsday = {
getDrink() {
return 'water';
}
};
//使用Object.create创建一个基于tuesday的对象
let thursday = Object.create(tuesday);
console.log(thursday.getDrink());
//tea
console.log(Object.getPrototypeOf(thursday) === tuesday);
//true
//设置对象的原型类型
Object.setPrototypeOf(thursday, wendsday);
console.log(thursday.getDrink());
//water
console.log(Object.getPrototypeOf(thursday) === wendsday);
//true
</script>
<h1>24.得到和设置对象里面的prototype</h1>
<script>
'use strict';
let friday = {
getFood() {
return 'noodles';
}
};
let saturday = {
getFood() {
return 'pasta';
}
};
let sunday = {
__proto__: friday
};
console.log(sunday.getFood());
//noodles
console.log(Object.getPrototypeOf(sunday) === friday);
//true
sunday.__proto__ = saturday;
console.log(sunday.getFood());
//pasta
console.log(Object.getPrototypeOf(sunday) === saturday);
//true
</script>
<h1>25.调用和修改父类型的方法</h1>
<script>
'use strict';
let one = {
getScore() {
return '20';
}
};
let two = {
getScore() {
return '30';
}
};
let three = {
__proto__: one,
getScore() {
return parseInt(super.getScore()) + 50;
}
};
console.log(three.getScore());
//70
</script>
<h1>26.Iterator迭代器</h1>
<script>
'use strict';
function chef5(foods) {
let i = 0;
return {
//特定方法
next() {
//表示是否完成跌代，完成为true,否则为false
let done = (i >= foods.length);
//表示返回来的值,每次执行完索引号加1
let value = !done ? foods[i++] : undefined;
return {
value: value,
done: done
}
}
}
}
let coco = chef5(['tomatoes', 'egg']);
console.log(coco.next());
//{value: "tomatoes", done: false}
console.log(coco.next());
//{value: "egg", done: false}
console.log(coco.next());
//{value: undefined, done: true}
</script>
<h1>27.生成迭代器</h1>
<script>
'use strict';
//yield为语法固定
// function* student(){
// yield 'rice';
// yield 'soup';
// }
//let john=student();
//function* student(foods){
let student = function* (foods) {
for (let i = 0; i < foods.length; i++) {
yield foods[i];
}
}
let john = student(['rice', 'soup'])
//next()为特定方法
console.log(john.next());
//{value: "rice", done: false}
console.log(john.next());
//{value: "soup", done: false}
console.log(john.next());
//{value: "rice", done: false}
</script>
<h1>28.有序列表集合Set</h1>
<script>
'use strict';
//Set会将其内容打散成字母，并去掉重复字母
let desserts = new Set('12 ab 12');
console.log(desserts);
//Set(5) {"1", "2", " ", "a", "b"}
//添加
desserts.add('34').add('45')
console.log(desserts);
//Set(7) {"1", "2", " ", "a", "b","34","45"}
console.log(NaN === NaN);
//false
desserts.add(NaN).add(NaN).add(NaN);
//NaN不等于NaN,但是在添加的时候会认为相等
//Set(8) {"1", "2", " ", "a", "b","34","45","NaN"}
//判断length
console.log(desserts.size);
//6
//会将相同值算为一个值的长度
//判断是否存在
console.log(desserts.has('34'));
//true
//删除
desserts.delete('34');
console.log(desserts);
//Set(5) {"1", "2", " ", "a", "b"}
//循环
desserts.forEach(desserts => {
console.log(desserts);
});
//1
//2
//
//a
//b
//清除
desserts.clear();
console.log(desserts);
//Set(0) {}
//数组去重
let arr = ['Augus', 'Augus', 'zoe'];
let newArr = Array.from(new Set(arr));
console.log(newArr);
//['Augus','zoe']
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values);
//true;
let st = new Set(['qq961601634', 'Augus', '越陌度阡']);
//正常遍历
for (let v of st) {
console.log(v)
}
//set中的V和K是一样的,以下为示例说明
let keysI = st.keys();
for (let k of keysI) {
console.log(k);
//qq961601634
//Augus
//越陌度阡
}
let valuesI = st.values()
for (let v of valuesI) {
console.log(v);
//qq961601634
//Augus
//越陌度阡
}
let entriesI = st.entries();
for (let o of entriesI) {
console.log(o);
//['qq961601634','qq961601634']
//['Augus','Augus']
//['越陌度阡','越陌度阡']
}
</script>
<h1>29.组织对象map</h1>
<script>
'use strict';
let foods = new Map();
let fruit = {}, cook = function () { }, main = '面包';
foods.set(fruit, 'banana');
foods.set(cook, 'knife');
foods.set(main, 'bread');
//属性可以是任意的，NaN也可
console.log(foods);
//Map(3) {{…} => "banana", ƒ => "knife", "面包" => "bread"}
console.log(foods.size);
//3
//获取指定属性的值
console.log(foods.get(fruit));
//banana
//删除
foods.delete(main);
console.log(foods.has(main));
//false
//循环
foods.forEach((value, key) => {
console.log(`${key}=${value}`);
})
//[object Object]=banana;
//function (){}=knife
//清除
foods.clear();
console.log(foods);
//Map(0) {}
////////////////////////////////////////////////////////////////////////////////////
let map = new Map([
['name', 'leo'],
['qq', '961601634']
]);
console.log(map);
//Map{'name=>'leo','qq'=>'961601634'}
console.log(map.get('name'), map.get('qq'));
//leo 961601634
let keys = map.keys();
for (let k of keys) {
console.log(k);
//name qq
}
let values = map.values();
for (let v of values) {
console.log(v);
//let 961601634
}
let entries = map.entries();
for (let o of entries) {
console.log(o);
//['name','leo'],
//['qq','961601634']
}
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values);
//true;
console.log(Map.prototype[Symbol.iterator] === Map.prototype.values);
//false;
console.log(Map.prototype[Symbol.iterator] === Map.prototype.entries);
//true;说明map与entries一样的
//map的遍历方法
map.forEach(function (k, v) {
console.log(k, v);
//leo name
//961601634 qq
})
//遍历的特殊用法,绑定一个变量
var me = {
name: 'liang'
};
map.forEach(function (k, v) {
console.log(this.name, k, v)
//liang 961601634 qq
}, me);
</script>
<h1>30.异步函数promise</h1>
<script>
function asyncFun(a, b, cb) {
setTimeout(function () {
cb(a + b);
}, 200);
}
//cb对应function,a+b对庆result
asyncFun(1, 2, function (result) {
if (result > 2) {
asyncFun(result, 2, function (result) {
if (result > 4) {
asyncFun(result, 2, function (result) {
console.log('ok')
});
}
});
}
});
//以上代码会产生思维断点，也不优雅，以下为运用promise的写法
'use strict';
function asyncFun(a, b) {
//resolve表示在计算过程中有了结果调用它,并把结果传给它;
//reject表示错误调用第二个函数reject;
return new Promise(function (resolve, reject) {
if (typeof a != 'number' || typeof b != 'number') {
//异常处理
reject(new Error('no number'));
}
setTimeout(function () {
resolve(a + b);
}, 200)
});
}
asyncFun(1, 2)
//then带表上面代码中的resolve
//function(err){}代表上面代码中的reject,即错误发生在第一个then的处理
//当function(err){}里面捕获到错误了，catch里面就不会被运行了
.then(function (result) {
if (result > 2) {
return asyncFun(result, 2);
}
}, function (err) {
console.log('first-', err)
})
.then(function (result) {
if (result > 4) {
console.log('ok')
}
})
//通过catch获取异常
.catch(function (error) {
console.log('second-', err);
});
//举例说明(1)
'use strict';
class User {
constructor(name, password) {
this.name = name;
this.password = password;
}
validateName(cb) {
let name = this.name;
return new Promise(function (resolve, reject) {
//模拟异步
setTimeout(function () {
if (name == 'leo') {
resolve('success');
} else {
reject('error');
}
});
});
}
validatePassword(cb) {
let password = this.password;
return new Promise(function (resolve, reject) {
//模拟异步
setTimeout(function () {
if (password == '123') {
resolve('success');
} else {
reject('error');
}
});
});
}
}
const user = new User('leo', '123');
user.validateName()
.then(function (result) {
throw new Error('first error!');
//以上错误会被catch()捕获
//执行密码验证
// return user.validatePassword();
//如果以上return返回的不是promise,而是return 'validate name ok'
//会对返回结果进行封装，创建一个promise对象
//var promise=Promise.resolve('validate name ok');
//以上的Promise.resolve又相当于以下代码
//var promise=new Promise(function(resolove,reject){
// resolve('validate name ok')
// })
}, function (err) {
//此函数相当于reject，如果validateName验证错误，会执行此语句，
//如果验证正确，会执行throw new Error('first error!'),被catch捕获
console.log('second error');
})
//以上第一个then中抛出的错误会被捕获
.catch(function (err) {
console.log(err);
//执行密码验证
return user.validatePassword();
})
.then(function (result) {
console.log(result);
}, function (err) {
//此函数相当于reject，validatePassword验证错误，会执行此语句
//如果没有function(err),会被catch抛出错误
console.log('validate Password Error');
//如果处理错误过程中还会抛出异常，catch就会被执行
throw new Error('xx');
})
//以上代码中抛出的错误会被捕获
.catch(function (err) {
console.log('validate pwd err');
})
//1.then没有赋于处理错误的参数，将由catch处理
//2.如果then自身有处理错误的参数，将由function(err)处理
//举例说明(2)
'use strict';
function asyncFun(a, b, time) {
//resolve表示在计算过程中有了结果调用它,并把结果传给它;
//reject表示错误调用第二个函数reject;
return new Promise(function (resolve, reject) {
if (typeof a != 'number' || typeof b != 'number') {
//异常处理
reject(new Error('no number'));
}
setTimeout(function () {
resolve(a + b);
}, time)
});
}
// var resultList=[];
// asyncFun(1,2)
// .then(function(result){
// resultList.push(result);
// return asyncFun(2,3);
// })
// .then (function(result){
// resultList.push(result);
// });
//以上注释代码可用以下Promise中的all代替
var promise = Promise.all([asyncFun(1, 2, 20), asyncFun(2, 3, 30), asyncFun(1, 22, 40)]);
promise.then(function (result) {
console.log(result);
//[3,5,23]
});
//Promise中的race可对执行结果进行时间排序,得出第一个执行完的结果
var promise = Promise.race([asyncFun(1, 2, 200), asyncFun(2, 3, 30), asyncFun(1, 22, 40)]);
promise.then(function (result) {
console.log(result);
//5
});
//Promise中的race执行时，如果某一个结果有错，都会停止运算，抛出错误
var promise = Promise.race([asyncFun('a', 2, 200), asyncFun(2, 3, 30), asyncFun(1, 22, 40)]);
promise.then(function (result) {
console.log(result);
}).catch(err => {
console.log(err);
//[Error:no number]
});
</script>
<h1>31.symbols与遍历器的认识</h1>
<script>
var obj = {
name: 'leo',
'my name': 'Augus'
};
obj.name; //leo
obj['my name']; //Augus
</script>
<h1>32.ajax请求转换图片二进制</h1>
<img id="myImg">
<script>
var image = document.getElementById('myImg');
var xhr = new XMLHttpRequest();
xhr.responseType = 'arrybuffer';
// 请确保有正确图片
xhr.open('GET', './img.jpg');
xhr.onload = function () {
var result = xhr.response;
console.log(result, result.byteLength);
var blob = new Blob([result]);
image.src = window.URL.createObjectURL(blob);
};
xhr.send();
</script>
</body>
</html>ES6新功能
猜你喜欢
转载自blog.csdn.net/weixin_40629244/article/details/85463761
今日推荐
周排行