ES6系列（1）
以下是小J在学习ES6过程中记的一些笔记。大家可以学习一下哦。
本次主要是四个part
- let的使用
- 解构赋值
- 模板字符串的使用
- 箭头函数的使用
let的使用和解构赋值
<!DOCTYPE html>
<html>
<head>
<title>ES6 Let 的使用</title>
<style type='text/css'>
</style>
</head>
<body>
<script type="text/javascript">
// =====================================================================
// let的用法类似于var，但是限制比较多
// let a=10;
// console.log(a);
// -------------------------------------------------------------
// cannot ouput
// let 存在块级作用域
// 不能这样用
// 类似于一个局部变量
// if(a>5){
// let b=20;
// }
// console.log("b"+b);
// -------------------------------------------------------------
// 同样不可以
// function foo(){
// let c=20;
// }
// foo();
// console.log("c"+c);
// -------------------------------------------------------------
// console.log(a); // undefined
// var a = 10;
// console.log(b); // Uncaught ReferenceError: Cannot access 'b' before initialization
// let b = 10;
// -------------------------------------------------------------
// 不允许重复定义
// let a = 10;
// let a = 20; //Uncaught SyntaxError: Identifier 'a' has already been declared
// =====================================================================
// 解构赋值,数组形式
// let [a,b,c] = [1,2,3];
// console.log(a);// 1
// console.log(b);// 2
// console.log(c);// 3
// -------------------------------------------------------------
// let [a=3, b] = [2];
// console.log("a="+a,"b="+b);//a=2 b=undefined
// -------------------------------------------------------------
// let c;
// console.log(c);//undefined
// let [a=2]=[c];
// console.log(a);// 2
// [a] = [c];
// console.log(a);//undefined
// -------------------------------------------------------------
// 解构赋值 对象形式 类似于python中的字典
// let {a,b}={a:"aaaa", b:"bbbbbbbbbbb"};
// console.log("a="+a,"b="+b);//a=aaaa b=bbbbbbbbbbb
// let {a,b=1}={a:5};
// console.log("a="+a,"b="+b);//a=5 b=1
// -------------------------------------------------------------
// let {a:b}={a:"1111111111"};
// console.log("b="+b);//b=1111111111
// console.log("a="+a);//Uncaught ReferenceError: a is not defined
</script>
</body>
</html>
模板字符串的使用
<!DOCTYPE html>
<html>
<head>
<title>ES6 模版字符串</title>
<style type='text/css'>
</style>
</head>
<body>
<script type="text/javascript">
// =====================================================================
// ES5
// var obj = {"name":"小J","age":20};
// var name = obj.name;
// var age = obj.age;
// console.log(name+"的年龄是"+age);//小J的年龄是20
// -------------------------------------------------------------
// ES6 可以不用字符串的拼接
// 反引号，
// let {name, age} = {"name":"小J","age":20};
// console.log(`${name}的年龄是${age}`);//小J的年龄是20
// console.log(`${name}`);
// -------------------------------------------------------------
// 注意下面也是可以滴！！！
// var obj = {"name":"小J","age":20};
// var name = obj.name;
// var age = obj.age;
// console.log(`${name}的年龄是${age}`);//小J的年龄是20
// =====================================================================
// 可以用于多行字符串的拼接
// var arr= [0,1,2,3,4];
// var output1 = "";
// for(var i in arr)
// output1 += "<li>"+arr[i]+"</li>";
// var output2 = "";
// for(var i in arr)
// output2 += `<li>${arr[i]}</li>`;
// // 可以完成在js里写html代码的工作!!!!!!!!!!!!!!!!!
// var output3 = "";
// for(var i in arr)
// output3 += `<li>
// <a href="">${arr[i]}</a>
// </li>`;
// document.write(output1);
// // 0
// // 1
// // 2
// // 3
// // 4
// document.write(output2);
// // 0
// // 1
// // 2
// // 3
// // 4
// document.write(output3);
</script>
</body>
</html>
箭头函数的使用
<!DOCTYPE html>
<html>
<head>
<title>箭头函数</title>
<style type='text/css'>
</style>
</head>
<body>
<script type="text/javascript">
// =====================================================================
// ES5
// var foo = function(){
// return 1;
// }
// foo();
// console.log(foo());// 1
// ES6
// let foo = () => 1;
// console.log(foo());//1
// -------------------------------------------------------------
// 含参
// let foo = (a) => a;
// console.log(foo(10));//10
// -------------------------------------------------------------
// 函数有多条语句
// let foo = (a,b) =>{
// let c = 10;
// return a*b*c;
// }
// console.log(foo(1,2));//20
// -------------------------------------------------------------
// 注以下也是可以的！！！！
// var foo = () => 1;
// console.log(foo());
// =====================================================================
// this 的问题
// var foo = () => {
// console.log(this);
// }
// foo();//window
// -------------------------------------------------------------
// var obj1 = {
// "name1": "小J",
// "speakTo":function(){
// console.log(this.name1);
// }
// }
// var obj2 = {
// "name1": "小J",
// "speakTo":() => {
// // 指向定义时所在的作用域，而不是执行时所在的作用域!!!!!!!!!!!!!!!
// console.log(this);
// console.log(this.name1);
// },
// "speakTo2":function(){
// console.log(this);
// // 1000ms后执行该语句
// setTimeout(()=>{
// console.log(this.name1);
// },1000);
// }
// }
// obj1.speakTo();//小J
// obj2.speakTo();//window undefined
// obj2.speakTo2();//obj 小J
</script>
</body>
</html>
以上就是小J今天所学的关于ES6的知识啦
