ES6-1.md

ES6学习笔记

1.let和const

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

1.1 let的特点

let是块级作用域
let声明的变量不能重复定义
let声明的变量没有变量提升
虽然没有变量提升，但是不影响作用域链的作用
1.2 const的特点
const声明的变量一定要赋一个初始值
和let一样，都是存在于块级作用域中

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新增的对函数声明的另一种写法。

特点

不能改变this的指向，call()和apply()也不行；

不能作为构造实例化对象；

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

不能使用arguments变量，可以使用rest参数(...)，下面讲到。
1
2
3
4
5
6
7
8
9
function arg() {
console.log(arguments)
}
arg(1,2,3)

let arg2 = () =>{
console.log(arguments)
}
arg2(1,2,3) //无效
4.rest参数和拓展运算符
(1)rest参数…
再ES6之前，可以用arguments来作为参数，可以表示多个参数的个数。
1
2
3
4
5
function num2(){
return arguments
}
num(1,2,3,4)
console.log(num2(1,2,3))
但是ES6不支持arguments,这时候就可以用到rest参数...，作用和arguments一样。形式...变量名。
注意，arguments对象不是数组，只能通过下标访问；而rest参数（...变量名）是一个真正的数组。
1
2
3
4
5
let tfboys = ['易烊千玺','王源','王俊凯']
function chunwan(){
console.log(arguments)
}
chunwan(...tfboys)

(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新增的一种数据类型，它表示独一无二的值。

特点

值是唯一的，可以解决命名冲突的问题
不能与其他数据类型进行运算
定义的对象不能用for...in进行循环遍历，但可以使用Reflect.ownkeys获取对象的所有键名。
6.迭代器？
定义
它是一种接口，可以为各种不同的数据结构提供统一的访问机制；ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费。
工作原理
创建一个指针对象，指向数据结构的起始位置
第一次调用next()，指针会自动指向数据结构的第一个成员
接下来是不断调用next()，指针会一直往后移动，直到指向最后一个成员
每调用一次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后的表达式结果
特点

function关键字和函数名之间有一个星号 *隔开；

函数体内部使用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方法传入的两个参数，分别是两个函数。

第一个参数（函数），是表示resolved状态时执行的代码
第二个参数（函数），是表示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')
	})