es6基础知识1

let与var的区别

// var 会变量提升  undefined
console.log(a);
var a=10;
// let不会变量提升   报错Uncaught ReferenceError: Cannot access 'b' before initialization
console.log(b);
let b=10;

// var 可以重复定义
var c = 10;
var c = 20;
console.log(c); //20
// let不能重复定义   报错Uncaught SyntaxError: Identifier 'd' has already been declared
let d = 10;
let d = 20;
console.log(d);

if(true){
	var a=10;
	let b=20;
}
console.log(a);   //10
console.log(b);   //报错Uncaught ReferenceError: b is not defined

// const不能重复被赋值   报错Uncaught TypeError: Assignment to constant variable.
const PI = Math.PI;
PI = 20;
console.log(PI);

模板字符串

<div id="box"></div>

let meassage = {
	name:"zhangsan",
	age:22
}
let box = document.getElementById("box");
// 用反引号
box.innerHTML = `${meassage.name}今年${meassage.age}岁`;

扩展运算符

扩展运算符：

把数组或类数组对象展开成一系列用逗号隔开的值。

// 传递多个数据
function number(a,b,c){
	console.log(a);
	console.log(b);
	console.log(c);
}
let arr = [1,2,3];
number(...arr);

// 将一个数组插入到另一个数组中
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6];
console.log(arr2);      //[1, 2, 3, 4, 5, 6]

// 字符串转化
let str='hello';
let arr3= [...str];
console.log(arr3);      //["h", "e", "l", "l", "o"]

剩余运算符

剩余运算符：

把逗号隔开的值组成一个数组

let arr=["张三","李四","王五","赵六","孙七"];
console.log(...arr);

箭头函数

用 ”箭头”（=>）定义函数

let f = function() { return 3 };
// 等同于
let f = () => 3;

let f = str => {
    console.log(str);
}
f('hello');

let sum = function(num1, num2) {
	return num1 + num2;
};
// 等同于
let sum = (num1, num2) => {
	return num1 + num2;
};
//等同于
let sum = (num1, num2) => num1 + num2;

如果有参数，参数写在括号中，
如果只有一个参数，可省略括号，多个参数用逗号隔开，
如果函数体只有一句，可省略大括号，
如果函数体只有一个return语句，return也必须省略。

箭头函数没有作用域
在箭头函数中this指向上一级
箭头函数不存在arguments
箭头函数不能当做构造函数使用，不能new

箭头函数的this指向

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（或者说：箭头函数当方法使用时没有定义this绑定，而是捕获所在上下文的 this ，作为自己的 this 。 ）

<button id="one">点击(function)</button>
<button id="two">点击(箭头函数)</button>
<script>
	var one = document.getElementById('one');
	var two = document.getElementById('two');
			
	one.onclick = function (){
		console.log(this);   //<button id="one">点击(function)</button>
	}
	two.onclick = ()=>{
		console.log(this);   //window
	}
</script>