ES6新特性之满满的干货

目录

1、let，var，const的区别

2、结构赋值

3、箭头函数

4、剩余参数

5、扩展运算符

6、构造函数方法

7、Array的扩展方法

8、模板字符串

9、String的扩展方法

10、Set数据结构

---

1、let，var，const的区别

let声明会产生块级作用域，并且在一个大括号中，使用let关键字声明的变量才具有块级作用域。

var声明不会产生块级作用域。

for(var i = 0; i < 2; i++){
	console.log(i)// i =0 , 1
}
console.log(i) // i = 2
for(let i = 0; i < 2; i++){
	console.log(i)// i =0 , 1
}
console.log(i) // i is no defined

let声明的变量没有变量提升。

console.log(abc)
let abc = '张三' // i is no defined

let声明的变量暂存死区。

var abc = 111
for(true){
	console.log(abc) // abc is no defined
	let abc = 222
}

const声明常量会产生块级作用域。

if(true){
	const a = 100
	console.log(a)// a = 100
}
console.log(a)// a is no defined

const一旦声明必须赋值。

const b; //Missing initializer in const declaration

const声明后不能更改。

基本数据类型：
const C = 100;
C = 123
console.log(c) //Assignment to constant variable.

复杂数据类型：
const arr = [100,200];
arr[0] = 123;
console.log(arr) //arr = [123,200]
arr = [0,1]
console.log(arr) // Assignment to constant variable.

总结：

（1）三者区别

var	let	const
函数极作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

（2）使用场景

如果存放的数据不需要变化尽量使用const，例如函数定义、Π、数学公式中一些恒定不变的值，因为使用const声明的值不可变化，js解析引擎不需要实时监控值的变化，所以const关键字要比let效率高。

2、结构赋值

数组结构：

ES6中运行从数组中提取值一一对应

let arr = [1,2,3]
let [A,B,C,D,E] = arr
console.log(A) //1
console.log(B) //2
console.log(C) //3
console.log(D) //undefined
console.log(E) //undefined

对象结构：

对象结构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量

let person = {name:'李四',age: 10}
let {name,age} = person
console.log(name) //'李四'
console.log(age) //18
let {name:myName} = person
console.log(myName) //'李四'

3、箭头函数

（1）箭头函数中如果只有一行代码，并且代码的执行结果就是函数的返回值，这时可以省略大括号

const sum = (num1,num2) => num1 + num2
const result = sum(10,20)
console.log(result) //30

（2）箭头函数如果只有一个参数，可以省略小括号

const fn = v =>{
	console.log('zhangsan')
}
fn() // 'zhangsan'

（3）箭头函数不绑定this，它也没有自己的this关键字，如果在箭头函数中使用this，this关键字指向箭头函数定义位置中的this

function fn(){
	console.log(this) // window
	return ()=> {
		console.log(this) // {name:'lisi'}
	}
}
const obj = {name:'lisi'}
const refRush = fn,call(obj)
console.log(refRush) // {name:'lisi'}

4、剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

function sum(...args){
	let total = 0;
	args.forEach(item =>{
		total += item;
	});
	return total;
};
console.log(sum(10,20))

剩余参数和结构赋值配合使用

function fn(a,...arr){
	console.log(a); //1
	console.log(arr); //[1.2]
}
fn(1,2,3)

5、扩展运算符

扩展运算符可以将数组拆分成并逗号分隔的参数序列

let arr = ['A','B','C']
console.log(...arr) // 'A','B','C'

扩展运算符应用于数组合并(第一种)

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1,...arr2]
console.log(arr3) //[1,2,3,4,5,6]

扩展运算符应用于数组合并(第二种)

let arr1 = [1,2,3]
let arr2 = [4,5,6]
arr1.push(...arr2)
console.log(arr1) //[1,2,3,4,5,6]

利用扩展运算符把伪数组转换成正真的数组

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
var oDivs = document.getElementsByTagName('div')
console.log(oDivs)
var arr = [...oDivs]
arr.push('a')
console.log(arr) // [div,div,div,div,div,a ]

6、构造函数方法

Array.from():将类数组或者可遍历对象转换为真正的数组

let arrlike = {
	'0':'a',
	'1':'b',
	'2':'c',
	'length':3
}
let arr = Array.from(arrlike)
console.log(arr)

Array.from():可以接受第二个参数，作用类似于数组的map方法，用于对每个元素进行处理，将处理的值返回到数组里

let arrlike = {
	'0':1,
	'1':2,
	'2':3,
	'length':3
};
let arr = Array.from(arrlike,(item) =>{
	return item * 2
});
console.log(arr)

7、Array的扩展方法

Array.find()、Array.findIndex()、Array.includes()

let arr = [
	{
		id: 1,
		name: 'lisi',
		age: 18
	},
	{
		id: 2,
		name: 'wangwu',
		age: 18
	},
]
let result = arr.find(item => item.id === 2)
console.log(result) 

let arr = [10,20,80]
let result = arr.findIndex(item => item > 15)
console.log(result)

let arr = [1,2,3]
let result = arr.includes(1)
console.log(result)

8、模板字符串

``

const fn = () => {
	return 'wo de ren'
};
let htm = `wo wo wo ${fn()}`;
console.log(htm)

9、String的扩展方法

startsWith()和endWith()、repeat()

let str = 'hello word'
let result = str.startsWith('hello')
console.log(result)
let str = 'hello word'
let result = str.endWith('word')
console.log(result)
'x'.repeat(3) // 'xxx'

10、Set数据结构

Set数组去重

let s1 = new Set(['A','S','D','A'])
console.log(s1.size)
let arr = [...s1]
console.log(arr)

Set实例方法

add(value)，添加某个值，返回Set结构本身

delete(value)，删除某个值，返回一个布尔值，表示删除是否成功

has(value)，返回一个布尔值，表示该值是否为Set的成员

clear(value)，清除所有成员，没有返回值

const s4 = new Set()
s4.add('a');
s4.add('b');
console.log(s4)
s4.delete('a')
console.log(s4)
let b = s4.has('b');
console.log(b)
s4.clear()
console.log(s4)

遍历（forEach())

let s5 = new Set(['a','b','c']);
s5.forEach(item =>{
	console.log(item)
})