关键字（var、let和const）
? ? var 是函数作用域
? ? let 和 const 是块级作用域
? ? 什么是块级作用域
? ? 花括号{}内部为块级作用域
? ? 函数作用域是函数里的内容
? ? var和let用来声明变量
? ? const用来声明常量，并且必须赋值，赋值后声明的的数据(值类型)不能修改
// let
? ? var a = 1;
? ? let b = 2;
? ? //var 全局变量
? ? //let 局部变量只能在声明let的{}中使用
? ? //let 声明的变量不会变量提升
? ? //let 在同一个作用域不能重复声明
? ? console.log(a, b);
? ? {
? ? ? ? var c = 1;
? ? }
? ? console.log(c);
? ? {
? ? ? ? let d = 1
? ? }
? ? // console.log(d);//报错找不到d
? ? for (var i = 100; i < 5; i++) {
? ? }
? ? console.log(i);
? ? for (let j = 100; j < 5; j++) {
? ? }
? ? // console.log(j);//报错找不到j
? ? var lis = document.querySelectorAll('li')
? ? // for (var m = 0; m < lis.length; m++) {
? ? // ? ? lis[i].onclick = function () {
? ? // ? ? ? ? alert(i)
? ? // ? ? }
? ? // }
? ? for (let m = 0; m < lis.length; m++) {
? ? ? ? lis[m].onclick = function () {
? ? ? ? ? ? alert(m)
? ? ? ? }
? ? }
? ? {
? ? ? ? let e = 1;
? ? ? ? // let e = 2;//let 在同一个作用域不能重复声明
? ? }
? ? const k = [1, 2, 3];
? ? k = []
? ? console.log(k);
?
? ? // const
? ? // 1.和let基本一致（局部，不会变量提升，不能重复声明)
? ? // 2.声明必须赋值
? ? // Uncaught没有捕捉到SyntaxError语法错误
? ? // const PI;
? ? const PI = 3.1415926;
? ? console.log(PI);
? ? // 3.声明的数据不能修改（值类型)
? ? // PI = 3.14;
? ? const PERSON = {
? ? ? ? name: "Baize", age: 18
? ? };
? ? //引用类型常量
? ? PERSON.age = 24;
? ? //引用类型只要不是重新赋值，都是引用同一块内存地址
? ? // PERSON = {};
? ? console.log(PERSON);
? ? // 4.建议变量名大写
结构数组
就是把数组解析为单个的变量
??? 1.把数组解析单个的变量
? ? 2.可以逗号跳过某个元素
? ? 3.通过...接收剩余内容(不定参)
? ? let arr = [1, 3, 5, 7, 9, 11, 12, 13];
? ? let [a, , b, ...c] = arr;
? ? console.log(a);
? ? console.log(b);
? ? console.log(c);
?
? ? // 4. 可以给默认值
? ? let arr2 = [1, 2, 3, 4];
? ? let [d, e, f, g = 88] = arr2;
? ? console.log(d, e, f, g)
? ? // 5.可以交换变量
? ? var k = 100;
? ? var j = 50;
? ? [k, j] = [j, k];
? ? console.log(k, j);
对象解构
? ? 1.对象解构就是把对象解析为单独的变量
??? 2.不用按顺序解构
?let obj = { name: "baize", age: 22 }
? ? let { age, name } = obj;
? ? console.log(name);
? ? console.log(age);
新增字符串方法
?
检测:
? ?????? includes是否包含,
???????? startsWith以..开头?
?????????endsWith以...结尾
???????? includes检测是否包含字符串,包含返回true不包含返回false
? var str = "我爱我的祖国，我的祖国，是中国的国";
? ? ? ? console.log(str.includes('他乡'));
? ? ? ? console.log(str.includes('祖国'));
? ? ? ? console.log(str.startsWith("我恨"));
? ? ? ? console.log(str.endsWith("国"));
填充和去空白
?? string字符串
?? 1.padStart填充在前面, padEnd填充后面
?? 2.trim移除两端空白,trimLeft,trimRight移除左右空白
?? 3.表单交互先移除空白
?? 4.遍历的新方式for of
? ? ? ? var str = "1";
? ? ? ? //补齐3位数，不够用0来填充
? ? ? ? console.log(str.padStart(3, "0"));
? ? ? ? //补齐3位数，不够用_来填充
? ? ? ? console.log(str.padEnd(4, "_"))
? ? ? ? //时间01 22
? ? ? ? var mystr = " ? ? 你好,东三街怎么走";
? ? ? ? console.log(mystr);
? ? ? ? console.log(mystr.trim())
? ? ? ? //特别生僻字是占两个字节(导致str.length与字符不匹配异常）
? ? ? ? var str = "田里的水太多了，你做𠮷口，把水放出来!";
? ? ? ? // for (var i = e; i < str.Length; i++) {
? ? ? ? // ? ? console.Log(str[i]);
? ? ? ? // }
? ? ? ? for (let s of str) {
? ? ? ? ? ? console.log(s);
? ? ? ? }
新增数组方法
? ES3: sort
? ES5:高阶,forEach filter map reduce some every
? ES6:find查找符合条件的元素,findIndex查找符合条件元素的下标
? ? ? ? var arr = [2, 4, 6, 7, 8];
?
? ? ? ? //find查找符合条件的元素
? ? ? ? // var el = arr.find(function (item) {
? ? ? ? //if (item > 5) { return true }
? ? ? ? //})
? ? ? ? // var el = arr.find(item => item > 5);
? ? ? ? // console.Log(el);
?
? ? ? ? // findIndex查找符合条件元素的下标
? ? ? ? // var index = arr.findIndex(function(item){
? ? ? ? //return item > 5;
? ? ? ? // })
? ? ? ? // alert(index );
?
? ? ? ? // forEach遍历元素
? ? ? ? var arr1 = ["小红", "小绿", "小蓝", "小紫", '小黑'];
? ? ? ? // item当前遍历的元素, index当前元素的下标，self当前遍历的数组
? ? ? ? arr1.forEach(function (item, index, self) {
? ? ? ? ? ? // consoLe.Log(item, index, seLf)
? ? ? ? })
?
? ? ? ? // filter 过滤不符合条件的元素(返回true保留，返回faLse过滤掉)
? ? ? ? var arr2 = arr.filter(function (item) {
? ? ? ? ? ? return item % 2 === 6;
? ? ? ? })
? ? ? ? // consoLe.Log( "arr2 " , arr2)
?
? ? ? ? //filter通常可以实现数组的去重
? ? ? ? var arr3 = [1, 1, 2, 2];
? ? ? ? // 1 item 0 0 true保留
? ? ? ? // 1 item 0 1 false过滤
? ? ? ? // 2 item 2 2 true保留
? ? ? ? // 2 item 2 3 false 过滤
? ? ? ? var arr4 = arr3.filter(function (item, index) {
? ? ? ? ? ? //获取元素查找出来的下标
? ? ? ? ? ? var ind = arr3.indexOf(item); if (ind === index) {
? ? ? ? ? ? ? ? //如果查找出的下标与遍历下标一致，元素保留
? ? ? ? ? ? ? ? return true
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? console.log("arr4", arr4)
?
? ? ? ? // reduce类型,上次的结果是当次的条件
? ? ? ? // 数组的求和
? ? ? ? var total = arr.reduce(function (a, b) {
? ? ? ? ? ? return a + b;
? ? ? ? })
? ? ? ? // a:2 b:4 return 6
? ? ? ? // a:6 b:6 return 12
? ? ? ? // a:12 b:7 return 19
? ? ? ? // a:19 b:8 return 27
? ? ? ? console.log(total);
? ? ? ? var big = arr.reduce(function (a, b) {
? ? ? ? ? ? return a * 10 + b;
? ? ? ? })
? ? ? ? console.log("big", big);
?
? ? ? ? // some有一返回真，着整体为真
? ? ? ? var arr6 = [5, 1, 2, 12, 3, 7];
? ? ? ? //判arr6里面是否有一个大于10的数
? ? ? ? var isbig = arr6.some(function (item) {
? ? ? ? ? ? return item > 10;
? ? ? ? })
? ? ? ? console.log("isbig", isbig);
?
? ? ? ? // every所有的回调函数返回为真，才返回真
? ? ? ? // 查找所有的数是否都大于5
? ? ? ? var bigF = arr6.every(function (item) {
? ? ? ? ? ? return item > 5;
? ? ? ? })
? ? ? ? console.log("bigF", bigF)
箭头函数
???????? 1.箭头函数:函数的简写
? ? ? ?? 2.如果不是一个参数需要添加()
? ? ? ?? 3.如果有多行语句用{}，返回用return
? ? ? ?? 4.如果需要返回对象用({})
? ? ? ? var fun = function () {
? ? ? ? ? ? console.log("love");
? ? ? ? }
? ? ? ? var fun1 = () => console.log("love");
? ? ? ? //=>左侧是参数
? ? ? ? //=>右侧是执行语句也是返回值
? ? ? ? fun();
? ? ? ? fun1();
? ? ? ? var fun2 = age => console.log("love" + age);
? ? ? ? var fun2s = (age, name) => console.log("love" + age + name);
? ? ? ? fun2(18);
? ? ? ? fun2s(18, 'baize');
? ? ? ? var fun3 = age => {
? ? ? ? ? ? if (age) {
? ? ? ? ? ? ? ? console.log("love" + age)
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? console.log(age);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? fun3(19)
? ? ? ? var fun4 = (age, name) => ({ name: name, age: age, msg: "大家好我是" + name })
? ? ? ? console.log(fun4(19, 'baize1'));
箭头函数this指向
?箭头函数的this指向的是函数的上一层作用域的this
? ? ? ? var age = 50;
? ? ? ? var obj = {
? ? ? ? ? ? age: 18,
? ? ? ? ? ? grow: () => {
? ? ? ? ? ? ? ? setInterval(() => {
? ? ? ? ? ? ? ? ? ? this.age++;
? ? ? ? ? ? ? ? ? ? console.log(this.age);//51
? ? ? ? ? ? ? ? }, 3000)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // obj.grow();
? ? ? ? // var grow = obj.grow;
? ? ? ? // window.grow()
? ? ? ? var arr = [2, 4, 6, 7, 8];
? ? ? ? //过滤出大于5的数
? ? ? ? var arr1 = arr.filter(item => item > 5);
? ? ? ? console.log(arr1)
? ? ? ? var total = arr.reduce((a, b) => a + b);
? ? ? ? console.log(total);
? ? 函数默认参、不定参(形参，定义的时候)、拓展参(实参，执行的时候)
//当参数是undefined时候取默认参数
? ? ? ? function say(name, age = 28) {//age=28函数默认参数
? ? ? ? ? ? console.log("大家好我的名字是" + name + "今年" + age)
? ? ? ? }
? ? ? ? say("baize", 17);
? ? ? ? say("baize", undefined);
?
? ? ? ? //并不确定函数的参数是几个(定义函数的时候)
? ? ? ? // ...变量名，接收所有的参数列表
? ? ? ? function add(...args) {//...args是不定参
? ? ? ? ? ? var total = args.reduce((a, b) => a + b);
? ? ? ? ? ? console.log(total);
? ? ? ? }
? ? ? ? add(2, 3);
? ? ? ? add(1, 2, 5);
?
? ? ? ? function metting(p1, p2, p3) {
? ? ? ? ? ? console.log("今天来的" + p1 + p2 + "和" + p3)
? ? ? ? }
? ? ? ? metting("水煮鱼", "老王", "老张")
? ? ? ? var arr = ["老王", "老郑", "老张", "水煮鱼"];
? ? ? ? // metting.apply(null, arr);
? ? ? ? metting(...arr);//...arr拓展参
对象
对象新增
? ? 1.Object.create()通过现有对象创建一个新的对象
? ? 2.Object.keys()获取对象所有键的集合成为一个数组
? ? 3.Object.values()获取值的集合
? ? 4.Object.assign(）合并数据
? ? <script>
? ? ? ? var obj1 = { name: "baize", age: 18, leg: 2 };
? ? ? ? var obj2 = { age: 17, job: "bo" };
? ? ? ? //合并复制对象
? ? ? ? var obj3 = Object.assign(obj1, obj2);
? ? ? ? console.log(obj3);
? ? ? ? var vals = Object.values(obj3);
? ? ? ? console.log(vals);
? ? ? ? var keys = Object.keys(obj3);
? ? ? ? console.log(keys);
? ? ? ? var obj4 = Object.create(obj3);//继承
? ? ? ? console.log(obj4);
对象的简写、属性简写、函数的简写、属性名可以用变量拼接
? ? ? ? var name = "baize";
? ? ? ? var age = 18;
? ? ? ? var n = "nick";
? ? ? ? var m = "name";
? ? ? ? // var obj = { name: name, age: age, leg: 2, say: function () { aLert(this.name) } };
? ? ? ? var obj = { name, age, leg: 2, [n + m]: "小" + this.name, say() { alert(this.name) } }
? ? ? ? console.log(obj);
模块
ES6模块
灵活导入外部代码
export 与 import
import 命令会提升到整个模块的头部，首先执行。
export 命令可以出现在模块的任何位置，但必需处于模块顶层。
? //1.从12模块.js导入了format方法
? ? ? ? // ? ? import format from './12模块.js ';
?? //1(1).名称reverse必须和12模块.js方法名保持一致
? ? ? ? // ? ? console.log(format(new Date()))
?
? ? //2.as是起一个别名的意思
? ? ? ? import format, { reverse as r, PRICE } from './12模块.js'
? ? ? ? console.log(format(new Date()))
? ? ? ? console.log(r("甜蜜蜜"))
? ? ? ? console.log(PRICE)
?
? ? ? ? //2(1).把12模块.js文件中所有东西导入别名是utils
? ? ? ? import * as utils from './12模块.js'
? ? ? ? utils.say();
? ? ? ? console.log(utils.reverse("我喜欢你"))
? ? ? ? console.log(utils.default(new Date()))
? ? ? ? console.log(utils.name)
? ? ? ? // export导出default默认
? ? ? ? // module模块import导入from 从 as别名
12模块.js
// 定义一个方法
function format(date) {
? ? return date.toLocaleString();
}
// 一个文件只能导出一个默认
// 导出默认一个方法
export default format;
//导出一个方法(可以导出多个)
export function reverse(str) {
? ? return str.split('').reverse().join('');
}
//导出一个变量
export const PRICE = 500;
var name = "三明治";
function say() {
? ? console.log("我的东西价格是:" + PRICE)
}
//先定义再导出
export {
? ? name,
? ? say
}
ES6类
?//类的最基本格式
?// 类就是创建对象实例的模板
?// constructor构造函数
?// this指向是其创建出来实例
?<h1>ES6类</h1>
? ? <script type="module">
? ? ? //Person称为类
? ? ? ? /* import Person from '../13Person .js '
? ? ? ? // p1,p2称为实例
? ? ? ? var p1 = new Person("小白", 6);
? ? ? ? var p2 = new Person("小泽" ,7);
? ? ? ? console.Log( p1 , p2);
? ? ? ? pi.say(); */
? ? ? ? console.log(typeof Student)
? ? //function类的本质是函数
//2
? ? ? ? import Student from './14Student.js '
? ? ? ? var s1 = new Student("小红", 22, "javascript")
? ? ? ? var s2 = new Student("小张", 25, "前端");
? ? ? ? console.log(s1, s2);
? ? ? ? //使用继承的方法
? ? ? ? s2.say();
? ? ? ? // 使用自身的方法
? ? ? ? s2.study();
? ? </script>
13Person.js
export default class Person {
? ? constructor(name, age) {
? ? ? ? this.name = name; this.age = age;
? ? }
? ? say() {
? ? ? ? console.log("我是" + this.name + "今年" + this.age + "一顿要吃" + this.age +
? ? ? ? ? ? "个馍")
? ? }
?
14Students.js
//导如person
import Person from './13Person.js'
// extends继承
export default class student extends Person {
? ? constructor(name, age, major) {
? ? ? ? super(name, age);//调用父构造函数
? ? ? ? this.major = major;
? ? }
? ? study() {
? ? ? ? console.log(this.name + "正在努力的学习" + this.major)
? ? }
} ?
set
?set常用来去重
? ? ?? var arr = [1, 2, 1, 2, 1, 1, 2];
? ? ?? var arr1 = [...new Set(arr)];
? ? ?? console.log(arr1)//1,2
?var s1 = new Set([1, 2, 1, 2, 5, 9, 9, 8]);
? ? ? ? // add添加delete删除 cLear清空 has检测size大小
? ? ? ? console.log(s1.size);
? ? ? ? s1.add(88);
? ? ? ? s1.delete(9);
? ? ? ? console.log(s1);//1, 2, 5, 8, 88
map(映射)
? ? ? // map图键名可以是任意类型
? ? ? ? var m = new Map([["name", "mumu"], ["age", 18], [{ eye: 2 }, "好眼睛"]
? ? ? ? ]);
? ? ? ? console.log(m);
? ? ? ? //set添加 get获取 size大小 delete删除，clear清空
? ? ? ? console.log(m.get("name"))
? ? ? ? m.set(null, "没有");
? ? ? ? console.log(m);
? ? ? ? m.delete("age");
? ? ? ? console.log(m);
迭代对象
? 迭代对象，可以用for of遍历对象是迭代对象
? String字符串Array数组set集合Map图
? keys键结果 values 值的集合 entries键与值的集合
?var s1 = new Set([1, 5, 7, "name", "mumu"]);
? ? ? ? for (var v of s1) {
? ? ? ? ? ? console.log("v:", v);
? ? ? ? }
? ? ? ? for (var key of s1.keys()) {
? ? ? ? ? ? console.log('key:', key);
? ? ? ? }
? ? ? ? for (var key of s1.values()) {
? ? ? ? ? ? console.log('keyval:', key);
? ? ? ? }
? ? ? ? //
? ? ? ? var arr = ["red", "blue", "yellow"];
? ? ? ? for (var key of arr.keys()) {
? ? ? ? ? ? console.log(key);
? ? ? ? }
? ? ? ? for (var [k, v] of arr.entries()) {
? ? ? ? ? ? console.log(k, v)
? ? ? ? }
同步和异步
?//异步先执行主线程代码，再执行其他代码
? ? ? ? // consoLe.Log (1);
? ? ? ? // setTimeout(() => console.log(2), 1000);
? ? ? ? // console.Log(3);
? ? ? ? //实现异步:1.回调函数，2.事件响应3. promise承诺，4.订阅和发布模式
?function say(str, delay, callback) {
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? console.log(str);
? ? ? ? ? ? ? ? if (callback) { callback() }
? ? ? ? ? ? }, delay)
? ? ? ? }
? ? ? ? say("你笑起来真好看", 2000, () => {
? ? ? ? ? ? say("我能加你个微信吗?", 3000, () => {
? ? ? ? ? ? ? ? say("我能做你男朋友吗", 5000)
? ? ? ? ? ? })
? ? ? ? })
promise
?//承诺买个大house前面是游泳池，后面花园，楼顶停机坪
? ? ? ? var p = new Promise((resolve, reject) => {
? ? ? ? ? ? var n = Math.random();
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? if (n > 0.5) {
? ? ? ? ? ? ? ? ? ? resolve("买个大house前面是游泳池，后面花园，楼顶停机坪")
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? reject("游泳池去大众澡堂也可以，花园去公园就有了，house咱们租的房子也是一样")
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 2000)
? ? ? ? })
? ? ? ? console.log(p);
? ? ? ? // 承诺有3个状态 ?pending准备 ? rejected拒绝 ?resolved兑现
? ? ? ? // 状态发生变化就不能更改
? ? ? ? // .then回调函数拿到的是resloved兑现状态的结果
? ? ? ? // .catch回调函数拿到的是rejected拒绝的理由
? ? ? ? p.then(res => {
? ? ? ? ? ? console.log(res);
? ? ? ? })
? ? ? ? ? ? .catch(err => console.error(err))
promise解决回调地狱
? ? //我能做你男朋友吗
? ? ? ? function say(msg, delay) {
? ? ? ? ? ? //返回一个promise的实例
? ? ? ? ? ? return new Promise((resolve, reject) => {
? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? resolve(msg);
? ? ? ? ? ? ? ? }, delay)
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? say("你笑起来真好看", 2000).then(res => {
? ? ? ? ? ? console.log(res);
? ? ? ? ? ? return say("我能加你个微信吗?", 3000)
? ? ? ? })
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? console.log(res);
? ? ? ? ? ? ? ? return say("能做你男朋友吗", 5000)
? ? ? ? ? ? })
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? console.log(res);
? ? ? ? ? ? })
? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? console.log(err)
? ? ? ? ? ? })
jsonp
// 什么事浏览器同源策略（当前文件请求服务器时候要求，请求地址与当前文件同源）
? ? ? ? // 同源：域名，子域名，端口号，协议一致
? ? ? ? // 跨域：绕过浏览器的同源策略跨域名获取数据
? ? ? ? // jsonp 利用script src没有同源策略限制返回方法执行加数据
? ? ? ? // 提前定义这个方法就可以
? ? ? ? // 拼接url，定义方法的名称，动态创建script 异步
? ? ? ? function jsonp(url){
? ? ? ? ? ? return new Promise((resolve,reject)=>{
? ? ? ? ? ? ? ? // 定义函数的名称
? ? ? ? ? ? ? ? var funname="jp"+Date.now();
? ? ? ? ? ? ? ? // 定义script的src
? ? ? ? ? ? ? ? var src = url+"&callback="+funname;
? ? ? ? ? ? ? ? // 创建一个script
? ? ? ? ? ? ? ? var script = document.createElement("script");
? ? ? ? ? ? ? ? // 指定src
? ? ? ? ? ? ? ? script.src= src;
? ? ? ? ? ? ? ? // 插入body
? ? ? ? ? ? ? ? document.body.appendChild(script);
? ? ? ? ? ? ? ? // 定义函数
? ? ? ? ? ? ? ? window[funname] = function(data){
? ? ? ? ? ? ? ? ? ? // 把动态创建的script标签移除
? ? ? ? ? ? ? ? ? ? document.body.removeChild(script);
? ? ? ? ? ? ? ? ? ? resolve(data);
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 错误拒绝
? ? ? ? ? ? ? ? script.onerror = function(err){
? ? ? ? ? ? ? ? ? ? // 把动态创建的script标签移除
? ? ? ? ? ? ? ? ? ? document.body.removeChild(script);
? ? ? ? ? ? ? ? ? ? reject(err)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? /* jsonp("https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=河南省&city=郑州市")
? ? ? ? .then(res=>{
? ? ? ? ? ? console.log(res);
? ? ? ? })
? ? ? ? .catch(err=>{
? ? ? ? ? ? console.error(err)
? ? ? ? }) */
? ? ? ? jsonp("https://r.inews.qq.com/api/ip2city?otype=jsonp")
? ? ? ? .then(res=>{
? ? ? ? ? ? // 先通过ip获取地址
? ? ? ? ? ? console.log(res);
? ? ? ? ? ? // 返回新的promise获取天气
? ? ? ? ? ? return jsonp(`https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${res.province}&city=${res.city}`)
? ? ? ? })
? ? ? ? .then(res=>{
? ? ? ? ? ? console.log("天气",res);
? ? ? ? })
? ? ? ? .catch(err=>console.error(err))
? ? ? ?
? ? ? ? ?// function jp(data){
? ? ? ? ? ? // ?console.log(data);
? ? ? ? ?// }
使用promise下载一张图片
? ? ? ? //02在promise创建一个img标签
? ? ? ? //03 img onLoad加载 resolve img
? ? ? ? // 04 img onerror出错reject
? ? ? ? function downImg(url) {
? ? ? ? ? ? //返回promise
? ? ? ? ? ? return new Promise((resolve, reject) => {
? ? ? ? ? ? ? ? //创建图片
? ? ? ? ? ? ? ? var img = document.createElement("img");//指定src
? ? ? ? ? ? ? ? img.src = url;//加载成功返回图片
? ? ? ? ? ? ? ? img.onload = function () {
? ? ? ? ? ? ? ? ? ? resolve(img);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //加载失败返回错误原因
? ? ? ? ? ? ? ? img.onerror = function (err) {
? ? ? ? ? ? ? ? ? ? reject(err)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? downImg("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340")
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? document.body.appendChild(res);
? ? ? ? ? ? })
? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? console.error(err);
? ? ? ? ? ? })
async修饰符
? ?// async修饰的函数，函数执行返回的是一个promise对象
? ? ? ? //通常配合await等待关键字, await只能出现在async装饰的函数里面
? ? ? ? //await会等待promise的resolve的结果
? ? ? ? function say(msg, delay) {
? ? ? ? ? ? return new Promise((resolve, reject) => {
? ? ? ? ? ? ? ? setTimeout(() => resolve(msg), delay);
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? async function doit() {
? ? ? ? ? ? var m1 = await say("你好，我能加你个微信吗?", 4000);
? ? ? ? ? ? console.log(m1);
? ? ? ? ? ? var m2 = await say("走吃个串串", 3000);
? ? ? ? ? ? console.log(m2);
? ? ? ? ? ? return "国庆快乐! ";
? ? ? ? }
? ? ? ? doit()
? ? ? ? ? ? .then(res => console.log(res));
? ? ? ? //var result = doit();
? ? ? ? // console.Log(result);
|