SE6的常用函数

Promise对象

//创建promise对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise状态：pending（初始化）
        console.log('111');
        //执行异步操作，通常是发送ajax请求、开启定时器
        setTimeout(() => {
            console.log('333');
            //根据异步任务的返回结果，去修改promise的状态
            //异步任务执行成功
            // resolve('哈哈');//修改promise的状态为fullfilled（成功状态）
            //异步任务执行失败
            reject('555');//修改promise的状态为rejected（失败状态）
        }, 2000);
    })
    console.log('222');

    promise
        .then((data) => {//成功的回调
            console.log(data, '成功了~~~');
        }, (error) => {//失败的回调
            console.log(error, '失败了~~~');
        });
    */

    // 定义获取新闻的功能函数
    function getNews(url){
        let promise = new Promise((resolve, reject) => {
            // 状态：初始化
            // 执行异步任务
            // 创建xmlHttp实例对象
            let xmlHttp = new XMLHttpRequest();
            console.log(xmlHttp.readyState);
            //绑定readyState监听
            xmlHttp.onreadystatechange = function(){
                if(xmlHttp.readyState === 4){
                    if(xmlHttp.status == 200){//请求成功
                        // console.log(xmlHttp.responseText);
                        //修改状态
                        resolve(xmlHttp.responseText);//修改promise的状态为成功的状态
                    }else{//请求失败
                        reject('暂时没有新闻内容');
                    }
                }
            };

            // open设置请求的方式以及url
            xmlHttp.open('GET', url);
            // 发送
            xmlHttp.send();
        })

        return promise;
    }

    getNews('http://localhost:30001/news?id=2')
        .then((data) => {
            console.log(data);
            // console.log(typeof data);

            // 准备获取评论内容的url
            let commentsUrl = JSON.parse(data).commentsUrl;
            let url = 'http://localhost:3000' + commentsUrl;

            // 发送请求获取评论内容
            return getNews(url);
        }, (error) => {
            console.log(error);
        })
        .then((data) => {
            console.log(data);
        }, () => {

        });

Symbol

1. 前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境

2. 概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)

3. 特点：

• 1. Symbol属性对应的值是唯一的，解决命名冲突问题
• 2. Symbol值不能与其他数据进行计算，包括同字符串拼串
• 3. for in, for of遍历时不会遍历symbol属性

4. 使用：

• 1. 调用Symbol函数得到symbol值

let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';

2. 传参标识

let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);// Symbol('one')
console.log(symbol2);// Symbol('two')

3. 内置Symbol值

• 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法

• Symbol.iterator

• 对象的Symbol.iterator属性，指向该对象的默认遍历器方法

<script type="text/javascript">
    //创建symbol属性值
    let symbol = Symbol();
    console.log(symbol);

    let obj = {username: 'kobe', age: 40};
    obj.sex = '男';
    obj[symbol] = 'hello';
    console.log(obj);

    //for in、for of不能遍历symbol属性
    for(let i in obj){
        console.log(i);
    }

    let symbol2 = Symbol('one');
    let symbol3 = Symbol('two');
    console.log(symbol2 == symbol3);
    console.log(symbol2,symbol3);

    //可以去定义常量
    const Person_key = Symbol('person_key');
    console.log(Person_key);
</script>

Iterator遍历器

概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制

作用：

• 1. 为各种数据结构，提供一个统一的、简便的访问接口；
• 2. 使得数据结构的成员能够按某种次序排列
• 3. ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

工作原理：

• 创建一个指针对象(遍历器对象)，指向数据结构的起始位置。
• 第一次调用next方法，指针自动指向数据结构的第一个成员
• 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
• 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}

• value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
• 当遍历结束的时候返回的value值是undefined，done值为false

