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就不多说了，到处都可以用的到哦，但是必须放在顶部引用才可以呢！
有不足之处希望大家多多交流给个意见。
