ES6的基本语法

自己整理的ES6语法知识——基本语法

推荐阮一峰ES6教程
以下为本人的学习笔记，有错误的话还请指正。

let和const命名

在ES6中使用let声明变量，类似于var
（babel编译器：自动将ES6转换成ES5语法）

• let：

  • var存在变量提升，会造成全局污染；
  • let属于块级作用域，不允许重复声明

• const：声明常量，一旦声明立刻赋值

• 为什么需要块级

  • 内层变量可能会覆盖外层变量
    • 使用闭包来解决循环计数的问题
    • 使用let解决循环计数

• let可以被修改 const一旦声明变量立刻赋值

• 默认情况下，使用const

模板字符串

在需要打印html文本文件样式时：

const oBox = document.querySelector('.box');
//模板字符串
let id = 1,name = '叮咚';
let htmlTel = "<ul><li><p>id:"+id+"</p><p>name"+name+"</p></li></ul>";
oBox.innerHTML = htmlTel;

ES6引入模板字符串：

let htmlTel= `
	<li>
	<p>id:${id}</p>
	<p>name:${name}</p>
	</li>
`;

解构

1. 数组解构

    const[a,b,c]=[1,2,3];
    console.log(a,b,c);
   

2. 对象的解构

    //const obj={
    	//name:"张",
    	//age:14
    //}
    //const a = obj.name;
    //const b = obj.age;
   
    const {name,age}={
    	name:"张",
    	age:14
    }
   

3. 变量值互换

    let x = 1;
    let y = 2;
    [x,y] = [y,x];
   

4. 提取json数据

函数的扩展

带参数默认值的函数

Es6允许函数带参数：

function log(x,y='world'){
	console.log(x,y);
}
console.log('hello');//hello world
console.log('hello','china');//hello china

以前：

function log(x,y){
	y = y || 'world';
	console.log(x,y);
}

rest参数

function fn(){
	console.log(arguments);//生成伪数组
	const arr =[...arguments];//剩余参数转成数组
	console.log(arr);
}
fn('a','b','c');

箭头函数

function(){}==>()=>{}

const fn = function(a){};
const fn = (a)=>{}

const fn = function(a,b){
	return a+b;
};
const fn = (a,b) => a+b;

• 表达式简洁

• 简化回调

    [1,2,3].map(function(x){
    	return x*x;
    });
    //
    [1,2,3].map(x=>x*x);
  

• 普通函数需要用bind或者特定指向来改变this的指向问题；而箭头函数中的this就是箭头函数的外层作用域；

• 一般对象中的函数不用箭头函数来定义

• 箭头函数中没有arguments对象

• 箭头函数不能使用new关键字来实例化对象

对象的扩展

如果对象的key和value一样，就直接简写key就好了；

函数也可以简写：fav:function(){}–>fav=>{}

扩展运算符

• 对象的扩展运算符（…）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中

  let z={a:3,b:4};
  let n={…z};
  n //{a:3,b:4}

• 可以合并两个对象