ES6的学习笔记

es6阮一峰

1、let const 关键字

作用：

• 与var 类似，用于声明一个变量

特点：

• 在块级作用域内有效
  不能重复声明
  不会预处理，不存在变量提升

应用：

• 循环遍历加监听
• 使用let 取代var是趋势

// 通过let  使点击按钮获取对应索引值 （块级作用域）
let btns = document.getElementsByTagName('button')
for (let i = 0; i < btns.length; i++) {
	var btn = btns[i]
	btn.onclick = function() {
		console.log(i)
	}
}


// 通过闭包，点击按钮得到索引值 （函数作用域，效果同上）
let btns = document.getElementsByTagName('button')
for (var i = 0; i < btns.length; i++) {
	(function(i) {
		var btn = btns[i]
		btn.onclick = function() {
			console.log(i)
		}
	})(i)
}

// html
<button type="button">11</button>
<button type="button">22</button>
<button type="button">33</button>

2、变量结构赋值

const [x, y, z] = [10, 25, -34];   
——————————————
let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']  
—————————————— 
let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //报错
// 解构赋值中展开运算符只能用在最后

—————————————— 
var obj = {username: 'suzy',age: 18}
function foo({username,age}){
	console.log(age) //18
}
foo(obj)

3、模板字符串

let obj = {
	username: 'suzy',
	age: 18
}
// + 拼接
let str = '我的名字叫：' + obj.username + '。年龄：' + obj.age
console.log(str) // 我的名字叫：suzy年龄：18

// `${}`
let str2 = `我的名字叫：${obj.username}。年龄：${obj.age}`
console.log(str2) // 我的名字叫：suzy年龄：18

4、对象的简写方式

let username = 'suzy'
let age = 18
let obj = {
	username, // 同名属性可以省略不写
	age,
	getName() { // 可以省略函数的 function
		console.log(this.age)
	}
}
obj.getName() //18
console.log(obj) // {username: "suzy", age: 18}

5、箭头函数

// -形参的情况
// 1. 没有形参的时候
let fun = () => console.log('我是箭头函数')
fun();

// 1. 只有1个形参的时候
let fun2 = a => console.log(a)
fun2('aaa');

// 1. 2个及2个以上的形参的时候
let fun3 = (x, y) => console.log(x, y)
fun3(11, 22);

// - 函数体的情况
//1. 函数体只有一条语句或表达式的时候可以不写{},会自动返回结果
let fun4 = (x, y) => x + y
console.log(fun4(11, 22)); // 33

6、三点运算符

function foo(...value) {
	// arguments.callee(); // 递归, 相当于调用：foo()
	// arguments 是伪数组,不具备数组的一些方法:forEach
	console.log(arguments)
	
	// value 是真实数组
	value.forEach(function(item, index) {
		console.log(item, index) // 2 0 ,6 1
	})
}
foo(2, 6)

function test(a,b,c) { }
var args = [0,1,2];
test(...args);        
——————————————
// 下面是利用 apply 实现的相同的功能：
function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);  
______________________________
// 合并对象
let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
ab //{x:1,y:2,z:3}

7、形参默认值

function sayHello(name = "tony") {
    console.log(`hello ${name}`)
}

sayHello()
sayHello("xiaoming")

8、promise 对象原理

1、理解：

• promise对象：代表了未来某个将要发生的时间（通常是个异步操作）
• 有了promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数
• ES6的Promise是一个构造函数，用来生成Promise实例

2、使用步骤（2步）

• 第一步： 创建promise对象
• 第二步： 调用promise的then()

3、 promise对象的3个状态

• pending
• fullfilled
• rejected

4、应用

• 使用promise实现超时处理
• 使用promise 封装处理ajax请求

• 使用步骤（2步）

// 第一步
let promise = new Promise((resolve, reject) => {
// 初始promise状态为pending
// 执行异步操作,通常是发送ajax,开启定时器
setTimeout(function() {
	if (true) {
		const data = {
			name: 'suzy',
			age: 18
		}
		resolve(data) // 修改promise的状态为fullfilled (成功的状态)
	} else {
		reject('接口请求失败') // 修改promise的状态为rejected (失败的状态)
	}
}, 2000);
})

