Es6 语法基础
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //解构赋值,.方便开发 10 //let [a,b,c] = [1,2,3]; 11 //console.log(a,b,c);//123 12 13 //let [a=3,b] = [2]; 14 //console.log(a,b);//2 undefined 15 16 //let c; 17 //let [a=2] = [c]; 18 //console.log(a);//2 19 20 //let {a,b} = {a:"111",b:"222"}; 21 //console.log(a,b);//111 222 22 23 //let {a:b} = {a:111}; 24 //console.log(b);//111 25 26 let {a,b=5} = {a:1}; 27 console.log(a,b);//1 5 28 </script> 29 </body> 30 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <ul id="test"></ul>
9 <script type="text/javascript">
10 //ES5
11 /* var obj = {"name":"john","age":20};
12 var name = obj.name;
13 var age = obj.age;
14 console.log(name+"的年龄是"+age); */
15
16 //ES6
17 /* let obj = {"name":"john","age":20};
18 let {name,age} = obj;
19 console.log(`${name}的年龄是${age}`);//注意反引号``和$
20 console.log(`${name}`);//john */
21
22 //ES5
23 /* var arr = [0,1,2,3,4];
24 let oUl = document.getElementById("test");
25 var html ="";
26 for(var i in arr){
27 html += "<li>" + arr[i] + "</li>";
28 }
29 oUl.innerHTML = html; */
30
31 //ES6
32 /* var arr = [0,1,2,3,4];
33 let oUl = document.getElementById("test");
34 var html ="";
35 for(var i in arr){
36 html += `<li>${arr[i]}</li>`;
37 }
38 oUl.innerHTML = html; */
39
40 var arr = [0,1,2,3,4];
41 let oUl = document.getElementById("test");
42 var html ="";
43 for(var i in arr){
44 html += `<li><a href="">${arr[i]}</a>
45 <p>111</p>
46 </li>`;
47 }
48 oUl.innerHTML = html;
49
50 </script>
51 </body>
52 </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="test"></ul>
<script type="text/javascript">
//ES5
/* var foo = function(){
return 1;
}
console.log(foo());//1 */
//ES6
//let foo = () =>1;
//console.log(foo());//1
//let foo = (a) =>a;
// console.log(foo(10));//10
/* let foo = (a) => {
let b =10;
return a+b;
}
console.log(foo(10));//20 */
/*var foo=() =>{
console.log(this);
}
foo();//window */
/* var name = "window";
var obj = {
"name":"john","sayHello":function(){
console.log(this.name);
}
}
obj.sayHello();//john
*/
//this指向定义域时所在的作用域，而不是执行时所在的作用域
/* var name = "window";
var obj = {
"name":"john","sayHello":() =>{
console.log(this.name);
}
}
obj.sayHello();//window */
//相当于
/* var name = "window";
var obj = {}
obj.name="john";
console.log(this);
obj.sayHello = () =>{
console.log(this.name);
}
obj.sayHello();//window
*/
/* var obj = {
"name":"john",
"sayHello":function(){
console.log(this);
setTimeout(()=>{console.log(this.name)},1000);
}
}
obj.sayHello();//john */
//改写
var obj = {}
var obj = {
"name":"john",
"sayHello":()=>{
console.log(this);
setTimeout(()=>{console.log(this.name)},1000);
}
}
obj.sayHello();//window
</script>
</body>
</html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <ul id="test"></ul>
9 <script type="text/javascript">
10 var set = new Set([1,2,2,6,4,3]);
11 console.log(set);//Set(5) {1, 2, 6, 4, 3}
12
13 //扩展运算符...
14 /* var arr = [...set];
15 console.log(arr);//(5) [1, 2, 6, 4, 3]
16 for(let i of set){
17 console.log(i);// 1 2 6 4 3
18 }
19 for(let i of arr){
20 console.log(i)//1 2 6 4 3
21 } */
22
23
24 // console.log(set.has(6));
25 // //set.add(5);
26 // //set.delete(2);
27 // //set.clear();
28 // console.log(set,set.size);//Set(5) {1, 2, 6, 4, 3} 5
29
30 for(let item of set.keys()){
31 console.log(item);
32 }
33 for(let item of set.values()){
34 console.log(item);
35 }
36 for(let [key,item] of set.entries()){
37 console.log(key,item);
38 }
39 set.forEach((item,key) => console.log(item*2,key*2));
40
41
42 </script>
43 </body>
44 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <ul id="test"></ul>
9 <script type="text/javascript">
10 var map = new Map([["name","jphn"],["age",20]]);
11 console.log(map);//{"name" => "jphn", "age" => 20}
12 map.set("sex","addr");
13 console.log(map);//{"name" => "jphn", "age" => 20, "sex" => "addr"}
14
15 //(略)
16 </script>
17 </body>
18 </html>
yield 暂停函数运行，与return相似
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="test"></ul>
<script type="text/javascript">
/* function* foo(x){
yield x+1;
yield x+2;
return x+3;
}
var f = foo(1);
console.log(f.next(),f.next(),f.next());//value: 2, done: false} {value: 3, done: false} {value: 4, done: true} */
//next() 参数表示上一次的返回值
/* function* foo(x){
yield y = 2 * (yield(x+1));
yield z = yield(y/3) ;
return (x+y+z);
}
var it = foo(5);
console.log(it.next(3));//{value: 6, done: false}
console.log(it.next(12));//{value: 24, done: false}
console.log(it.next(13));//{value: 8, done: false}
*/
//裴波那契数列
function* feibo(n){
let a = 0;
let b = 1;
for(let i = 0;i<n;i++){
yield a ;
let temp = a + b;
a = b;
b =temp;
}
}
var f = feibo(10);
for(let i of f){
console.log(i);//0 1 2 3 5 8 13 21 34
}
</script>
</body>
</html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <ul id="test"></ul>
9 <script type="text/javascript">
10 class Person{
11 constructor(name) {
12 this.name = name;
13 }
14 sayHello(){
15 console.log(this.name);
16 }
17 }
18
19 var person = new Person("john");
20 console.log(person.name);
21 person.sayHello();//john john
22 </script>
23 </body>
24 </html>
