ES6 知识点总结
- 一、let关键字
- 二、const关键字
- 三、解构赋值
- 四、模板字符串
- 五、简化对象写法
- 六、箭头函数
- 七、三点运算符
- 八、形参默认值
- 九、原始数据类型Symbol
- 十、 Iterator遍历器
- 十一、Generator函数
-
- 概念：
- 特点：
- 十二、class
- 十三、module
-
- export 与 import
-
- export/导出
- import/导入
- 十四、Promise对象
- 十五、async函数
- 十六、字符串扩展
- 十七、数值扩展
- 十八、数组扩展
- 十九、对象扩展
- 二十、Set和Map数据结构
- 二十一、for_of循环
一、let关键字
作用：与var类似，用于声明变量
特点：
- 在块作用域内有效。
- 不能重复声明。
- 无预处理，不能先使用后声明。
<body>
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
</body>
<script type="text/javascript">
//console.log(age);// age is not defined
let age = 12;
//let age = 13;不能重复声明
console.log(age);
let btns = document.getElementsByTagName('button');
for(let i = 0;i<btns.length;i++){
btns[i].onclick = function () {
alert(i);
}
}
</script>
二、const关键字
作用：定义常量
特点：不能修改、其他同let关键字
<script type="text/javascript">
const sex = '男';
console.log(sex);
//sex = '女';//不能修改
console.log(sex);
</script>
三、解构赋值
作用：从对象或数组中提取数据, 并赋值给变量(多个)
<script type="text/javascript">
let obj = {name : 'zhangsan', age : 18};
//1.对象的解构赋值
let {age} = obj;
console.log(age);
let {name, age} = {name : 'zhangsan', age : 18};
console.log(name, age);
//2. 数组的解构赋值
let arr = ['abc', 23, true];
let [a, b, c, d] = arr;
console.log(a, b, c, d);
//3. 给多个形参赋值
function person({name, age}) {
console.log(name, age);
}
person1(obj);
</script>
四、模板字符串
作用：简化字符串拼接
<script type="text/javascript">
let obj = {
name : 'zhangsan',
age : 18
};
console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);
</script>
五、简化对象写法
特点：省略同名的属性值、省略方法的function
<script type="text/javascript">
let x = 1;
let y = 2;
//简化的写法
let obj = {
x,
y,
getPoint(){
return this.x
}
};
console.log(obj, obj.getPoint());
</script>
六、箭头函数
作用：定义匿名函数。
特点：简洁、没有属于函数本身的this。
<body>
<button id="btn">测试箭头函数1</button>
<button id="btn2">测试箭头函数2</button>
</body>
<script type="application/javascript">
let func = function () {
console.log('func()');
}
func();
//1. 没有形参，并且函数体只有一条语句
let func1 = () => console.log('func1()没有形参，只有一条语句');
func1();
//2. 一个形参，函数体只有一条语句
let func2 = x => x;
console.log(func2(5));
//3. 形参是一个以上，函数体只有一条语句
let func3 = (x, y) => x + y;
console.log(func3(2, 4));
//4. 形参是一个以上，函数体有多条语句
let func4 = (x, y) => {
console.log('func4()',x, y);
return x + y;
}
console.log(func4(1,3));
//获取页面元素，没有箭头函数
let btn1 = document.getElementById('btn1');
btn1.onclick = function () {
console.log(this);
}
//获取页面元素，使用箭头函数
let btn2 = document.getElementById('btn2');
let obj = {
name : 'zhangsan',
age:39,
getName:() => {
btn2.onclick = () =>{
console.log(this);
}
}
}
obj.getName();
function Person() {
this.obj = {
showThis : () => {
console.log(this);
}
}
}
let func5 = new Person();
func5.obj.showThis();
</script>
七、三点运算符
作用：可变参数。
<script type="text/javascript">
function fun(...values) {
console.log(values);
values.forEach(function (item, index) {
console.log(item, index);
})
}
fun(1,2,3);
let arr = [2,3,4,5,6];
let arr1 = [1,...arr, 7,8,9];
console.log(arr1);
</script>
八、形参默认值
作用：调用函数时，当不传入参数的时候默认使用形参里的默认值。
<script type="text/javascript">
//定义一个点的坐标
function Point(x=0, y=0) {
this.x = x;
this.y = y;
}
let p = new Point();
console.log(p);
let point = new Point(5, 10);
console.log(point);
</script>
九、原始数据类型Symbol
特点：
- Symbol属性对应的值是唯一的，解决命名冲突问题
- Symbol值不能与其他数据进行计算，包括同字符串拼串
- for in, for of遍历时不会遍历symbol属性。
<script type="text/javascript">
window.onload = function () {
let symbol = Symbol();
console.log(typeof symbol);
console.log(symbol);
// 用作对象的属性(唯一)
let obj = {name: 'zhangsan', age: 18};
obj[symbol] = 'hello';
obj[symbol] = 'symbol';
console.log(obj);
for(let i in obj){
console.log(i);
}
}
</script>
十、 Iterator遍历器
概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
作用：
- 为各种数据结构，提供一个统一的、简便的访问接口；
- 使得数据结构的成员能够按某种次序排列
- ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of使用。
<script type="text/javascript">
// 数组
let arr = [1, 2, 'zhangsan', true];
for(let i of arr){
console.log(i);
}
// 字符串
let str = 'aaa';
for(let item of str){
console.log(item);
}
</script>
十一、Generator函数
概念：
- Generator函数是一个状态机，内部封装了不同状态的数据。
- 用来生成遍历器对象。
- 可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果。
特点：
- function 与函数名之间有“ * ”。
- 内部用yield表达式来定义不同的状态。
- generator函数返回的是指针对象。
- 调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}。
- 再次调用next方法会从上一次停止时的yield处开始，直到最后。
- yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。
<script type="text/javascript">
// 小试牛刀
function* generatorTest() {
console.log('函数开始执行');
yield 'hello';
console.log('函数暂停后再次启动');
yield 'generator';
}
// 生成遍历器对象
let Gt = generatorTest();
// 执行函数，遇到yield后即暂停
console.log(Gt); // 遍历器对象
let result = Gt.next(); // 函数执行,遇到yield暂停
console.log(result); // {value: "hello", done: false}
result = Gt.next(); // 函数再次启动
console.log(result); // {value: 'generator', done: false}
result = Gt.next();
console.log(result); // {value: undefined, done: true}表示函数内部状态已经遍历完毕
// 对象的Symbol.iterator属性;
let myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 4;
};
for(let i of myIterable){
console.log(i);
}
let obj = [...myIterable];
console.log(obj);
</script>
十二、class
- 通过class定义类/实现类的继承
- 在类中通过constructor定义构造方法
- 通过new来创建类的实例
- 通过extends来实现类的继承
- 通过super调用父类的构造方法
- 重写从父类中继承的一般方法
<script type="text/javascript">
class Person {
//调用类的构造方法
constructor(name, age){
this.name = name;
this.age = age;
}
//定义一般的方法
showName(){
console.log(this.name, this.age);
}
}
let person = new Person('zhangsan', 18);
console.log(person, person.showName());
//定义一个子类
class StrPerson extends Person{
constructor(name, age, salary){
super(name, age);//调用父类的构造方法
this.salary = salary;
}
showName(){//在子类自身定义方法
console.log(this.name, this.age, this.salary);
}
}
let str = new StrPerson('lisi', 18, 3000);
console.log(str);
str.showName();
</script>
十三、module
特点
- ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
- 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
- 每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
- 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。
export 与 import
export 命令可以出现在模块的任何位置，但必需处于模块顶层。
import 命令会提升到整个模块的头部，首先执行。
export/导出
<!-- export -->
<script>
//导出一个
export var m = 1;
// 等价于
var m = 1;
export {m}
// 导出多个
var a = 1;
var b = 2;
var c = 3;
export {a, b, c}
// 导出对象
export const student = {
name: 'Megan',
age: 18
}
// 导出函数
export function add(a, b) {
return a + b;
}
</script>
import/导入
<!-- import -->
<script>
import variable from './Demo';
console.log(variable);
</script>
十四、Promise对象
- Promise对象：代表了未来某个将要发生的事件(通常是一个异步操作)。
- 优势：可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称’回调地狱’)。
- promise对象的3个状态：
pending: 初始化状态、fullfilled: 成功状态、rejected: 失败状态
使用Promise对象
- 创建Promise对象
<script>
let promise = new Promise((resolve, reject) => {
//初始化promise状态为 pending
//执行异步操作
if(异步操作成功) {
resolve(value);//修改promise的状态为fullfilled
} else {
reject(errMsg);//修改promise的状态为rejected
}
})
</script>
- 调用Promise对象
<script>
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))
</script>
十五、async函数
概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作。
本质： Generator的语法糖
特点：
- 不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
- 返回的总是Promise对象，可以用then方法进行下一步操作
- async取代Generator函数的星号*，await取代Generator的yield
- 语意上更为明确，使用简单，经临床验证，暂时没有任何副作用
语法：
async function foo(){
await 异步操作;
await 异步操作；
}
十六、字符串扩展
- includes(str) : 判断是否包含指定的字符串
- startsWith(str) : 判断是否以指定字符串开头
- endsWith(str) : 判断是否以指定字符串结尾
- repeat(count) : 重复指定次数
<script type="text/javascript">
let str = 'abcdefg';
console.log(str.includes('a'));//true
console.log(str.includes('h'));//false
//startsWith(str) : 判断是否以指定字符串开头
console.log(str.startsWith('a'));//true
console.log(str.startsWith('d'));//false
//endsWith(str) : 判断是否以指定字符串结尾
console.log(str.endsWith('g'));//true
console.log(str.endsWith('d'));//false
//repeat(count) : 重复指定次数a
console.log(str.repeat(5));
</script>
十七、数值扩展
- 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
- Number.isFinite(i) : 判断是否是有限大的数
- Number.isNaN(i) : 判断是否是NaN
- Number.isInteger(i) : 判断是否是整数
- Number.parseInt(str) : 将字符串转换为对应的数值
- Math.trunc(i) : 直接去除小数部分
<script type="text/javascript">
console.log(0b1010);//10
console.log(0o56);//46
//Number.isFinite(i) : 判断是否是有限大的数
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(5));//true
//Number.isNaN(i) : 判断是否是NaN
console.log(Number.isNaN(NaN));//true
console.log(Number.isNaN(5));//falsse
//Number.isInteger(i) : 判断是否是整数
console.log(Number.isInteger(5.23));//false
console.log(Number.isInteger(5.0));//true
console.log(Number.isInteger(5));//true
//Number.parseInt(str) : 将字符串转换为对应的数值
console.log(Number.parseInt('123abc'));//123
console.log(Number.parseInt('a123abc'));//NaN
// Math.trunc(i) : 直接去除小数部分
console.log(Math.trunc(13.123));//13
</script>
十八、数组扩展
- Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
- Array.of(v1, v2, v3) : 将一系列值转换成数组
- find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
- findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
<body>
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
</body>
<script type="text/javascript">
//Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
let btns = document.getElementsByTagName('button');
console.log(btns.length);//3
Array.from(btns).forEach(function (item, index) {
console.log(item, index);
});
//Array.of(v1, v2, v3) : 将一系列值转换成数组
let arr = Array.of(1, 'abc', true);
console.log(arr);
//find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
let arr1 = [1,3,5,2,6,7,3];
let result = arr1.find(function (item, index) {
return item >3
});
console.log(result);//5
//findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
let result1 = arr1.findIndex(function (item, index) {
return item >3
});
console.log(result1);//2
</script>
十九、对象扩展
- Object.is(v1, v2) 判断2个数据是否完全相等
- Object.assign(target, source1, source2…) 将源对象的属性复制到目标对象上
- 直接操作 proto 属性
let obj2 = {};
obj2.proto = obj1;
<script type="text/javascript">
console.log(Object.is('abc', 'abc'));//true
console.log(NaN == NaN);//false
console.log(Object.is(NaN, NaN));//true
console.log(0 == -0);//true
console.log(Object.is(0, -0));//false
//Object.assign(target, source1, source2..)
let obj = {name : 'kobe', age : 39, c: {d: 2}};
let obj1 = {};
Object.assign(obj1, obj);
console.log(obj1, obj1.name);
//直接操作 __proto__ 属性
let obj3 = {name : 'anverson', age : 41};
let obj4 = {};
obj4.__proto__ = obj3;
console.log(obj4, obj4.name, obj4.age);
</script>
二十、Set和Map数据结构
- Set容器 : 无序不可重复的多个value的集合体
- Set()
- Set(array)
- add(value)
- delete(value)
- has(value)
- clear()
- size
- Map容器 : 无序的 key不重复的多个key-value的集合体
- Map()
- Map(array)
- set(key, value)//添加
- get(key)
- delete(key)
- has(key)
- clear()
- size
<script type="text/javascript">
let set = new Set([1,2,3,4,3,2,1,6]);
console.log(set);
set.add('abc');
console.log(set, set.size);
//delete(value)
set.delete(2);
console.log(set);
//has(value)
console.log(set.has(2));//false
console.log(set.has(1));//true
//clear()
set.clear();
console.log(set);
let map = new Map([['abc', 12],[25, 'age']]);
console.log(map);
map.set('男', '性别');
console.log(map);
console.log(map.get(25));//age
//delete(key)
map.delete('男');
console.log(map);
console.log(map.has('男'));//false
console.log(map.has('abc'));//true
map.clear();
console.log(map);
</script>
二十一、for_of循环
for(let value of target){}循环遍历
- 遍历数组
- 遍历Set
- 遍历Map
- 遍历字符串
- 遍历伪数组
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script type="text/javascript">
let arr = [1,2,3,4,5];
for(let num of arr){
console.log(num);
}
let set = new Set([1,2,3,4,5]);
for(let num of set){
console.log(num);
}
let str = 'abcdefg';
for(let num of str){
console.log(num);
}
let btns = document.getElementsByTagName('button');
for(let btn of btns){
console.log(btn.innerHTML);
}
</script>