es6 新语法分享给爱前端的伙伴

相信es6大家并不陌生，那么我还是简单介绍一下es6，es是15年发布的，可以用babel转化成es5可以支持低端浏览器，es6是一种新的语法，流行的库基本都是基于es6开发的。所以小伙伴要掌握哦！而且写起来简单优雅。

下面我给大家介绍一下es的常用语法。

一、let和const

这两个语法相信很多小伙伴已经经常使用了，下面我介绍一下var ，let， const 的区别

1、var：

　　

var a=1;

console.log(a);//1

console.log(window.a) ;//1
// 如此可见用var声明一个变量a  是直接挂载到了window中哦，作用于全局，从而会污染全局。

{var a=1}
console.log(a) //1
{let a=1}
console.log(a) //a is not defined

　　

2、let和const

　　let与const都是只在声明所在的块级作用域内有效。

　　let 声明的变量可以改变，值和类型都可以改变，没有限制。

　　const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

　const a ;//报错,一旦声明变量，应该立即赋值！
　const b = 2;
　b = 3//报错，因为定义常量之后不能成重新赋值！！

 对于复合类型的变量，如数组和对象，变量名不指向数据，而是指向数据所在的地址。const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。

//不会报错，因为names指向的地址不变，改变的只是内部数据
 const names = [];
 names[0] = 1
 names[1] = 2
 names[2] = 3

　

下面介绍一个小的语法点

　如果想让定义的对象或数组的内部数据也不能够修改和改变，可以使用object.freeze(names)进行冻结，这样为对象添加新属性就不起作用。

　除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

有没有对let和const有更深的理解呢~~

二、模板字符串

//正常我们拼接字符串这样写
let name =“boke”
console.log("我的名字是"+name)

//如果是模板字符串

console.log(`我的名字是${name}`)

// 模板字符串也支持多行换行的。

let content=`


        ${name}


`

　　

三 、箭头函数 
  
相信我们react开发更熟悉这个箭头函数了，经常用箭头函数来解决this指向的问题。

// 曾经我们这样写函数

function hello(name){
     console.log(`hello!${name}`);
}

// 掌握了箭头函数可以这样写

const hello1 = (name) => {
     console.log(`hello!${name}`);
}
hello('lili') //hello!lili
hello1('lili') //hello!lili


const  num = x =>x*2

num(5) //10


// 还可以设置默认值哦

const hello = (name='wenwen') =>{
   console.log(`hello!${name}`);
}
hello() //hello!wenwen
hello('zhangfei') // hello!zhangfei

四、展开符的使用

//曾经我们的想给函数传递一个数组我们这样做。

function hello(name1,name2){
    console.log(name1,name2);
}
let arr=['wenwen','haomei']

hello.apply(null,arr)

// 现在我们可以这样做哦

hello(...arr) 

　　* 补充知识 apply：

              apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.

　　　　Function.apply(obj,args)方法能接收两个参数
　　　　obj：这个对象将代替Function类里this对象
　　　　args：这个是数组，它将作为参数传给Function（args-->arguments）

  

// 合并数组  对象

let obj ={name:'wenwen'}
let obj1={age:25}
// console.log({...obj,...obj1}) //{name:'wenwen',age:25}

// console.log({...obj,...obj1,job:'程序猿'}) //{name:'wenwen',age:25，,job:'程序猿'}
// 注意 如果有重复，如果有重复的话第二个可以把第一个覆盖

五、对象的扩展（object）

//取key和value
obj={name:'wenwen',age:25,job:'猴子'}

console.log(Object.keys(obj));// ["name","age","job"]

console.log(Object.values(obj));// ["wenwen",25,"猴子"]

console.log(Object.entries(obj));//[["name","age","job"],["wenwen",25,"猴子"]]

六 、解构赋值
批量赋值
const arr=['wenwen','chaoji','meili']
let [arg1,arg2,arg3]=arr
console.log(arg1,arg2,arg3)//wenwen chaoji meili

const obj={name:'wenwen',age:25,job:'猴子'}
let [name,age,job]=obj
console.log(name,age,job);//wenwen chaoji meili

七、class类

class MyId{
　　constructor (){
　　　　this.name ="wenwen"
　　}
　　do (){
　　　　console.log(`${this.name}写bug`);
　　}
}
doSome = new MyId()
doSome.do() //wenwen写bug

八、set去重
let arr=[1,1,'2','2','1','1',null,null]
console.log(new Set(arr));//{1,'2','1',null}
但是这里大家可以看到，set返回的是一个对象，但是我们想要的是数组啊。


这样我们就可以用到Array.from了 ，它的作用，就是可以把类数组对象、可迭代对象转化为数组。

let arr=[1,1,'2','2','1','1',null,null]
let arr2=Array.from(new Set(arr));

　console.log(arr2);//  [1,'2','1',null]

下面的import 和export就不多说了，到处都可以用的到哦，但是必须放在顶部引用才可以呢！

有不足之处希望大家多多交流给个意见。