ES6是个啥？一文掌握最常用ES6语法

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

• ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

1.声明变量,定义常量

• let 定义的变量具有块状作用域，不会变量提升 同一作用域内不可重复定义相同变量

• const 定义常量，该常量不可修改

const A=133;
A=2

image.png

2.常用遍历方式

• map() 映射

let list=[{name:"张三",grade:90},{name:"李四",grade:70},{name:"王五",grade:30}]
let a=list.map(item=>{
    let grade=item.grade>=60?"及格":"不及格";
    return {name:item.name,grade}
})
console.log(a)
//输出
[{name:"张三",grade:"及格"},{name:"李四",grade:"及格"},{name:"王五",grade:"不及格"}]

• reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

let numbers = [15, 23, 11, 7.7];
function getSum(total, num) {
    return total + num;
}
console.log(numbers.reduce(getSum,0))
//输出   56.7
let a=[1,2,3].reduce((item,current,index,arr)=>{
    console.log(item,current,index,arr)
return item+current
})
console.log(a)
//输出
1 2 1  [1, 2, 3]
3 3 2  [1, 2, 3]
6

• fillter 返回符合条件的项

let arr=[{name:"张三",grade:90},{name:"李四",grade:70},{name:"王五",grade:30}]
let res=arr.filter(item=>item.grade>=60);
console.log(res)
//输出
[{name:"张三",grade:90},{name:"李四",grade:70}]

• forEach 遍历

let arr=[{name:"张三",grade:90},{name:"李四",grade:70},{name:"王五",grade:30}]
arr.forEach((item,index)=>{console.log(item.name,index)});
//输出
张三,0
李四,1
王五,2

3.解构赋值

let {a=2} = {a:1,b:3}
console.log(a)
//输出
1
let {a=2} = {b:3}
console.log(a)
//输出
2

4.模板字符串

let a=123,str=`${a}这是字符串`;
console.log(str)
//输出
123这是字符串

5.剩余变量 ...

let a=[1,2,3,4],b=[{"m":4,"n":3}];
console.log(a)
console.log(b)
//输出
1 2 3 4
{"m":4,"n":3}
function test(a,...val){
    console.log(a,...val)
}
test(1)// 1
test(1,2)// 1 2
test(1,2,3,4) //1 2 3 4

6.箭头函数

[1,2,3].map((item,index)=>{
        console.log(item,index)// 1,0  2,1  3,2
})
//当只需要一个值时，还可简写
[1,2,3].map(item=>{
        console.log(item,index)// 1,0  2,1  3,2
})
//在箭头函数中，this的指向不会改变