ES6
1.
2.
上图最后一句语句输出a=1;b=5;
3.
<body>
<ul id="test"></ul>
<script type="text/javascript">
//ES5的写法:将变量或表达式直接嵌入字符串
// var obj = {"name":"john","age":20};
// var name = obj.name;
// var age = obj.age;
// alert(name+"的年龄是"+age);
//ES6
let obj = {"name":"john","age":20};
let{name,age} = obj;
alert(`${name}的年龄是${age}`);//`是Tab上面的键
var arr = [0,1,2,3,4];
let oUl = document.getElementById("test");
var html = "";
for(var i in arr) {
// html += "<li>" + arr[i]+"</li>" //ES5
html += `<li>
<a href = "">${arr[i]}
</li>`//ES6
}
oUl.innerHTML = html;
</script>
4.
<body>
<script type="text/javascript">
//ES5
var foo = function() {
return 1;
}
alert(foo());
//ES6,单条语句
let foo1 =() => 1;
alert(foo1());
//有参数
let foo2 = (a) => a;
alert(foo2(10));
//多条语句
let foo4 = (b) => {
let c = 10;
return b+c;
}
alert(foo4(10));
</script>
</body>
5.this的指向问题(重点,难点)
<body>
<script type="text/javascript">
// var foo = () =>{
// alert(this);//和ES5一样,this指向window
// }
// foo();
var name = "window";
// var obj = {
// "name":"Jhon",
// "sayHello":function() {
// alert(this.name);
// }
// }
//obj.sayHello();//输出Jhon,this指向obj
// var obj = {
// "name":"Jhon",
// "sayHello":()=>{
// alert(this.name);
// }
// }
// obj.sayHello();//输出window,this指向定义的name【注】this指向定义时的作用域而不是执行时的定义域
// var obj = {};
// obj.name = "Marry";
// alert(this);
// obj.sayHello = () =>{
// alert(this.name);//输出window
// }
// obj.sayHello();
// var obj = {
// "name":"Jhon",
// "sayHello":function(){
// alert(this);//输出Object
// setTimeout(()=>{alert(this.name)},1000)
// }
// }
// obj.sayHello();//输出Jhon
var obj = {
"name":"Jhon",
"sayHello":()=>{
alert(this);//输出window
setTimeout(()=>{alert(this.name)},1000)
}
}
obj.sayHello();//输出window
</script>
</body>
</html>
6.set结构
和数组比较相似
属性:
set.has(num);:判断set中是否含有某个元素
上图的keys()和value()返回的一样,都是set中的值
<script type="text/javascript">
var set = new Set([1,2,3,2,4]);
console.log(set);//打印出Set(4) {1, 2, 3, 4}
//与数组之间的转换,用扩展运算符...
var arr = [...set];
console.log(arr);//打印出(4) [1, 2, 3, 4]
//遍历set for of
for(var i of set) {
console.log(i);
}
for(var item of set.keys()){
console.log(item);
}
for(let [key,item] of set.entries()) {
console.log(key,item);
}
set.forEach((item,key)=>console.log(item*2,key*2));
</script>
map结构
set:向map中追加键值对
7.生成器函数
yield:暂停函数运行,并返回一个值
return:停止函数运行,并返回一个值