ES 6 新特性笔记
let
- 与 var 的区别
| 功能 | let | var |
|---|---|---|
| 块级作用域 | ✔️ | ❌ |
| 变量提升 | ❌ | ✔️ |
| 重复声明（相同作用域内） | ❌ | ✔️ |
- var 没有块级作用域的解决方法
使用函数替代块级作用域，以保证变量的正常使用，如：
...
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>
<button>btn5</button>
<script>
var btns = document.getElementsByTagName('button');
for (var i=0, i<btns.length, i++) {
(function(i){
btns[i].addEventListener('click', function(){
console.log(i)
})
})(i)
}
</script>
...
const
具有一下特征：
-
声明变量只读
-
若声明的为复合类型的数据（对象、数组等），变量指向内存地址，即变量中的内容可变
-
只在声明的块级作用域有效
-
不具有变量提升（需在声明后才可以使用）
-
不可重复声明
箭头函数
- 定义形式
// 如果没有参数或多个参数，使用 ()
let f1 = () => 1
let f2 = (a, b) => a * b
// 如果只有一个参数，可以不用 ()
let f3 = x => x * 2
// 如果函数体只有一条语句，可以不用 {}
let f4 = x => x * x
// 简写单条语句时遇到对象，需要加 ()
let f5 = x => ({name: x, age: 18})
- 与普通函数的区别
-
箭头函数没有构造方法，不可使用
new关键字生成function f1 () { } const f2 = () => {} // ok f = new f1(); // error f2 = new f2() -
this关键字的指向/* * 在普通函数中，this 指向调用者 * 如果无调用者，则指向 window * * 在箭头函数中，this 指向其定义所在的上层作用域的 this 指针 */ const box = document.getElementById('#box'); // 对于普通函数，如需在此处访问 box 对象 // 需要将 this 先赋值给变量方可在 setTimeout 中调用 // 否则 setTimeout 中调用的 this 为 window 对象 box.onclick = function () { const obj = this; setTimeout(function () { obj.className = 'bg-blue' }, 3000) } // 箭头函数中的 this 指向其定义所在的上层作用域 // 这里函数中的 this 即 box 对象 box.onclick = function () { setTimeout(() => { this.className = 'bg-blue' }, 3000) }
Array.map/filter/reduce
- map 将函数应用于数据的每一个元素，并将返回值作为新的数组元素返回
- filter 将函数应用于数据的每一个元素，并将返回 true 的元素组成新数组返回
- reduce 累积引用
Set
集合
Map
类似于 python 中的 dict
String.startsWith/endsWith
判断字符串的起始值与结尾的值
模板字符串
使用 ` ，支持换行和变量的传递：
let name = 'kingron';
let tempStr = `my name is ${name}`
解构赋值
// 数组使用数组来接受，长度可以不一样
// 按顺序赋值 x: 1, y: 2
let [x, y] = [1, 2, 3, 4]
// 对象使用 key 名来接收，必须保证名字一致
let {name, age} = {name: 'kingron', age: 18, money: 99999}
三点运算符
- 展开数组
let arr1 = [1, 2, 3];
// [1, 2, 3, 4, 5, 6]
let arr2 = [...arr1, 4, 5, 6];
- 默认参数
function func (...args) {
console.log(args)
}
// [1, 2, 3]
func(1, 2, 3)
类与继承
定义类：
// 创建类
class Person {
// 构造方法
constructor(name, age, gender) {
// 绑定实例属性
this.name = name;
this.age = age;
this.gender = gender
}
// 实例方法，不需加 function 关键字
say() {
console.log(`${this.name} said it ${this.age} years ago!`)
}
}
// 实例化
const p = new Person('kongron', 18, 'M');
p.say()
继承：
class Student extends Person {
constructor(name, age, gender, school) {
// 调用父类的构造方法
super(name, age, gender);
this.school = school;
}
}
JSON 对象的新应用
- JSON.stringify/parse
序列化/反序列化
- 简写
- 属性和值名字相同的可以简写
- 方法可以简写（省去
function关键字）
const name = 'kingron';
const person = {
name,
hello(to) {
console.log(this.name + ' said hello to ' + to)
}
}
// kingron
console.log(person.name);
person.hello('j');
模块化编程
- 暴露变量的方式
1.1. 定义时暴露
// m1.js
export add = (a, b) => a + b;
// m2.js
import {add} from 'm1.js'
1.2. 统一暴露
// m1.js
const add = (a, b) => a + b;
const sub = (a, b) => a- b;
export {add, sub}
1.3. 默认
使用 default 关键字
// m1.js
export default (a, b) => a + b;
export sub = function(a, b) {
return a - b
}
// m2.js
// 导入时不需要 {}，可以自定义导入的名称，结果为 default 对应的变量
import myadd from 'm1.js'
- 导入
2.1. js 中导入
import {add} from 'm1.js'
2.2. html 中导入
<script src="m1.js" type="module"></script>
Promise
用法说明 & 示例：
/*
* Promise 接收一个函数作为参数
* 该函数又必须接收两个参数 resolve 和 reject 作为参数
* 在函数体内：
* - 调用 resolve，传入的参数将作为参数传递给 then 中的第一个参数
* - 调用 reject，传入的参数将作为参数传递给 then 中的第二个参数
*
* 调用存在顺序限制，如果先调用了 resolve/reject 其中一个，另外一个则不会被调用
*
* 函数也可以返回新的 Promise 实例
*/
new Promise((resolve, reject) => {
throw "fine, It's not ok";
reject("It's not ok")
setTimeout(() => {
resolve("It's ok")
}, 1000)
}).then(res => {
// 处理结果
console.log(res)
}, err => {
// 处理错误
console.log('error in then: ' + err)
}).catch(err => {
/*
* 如果 then 中的第二个参数存在
* 则出现错误不会被传入此方法
*/
// 处理错误
console.log('error in catch: ' + err)
})
Promise.all 用法
Promise.all([
new Promise(...),
new Promise(...),
...
]).then(...)
