Es6语法糖

学习视频链接：
https://www.bilibili.com/video/BV1BU4y147pS?p=18

let和const

let和const用来代替var，let表示变量，const表示常量 。
建立这么一个文件：test.html

//以往会有这样的写法
<script>
for(var i=0;i<5;i++){
             console.log(i);
         };
console.log(i);
</script>

在浏览器打开，会看到输出了5，这就是变量穿透

如果换成let

<script>
for(let i=0;i<5;i++){
             console.log(i);
         };
console.log(i);
</script>

如果我们对const进行修改也会一样报错：

<script>
const PI = 3.14;
PI = 1;
</script>

字符串的拼接

之前的写法：

<script>
var person = {
	name : "SCY",
	qq: "142",
}
let str = '我是'+person.name+', qq号是'+person.qq;
console.log(str);
</script>

Es6的写法：

<script>
var person = {
	name : "SCY",
	qq: "142",
}
let str =`我是${person.name}, qq号是${person.qq}`;
console.log(str);
</script>

效果都是一样的：

带默认参数的函数

测试代码：

<script>
	function sum(a=10,b=20 ){
		return a+b;
} 
	var res1 = sum(1,2),res2 = sum(); 
	console.log(`res1 = ${res1}, res2 = ${res2}`);
</script>

运行结果：

箭头函数

这里对比下几种不同的函数写法

<script>  
        // 1:声明式
        function add1( a, b){
	return a+b;
        };
        // 2:表达式
        var add2 = function( a, b){
	return a+b;
        }     
        // 3:箭头函数
        var add3= (a = 100,b = 300)=>{
            return a+b;
        }; 
        console.log( add1(1,2) );  
        console.log( add2(3,4) );  
        console.log( add3(5,6) );  
</script>

运行结果

箭头函数对于不同函数参数的简略写法如下。

<script> 
	// 无参数的函数
	var sum1_2 = function(){
		console.log(1+2);
	}
	// 箭头改造如下
	var Sum1_2 = ()=>{ console.log(1+2); }
	//测试一下
	sum1_2();
	Sum1_2(); 


	// 有参数（一个参数括号可以省略）
	var output = function(a){
		console.log(a);
	};
	// 箭头改造如下
	var Output = a=>{console.log(a)}; 
	output(2);
	Output(2); 
	//两个参数的话()不可以省略
	var sum = function(a,b){
		return a + b;
	};
	// 箭头改造如下
	var Sum= (a,b)=>{
		return a + b;
 	};
	console.log(sum(3,4));
	console.log(Sum(3,4));


	// 如果没有逻辑体，只有返回值可以简化如下
	var sum1 = function(a,b){
		return a + b;
	};
	// 箭头改造如下
	var Sum1 = (a,b)=>a+b 
	console.log(sum1(7,8));
	console.log(Sum1(7,8));
</script>

测试一下是这样的：

对象初始化简写

如果一个对象中的key和value的名字一样的情况下可以定义成一个。

<script>
    function person(name, age) {
        //原来的写法是return {name:name,age:age};
        // 对象简写：
        return { name, age };
    };

    var json = person("SCY", 20);
    console.log(json.name, json.age); 
</script>

测试结果是这样的：

对象解构

两种获取对象元素的方式：

 <script>
	var question = "NXHS？";
	var ans = "KCY" ;
	let SCY= {
		question,
		ans,
		go(){
			console.log(`WXH${ans}` );
		}
	}
	 //通过.的方式
	console. log(SCY. question);
	console.log(SCY. ans);
	SCY.go( );

	//通过[]的方式
	console.log(SCY["question"]);
	console.log(SCY["ans"]);
	SCY["go"]();

	//es6对象解构
	var {q , a, f } = SCY;
	console.log(q);
	console.log(a); 
	f();
</script>

运行结果：最后一种方法视频没问题，我自己电脑出问题了，可能是浏览器不支持，暂不深究。

传播操作符号…

这里的测试代码直接抄教程的

<script>
  // 1： 定义一个对象
  var person1 = {
      name: '小飞飞',
      age: 16,
  };
  // 2： 对象解构
  var {name,age} = person1;
  // =========================== ... 对象融合=====================
  var person2 = {
      ...person1,
      gender:1,
      tel:13478900
  };
  console.log(person2);
  // =========================== ... 对象取值=====================
  // ... 对象取值
  var person3 = {
      name:"李四",
      gender:1,
      tel:"11111",
      address:'广州'
  };
  // ...person4 把剩下没取走给我。
  var {name,gender,...person4} = person3;
  console.log(name)
  console.log(age)
  console.log(person4) 
</script>

运行结果

ES6的语法：数组map和reduce方法使用(了解)

可以看这个网页的：https://kuangstudy.com/bbs/1351463043300708353