【es6】教程

知识点一，let 变量声明以及声明特性

let所声明的变量，只在let命令所在的代码块内有效

let声明特性

变量不能重复声明

块级作用域

不存在变量提示（不允许在变量的声明之前调用它会报错，像var只会给undefined）

不影响作用域链（块里面的函数可以调用函数之外，块之内的变量）

知识点二，const 声明常量以及特点

const 声明

一定要给初始值，否则会报语法错误

一般常量使用大写

常量的值不能修改

块级作用域

对于数组和对象的元素修改，不算做对常量的修改，不会报错

//这么写会报错，const 声明的常量不能修改
const name="旧名字"
name="新名字"
//数组和对象的元素修改，不会报错，因为数组元素发生变化，但这个数组指向的地址没有变化
const arr=[0,1,2,3,4]
arr.push(5)
1
2
3
4
5
6

知识点三，解构赋值

变量的解构赋值，es6允许按照一定模式从数组和对象中提取值，对变量进行赋值

//数组结构
const arr =[1,2,3,4]
let [a,b,c,d]=arr
console.log(a)//相当于1
console.log(b)//相当于2
console.log(c)//相当于3
console.log(d)//相当于4


//对象结构
const obj={
	name:"乞力马扎罗",
	age:"仙人",
	fun:function(){
		console.log("方法")
	}
}

let {name,age,fun} = obj //注意，这里的名字要与obj里面的一致
console.log(name)//相当于乞力马扎罗赋给names
console.log(age)//相当于2
console.log(fun)//相当于3
//很多方法可以采用这个，减少代码
let {funs} = obj
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

知识点四，模板字符串

反引号 ``,es6新的声明字符串的方式

模板字符串特性

内容中可以直接出现换行符，空格

变量拼接, ${str}

let str = `我也是字符串`

//这里如果使用单双引号，是会报错的，但反引号就不会
let str =`行数1 行数2`

//变量拼接
let str1 = `字符串1`
let str2 = `字符串2${str1}`
console.log(str2)
1
2
3
4
5
6
7
8
9

知识点五，对象的简化写法

对象简化

es6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

	let name = "乞力马扎罗"
	let fun =function(){
		console.log("勇闯天涯")
	}
	const all={
		name,//对象声明的时候这个名要和变量名一致
		fun,
		funs(){
			console.log(`少写了function的勇闯天涯，代码更简洁`)
		}
	}
	all.fun()
	console.log(all.name)
1
2
3
4
5
6
7
8
9
10
11
12
13

知识点六，箭头函数以及声明特点

箭头函数 =>

//旧版函数
let fun =function(){

}

//es6函数,括号里为形参
let fun = (a,b)=>{
	//代码体
}


//es6函数,括号里为形参只有一个的时候，括号可以省略
let fun = a=>{
	//代码体
}

//es6函数,当代码体只有一条语句的时候，花括号可以省略,而且return也必须省略，语句的执行结果就是函数的返回值
let fun = (a)=>{
	//代码体
}

//调用
let refun=fn(1,2);
console.log(refun)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

箭头函数声明特性

this是静态的。 this始终指向函数声明所在作用域下的this的值

不能作为构造实例化对象

箭头函数里边不能使用arguments变量，arguments是一个类似于数组的对象，对应于传递给函数的参

es6箭头函数,括号里为形参只有一个的时候，小 括号可以省略

当代码体只有一条语句的时候，花括号可以省略,而且return也必须省略，语句的执行结果就是函数的返回值

//旧版函数
let fun =function(){
	console.log(this.name)
}
//es6函数,括号里为形参
let funs = (a,b)=>{
	console.log(this.name)
}
//先设置一个window对象的name属性
window.name='乞力马扎罗'
const all={
	name:"新乞力马扎罗"
}


//箭头函数this值静态的，无改变----证明过程
//直接调用，-指向windows
fun() //乞力马扎罗
funs() //乞力马扎罗

//call方法调用，-可以改变对象内部的this指向
//call(),可以用来代替一个对象调用一个方法，以另一个对象替换当前对象
fun.call(all) 	//新乞力马扎罗
funs.call(all)  //乞力马扎罗，箭头函数this值静态的，无改变


//箭头函数不能作为构造实例化对象-----证明过程

//new 就是执行构造函数，返回一个对象，不写new就是普通函数的调用，没有创造对象的能力
//构造函数一般首字母会大写，为了和普通函数区分
//构造函数用来初始化对象，也就是为对象成员变量赋初始值
//构造函数的属性和方法前必须加this关键字，指代要生成的对象
let Person=(name,age)=>{
			this.name=name
			this.age=age
		}
let newper=new Person("乞力马扎罗","勇闯天涯")

//es6不能使用arguments
let fun = (name, age) => {
		console.log(arguments)
	}
fun()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

知识点七，函数参数的默认值设置-指的是形参

//函数
function add(a,b,c=10){
return a+b+c
}
add(1,2)
//与解构赋值结合使用
function add({a=0,b,c}){
	//获取，如果下面传了a就用a，没传就用a的默认值
	console.log(a)
}
add({a:1,b:2,c:3})
1
2
3
4
5
6
7
8
9
10
11

知识点八，rest参数，用来代替arguments属性,用于获取函数的实参

arguments属性，表示函数的实参集合实参集合，(形式为’…变量名’)，用于获取函数的多余参数。rest参数之后不能再有其他参数(即只
能是最后一个参数)。

//ES5获取实参
function add(){
	//获取到了函数的实参，得到的是个对象
	console.log(arguments)
}
add({a:1,b:2,c:3})

//Es6获取实参
//rest参数必须要放到参数最后
function add(...all){
	//获取到了函数的实参，得到的是个数组[{a: 1, b: 2, c: 3}]
	console.log(all)
}
add({a:1,b:2,c:3})


//rest参数必须放在最后，否则会报错
function add(a,b,...alls){
	console.log(a)//1
	console.log(alls)//[3,4,5]
	}
add(1,2,3,4,5)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

知识点九，扩展运算符 …

… 扩展运算符，能将数组转换为逗号分割的参数序列，
可以将伪数组转换为真正的数组

const arr =[1,2,3]
function add{
	console.log(arguments)
}
//当然扩展运算符不能直接用
//...arr
add(...arr)

//实例

//数组合并
const arr1 =[1,2,3,4]
const arr2 =[5,6,7,8]
//es5
const arr3=arr1.concat(arr2)
console.log(arr3)//[1,2,3,4,5,6,7,8]
//es6
const arr3=[...arr1,...arr2]
console.log(arr3)//[1,2,3,4,5,6,7,8]

//数组克隆
const arr1 =[1,2,3,4]
const arr2 =[...arr1],//如果有引用类型是浅拷贝
console.log(arr2)//[1,2,3,4]

//将伪数组转换为真正的数组
console arr0=[...伪数组]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27