超简单！10分钟学会工作中最长用的ES6

知识点概览

1. let与const
2. class extends super
3. 箭头函数
4. 字符串模板
5. 结构赋值
6. 函数的default
7. rest …

const用于声明产量 声明时必须赋值

let声明的变量只在代码块内有效 同一个变量let只能声明一次

{
let a =1;
}
console.log(a); //undefined

还有一个常见的用法是 使用let代替闭包

使用闭包
var button = document.getElementsByTagName('button');
for(i=0;i<button.length;i++){
	(function(i){
		button[i].onclick=function(){
			alert(i+1)
		}
	}(i))
}

使用let
var button = document.getElementsByTagName('button');
for(let i=0;i<button.length;i++){
	alert(i)
}

使用let 能省去不少代码 还避免了内存泄露

2. class extends super

   常用于React+TS的开发中

   一般class组件的格式

   class Homde extends React.Component{
   constructor(props){
   super(props)
   }
   }
   

3. 箭头函数

箭头函数的特性：箭头函数没有固定的this指向，它的this永远指向它的上一级作用域，即是上级上下文中的this 如果你能分清动态作用域和静态作用域（js的词法作用域）话很容易理这点 this的指向不是由声明的位置决定，而是跟调用的位置有关

一般的函数
function add(x,y){
return x+y
}

箭头函数
const add = (x,y)=>{
 return x+y;
}

当函数体内只有retun语句的时候 可以简写为
const add = (x,y)=>x+y;

当函数参数只有一个时可以省略括号
如
const a = function(a){
return a+1;
}
可以写为
const a = a=>a+1

字符串模板

一般情况下我们想在字符串中使用变量时需要使用字符串拼接，但模板字符串提供以一种更简单的语法糖${}来访问变量

普通字符串
var name = '老王';
const str1 = "hello,大家好，我是"+name+""

模板字符串
const str2=`
hello，大家好，我是${name}
`
值得注意的是，模板字符串可以使用回车换行

结构赋值

ES6允许按照一定格式从数组和对象中提取值为变量赋值

let a =1;let b =2;
let obj ={a:a,b:b}
用es6可以写为

let obj ={a,b}

反过来可以这么写
let c = {a:1,b:2}
let {a,b}=c;
console.log(a,b)//1,2

6. default 默认值

下面的例子调用animal的时候忘记传传参数了一般的做法是type = type|| ‘cat’ 来指定默认值

function animal(type){
type = type|| 'cat';
console.log(type)
}

如果使用es6可以直接这样写

function animal(type='cat'){
console.log(type)
}

在redux中的reducer.js有这样的一段代码也用到了default默认值

defaultValue={name:'ian',age:21};
export default (state=defaultValue,action)=>{
 
 
 return state;
}

7.rest …

function person(...types){
 console.log(types); // ['老王'，'老李'，'老赵']
}
persons('老王','老李','老赵');

rest有一种更常见的用法
var persons = ['老王','老李','老赵'];
var myperson = [...persons,1,2,3,5];