1.promise对象
作用:用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
// 定义Promise对象
let myFirstPromise = new Promise(function (resolve, reject) {
//当异步代码执行成功时,我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
//在本例中,我们使用setTimeout(...)来模拟异步代码,实际编码时可能是XHR请求或是HTML5的一些API方法.
setTimeout(function () {
resolve("加载完成!"); //代码正常执行!
}, 250);
});
// 使用Promise对象
myFirstPromise.then(function (successMessage) {
//successMessage的值是上面调用resolve(...)方法传入的值.
//successMessage参数不一定非要是字符串类型,这里只是举个例子
console.log("Yes! " + successMessage);
});
function myAsyncFunction(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
};
myAsyncFunction(url).then(res => { }).catch(err => { });
2.for...of
迭代遍历Array,Map,Set,String,TypedArray,arguments 对象等等
迭代Array
let iterable = [10,20,30];
for (let value of iterable) {
value +=5;
console.log(value)
}
迭代Set
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
迭代Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
console.log(entry)
}
for (let [key, value] of iterable) {
console.log(key)
}
for (let [key, value] of iterable) {
console.log(value)
}
迭代DOM集合
注意:这只能在实现了NodeList.prototype[Symbol.iterator]的平台上运行
let articleParagraphs = document.querySelectorAll("article>p");
for (let paragraph of articleParagraphs){
paragraph.classList.add("read");
}
3.class定义类
class 声明创建一个基于型继承的具有给定名称的新类。
语法:
class name [extends]{
class body
}
实例:
class person{
constructor(name, age){
this.name = name;
this.age = age;
}
toString(){
return`name=${this.name} age=${this.age}`
}
}
var per = new person("java",18);
console.log(per.toString())
//继承
class Student extends person{
constructor(name,age,course){
super(name,age);
this.course=course;
}
toString(){
return`name=${this.name} age=${this.age} 课程=${this.course}`
}
}
var stu = new Student("空白",20,'javascript')
console.log(stu.toString())
4.模块的导出与导入
export语法
export { name1, name2, …, nameN }; 导出多个(对象、变量、方法)
export default expression; 导出默认的名称
常见的错误语法
导出一个变量 export
变量
导出匿名函数 export function(){}
匿名函数
正确做法
导出一个变量
export default 变量名
export {变量名}
导出匿名函数
export default function(){}
var f=function(){}
export {f}
import
作用:用于导入由另一个模块导出的绑定。
注意:import语句不能在嵌入式脚本中使用。需要使用转换器才能使用。
转换器
Traceur Compiler (案例使用)
语法
import defaultExport from "module-name"; --引入模块默认的名称,defaultExport名称自定义
import * as name from "module-name"; --模块整体加载到name对象
import { export } from "module-name";--导入一个变量
import { export as alias } from "module-name"; --取别名
import { export1 , export2 } from "module-name";--导入多个变量
import { export1 , export2 as alias2 , [...] } from "module-name"; --变量名和别名混用
import defaultExport, { export [ , [...] ] } from "module-name"; --导入缺省和非缺省的变量
import defaultExport, * as name from "module-name";--导入缺省和其它整体变量
import "module-name"; --导入模块
defaultExport 将引用模块默认导出的名称,可自定义。
module-name 要导入的模块。这通常是包含模块的.js文件的相对或绝对路径名,不包括.js扩展名。某些打包工具可以允许或要求使用该扩展;检查你的运行环境。只允许单引号和双引号的字符串。
name 引用时将用作一种命名空间的模块对象的名称。
export, exportN 要导入的导出名称。
alias, aliasN 将引用指定的导入的名称。
案例:
使用命名导出
在模块中,我们可以使用以下代码:
// module "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube,foo };
--------------------------------------------
这样的话,在其它脚本 (比如import),我们可以这样使用:
import { cube, foo } from 'my-module.js';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
使用默认导出
如果我们要导出一个值或模块中的返回值,就可以使用默认导出:
// module "my-module.js"
export default function cube(x) {
return x * x * x;
}
然后,在另一个脚本中,可以直接导入默认导出:
// module "my-module.js"
import cube from 'my-module';
console.log(cube(3)); // 27
注意,不能使用var,let或const作为默认导出。