ES6新增语法
let关键字
ES6中新增的用于声明变量的关键字
- let声明的变量只在处于块级有效
// let关键字就是用来声明变量的
// 使用let关键字声明的变量具有块级作用域
// 在一个大括号中使用let关键字声明的变量才具有块级作用域
// var关键字是不具备这个特点的
// 防止循环变量变成全局变量
if(true){
let a = 10
}
console.log(a) //a is not defined
if(true){
let num = 100
var abc = 200
}
console.log(abc) // 200
console.log(num) // num is not defined
注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特征。
- 不存在变量提升
console.log(a) //a is not defined
let a = 20
- 暂时性死区特性
var num = 10
if(true){
console.log(num) // num is not defined
let num = 20
}
const关键字
作用：声明常量，常量就是值（内存地址）不能变化的值.
- 具有块级作用域
if(true){
const a = 10
}
console.log(a) //a is not defined
- 声明常量时必须赋值
const PI // Missing initializer in const declaration
- 常量赋值后，值不能修改
const PI = 3.14
PI = 100 // Assignment to constant variable.
const ary = [100, 200]
ary[0] = 123 // 不报错
ary = [1, 2] // 报错
let、const、var的区别
- 使用var声明的变量，其作用域为该语句所在函数内，且存在变量提升现象
- 使用let关键字，其作用域为该语句所在的代码块内，不存在变量提升
- 使用const声明的是常量，在后面出现的代码中不能再修改该常量的值
| var | let | const |
|---|---|---|
| 函数级作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 不存在变量提升 | 不存在变量提升 |
| 值可以更改 | 值可以更改 | 值不可以更改 |
解构赋值
ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。
数组解构
let [a,b,c] = [1,2,3]
console,log(a)
console,log(b)
console,log(c)
let [a,b,c,d,e] = [1,2,3]
console,log(d) //undefined
console,log(e) //undefined
对象解构
let person = {name:'zhangsan',age:20}
//方法1
let {name,age} = person
console.log(name) //‘zhangsan’
console.log(age) //20
//方法2
let {name：myName,age:myAge} = person
console.log(myName) //‘zhangsan’
console.log(myAge) //20
箭头函数
ES6中新增的定义函数的方式
() => {}
const fn = () => {}
函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
function(num1,num2){
return num1 + num2
}
//转换成：
const sum = (num1,num2) => num1+num2
如果形参只有一个，可以省略小括号
function fn(v){
return v
}
//转换成：
const fn = v => v
箭头函数不绑定this关键字，箭头函数中的this，向外层作用域中一层一层查找this，直到有this定义（有函数定义，this指向的就是调用函数的成员对象）
使用：
扫描二维码关注公众号，回复：
11441100 查看本文章
const obj = {name:'张三'}
function fn(){
console.log(this) //obj
return ()=>{
console.log(this) //obj
}
}
const resFn = fn.call(obj) // fn函数绑定obj对象
resFn()
详细对比说明：
const obj = {
aaa(){
setTimeout(function(){
console.log(this) // 1.window
},1000)
// 这块作用域中的this是obj的
setTimeout(()=>{
console.log(this) // 2.obj
},1000)
}
}
- 第一个this在function内部，由setTimout函数调用（此时setTimeout函数就是一个function），而setTimeout函数是由window对象调用，所以这个this指向window对象；
- 第二个this的箭头函数外部作用域是在aaa函数内（由于setTimeout中的回调函数是箭头函数，所以此时setTimeout函数不能看成是一个function），aaa函数是由obj调用的，所以这个this指向obj对象。
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
const sum = (...args)=>{
let total = 0
args.forEach(item => total+=item);
return total
};
sum(10,20) //30
sum(10,20,30) //60
剩余参数和解构配合使用
let students = ['wangwu','zhangsan','lisi']
let [s1,...s2] = students
console.log(s1) //'wangwu'
console.log(s2) //['zhangsan','lisi']
新增循环方式（数组）
- 根据索引值循环
for(let i in this.books) {
// 这里i为索引值
}
- 根据数组中的每一项循环
for(let item of this.books) {
// 这里item为books中的各个项
}
ES6 的内置对象扩展
Array的扩展方法
扩展运算符（展开语法）
- 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let arr = [1,2,3]
console.log(...ary) // 1 2 3
console.log(1,2,3) // 1 2 3(上下结果一致)
- 扩展运算符可以应用于合并数组
//方法一
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...ary1, ...ary2]
console.log(arr3) //[1,2,3,4,5,6]
//方法二
arr1.push(...arr2)
console.log(arr1) //[1,2,3,4,5,6]
- 将类数组或可遍历对象转换为真正的数组
let oDivs = document.getElementsByTagName('div')
oDivs = [...oDivs] //真数组
构造函数方法：Array.from()
- 将类数组或可遍历对象转换为真正的数组
let arrayLike = {
'0':'a',
'1':'b',
'2':'c',
length:3
};
let arr2 = Array.from(arrayLike);
console.log(arr2) // ['a','b','c']
- 方法还可以接受第二个参数，作用类似于数组map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
let arrayLike = {
'0':1,
'1':2,
length:2
};
let newAry = Array.from(arrayLike, item => item*2); //[2, 4]
实例方法：find()
- 用于找出第一个符合条件的数组成员，如果没有找到返回undefined
let arr=[{
id:1,
name:'张三'
},{
id:2,
name:'李四'
}];
let target = arr.find((item,index)=>item.id == 2) // index可以省略
console.log(target) //Object
实例方法：findIndex()
- 用于找出第一个符合条件的数组成员的位置(值的索引)，如果没有找到返回-1
let ary = [1,5,10,15]
let index = ary.findIndex((value,index)=>value>9)
console.log(index); //2
实例方法：includes()
- 表示某个数组是否包含给定的值，返回布尔值
[1,2,3].includes(2) // true
[1,2,3].includes(4) // false
String的扩展方法
模板字符串
- ES6新增的创建字符串的方式，使用反引号定义。
let name = `zhangsan`;
- 模板字符串中可以解析变量
let name = `张三`
let sayHello = `hello, my name is ${name}` // hello, my name is zhangsan
- 模板字符串中可以换行
let result = {
name:'zhangsan',
age:20,
sex:'男'
}
let html = `
<div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div>
`
- 在模板字符串中可以调用函数
const sayHello = function(){
return '哈哈哈'
};
let greet = `${sayHello()} 啊啊啊`
console.log(greet) // 哈哈哈 啊啊啊
实例方法：startsWith()和endsWith()
- startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
- endWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
let str = 'Hello world!'
str.startsWith('Hello') // true
str.endsWith('!') //true
实例方法：repeat()
- repeat方法表示将原字符串重复n次，返回一个新的字符串。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) //"hellohello"
Set 数据结构
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
- Set本身是一个构造函数，用来生成Set数据结构。
const s = new Set()
console.log(s.size) //0
- Set函数可以接收一个数组作为参数，用来初始化
const set = new Set([1,2,3,4,4])
console.log(set.size) //4
- 利用Set结构进行数组去重
const s = new Set(["a","a","b","b"])
const ary = [...s]
console.log(ary) //["a","b"]
实例方法
- add(value)：添加某个值，返回Set结构本身
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
- has(value)：返回一个布尔值，表示该值是否为Set的成员
- clear()：清除所有成员，没有返回值
const s = new Set();
s.add(1).add(2).add(3) // 向set结构中添加值
s.delete(2) // 删除set结构中的2值
s.has(1) // 表示set结构中是否有1这个值 返回布尔值
s.clear() // 清除set结构中的所有值
遍历
Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
const s = new Set(['a','b','c'])
s.forEach(value => console.log(value))
// a
// b
// c
高阶函数
filter
- filter用于过滤数组，将返回值给到新的数组中
- filter中的回调函数有一个要求：必须返回一个boolean值
- true：当返回true时，函数内部会自动将这次回调的n加入新的数组中
- false：当返回false时，函数内部会过滤掉这次的n
const nums = [10,20,111,222,444,40,50]
let newNums = nums.filter(function(n){
return n < 100
})
console.log(newNums) // [10,20,40,50]
map
对数组中的数字遍历，并进行相关运算，返回值给到新的数组中
let new2Nums = newNums.map(function(n){
return n*2
})
console.log(new2Nums) // [20,40,80,100]
reduce
对数组中所有的内容进行汇总
let total = news2Nums.reduce(function(){
return preValue + n
},0)
// 第一次：preValue 0，n 20
// 第二次：preValue 20，n 40
// 第三次：preValue 60，n 80
// 第四次：preValue 140，n 100
console.log(total) // 240