文章目录
ES介绍
ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性。
为什么学习ES6
- ES6的版本变动内容最多，具有里程碑意义
- ES6加入许多新的语法特性，编程实现更简单、高效
- ES6是前端发展趋势，就业必备技能
ES6的浏览器兼容性查看：http://kangax.github.io/compat-table/es6/
变量的声明
let变量声明
声明格式
声明格式： let 变量名;
// 声明变量
let a
let b,c
let e = 100
let f = 521, g = 'hello',h=[]
let特性
let和var的作用一样都是声明变量，但是let和var相比有如下特性：
- 变量不能重复声明（var是可以重复声明的）
- 块级作用域即在
{}中声明的变量只在{}中有效。（var就没有块级作用域）
块级作用域，如：{}、if语句、else语句、while语句、for语句
eg：
{
var i=1;
let j=1;
}
console.log(i,j)
输出：
（可以访问到i，访问不到j）
- 不存在变量提升。
不允许在变量声明之前使用变量 - 不影响作用域链。
即如果当前作用域没有要寻找的变量就会查找上一级作用域。
let练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
width: 100px;
height: 50px;
border: tomato 1px solid;
margin: 10px 5px;
float: left;
}
</style>
</head>
<body>
<div class='container'>
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// 获取元素
let items = document.getElementsByClassName('item')
// 遍历
for(var i =0;i<items.length;i++){
items[i].onclick = function (){
this.style.background = 'pink'
}
}
</script>
</body>
</html>
注意：
我们知道如果for循环使用的是var i=0，不能使用 items[i].style.background = 'pink'，因为当点击的时候 i 早已变为3。
执行过程是：
// 第一次循环
{
var i =0;
}
// 第二次循环
{
var i =1;
}
// 第三次循环
{
var i =2;
}
items[i].onclick = function (){
items[i].style.background = 'pink'
}
var定义的变量是全局变量，执行完第三次循环之后i=3。之后点击div， items[i]找不到 i 只能向上一级寻找，就找到全局变量i = 3，点击无法触发事件。
但是如果使用的是let，就可以使用 items[i] 了，因为此时 i 是局部变量， items[i]在当前作用域找不到i就像上一级作用域寻找，找到局部变量 i ，局部变量 i 存储的是之前循环的值，这样就可以获取到 items[0]、 items[1]、 items[2]，
执行过程：
// 第一次循环
{
let i =0;
items[i].onclick = function (){
items[i].style.background = 'pink'
}
}
// 第二次循环
{
let i =1;
items[i].onclick = function (){
items[i].style.background = 'pink'
}
}
// 第三次循环
{
let i =2;
items[i].onclick = function (){
items[i].style.background = 'pink'
}
}
所以上述代码可以这样写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
width: 100px;
height: 50px;
border: tomato 1px solid;
margin: 10px 5px;
float: left;
}
</style>
</head>
<body>
<div class='container'>
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// 获取元素
let items = document.getElementsByClassName('item')
// 遍历
for(let i =0;i<items.length;i++){
items[i].onclick = function (){
items[i].style.background = 'pink'
}
}
</script>
</body>
</html>
常量
常量：值不能修改的量成为常量
声明格式
const 常量名='常量值';
EG:
const NAME='yang'
特点
- 必须赋初始值
否则会报如下错误：
- 一般常量使用大写
- 常量值不能修改
- const是块级作用域
- 对于常量指向的 数组和对象的元素修改,不算做对常量的修改,不会报错
eg：
const TEAM = ['YANG','SHAN','TANG'];
TEAM.push('baidu')//不会报错
TEAM = 100//会报错
所以说对数组和对象声明最好用const。
变量解构赋值
解构赋值：ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
数组解构
// 数组结构
const F4=['孙悟空','沙和尚','唐僧','猪八戒']
let [sun,sha,tang,zhu]=F4
console.log(sun)
console.log(sha)
console.log(tang)
console.log(zhu)
输出：
对象解构
// 对象的解构
const baigujing ={
name:'白骨精',
age:30,
jineng:function(){
console.log("三打白骨精")
}
}
let{
name,age,jineng}=baigujing
console.log(name)
console.log(age)
console.log(jineng)
jineng()
输出：
模板字符串
之前我们声明字符串都是使用 '' 或""，ES6引入新的字符串声明方式:
使用反引号声明：
`字符串`
模板字符串的声明
和声明普通字符串一样：
let str = `我是一个字符串`
console.log(str,typeof str)
输出：
模板字符串的特性
- 内容中可以直接出现换行符
let str = `<ul>
<li>孙悟空</li>
<li>猪八戒</li>
<li>唐僧</li>
<li>沙和尚</li>
</ul>`
之前使用单引号和双引号时必须使用引号和加号的连接才能实现换行
let str = '<ul>'
+'<li>孙悟空</li>'
+'<li>猪八戒</li>'
+'<li>唐僧</li>'
+'<li>沙和尚</li>'
+'</ul>'
- 可以直接进行变量的拼接
即可以在反引号中直接使用${变量名}的格式对变量进行调用。
eg：
let sun =`孙悟空`
let out = `${
sun}的武器是金箍棒`
console.log(out)
输出：
对象的简化写法
允许直接在大括号中写入变量和函数，作为对象的属性和方法。
eg:
let name = '孙悟空'
let age = 18
let wuqi = function (){
console.log('我的武器是金箍棒')
}
const sun = {
name,//等价于 name:name
age,
wuqi
}
console.log(sun.name)
console.log(sun.age)
sun.wuqi()
输出：
ES6中对象的函数也可以简写
const zhu = {
name:'猪八戒',
age:25,
wuqi(){
console.log('我的武器是上宝沁金耙')
},
/*
等价于
wuqi2 = function (){
console.log('我的武器是上宝沁金耙')
}
*/
}