目录
ES全称EcmaScript是脚本语言的规范，我们前端开发者平常编写的JavaScript就是EcmaScript的一种实现，所以ES新特性其实就是指JavaScript的新特性。本文章涵盖ES6-ES11的新特性教程，那我们为什么要学习这些新特性呢？
- 这些新特性比ES5语法更加简洁，功能更加丰富；
- 前端框架中(例如Vue)使用到了这些新特性;
- 前端开发职位也要求我们会使用这些新的特性。
下面我们就开始学习吧！
· ES6-let变量声明及声明特性
1.变量不能使用 let 重复声明。
let city= 'Xi'an'
//let声明的city变量不能重复声明，此写法错误
let city = 'Beijing' 2. 使用let声明的变量是处于块级作用域中的。
{
let data = 1024
}
//使用 let 声明的变量data是处在块级作用域中的
//即此例中data只能在上述语句块中使用，外部不能使用
console.log(data) //Uncaught ReferenceError: data is not defined3.使用let声明的变量是不存在变量提升的。我们知道在Js中是存在预解析的，即变量提升和函数提升，但是使用let声明的变量不存在此行为。
console.log(data) // undefined
console.log(value) //Uncaught ReferenceError: Cannot access 'value' before initialization
var data = 1024
let value = 1024上述代码段在Js预解析时等同于以下代码段：
var data //使用var声明的变量存在变量提升，即将此变量的声明放在所有代码最前部分，赋值在后
console.log(data) // undefined
console.log(value) //Uncaught ReferenceError: Cannot access 'value' before initialization
data = 1024 //变量提升的代码进行赋值
let value = 1024· ES6-const声明常量以及特点
1.const声明的常量必须赋初值，且一般使用大写。
const DATA = 10242.const声明的常量是处于块级作用域中的。
{
const DATA = 1024
}
//使用 const 声明的变量DATA是处在块级作用域中的
//即此例中DATA只能在上述语句块中使用，外部不能使用
console.log(DATA) //Uncaught ReferenceError: DATA is not define3.const声明的变量是不能修改的。但是对于数组和对象的元素的修改是不能算作对常量的修改，所以不会报错。
· ES6-变量的解构赋值
1.数组的解构
const DATA = [1024,200,404]
let [person,status1,status2] = DATA
console.log(person) //1024
console.log(status1) //200
console.log(status2) //4042.对象的解构
const PERSON = {
name:'ZhaoSi',
age:23,
fun:function(){
console.log('我是一个程序员！')
}
}
//这里注意对象的解构左边花括号中的属性名必须与对象中的属性名相同才会对应
let {name,age,fun} = PERSON
console.log(name) //ZhaoSi
console.log(age) //23
fun() //我是一个程序员· ES6-模板字符串
ES5中字符串有两种声明方式分别为双引号和单引号。
ES6中引入了新的声明字符串方式： `我是一个字符串。`
1.ES6新的声明字符串内容中可以直接出现换行符。
let str =
`<ul>
<li>北京</li>
<li>西安</li>
<li>上海</li>
</ul>`
console.log(str)控制台中输出如下：
2. ES6新的声明字符串内容中可以使用模板字符串 ${ } 进行变量拼接。
const LOVECITY = "西安"
let out = `${LOVECITY}是我最喜欢的城市`
console.log(out) //西安是我最喜欢的城市· ES6-对象的简化写法
ES6在对象的声明中有更加简化的写法。
let name = '李二'
let fun = function(){
console.log('这是一个函数！')
}
const PERSON = {
name, //属性名是name,属性值也是name变量中存储的值，即name:name可以简化为 name,
fun, //同上解释
newFun(){
console.log("这是ES6对象中简化的函数声明方式！")
}
}· ES6-箭头函数以及声明特点
ES6中的新增的函数声明方式如下：
let fun = () =>{
console.log("我是以箭头函数的方式声明的函数!")
}1.箭头函数中的this永远指向函数声明时所在的作用域的this。
<body>
<button>按钮</button>
<script>
var btn = document.getElementsByTagName('button')[0] //获取按钮
btn.onclick = ()=>{
//箭头函数声明时所处的作用域为全局，全局的this为Window
//箭头函数中的this指向Window，并不指向btn
console.log(this) //Window
}
</script>
</body>2.箭头函数不能作为构造函数使用。
3.箭头函数是没有arguments参数的。
4.箭头函数的简写。
// 1)形参只有一个的时候可以省略箭头函数中的小括号
let fun1 = n => {
return n*n
}
console.log(fun1(3)) //9
// 2) 当箭头函数中代码体只有一条语句的时候，可以省略函数体中的花括号{}
//此时return关键字也必须省略
// 此时这条语句的执行结果就是函数的返回值
let fun2 = n => n*n //n*n的结果为函数返回值，省略了return关键字
let val = fun2(3)
console.log(val) //9· ES6-rest参数
ES6引入了rest参数，用来获取函数的实参，代替了ES5中的arguments参数。
我们先回忆一下ES5中arguments参数的使用。
function fun(){
//输出为伪数组形式
//Arguments(3) ['北京', '西安', '上海', callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(arguments)
}
fun('北京','西安','上海') 1.rest参数的使用，其获取的实参不同于arguments参数的伪数组，rest参数获取的实参是数组类型。
function fun(...args){
console.log(args) // ['北京', '西安', '上海']
}
fun('北京','西安','上海') 2.rest参数的扩展使用，此情况下rest参数必须要放到最后。
function fun(c1,...args){
console.log(c1) //北京
console.log(args) //['西安', '上海']
}
fun('北京','西安','上海')· ES6-扩展运算符
扩展运算符 ... 是将可迭代数据中可枚举的所有属性值拷贝至当前变量中。
1.数组的合并
const BAT = ['百度','阿里','腾讯']
const E_COMMERCE = ['京东','淘宝','拼多多']
const concatList = [...BAT,...E_COMMERCE]
console.log(concatList) // ['百度', '阿里', '腾讯', '京东', '淘宝', '拼多多']2.数组的克隆（浅拷贝）。
const BAT = ['百度','阿里','腾讯']
const COMPANY = [...BAT] // ['百度','阿里','腾讯']3.将伪数组转化为真正的数组。
function fun(){
// 输出为伪数组形式
// Arguments(3) ['北京', '西安', '上海', callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(arguments)
const list = [...arguments] //使用扩展运算符将伪数组转化为真正的数组
console.log(list) // ['北京', '西安', '上海']
}
fun('北京','西安','上海')