<script type="text/javascript">
    //模拟指针对象（遍历器对象）
    function myIterator(arr){//iterator接口
        let nextIndex = 0;//记录指针的位置
        return {//遍历器对象
            next: function(){
                return {value: arr[nextIndex++], done: nextIndex < arr.length ? false : true};
            }
        }
    }

    //准备一个数据
    let arr = [1,4,65,'abc'];
    let iteratorObj = myIterator(arr);
    console.log(iteratorObj.next());
    console.log(iteratorObj.next());
    console.log(iteratorObj.next());
    console.log(iteratorObj.next());
    console.log(iteratorObj.next());
    console.log(iteratorObj.next());
    console.log(iteratorObj.next());

    // 将iterator接口部署到指定的数据类型上，可以使用for of去循环遍历
    // 数组、字符串、arguments、set容器、map容器
    for(let i of arr){
        console.log(i);
    }

    let str = 'abcdefg';
    for(let i of str){
        console.log(i);
    }

    function fun(){
        for(let i of arguments){
            console.log(i);
        }
    }

    fun(1,4,5,'abc');

    let obj = {username: 'kobe', age: 40};
    /*
    for(let i of obj){
        console.log(i);
    }
    */

    // 等同于在指定的数据结构上部署了iterator接口
    // 当使用for of去遍历某一个数据结构的时候，首先去找Symbol.iterator，找到了就去遍历，没有找到的话就不能遍历
    let targetData = {
        [Symbol.iterator]: function(){
            let nextIndex = 0;//记录指针的位置
            return {//遍历器对象
                next: function(){
                    return {value: this[nextIndex++], done: nextIndex < this.length ? false : true};
                }
            }
        }
    }
    /*我的测试
    let targetData = {
        username: 'kobe', 
        age: 40,
        [Symbol.iterator]: function(){
            let nextIndex = 0;//记录指针的位置
            let keys = Object.keys(targetData);
            return {//遍历器对象
                next: function(){
                    if(nextIndex < keys.length){
                        return {value: keys[nextIndex]+':'+targetData[keys[nextIndex++]], done: false};
                    }else{
                        return {value: undefined, done: true};
                    }
                }
            }
        }
    }
    
    // 不能直接for of遍历对象，因为对象的属性没有顺序
    // for(let i of targetData){
    //  console.log("----->"+i);
    // }
    
    //可以使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组
    for (var key of Object.keys(targetData)) {
        console.log(key + ': ' + targetData[key]);
    }

    // 获取迭代器
    let it = targetData[Symbol.iterator]();
    console.log('----->' + it.next().value);//----->username:kobe
    console.log('----->' + it.next().value);//----->age:40
    console.log('----->' + it.next().value);//----->undefined:undefined
    */

    // 使用三点运算符、解构赋值时，会默认去调用iterator接口
    let arr2 = [1,6];
    let arr3 = [2,3,4,5];
    arr2 = [1, ...arr3, 6];
    console.log(arr2);

    let [a,b] = arr2;
    console.log(a,b);
  </script>

原生具备iterator接口的数据(可用for of遍历)

• 1、Array
• 2、arguments
• 3、set容器
• 4、map容器
• 5、String
• ……

Generator函数

概念：

• 1、ES6提供的解决异步编程的方案之一
• 2、Generator函数是一个状态机，内部封装了不同状态的数据
• 3、用来生成遍历器对象
• 4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果

特点：

• 1. function 与函数名之间有一个星号
• 2. 内部用yield表达式来定义不同的状态
     例如：

function* generatorExample(){
  let result = yield 'hello';  // 状态值为hello
  yield 'generator'; // 状态值为generator
}

• generator函数返回的是指针对象(即iterator)，而不会执行函数内部逻辑
• 3. 调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
• 4. 再次调用next方法会从上一次停止时的yield处开始，直到最后
• 5. yield语句返回结果通常为undefined，当调用next方法时传参内容会作为启动时yield语句的返回值。

* 需求：
    * 1、发送ajax请求获取新闻内容
    * 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容
    * 3、新闻内容获取失败则不需要再次发送请求。
    */ 

    function getNews(url){
        $.get(url, function(data){
            console.log(data);
            let url = 'http://localhost:3000' + data.commentsUrl;
            SX.next(url);
        })
    }

    function* sendXml(){
        let url = yield getNews('http://localhost:3000/news?id=3');
        yield getNews(url);
    }

    //获取遍历器对象
    let SX = sendXml();
    SX.next();

