相信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
//不会报错,因为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就不多说了,到处都可以用的到哦,但是必须放在顶部引用才可以呢!
有不足之处希望大家多多交流给个意见。