ES6 回顾总结

ES6 - 新增实用

let块级变量

用let定义的变量只在块级中起作用，离开变量外界的块（一个花括号是一个块级）就会销毁。

if(true){
	var a=123;
	let b=456
}
console.log(a);
console.log(b); // 报错，访问不到变量

let a=23;
let a=456
console.log(a); // 无法覆盖重复变量

const定义常量

es6之前并没有定义声明常量的方式，es6标准中引入了新的关键字const来定义常量。

const a=123;
a=456; // 会报错，常量无法覆盖
console.log(a);

模板字面量

用于字符串拼接和写模板，使用``(反引号，左上角波浪线)，变量使用${}

var user="张三";
var age=22;
var sex="男";
console.log("大家好,我的名字是"+user+",今年"+age+"岁,我是"+sex+"生"); // 传统的写法
console.log(`大家好,我的名字是${user},今年${age}岁,我是${sex}生`); // 模板字面量写法

解构赋值

交换值

var a=1;
var b=2;
[a,b]=[b,a];
console.log(a,b); // 2,1

从数组里获取元素

var array=[1,2,3,4];
var [a,,b]=array;
console.log(a,b); // 1 3

从对象中获取值

var obj={user:'张三',age:22,sex:'男',job:'前端开发'}
var {user,job}=obj;
console.log(user,obj); // 张三，前端开发

返回值结构

function arr(){
	var a=1,b=3,c=3,d=4;
	return {a,b,c,d}
}
var {a,c}=arr();
console.log(a,c); // 1,3

箭头函数

箭头函数相当于匿名函数，并且简化了函数定义。（）中放参数，没有参数就省略，箭头后面是函数体。

var fun = (x, y) => {
	console.log(x+y);
}
fun(2,3); // 5

es6之前访问函数外面的this比较麻烦，箭头函数可以直接访问最外面this,不需要转换

对象中函数的声明

var obj={
	user:'张三'，
	job(){
		return 'web前端开发'
	}
}
console.log(obj.job()); // web前端开发

for-of循环遍历

var obj={user:'张三',age:22,sex:'男',job:'前端开发'}
for(var i of obj){
	console.log(i);
}

默认参数

function fun(x=0,y=2,z=true){
	console.log(x,y,z);
}
fun(); // 0,2,true
fun(4,9,false); // 4,9,false

展开运算符 …

arr1=[1,2,3,4,5];
arr2=['a','b','c','d'];
arr3=arr1.concat(arr2);
arr4=[...arr1,arr2];
console.log(arr3); // [1,2,3,4,5,'a','b','c','d']
console.log(arr4); // [1,2,3,4,5,'a','b','c','d']

数组循环map

	var arr=[1,2,3,4,5];
	for(var i=0;i<arr.length;i++){
		arr[i]=arr[i]+'新增内容'；
	}
	console.log(arr); // ['1新增内容','2新增内容','3新增内容','4新增内容','5新增内容']

	var arr1=[1,2,3,4,5];
	var newArr=[];
	arr1.forEach(() => {
		item=item+'新增内容';
		newArr.push(item)
	})
	console.log(newArr); // ['1新增内容','2新增内容','3新增内容','4新增内容','5新增内容']

	var newArr1=arr.map((item,index) => {
		return item+'新增内容';
	})
	console.log(newArr1); // ['1新增内容','2新增内容','3新增内容','4新增内容','5新增内容']