async函数

async函数(源自ES2017)

• 概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作
• 本质： Generator的语法糖
• 语法：

async function foo(){
    await 异步操作;
    await 异步操作；
}

特点：

• 1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
• 2、返回的总是Promise对象，可以用then方法进行下一步操作
• async取代Generator函数的星号*，await取代Generator的yield
• 语意上更为明确，使用简单，经临床验证，暂时没有任何副作用

<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    //async基本使用
    async function foo(){
        return new Promise(resolve => {
            // setTimeout(function(){
            //  resolve();
            // }, 2000);
            setTimeout(resolve, 2000);
        })
    }

    async function test(){
        console.log('开始执行', new Date().toTimeString());
        await foo();
        console.log('执行完毕', new Date().toTimeString());
    }

    // test();

    // async里await的返回值
    function test2(){
        return 'xxx';
    }
    async function asyncPrint(){
        // let result = await test2();
        let result = await Promise.resolve('promise');
        console.log(result);

        result = await Promise.reject('失败了~');
        console.log(result)
    }
    // asyncPrint();

    // 获取新闻内容
    async function getNews(url){
        return new Promise((resolve, reject) => {
            $.ajax({
                url,
                type: 'GET',
                dataType: 'json'
            })
            .done(data => resolve(data))
            // .fail(error => reject());
            .fail(error => resolve(false));
        });
    }

    async function sendXml(){
        let result = await getNews('http://localhost:3000/newsasdf?id=7');
        console.log(result);
        if(!result){
            alert('暂时没有新闻推送~~');
            return;
        }
        result = await getNews('http://localhost:3000' + result.commentsUrl);
        console.log(result);
        console.log('错误了~~');
    }

    sendXml();
</script>

class

• 1. 通过class定义类/实现类的继承
• 2. 在类中通过constructor定义构造方法
• 3. 通过new来创建类的实例
• 4. 通过extends来实现类的继承
• 5. 通过super调用父类的构造方法
• 6. 重写从父类中继承的一般方法

<script type="text/javascript">
    /*
    function Person(name, age){
        this.name = name;
        this.age = age;
    }
    let person = new Person('kobe', 40);
    console.log(person);
    */

    //定义一个人物的类
    class Person{
        // 类的构造方法
        constructor(name, age){
            this.name = name;
            this.age = age;
        }
        // 类的一般方法
        showName(){
            console.log('调用父类的方法');
            console.log(this.name, this.age);
        }
    }
    let person = new Person('kobe', 40);
    console.log(person);
    // person.showName();
    // 子类
    class StarPerson extends Person{
        constructor(name, age, salary){
            super(name, age);
            this.salary = salary;
        }
        // 父类的方法重写
        showName(){
            console.log('调用子类的方法');
            console.log(this.name, this.age, this.salary);
        }
    }
    let sp = new StarPerson('wade', 36, 152450000);
    console.log(sp);
    sp.showName();
</script>

字符串扩展

• 1. includes(str) : 判断是否包含指定的字符串
• 2. startsWith(str) : 判断是否以指定字符串开头
• 3. endsWith(str) : 判断是否以指定字符串结尾
• 4. repeat(count) : 重复指定次数

数值扩展

• 1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
• 2. Number.isFinite(i) : 判断是否是有限大的数
• 3. Number.isNaN(i) : 判断是否是NaN
• 4. Number.isInteger(i) : 判断是否是整数
• 5. Number.parseInt(str) : 将字符串转换为对应的数值
• 6. Math.trunc(i) : 直接去除小数部分

数组扩展

• 1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
• 2. Array.of(v1, v2, v3) : 将一系列值转换成数组
• 3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
• 4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

对象扩展

• 1. Object.is(v1, v2)
• 判断2个数据是否完全相等
• 2. Object.assign(target, source1, source2..)
• 将源对象的属性复制到目标对象上
• 3. 直接操作 proto 属性

let obj2 = {};
obj2.__proto__ = obj1;