// 第二步
promise.then((data) => { // 成功的回调
console.log('成功', data)
}, (errMsg) => { // 失败的回调
console.log('失败', errMsg)
})

• 应用

function getNews(url) {
let promise = new Promise((resolve, reject) => {
		// 状态初始化
		// 执行异步任务
		// 创建xmlHttp实例对象
		let xmlHttp = new XMLHttpRequest();
		// 绑定监听 readyState
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState === 4 && xmlHttp.status == 200) { //请求成功
				resolve(xmlHttp.responseText) // 修改promise的状态为fullfilled (成功的状态)
			} else { // 请求失败
				reject('接口请求失败') // 修改promise的状态为rejected (失败的状态)
			}
		}
		/* 
		 * open 有5个参数,前面两个必选 ，后面3个可选
		 * xhrReq.open(method, url, async, user, password);
		 * method：http方法：POST、GET、PUT、PROPFIND
		 * url：请求的url地址
		 * async：布尔型 - 是否为异步方式，默认true.
		 * user:如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口 
		 * password：验证信息中密码部分，如果用户名为空，则此值将被忽略。
		 */
		xmlHttp.open('GET', url)
		// 发送
		xmlHttp.send()
	})
	return promise
}
getNews('http://XXXX')
	.then((data) => { // 成功的回调
		console.log('成功', data)
		// 如果想接着请求第二个接口的话
		return getNews('http://XXXXXX')
	}, (errMsg) => { // 失败的回调
		console.log('失败', errMsg)
	})
	.then((data) => {
		// ...
	}, (errMsg) => {
		// ...
	})

9、Symbol

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

概念：

• ES6中添加了一种原始数据类型：Symbol

特点：

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

// for in ，for of 遍历时不会遍历Symbol属性
let symbol = Symbol()
let obj = {
	username: 'suzy',
	age: 18
}
obj[symbol] = 'hello'

for (let i in obj) {  // 这边如果用 for of 会报：'obj[Symbol.iterator] is not a function'  的错误
	console.log(i) // username age （没有返回symbol值）
}

// 使用：
// 1、调用Symbol函数得到Symbol值
let symbol = Symbol()
let obj = {
	username: 'suzy',
	age: 18
}
obj[symbol] = 'hello'
console.log(obj) // {username: "suzy", age: 18, Symbol(): "hello"}

//2、传参标识 （定义常量，常量不可被修改,可以作为一个标识）
let s1 = Symbol('one')
let s2 = Symbol('two')
console.log(s1) // Symbol(one)
console.log(s2) // Symbol(two)

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

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

/* 
*  Symbol.iterator
*  概念：iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
*  作用：
*    1、为各种数据结构提供一个统一的、渐变的访问接口；
*    2、使得数据结构的成员能够按某只那个次序排列；
*    3、ES6创造了一种新的遍历命令（for of循环），Iterator接口主要供 for of 消费。
*  工作原理：
*  - 创建一个指针对象（便利器对象），指向数据结构的起始位置。
*  - 第一次调用next方法，指针自动指向数据结构的起始位置。
*  - 接下来不断调用next方法,指针会一直往后移动，直到指向最后一个成员
*  - 每调用next方法返回的是一个包含value 和 done的对象，{value:当前成员的值，done:布尔值}  
*   * value：当前成员的值
*   * done：表示当前数据的结构是否遍历结束
*   * 当遍历结束的时候返回:  { value: undefined, done: true }
*/
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

console.log(iter.next()) // { value: 'a', done: false }
console.log(iter.next()) // { value: 'b', done: false }
console.log(iter.next()) // { value: 'c', done: false }
console.log(iter.next()) // { value: undefined, done: true }


// 下面的代码功能同上
var it = makeIterator(['a', 'b']);	
function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}
console.log(it.next()) // { value: "a", done: false }
console.log(it.next()) // { value: "b", done: false }
console.log(it.next()) // { value: undefined, done: true }

// for of 不能遍历对象
let obj = {
	name: 'suzy',
	age: 18
}
for (let i of obj) {
	console.log(i) // 报错：obj[Symbol.iterator] is not a function
}

10、 Generator