ES6部分基础知识

目录

一、Let命令语法

1、let命令是什么？

2、let所声明的变量不提升

3、let的暂时性死区

二、const命令语法

三、模板字符串

四、扩展运算符与剩余运算符

1、扩展运算符

2.剩余字符串

五、箭头函数

   1.箭头函数的使用法

  2.关于箭头函数的this

3.不可以当作构造函数。

4.不可以使用arguments对象。

---

一、Let命令语法

1、let命令是什么？

let命令为ES6新增的一个命令，其用来声明变量。

用法和var类似，但与var不同的是，let所声明变量只在其所在块级作用域内有效。只存在于块级作用域，且不可变量提升以及不允许变量重复声明。ES5只有全局作用域和函数作用域，没有块级作用域，而ES6里加入了块级作用域，这时也就用到了let。

2、let所声明的变量不提升

//var
console.log(a);
var a= 1;   //输出：undefined

//let
console.log(b);
let b= 2;   //输出：ReferenceError: Cannot access 'b'

这里打印代码在变量声明之前，

var声明的变量会发生变量提升，相当于在打印代码之前，会声明一个var a；打印之后结果会是undefined。

而let声明的变量则不会变量提升 ，打印结果便会发生错误。

3、let的暂时性死区

如在一个块级作用域内给一个变量赋值，其后有用let声明此变量，此时此变量所赋值会报错。

因为只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。虽然那个变量已经声明了，但此之后再块级作用域中只要let声明此变量，let的声明则会绑定这个区域，如果再let之前给这个变量赋值就会出错。

if(true){
   a = 1; //此时给a赋值会报错，ReferenceError: Cannot access 'a' 
   let a;
}

二、const命令语法

在ES6中 const也是用来声明变量的，其特性与let相同，存在于块级作用域以及不能变量提升和不能重复声明变量。但不同的是，const声明的是一个只读的常量。其所声明的常量的值被声明后就不能改变了。

三、模板字符串

let obj={
    name:"Sam",
    age:12
  }
  
  console.log("名字:"+obj.name+"先生")  //原来的写法
  console.log(`年龄:${obj.age}岁`)   //模板字符串写法

 原来数据意外字符会被双引号引起来，且连接数据得要加号，而使用模板字符串则可以所有东西都放在反引号里，只要数据引用使用${ }包裹起来即可。

四、扩展运算符与剩余运算符

ES6里的  " ... "运算符可表示剩余运算符和扩展运算符两个运算符。

1、扩展运算符

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

功能：

1. 传递多个数据
2. 字符串转换成数组
3. 将一个数组插入到另一个数组中

//1.传递多个数据
function ABC(a,b,c){
    console.log('a:'+a,'b:'+b,'c:'+c)  //输出：a:1 b:2 c:3
}
let arr = [1, 2, 3];
ABC(...arr);    //将数组元素依次传递到函数ABC作为函数的参数，a=1 b=2 c=3


//2.将字符串转换成数组
let str = 'ABC';
let arr = ['...str'];
console.log(arr);   //输出：["A","B","C"]


//3.将一个数组插入到另一个数组中
let arr1 = [1,2,3];
let arr2 = [a,b,c,...arr1];
console.log(arr2);   //输出：[a,b,c,1,2,3]

2.剩余字符串

function add(...values) {
	let sum = 0;
	for(var val of values) {
  		sum += val;
	}
	return sum;
}
add(1, 2, 3) // 输出：6

当" ... "在等号右边，或者放在实参上时，为扩展运算符；

当" ... "在等号左边，或者放在形参上时，为剩余字符串。

五、箭头函数

   1.箭头函数的使用法

    在ES6中可以使用箭头来定义函数（=>）;

//ES5定义函数
var a = function(b) {
    return b*2;
};
console.log(a(2));  //输出：4


//ES6定义箭头函数
let a = b => b*2;
console.log(a(2));  //输出：4  


//ES6定义多个参数的箭头函数
let a = (b,c) => b+c;
console.log(a(1,1));  //输出：2


let a = str => {
    console.log(str);
}


let a = id => ({ id:id, name:'Sam' })

  2.关于箭头函数的this

      函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

      其使用时捕获所在上下文的 this ，作为自己的 this 。

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

  3.不可以当作构造函数。

   不可以使用new命令，否则会抛出一个错误。

  4.不可以使用arguments对象。

    该对象在函数体内不存在。如果要用，可以用Rest参数代替。