一、ECMAScript 6
ECMAScript 6.0，简称ES6，第一个版本是在2015年6月进行发布，所以也称之为《ECMAScript 2015 标准》（简称 ES2015）。
JavaScript是ECMAScript的一种实现（分支），遵循ECMAScript标准的。目前主流浏览器已经可以完美兼容和使用ES6。
二、let 和 const
var 存在的问题：
- var 不能用于定义常量
- var可以重复声明变量
- var 前两存在变量提升
- var 不支持块级作用域
let 和 const 可以解决以上问题
(1) 不可以重复声明变量
let name = 'Astro';
let name = 'nurato';
console.log(name);
//运行结果：Identifier 'name' has already been declared
(2)不存在变量提升
console.log(name);
let name = 'Astro';
// 运行结果：ReferenceError: name is not defined
(3)可以定义常量
不能给常量重新赋值，但如果是引用类型的话可以进行修改。
const PI = 3.14;
PI = 3;
console.log(pi);
//运行结果：Assignment to constant variable.
//引用类型
const GD= {
name:'Astro',
intro:'Astro 就是阿童木'
};
GD.name = '阿童木';
console.log(GD);
// 运行结果：{name: "阿童木", intro: "Astro 就是阿童木"}
//intro: "Astro 就是阿童木"
//name: "阿童木"
//__proto__: Object...........
(4)块级作用域
如果用var定义变量，变量是通过函数或者闭包拥有作用域；但，现在用let定义变量，不仅仅可以通过函数/闭包隔离，还可以通过块级作用域隔离。
块级作用域用一组大括号定义一个块，使用 let 定义的变量在大括号的外部是访问不到的，此外，let声明的变量不会污染全局作用域。
{
let a = '鸣人';
}
console.log(a);
// 执行结果：ReferenceError: a is not defined
if(1){
let str = '123';
}
console.log(str);
// 执行结果：ReferenceError: str is not defined
(5)高级排他（不使用闭包）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
820px ;
list-style: none;
margin: 100px auto;
}
ul li{
100px;
height: 30px;
border: 1px solid #CCCCCC;
float: left;
text-align: center;
line-height: 30px;
}
.current{
background-color: orangered;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script id="高级排他">
window.addEventListener('load',function () {
//1.获取标签
let allLis = document.querySelectorAll('li');
//2.遍历
let preIndex = 0;
for(let i = 0;i<allLis.length;i++){
allLis[i].addEventListener('mouseover',function () {
allLis[preIndex].className = '';
this.className = 'current';
preIndex = i;
});
}
})
</script>
</body>
</html>
三、解构赋值
用于分解js中对象的机构
(1)用于数组结构
let nameArr = ['张三','李四','王五'];
// 普通写法
let name1 = nameArr[0];
let name2 = nameArr[1];
let name3 = nameArr[2];
//结构写法
let[name1,name2,name3] = nameArr;
(2)对象的解构
//写法1
let{name,age,sex} = {name:'张三',age:1,sex:'男'}
console.log(name, age, sex);
//运行结果：张三 1 男
//写法2：结构重命名
let{name:gName,age:gAge,sex:gSex} = {name:'张三',age:1,sex:'男'};
console.log(gName, gAge, gSex);
//运行结果：张三 1 男
// 写法3： 可以设置默认值
let{name,age,sex='女'} = {name:'李四',age:18}
console.log(name, age, sex);
// 运行结果：李四 18 女
// 写法4 省略结构
let [,,sex] = ['王五',20,'男'];
console.log(sex);
// 运行结果: 男
(3)应用场景举栗子
在封装ajax的GET和POST请求时, 就可以运用到解构的知识点，代码如下：
// 普通写法
function ajax(options) {
let method = options.method || 'GET';
let data = options.data || {};
// ..........
}
// 结构写法
function ajax({method="GET", data}) {
console.log(method, data);
}
ajax({
method:"POST",
data:{"id":1,"name":"张三"}
});
四、延展操作符
(1)延展数组
let arr1 = [ 'a', 'b', 'c'];
let arr2 = [1, 2, 3];
let result = [...arr1, ...arr2];
console.log(result);
// [ "a", "b", "c", 1, 2, 3 ]
(2)延展对象
let smallDog = {name:'小黑', age: 1};
let bigDog = {name: '大白', age: 2};
let dog = {...smallDog, ...bigDog};
console.log(dog);
// {name: "大白", age: 2}
// 注意: 如果对象中的属性一致, 会被覆盖
(3)应用场景
function getMinValue() {
console.log(Math.min(...arguments));
}
getMinValue(1,2,7)
// 1
五、ES6字符串操作
(1)新增字符串方法
[1]startsWith()
let url = 'http://www.fesco.com.cn';
console.log(url.startsWith('http'));// true
[2]endsWith
let url = 'http://www.fesco.com.cn';
console.log(url.endsWith('cn'));//true
[3]includes() 判断字符串中是否包含 XX
let str = 'skyblue and astro';
console.log(str.includes('ast')); //true
[4]repeat() 拷贝n份
let str = 'hello';
console.log(str.repeat(20)); //打印出50个hello
[5]padStart() / padEnd()
-
padStart()用于头部补全，padEnd()用于尾部补全;
-
第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。
let y1 = '2030'.padEnd(10, '1');
console.log(y1);//2030111111
let y2 = '11-22'.padStart(10, '2030-MM-DD');
console.log(y2); //2030-11-22