es6新特性的学习(二)

es6 李宜发

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作为默认导出。
 
 
 

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :