0)概述
- ECMAScript 6.0(以下简称 ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了,使得 JavaScript 语言可以用来编写复杂的大型应用程序
- ES6为了解决ES5语言的先天性不足,比如变量提升、内置对象的方法不灵活、模块化实现不完善等等;同时ES6的出现为了后面vue、尤其是react框架做好了准备;目前大部分公司的项目都在使用es6
1)let和const命令
1:var的弊端
- 同样是声明变量的var命令为什么被淘汰?因为var命令涉及变量提升问题和覆盖写问题(即可以多次声明变量名相同的变量)
<script>
console.log(a);
var a=2
console.log(b)
</script>
- a声明在打印语句之后,但是控制台中打印出来的值是undefined,这表明变量a被声明但没有被赋初始值,所谓变量提升即是把var a提升到了打印语句之前,a=2在打印语句之后,这在开发中显然是不符合逻辑的
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eebc66861c1b650f03aacbfcc37886c1.png#pic_center)
2:let命令
<script>
if (1 === 1) {
let c = 10;
}
console.log(c);
let c = 5;
let c = 8;
let RegExp = 10;
console.log(RegExp);
console.log(window.RegExp);
</script>
3:const命令
<script>
const MAX = 30;
const person = {
name: "RoysterCDD",
};
person.name = "步九琦";
person = {
age: 20,
};
console.log(person);
</script>
4:总结
- 建议在默认情况下使用const,只有知道变量值需要被修改的情况下用let,const比let用得更多
2)模板字符串
- 用反引号``,插入变量时用${变量名},代替了字符串的拼接,简化开发
<html>
<body>
<div class="box"></div>
</body>
<script>
const Box = document.querySelector(".box");
const id = 1,
name = "RoysterCDD";
const htmlStr = `
<ul>
<li>
<p id=${id}}>${name}</p>
</li>
</ul>
`;
Box.innerHTML=htmlStr
Box.innerHTML="<ul><li><p id="+id+">"+name+"</p></li></ul>"
</script>
</html>
3)函数
1:默认值
<script>
function add(a,b) {
a=a||10
b=b||20
return a+b
}
console.log(add())
function add(a=10,b=20) {
return a+b
}
console.log(add())
function add(a, b = getVal(5)) {
return a + b;
}
function getVal(val) {
return val + 5;
}
console.log(add(10));
</script>
2:剩余参数
- 简单说来就是,在调用函数时将剩余参数里的所有参数整合到我们给的这个形参名里面,随后便可进行遍历取值等操作
- 注意,…keys必须放在形参的最后面,因为它的作用是取出所有剩余的参数
<script>
function pick(obj, ...keys) {
let res = Object.create(null);
for (let i = 0; i < keys.length; i++) {
res[keys[i]] = obj[keys[i]];
}
return res;
}
const book = {
title: "es6入门",
author: "RoysterCDD",
year: "2024",
};
let bookData = pick(book, "title", "author", "year");
console.log(bookData);
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fa35589391c79cfbb0ba5b7109cc7ab6.png#pic_center)
- 剩余参数仅以数组的形式存储了传递过来的形参,可以直接用for和forEach进行快速遍历
- 而arguments作为伪数组传递了太多无用的变量,具有数组的属性单不具备方法
<script>
function checkArgs(...args) {
console.log(args);
console.log(arguments);
}
let a=1,b=2,c=3
checkArgs('a','b',[a,b,c])
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d564da739c8a8c571124f04f1270c469.png#pic_center)
3:扩展运算符
1. 作用于数组
<script>
const arr=[10,20,50,30,90,100,40]
console.log(Math.max(...arr));
</script>
2. 作用于对象
<script>
const people = {
'name': 'RoysterCDD',
'age': 20
}
console.log({...people})
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c3040729e1e8b6e3311d8fa5d740535d.png#pic_center)
4:箭头函数
<script>
let f = (v) => v;
let ff = function (vv) {
return vv;
};
let func = () => "hello world";
let addd = (val1, val2) => val1 + val2;
console.log(addd(10, 20));
let adddd = function (val1, val2) {
return val1 + val2;
};
let getObj = (id) => ({
id: id,
name: "RoysterCDD",
});
console.log(getObj(1));
let fn = (() => {
return () => {
console.log("hello es6");
};
})();
fn();
</script>
5:箭头函数的this指向
- es5中this指向函数的调用者,可以用bind来改变this的指向
- es6中箭头函数没有this指向,而箭头函数内部的this通过查找作用域链来确定,指向最近上层this
- 在vue中,在method中创建函数用的是普通函数,不能用箭头函数,因为如果是箭头函数没有this指向,函数内部的this指向外层,并没有指向Vue对象;如果创建普通函数,在于普通函数中使用箭头函数(如success的回调函数),此时的this指向的是Vue对象,就可以通过this.{变量名}来取data域中的值
1. 使用箭头函数的注意事项
<script>
let getVal=(a,b)=>{
console.log(arguments);
return a+b
}
console.log(getVal(1,5));
let Person=()=>{}
let p=new Person()
</script>
4)解构赋值
- 解构赋值是对赋值运算符的一种扩展,针对数组和对象进行操作,在代码书写上简单且易读
- 可以对对象解构;也可以对数组解构
<script>
let node = {
type: "Royster",
name: "CDD",
};
let { type, name } = node;
let obj= {
a: {
name: '张三'
},
b: [],
c: 'hello, es6'
}
let {a,...res}=obj
console.log(res);
let {aa,bb=30} ={aa:20}
console.log(aa+' '+bb);
let arr=[1,2,3]
let [aaa,bbb]=arr
console.log(aaa,bbb);
let [a1,[b1],c1]=[1,[2],3]
console.log(a1+' '+b1+' '+c1);
</script>