ES6-11
# 1 ES6
# 1.1 let关键字
- 语法
let 变量名
- 变量不能重复声明
- 块级作用域,声明的变量只在代码块里有用
- 不存在变量提升
- 不影响作用域链
# 1.2 const关键字
- 声明值不能修改的量
- 语法
const 变量名=初始值
- 声明时必须赋初始值
- 一般常量使用大写
- 常量值不能修改
- 块级作用域
- 对于数组和对象的元素修改,不算对常量的修改,不会报错
# 1.3 变量解构赋值
- 允许按照一定模式从数组和对象中提取值,对变量进行赋值
- 数组解构
let [zero,one,two.three] = [0,1,2,3]
- 对象解构
const sample ={
name:'sample',
age:15,
log:function(){
console.log('234445')
}
};
let {name,age,log}= sample;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 1.4 模板字符串
- 新的声明字符串的方式 let str =
字符串
- 内容里可以直接出现换行符
- 可以直接进行变量拼接 let out =
${str}其他字符串
# 1.5 简化对象
- ES6允许在大括号里直接写入变量和函数,作为对象的属性和方法
- 语法
let name = '学校'
let change = function(){
console.log(111111)
}
const school = {
name,
change,
improve(){
console.log("简化对象里声明函数的语法")
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 1.6 箭头函数
- ES6允许使用箭头定义函数
- 语法
let fn = (形参) => {代码体}
- 箭头函数this是静态的,this始终指向函数声明时所在作用域下的this值,不可被改变
- 可以使用call方法调用,但箭头函数this不能被改变
- 箭头函数不能作为构造实例化对象
- 不能使用arguments变量
- 箭头函数简写
- 省略小括号,当形参有且只有一个式可以省略
let fn = n =>{return n+n}
- 省略花括号,当代码体只有一条语句
let fn =(n) => n*n
- 省略小括号,当形参有且只有一个式可以省略
- 箭头函数适合与this无关的回调
- 箭头函数不适合与this有关的回调,比如事件回调,对象方法
# 1.7 函数参数默认值
- 形参初始值,具有默认值的参数一般位置要靠后
function add(a,b,c=10){}
,放在前面会导致后面的没有默认值的形参在实参个数<形参个数的时候接收不到实参 - 与解构赋值结合
function connect({host="localhost",username,password,port}){
}
connect({
username:'root',
password:'root',
port:3306
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 1.8 rest参数
- ES5中获取实参通过arguments,返回的是对象
- ES6中使用rest参数,需要写形参,返回的是数组
function date5(){
console.log(arguments)
}
date5('1','2','3')
function date6(...args){
console.log(args)
}
date6('1','2','3')
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- rest参数必须要放在形参的最后
# 1.9 扩展运算符
...
扩展运算符能将数组转换为逗号分割的参数序列- 运用于数组的合并
- 运用于数组的克隆,拷贝的内容有引用数据的话是浅拷贝
- 将伪数组转为真正的数组
const front = ['1','2']
const end = ['3','4']
const total = [...front,...end]
const copy = [...total]
1
2
3
4
2
3
4
# 1.10 Symbol数据类型
- ES6引入了一种新的原始数据类型Symbol,来表示独一无二的值
- 特点
- Symbol的值是唯一的,用来解决命名冲突的问题
- Symbol值不能与其他数据进行运算
- Symbol定义的对象属性不能使用for...in循环遍历,但可以使用Reflect.ownKeys来获取对象的所有键名
- 创建Symbol
let s = Symbol()
let s2 = Symbol('123')
let s3 = Symbol('123')
//s2 != s3
let s4 = Symbol.for('123')
let s5 = Symbol.for('123')
//s4 === s5
1
2
3
4
5
6
7
2
3
4
5
6
7
- 运用向对象添加方法,安全且快速,不会破坏原有属性
let game = {
//此处省略很多,不确定是否有想要添加的同名方法
[Symbol('up')]: function(){
console.log(11)
}
}
let methods = {
up: Symbol(),
down:Symbol()
}
game[methods.up] = function(){}
game[methods.down] = function(){}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- Symbol内置值:控制对象在特定场景下的属性
//hasInstance
class Person{
static [Symbol.hasInstance](param){
console.log(param); //输出o的内容:{}
return true;
}
}
let o = {};
console.log(o instanceof Person); //输出前面你return的内容:true
//isConcatSpreadable
const arr = [1,2,3]
const arr2 = [4,5,6]
console.log(arr.concat(arr2)) //输出[1,2,3,4,5,6]
arr2[Symbol.isConcatSpreadable] = false
console.log(arr.concat(arr2)) //输出[1,2,3,[4,5,6]]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 1.11 迭代器
- 迭代器(Iterator)是一种接口,任何数据结构只要部署Iterator接口就可以完成遍历操作
- for of 循环,Iterator接口主要供for of消费
- 原生具备Iterator接口的数据结构:Array、Arguments、Set、Map、String、TypedArray、NodeList
# 1.11.1 for of使用
const arr = ['一号','三号','二号']
for(let v of arr){
console.log(v) //输出'一号' '三号' '二号'
}
1
2
3
4
2
3
4
# 1.11.2 工作原理
- 创建一个指针对象,指向当前数据结构的起始位置;
- 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员;
- 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员;
- 每调用 next 方法返回一个包含 value 和 done 属性的对象;