ES6学习笔记

ES6学习笔记

1.let和const

let和const都是ES6新增的声明变量的方法。

1.1 let的特点

1. let是块级作用域
2. let声明的变量不能重复定义
3. let声明的变量没有变量提升
4. 虽然没有变量提升，但是不影响作用域链的作用

1.2 const的特点

1. const声明的变量一定要赋一个初始值
2. 和let一样，都是存在于块级作用域中
3. const声明的变量是常量，常量的值不能被修改（除了数组和对象的方法）

2.解构赋值

定义：按一定的模式从数组或对象中提取值，然后对变量进行赋值

const  F4 = ['xsy','ln','zs','sxb']
let [x,l,z,s] = F4
console.log(x,l,z,s)
console.log('===============')
console.log(F4)

  //对象的解构
const players = {
    NBA:'James',
    NBA2:'KD',
    NBA3:function (){
        console.log('hello')
    }
}
let {NBA,NBA2,NBA3} = players
console.log(NBA)
console.log(NBA2)
console.log(NBA3)
NBA3()
players.NBA3()

3.箭头函数

箭头函数是ES6新增的对函数声明的另一种写法。

特点：

1. 不能改变this的指向，call()和apply()也不行；
2. 不能作为构造实例化对象；

    let People = (name,age)=>{
        this.name = name;
        this.age = age;
    }
    let man = new People('bob',21)
    console.log(man)
    //代码执行会报错的，因为不能实例化对象

3. 不能使用arguments变量，可以使用rest参数(...)，下面讲到。

    function arg() {
        console.log(arguments)
    }
    arg(1,2,3)

    let arg2 = () =>{
        console.log(arguments)
    }
    arg2(1,2,3)  //无效

4.rest参数和拓展运算符

(1)rest参数

(2)拓展运算符

直接上例子：

   // 1.数组的合并
    let kuaizi = ['肖央','王太利']
    let fenghuang = ['曾毅','玲花']
    let newArr = kuaizi.concat(fenghuang)
    //应用扩展运算符 ...
    let newArr2 = [...kuaizi,...fenghuang]
    console.log(`${newArr}------>${newArr2}`)

//    2.数组的克隆
    let sanzhihua = ['G','E','M']
    let copyArr = [...sanzhihua]
    console.log(copyArr)


//    3.将伪数组转为真正的数组
    let divs = document.querySelectorAll('div')
    let divArr = [...divs]
    console.log(divArr)

5.Symbol数据类型

Symbol数据类型是ES6新增的一种数据类型，它表示独一无二的值。

特点：

1. 值是唯一的，可以解决命名冲突的问题
2. 不能与其他数据类型进行运算
3. 定义的对象不能用for...in进行循环遍历，但可以使用Reflect.ownkeys获取对象的所有键名。

6.迭代器？

定义：

它是一种接口，可以为各种不同的数据结构提供统一的访问机制；ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

工作原理：

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

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

    function myIterator(arr) {
        let nextIndex = 0
        return {
          next: function() {
            return nextIndex < arr.length
              ? { value: arr[nextIndex++], done: false }
              : { value: undefined, value: true }
          }
        }
      }
      let arr = [1, 4, 'ads']// 准备一个数据
      let iteratorObj = myIterator(arr)
      console.log(iteratorObj.next()) // 所有的迭代器对象都拥有next()方法，会返回一个结果对象
      console.log(iteratorObj.next())
      console.log(iteratorObj.next())
      console.log(iteratorObj.next())

7.生成器

概念：

• Generator函数是ES6提供的解决异步编程的一种解决方案，语法和传统函数完全不同
• 语法上，可以理解成Generator函数是一个状态机，封装了多个内部状态。
• Generator除了是一个状态机，还是一个遍历对象生成函数。
• 可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果

特点：

1. function关键字和函数名之间有一个星号 *隔开；
2. 函数体内部使用yield表达式，定义不同的内部状态。

注意：Generator函数是分段执行的，调用next方法函数内部逻辑开始执行，遇到yield表达式停止；返回{value:yield后的表达式结果/undefined,done:false/true},再次调用next方法会从上一次停止时的yield处开始，直到最后。

function * gen(arg){
        console.log(arg)
        let one = yield 111; //第一次执行的地方，输出AAA {value:111 ....false}

        console.log(one)
        let two = yield 222; //第二次执行的地方，输出one=BBB，{value:222 ...false}

        console.log(two)
        let three = yield 333; //第三次执行的地方，输出 two=CCC，{value:333 ...false}

//第四次到这里，输出three=DDD，但是没有yield语句，所以返回{value:undefined,done=true}
        console.log(three)
    }
//    执行获取迭代器对象
    let iterator = gen('AAA');
    //next方法可以传入实参
    console.log(iterator.next())
    console.log(iterator.next('BBB'))
    console.log(iterator.next('CCC'))
    console.log(iterator.next('DDD'))

业务需求，发送请求获取数据

    function* sendXml() {
      // url为next传参进来的数据
     let url = yield getNews('http://localhost:3000/news?newsId=2');//获取新闻内容
      yield getNews(url);//获取对应的新闻评论内容，只有先获取新闻的数据拼凑成url,才能向后台请求
    }
    function getNews(url) {
      $.get(url, function (data) {
        console.log(data);
        let commentsUrl = data.commentsUrl;
        let url = 'http://localhost:3000' + commentsUrl;
        // 当获取新闻内容成功，发送请求获取对应的评论内容
        // 调用next传参会作为上次暂停是yield的返回值
        sx.next(url);
      })
    }
    let sx = sendXml();// 发送请求获取新闻内容
    sx.next();

8.Promise

概念：

ES6的异步编程的新方案，为了解决回到地狱的问题，是一个构造函数封装异步操作并获取成功和失败的结果。

Promise可以理解为是一个事务，这个事务包含三种状态：

• pending：初始状态，未完成
• resolved：已经完成，成功状态
• rejected：失败状态

var p = new Promise(function (resolve, reject) {
    if(/* 异步操作成功 */){
        resolve(ret);
    } else {
        reject(error);
    }
});

Promise的then方法

p.then(function (value) {
    // 完成态，value是上面resolve传入的值
}, function (error) {
    // 失败态，error是上面reject传入的值
});

then方法传入的两个参数，分别是两个函数。

1. 第一个参数（函数），是表示resolved状态时执行的代码
2. 第二个参数（函数），是表示rejected状态时执行的代码

实例

Promise封装ajax请求：

//接口地址：https://api.apiopen.top/getJoke

	const p = new Promise((resolve, reject) => {


//    1.创建对象
		const xhr = new XMLHttpRequest();
//	   2.初始化
		xhr.open('GET', 'https://api.apiopen.top/getJoke/');
//    3.发送
		xhr.send();
//    4.绑定事件，处理解构
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					//成功
					resolve(xhr.response)
				} else {
					reject(xhr.status)
				}
			}
		}
	})
	p.then(function (value) {
		console.log(value)
	}, function (reason) {
		console.error('fail')
	})