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参数(...)，下面讲到。
function arg() {
console.log(arguments)
}
arg(1,2,3)
let arg2 = () =>{
console.log(arguments)
}
arg2(1,2,3) //无效
4.rest参数和拓展运算符
(1)rest参数...
再ES6之前，可以用arguments来作为参数，可以表示多个参数的个数。
function num2(){
return arguments
}
num(1,2,3,4)
console.log(num2(1,2,3))
但是ES6不支持arguments,这时候就可以用到rest参数...，作用和arguments一样。形式...变量名。
注意，arguments对象不是数组，只能通过下标访问；而rest参数（...变量名）是一个真正的数组。
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')
})
传送门：ES6学习笔记-2
