学习笔记-ES6
目录
1.let
-
let变量不能重复声明，var变量可以重复声明
-
块级作用域 全局 函数 eval
-
变量只在代码块内部有效
-
{ let girl = '周扬青' } console.log(girl) // girl未定义 { var girl = '周扬青' } console.log(girl) // girl有定义
-
-
-
不存在变量提升
-
console.log(song) // undefined ver song = '恋爱达人' // 实际上相当于 var song; console.log(song) // undefined ver song = '恋爱达人' -
let不允许变量声明之前使用变量
-
-
不影响作用域链
-
{ let school = 'Tabjin' function fn() { console.log(school) } fn() }
-
let案例
// 遍历绑定事件，这边会有一个越界问题
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
// 修改当前元素的背景颜色
items[i].style.background = 'pink'
}
}
// 通过let解决
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
// 修改当前元素的背景颜色
items[i].style.background = 'pink'
}
}
2.const
3.变量的解构赋值
4.模板字符串
5.箭头函数
1.几个注意点
-
箭头函数的this是静态的，this始终指向函数声明时所在作用域下的this的值。普通函数谁调用this指向谁
-
function getName() { console.log(this.name) } let getName2 = () => { console.log(this.name) } // 设置window对象的name属性 window.name = 'Tabjin' const school = { name: 'wawo' } // 直接调用 getName();// Tabjin getName2();// Tabjin // call方法调用，call可以改变函数内部this的值 getName.call(school)// wawo getName2.call(school)// Tabjin 箭头函数的this是静态的，this始终指向**函数声明时**所在作用域下的this的值
-
-
不能作为构造函数实例化对象
-
let Person = (name, age) => { this.name = name this.age = age } let me = new Person('xiao', 30) console.log(me)
-
-
不能使用arguments变量
-
arguments是用来保存实参的
-
let fn = () => { console.log(arguments) } fn(1, 2, 3)// arguments
-
-
箭头函数简写
-
省略小括号，当形参有且只有一个的时候
-
let add = n => { return n + n }
-
-
省略花括号，当代码体只有一条语句的时候，此时return语句必须省略
-
let pow = n => n*n
-
-
2.使用场景
let ad = document.getElementById('ad')
ad.addEventListener('click', function() {
let _this = this
setTimeout(function() {
_this.style.abckground = 'pink'
})
})
ad.addEventListener('click', () => {
setTimeout(function() {
this.style.abckground = 'pink'
})
})
const arr = [1,6,9,10,100,25]
const result = arr.filter(function(item) {
if(item % 2 === 0) {
return true
}else {
return false
}
})
// 或
const result = arr.filter(item => item % 2 === 0)
console.log(result)
箭头函数适合与 this 无关的回调，定时器，数组的方法的回调
箭头函数不适合与this有关的回调，事件回调，对象的方法
6.rest参数
ES6引入了 rest 参数，用于获取函数的实参，用来代替 arguments
// ES5获取实参的方式
function date() {
console.log(arguments)
}
data('白芷', '阿娇', '思慧')
// ES6 rest参数
function data(...args) {
console.log(args)
}
data('白芷', '阿娇', '思慧')// 这边返回filter some every map
Tip
rest参数必须要放到参数最后
7.扩展运算符
将数组转换为逗号分隔的参数序列
-
数组合并[...array1, ...array2]
-
数组克隆：现有array1 = ['A', 'B', 'C']，array2 = [...array1]，注意，这边要是有引用类型的数据拷贝的话是浅拷贝
-
将伪数组转为真正的数组
-
const divs = document.querySelectorAll('div') const dirArr = [...divs]
-
8.Symbol
第七种原始数据类型，是一种类似于字符串的数据类型。
- Symbol的值是唯一的，用来解决命名冲突问题
- Symbol值不能与其他数据进行运算
- Symbol定义的对象属性不能使用for...in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
// 创建一个Symbol
let s = Symbol()
console.log(s)
let s2 = Symbol('Tabjin')
let s3 = Symbol('Tabjin')
console.log(s2 === s3)// false
// Symbol.for 创建
let s4 = Symbol.for('Tabjin')
let s5 = Symbol.for('Tabjin')
console.log(s4, typeof s4)
onsole.log(s4 === s5)// true
// 不能与其他数据进行运算
let result = s + 100
USONB
undefined
string symbol
object
null number
boolean
2.对象添加symbol类型的属性
3.symbol的内置属性
9.迭代器
迭代器Iterator是一种接口，为不同的数据类型提供统一的访问机制。任何数据结构只要部署Iterator接口，既可以完成遍历操作。
- ES6创造了一种的新的遍历命令for...of循环，Iterator接口主要供for...of消费
- 原生具备Iterator接口的数据
- Array
- Arguments
- Set
- Map
- String
- TypedArray
- NodeList
- 工作原理
- 创建一个指针对象，指向当前数据结构的起始位置
- 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧']
for(let v of xiyou) {
console.log(v)// 输出的是键值
// 唐僧
// 孙悟空
// 猪八戒
// 沙僧
}
for(let v in xiyou) {
console.log(v)// 输出的是键名
// 0
// 1
// 2
// 3
}
let iterator = xiyou[Symbol.iterator]()
// 调用对象的next方法
console.log(iterator.next())// {value: "唐僧", done: false}
console.log(iterator.next())// {value: "孙悟空", done: false}
console.log(iterator.next())// {value: "猪八戒", done: false}
console.log(iterator.next())// {value: "沙僧", done: false}
console.log(iterator.next())// {value: "undefined", done: true}
要自定义迭代数据的时候，要用迭代器
const xijun = {
name: '西郡园小一班',
students: [
'超越',
'添添',
'二点',
'小猪罗',
'Tabjin',
'老咻'
],
[Symbol.iterator]() {
//索引变量
let index = 0
let _this = this
return {
next: function() {
if(index < this.students.length) {
const result = {value: this.students[i], done: false}
// 下标自增
index++
// 返回结果
return result
} else {
return {value: undefined, done: true}
}
}
}
}
}
// 遍历这个对象
for(let v of xijun) {
console.log(v)
}
10.生成器函数
11.Promise介绍
ES6异步编程解决方案。Promise是一个构造函数，用来封装异步操作并可以获取其成功或者失败的结果。
- Promise构造函数Promise(excutor) {}
- Promise.prototype.then方法
- Promise.prototype.catch方法
// 实例化 Promise 对象
const p = new Promise(function(resolve, reject) {
setTimeout(function() {
//
let data = '数据库中的用户数据'
// resolve
resolve(data)
let err = '数据读取失败'
reject(err)
}, 1000)
})
// 调用Promise对象的then方法
p.then(function(value) {
console.log(value)
},function (reason) {
console.err(reason)
})
1.Promise读取文件内容
// 1.引入 fs 模块
const fs = require('fs')
// 2.调用方法读取文件
fs.readFile('./resources/为学.md', (err, data) => {
// 如果失败，则抛出错误
if(err) throw err
// 如果没有出错，则输出内容
console.log(data.toString())
})
// 3.使用 Promise 封装
const p = new Promise(function(resolve, reject) {
fs.readFile('./resources/为学.md', (err, data) => {
// 如果失败
if(err) reject(err)
// 如果成功
resolve(data)
})
})
p.then(function(value) {
console.log(value.toString())
}, function(reason) {
console.err('请求失败')
})
2.Promise封装Ajax请求
// 接口地址 https://api.apiopen.top/getJoke
// 1，创建对象
const xhr = new XMLHttpRequest()
// 初始化对象
xhr.open("GET", "https://api.apiopen.top/getJoke")
// 发送
xhr.send()
// 绑定事件，处理响应结果
xhr.onreadystatechange = function() {
// 判断
if(xhr.readyState === 4) {
// 判断响应状态码 200-299
if(xhr.status >= 200 && xhr.status < 300) {
// 表示成功
console.log(xhr.response)
} else {
// 失败
console.log(xhr.status)
}
}
}
const p = new Promise((resolve, reject) => {
// 接口地址 https://api.apiopen.top/getJoke
// 1，创建对象
const xhr = new XMLHttpRequest()
// 初始化对象
xhr.open("GET", "https://api.apiopen.top/getJoke")
// 发送
xhr.send()
// 绑定事件，处理响应结果
xhr.onreadystatechange = function() {
// 判断
if(xhr.readyState === 4) {
// 判断响应状态码 200-299
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(reason)
})
3.Promise.prototype.then方法
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('用户数据')
},1000)
})
// 调用then方法，then方法的返回结果是 Promise 对象，对象的状态由回调函数的执行结果决定
// 1.如果回调函数中返回的结果是非promise类型的属性，状态为成功，返回值为对象的成功值
const result = p.then(value => {
console.log(value)
// 1.非 promise 类型的属性
// return 123
// 2.是 promise 对象
return new Promise((resolve, reject)) => {
// resolve('ok')
reject('erro')
}
// 3.抛出错误
throw new Error('出错啦')
},reason => {
console.warn(reason)
})
console.log(result)// 这边是一个promise
既然then方法是可以返回Promise对象，所以Promise是可以链式调用的，也解决的回调地狱问题。
p.then(value => {}, reason => {})
.then(value => {}, reason => {})
4.Promise实践
// 引入 fs 模块
const fs = require('fs')
fs.readFile('./resources/为学.md', (err, data1) => {
fs.readFile('./resources/插秧诗.md', (err, data2) => {
fs.readFile('./resources/观书有感.md', (err, data3) => {
let result = data1 + '\r\n' + data2 + '\r\n' + data3
console.log(result)
})
})
})
// Promise 实现
const p = new Promise((resolve, reject) => {
fs.readFile('./resources/为学.md', (err, data) => {
resolve(data)
}
})
p.then(value => {
console.log(value.toString())
return new Promise((resolve, reject) => {
fs.readFile('./resources/观书有感.md', (err, data) => {
resolve([value, data])
})
}).then(value => {
return new Promise((resolve, reject) => {
fs.readFile('./resources/观书有感.md', (err, data) => {
value.push(data)
resolve(value)
})
})
}).then(value => {
console.log(value)
console.log(value.join('\r\n'))
})
})
5.Promise对象catch方法
const p = new Promise((resolve, reject) => {
setTimeout(() => {
// 设置 p 对象的状态为失败，并设置失败的值
reject('出错啦')
}, 1000)
})
p.then(value => {
},reason => {
console.log(reason)
})
浙公网安备 33010602011771号