I、什么是Es6
1、1995年:JavaScript诞生,它的初始名叫LiveScript。
2、1997年:ECMAScript标准确立。
3、1999年:ES3出现与此同时IE5风靡一时。
4、2009年:ES5出现,现在大多数人在使用。
5、2015年:ECMAScript2015诞生,就是现在的ES6。
ES6就是JS的下一代国际标准,JS是ES的实现
II、let和const命令
1.let:声明变量,声明的是局部变量
用途及区别:ES6新增了let命令,用来声明变量,类似于var ,但是声明的变量只在let所在的代码块的内部有效
let不存在变量提升,这个要注意哟
暂时性的死区: 只要块级作用域里存在let命令,它所声明的变量就绑定这个区域,不在受外部的影响
不允许重复声明 内部的数据有了let声明过之后不允许重复声明 2.块级作用域
为什么需要块级作用域:
es5只有全局作用域和函数作用域,这样会造成一些不合理的地方
1>.内部数据覆盖外部数据的情况
2>.用来计数的循环变量泄露成全局变量
虽然没有专业的定义词语来创建块级作用域,但是只要内部用了let,就说明一个块级作用域存在了,也就是说let命令为es6增加了块级作用域
在以往我们为了让变量执行完成后就销毁不要浪费内存,会把大段的代码放到立即执行函数里,而现在,我们只需要一个块级作用域就好了 3.const :
声明只读常量 一旦声明就不能进行更改,使用起来和var,let定义的的变量一样,也是属于块级的定义方式,和let相似,也是不可重复声明的
但是对象呀,数组呀都是可以改这个对象或者数组的东西的,因为真正保存的是地址,数组多个元素少个元素又不会改变地址
const person=Object.freeze({});
var cat=Object.freeze({});
复制代码
赋值的时候可以用Object.freeze来冻结一个对象,使其内部的属性和方法不能更改
4.全局对象属性
全局对象是最顶层的对象,在浏览器环境指的是window对象,在node。js指的是global对象,在js语言里,所有变量都是全局对象的属性,
es6规定,var 和function声明的全局变量不属于全局对象的属性,let、const、class声明的全局变量不属于全局对象的属性
III、对象的解构赋值
Es6允许按照一定模式,从数组和对象里提取值,对变量进行赋值,这被成为解构赋值 1.数组的解构赋值
var [a,b,c]=[1,2,3]
复制代码
2.对象的解构赋值
解构不仅可以用于数组,还可以用于对象, 对象的属性没有次序,变量必须与属性同名,才能取到正确的值
默认值生效的条件是,对象的属性值严格等于undefined
3.函数参数的解构赋值
在以前的时候,当用户传入数组或者对象的时候,需要在函数内部对这个数组或者对象进行解构并且赋值、设置默认值 es6可以直接在函数的形参部分进行解构赋值和设置默认值
IV、模板字符串
1.es6提供了又一种变量连接字符串的方法:
var NBAplayer="姚明";
var height=226;
var age=38;
var p1=`我是${NBAplayer}我今年${age}岁身高${height}`
复制代码
2.es6为字符串提供的几个小方法
let str="abc"
判断是否以xx开头:str.startsWith("a")
判断是否以xx结尾:str.endssWith("c")
判断是否以xx开头:str.includes("a")
V、函数相关
1.设置函数参数的默认值
function f(x=1,y=2){
return[x,y]
}
console.log(f())
复制代码
2.扩展运算符...
可以在一个数组或者一个对象里快速添加另一个数组的元素或者另一个对象的属性方法,同名属性会覆盖
var fruit=["apple","banana"];
var food=["meat",...fruit];
console.log(fruit);
console.log(...fruit)
console.log(food)
var obj={
name:'xiu',
age:13
}
console.log(obj)
console.log({x:1,...obj})
复制代码
事实证明借鉴的这个大神写的这一条是扯淡,拓展运算符并不能展开对象它是数组里的一个方法,误人子弟 3.name属性 :es6为函数增加了一个name属性,需要注意的是,匿名函数的name是引用的变量的名字,又赋值又有名字的函数name是函数自己的函数名
function myFn (argument) {
}
console.log(myFn.name)//myFn
var yourFn=function(){
}
console.log(yourFn.name)//yourFn
var hisFn=function herFn(){
}
console.log(hisFn.name)//herFn
复制代码
4.Es6的箭头函数
var fn=a=>a+1;
// function fn (a) {
// return a+1;
// }
console.log(fn(5))//6
var fn2=(a,b)=>{
return a+b;
}
// function fn2(a,b){
// return a+b;
// }
console.log(fn2(1,2))//3
复制代码
VI、看代码,大概就是这个方法
let name='allen',
age=13;
let person={
name,
age
}
console.log(person)
复制代码
VII、es6中对象的属性名可以用变量的值去表示
let person={};
person.name='xiuxiu';
person.firstName='zhao';
person['second name']='wang';
let myname='third name'
person[myname]='gao';
console.log(person)
复制代码
VIII、几个Objec小方法
1.几个蛋疼的比较
console.log(+0==-0)//true
console.log(+0===-0)//true
console.log(NaN==NaN)//false
console.log(NaN===NaN)//false
console.log(Object.is(+0,-0))//false
console.log(Object.is(NaN,NaN))//true
复制代码
2.Object.prototype相关
var a= Object.create(b)//以b为原型创建一个对象a
Object.getPrototypeOf(a)//获取a的原型
Object.setPrototypeOf(a,c);把a的原型设置为c
var wang={
getName(){
return '王'
}
}
var li={
getName(){
return '李'
}
}
var xiu=Object.create(wang);
console.log(xiu.getName())//王
console.log(Object.getPrototypeOf(xiu)==wang)//true
Object.setPrototypeOf(xiu,li);
console.log(xiu.getName())//李
console.log(Object.getPrototypeOf(xiu)==li)//true
复制代码
通过{}.prototype可以来设置原型,但是输出出来的却是__proto__,es6觉得,那就直接设置__proto__吧
var wang={
getName(){
return '王'
}
}
var li={
getName(){
return '李'
}
}
var xiu={
__proto__:wang
}
console.log(xiu.getName())//王
console.log(Object.getPrototypeOf(xiu)==wang)//true
xiu.__proto__=li
console.log(xiu.getName())//李
console.log(Object.getPrototypeOf(xiu)==li)//true
复制代码
在对象的方法里可以使用它原型的方法和属性,这个时候在方法里用super来代表自己的原型
var wang={
getName(){
return '王'
}
}
var xiu={
__proto__:wang,
getFname(){
console.log(super.getName())
}
}
console.log(xiu)
xiu.getFname()
复制代码
IX、clas类
es6里引入了类的概念,可以通过class关键字来创建一个类,里面的constructor方法可以用来接受实例化时传入的参数,还可以在class里写一些自定义的方法,不需要加,
class person {
constructor(name){
this.name=name
}
say(){
console.log(this.name)
}
}
var xiu=new person('xiu')
console.log(xiu)
//.....
person
name:"xiu"
__proto__:Object
constructor:person(name)
say:say()
__proto__:Object
//............
xiu.say()///xiu
复制代码
es6觉得获取属性和设置属性的这些操作可以专门用set和get关键字来定义
class person {
constructor(name){
this.name=name;
this.hobby=[];
}
get gethobby(){
return this.hobby;
}
set sethobby(hobby){
return this.hobby.push(hobby);
}
}
var xiu=new person('xiu')
console.log(xiu.hobby) //[]
console.log(xiu.gethobby) //[]
console.log(xiu.sethobby='sing') //sing
console.log(xiu.hobby) // ['sing']
console.log(xiu.gethobby)// ['sing']
static 可以设置一个这个类自己的静态方法,只有类可以调用,实例不可以调用
class person {
constructor(name){
this.name=name;
}
say(word){
console.log(word)
}
static superSay(word){
console.log(word)
}
}
var xiu=new person('xiu');
xiu.say('hello')
//person.say('hello')//error
//xiu.superSay('hello')//error
person.superSay('hello')
复制代码
es6的class里,可以用extentds来进行继承
class Student extends Person{ },
复制代码
但是如果父类通过constructor接受了参数,并且之类需要接受更多的参数,那么需要在子类的constructor里用super来给父类contructor传递参数,剩下的再自己使用
class Person {
constructor(name,age){
this.name=name;
this.age=age;
}
say(){
console.log(`${this.name},${this.age}`)
}
}
new Person('xiu',18).say()//xiu,18
class Student extends Person{
constructor(name,age,sex){
super(name,age)
this.sex=sex
}
}
console.log(new Student('liu',13,'male'))
复制代码
X、集合类型
1.es6新增了Set这个集合类型,类似与数组,但是还是有不少区别,比如,Set里不能有重复元素,重复元素不报错但是也不会添加进去
通过new Set()来创建。初始参数是字符串 其他的要报错,会把字符串拆开了作为元素
var _set=new Set('123')
console.log(_set)//Set {"1", "2", "3"}
复制代码
Set里不能有重复元素,重复元素不报错但是也不会添加进去
var _set2=new Set('1223')
console.log(_set2)//Set {"1", "2", "3"}
复制代码
通过add方法来添加新元素 并且新添加是什么类型就是什么类型
var _set3=new Set('123')
_set3.add(4)
console.log(_set3)//Set {"1", "2", "3",4}
复制代码
通过size来获取元素个数
var _set4=new Set('123')
console.log(_set4.size)//3
复制代码
通过delete来删除元素
var _set5=new Set('123')
_set5.delete('3')
console.log(_set5)//Set {"1", "2"}
复制代码
通过has来判断有没有这个元素
var _set6=new Set('123')
console.log(_set6.has('3'))//true
复制代码
可以通过forEach来遍历
var _set7=new Set('123')
_set7.forEach((x,i)=>{
console.log(`${x},${i}`)
})
// 1,1
// 2,2
// 3,3
复制代码
通过clear来清除元素
var _set8=new Set('123')
_set8.clear();
console.log(_set8)//Set {}
复制代码
2.map,es6新增了map这样的类型,和{}的区别就是可以用任何数据类型作为键值
let map=new Map(); //获取一个map
let [obj,fn,str]=[{},function () {},'hello'];
map.set(obj,'obj') //设置map的键值对
map.set(fn,'fn')
map.set(str,'str')
console.log(map)
console.log(map.size)//获取map的键值对个数
console.log(map.get(obj)) //获取map的键对应的值
console.log(map.delete(fn)); //删除某一个键值对
console.log(map.has(fn)) //检测是否包含某个键名
console.log(map.has(obj))
map.forEach((value,key)=>{ //可以用forEach来遍历map
console.log(value)
console.log(key)
})
map.clear(); //清空map的键值对
console.log(map)
复制代码