es6知识总结

Posted 2020-10-05

学习地址：http://web.jobbole.com/86441/
http://www.cnblogs.com/Wayou/p/es6_new_features.html
视频地址：http://study.163.com/course/courseLearn.htm?courseId=1003938030#/learn/video?lessonId=1048001010&courseId=1003938030
http://study.163.com/course/courseMain.htm?courseId=1003606097

在网页上使用
用法一：<script src=‘traceur.js‘></script>
<script src=‘bootstrap.js‘></script>
<script type=‘module‘></script>
用法二：在线编译（用于测试）
http://babeljs.cn/repl/
用法三：直接在Node里使用
直接用 需要添加‘use strict‘
node --harmony_destructuring xxx.js

1.声明变量(let/const)
var:函数作用域

let:块级作用域 以{}代码块作为作用域范围 只能在代码块里面使用
不存在变量提升： 先声明后使用，否则报错
暂时性死区：总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
不允许重复声明：不允许在相同作用域内，重复声明同一个变量，不能在函数内部重新声明参数
其实就是匿名函数立即调用相当于(function(i){})(i)

const:声明一个只读的常量。一旦声明，常量的值就不能改变,必须立即初始化
如果尝试修改变量或者没有立即给变量赋值
但是对象内部的键值对可以改变

2.template string 模版字符串
反单引号``结合${xxxxx}

3.函数扩展
函数参数的默认值
传统的：b=b||8
es6:function(a,b=8){}

箭头函数（相当于匿名函数，并且简化了函数的定义）
//只有一个返回值
var 函数名=(接收参数)=>返回值; 例如:var show=(a,b=7)=>a+b;
//有多行代码
var 函数名=(接收参数)=>{
xxxxxxx
return 返回值
};
例如:var show=(a,b=7)=>{
console.log(‘我是其它的内容‘);
return a+b
}
arguments不能使用

箭头函数中的this（始终指向箭头函数定义时的this 最近的一个函数 如果没有最近的函数就指向window）

箭头函数的缩写
对象单体模式：var name=‘李可馨‘;
var obj={
name,
showname(){}
}

4.对象扩展
对象的简写
属性：键值相同的话可以只写键名 a:a写成a
方法：把:function去掉;例如:b:function(){} 写成 b(){}

Object.keys(对象)：获取对象的所有键名
添加在对象的构造函数上

Object.assign(合并的对象,被合并的对象):合并对象
原始合并之前的对象也保留着

Object.defineProperty(对象,要添加的属性,{
value:‘属性的值‘,
writable:true/false,默认false(属性值能不能重写，false的话为只读),
configurable:总开关,默认false,就不能再设置他的value writable configurable,
enumerable:是否能在for in 循环遍历出来或者在Object.keys()出列举出来，默认为false（读取不到）,
get:访问器,
set:访问器(用了访问器前面的东西都不生效)
例如：Object.defineProperty(data,‘b‘,{
set(newValue){
console.log(newValue)
},
get(){
return 5
}
})
})：双向数据绑定

5.类 Class（传统的是面向对象的构造函数）
传统构造函数：this.xxx=xxx;
es6构造函数: constructor:属性 方法:直接写外面
例如：constructor(name=默认值,sex){
this.name=name;
this.sex=sex
}
showName(){
alert(this.name)
}
传统继承：call(对象,参数1,参数2)或者apply(对象,[参数1,参数2]/arguments)
子类.prototype=new 父类()

es6继承：extends + super(继承的属性1,属性2)

静态方法：static（不能被实例继承，直接通过类来调用）

6.解构赋值(传统赋值用=)
数组解构：
数组：let [a,b,c]=[1,2,3]
嵌套数组解构：let [a,[b,c],d]=[1,[2,3],4](可用空位填充)
默认值:let [a,[b,c],d=5]=[1,[2,3],4](若有值，可替代默认值)

对象解构：（跟顺序无关）
let obj={
name:‘李可馨‘,
sex:‘女‘
}
//给变量重新起名
let {name:uname,sex:usex}=obj;
//如果键值对相同
let {name:name,sex:sex}=obj;可写为let {name,sex}=obj或者({name,sex}=obj)可以重复定义赋值;
例如： var obj={a:1,b:2}
let a=0;
console.log(a)//0
({a,b}=obj)
console.log(a)//1

//结构对象中的数组
例如： var obj={
arr:[
‘go‘,
{
a:1
}
]
}
let {arr:[greet,{a}]}=obj;
//对象中自带的方法
let {floor,pow}=Math;
console.log(floor(1.9))

字符串解构：
let [a,b,c]=‘李可馨‘
//获取字符串的长度(字符串原生的属性)
let {length}=‘yo.‘ console.log(length)//3

函数参数的解构
传参数 function({a}){console.log(a)}
例如:
//对象（没顺序）
function show({a=默认值,b,c}){
console.log(a)
}
show({
//键名跟参数值能对上就行 不需要按着顺序
b:2,
a:1,
c:3
})
//数组（有顺序）
var arr=[1,2]
function show([a,b]){
console.log(a)
console.log(b)
}
show(arr)

7.babel(es6转化成es5 兼容浏览器)
在线编译：主要用于测试 http://babeljs.cn/repl/
安装：npm install --save-dev babel-cli或者npm install cnpm;cnpm install babel-cli --save-dev
设定转码规则：npm install --save-dev babel-preset-es2015
配置.babelrc文件{
‘presets‘:[‘es2015‘]
}
转化成es5:在package.json中配置 ‘scripts‘:{
‘bulid‘:bable index.js
}
打开终端：npm run bulid就转化成了es5
通过--out-file或者-o生成新的es5文件(‘bulid‘:bable index.js --out-file demo.js)

8.vue-cli脚手架
安装：npm install -g vue-cli
vue list可判断有么有安装成功
vue init webpack 项目名称

9.模块 import export
export不能导出值 会报错 export 1报错 var m=1;export m也会报错
正确的：export var m=1或者var m=1;export {m}
as:取别名 export {m as n} import {n}
export default function(){} import xxx(任意名)

10.字符串的新增方法
判断字符串中是否有某一个字符： str.includes(‘包含的字符‘);
判断字符串中是否以某一个字符开头：str.startWith(‘字符‘);
判断字符串中是否以某一个字符结束：str.endWith(‘字符‘);
把一个字符串重复多少次: str.repeat(‘重复次数‘);

11.新的数据类型（原始的undefined,null,boolean,string,number,object）Symbol
每创建一个值都是不同的 防止对象的属性被重写 防止下游更改上游的属性
let a=Symbol(‘this is symbol‘);//传描述对值无影响
可以临时的重写 不能更改全局的属性

12.proxy:代理 对照4的Object.defineProperty来学习
var user=new Proxy({原对象obj},{
get:function(obj,prop){
/*if(prop==‘fullname‘){
return obj.fname+‘ ‘+obj.lname
}*/
switch (prop){
case ‘fullname‘:
return obj.fname+‘ ‘+obj.lname
}
},
set:function(obj,prop){

}
})
user.fname=‘bob‘;
user.lname=‘wood‘;
console.log(user.fullname)

13.set 数据结构
每一个值都是唯一的 如果传入了相同的值 只取一个（数组去重）
var s=new set([1,2,3,4]);
s.size;//长度
s.add(5);//添加一个值
s.delete(3);//删除一个值
s.has(5);//是否拥有哪个值
s.clear();//清空所有的值

14.数组
复制数组：传统：for循环赋值
es6:var arr1=Array.form(arr)
var arr1=[...arr]//超引用

...：可以传参
function(...args){
console.log(args)//是一个数组 可以直接用push 若不用... arguements是一个类数组不能用数组的方法
}

for of循环 (值)：遍历（迭代）整个对象 表现类似for in (索引)
可以循环数组不能循环json 真正目的是为了循环map对象
循环数组只循环值： for(var value of arr)不支持arr.values()
只循环索引： for(var value of arr.keys())
循环值跟索引： for(var value of arr.entries())

map对象：跟json相似 也是key-value的形式 为了和for of配合生成的
var map=new Map();
//设置
map.set(name,value);
//获取
map.get(name);
//删除
map.delete(name);
遍历map不能使用for in 无效 用for of循环出来格式为name,value键值都有
for(var [key,value] of map){console.log(key,value)}或者
for(var name of map){console.log(key,value)}本质是循环map.entries整体
//只循环key map.keys()
//只循坏value map.values()

15.promise
就是一个对象，用来传递异步操作的数据(消息)
状态：pending(等待/处理中) Resolve/fullFilled(成功、完成) Rejected(失败、拒绝)
var fn=new Promise(function(resolve,reject){
if(异步处理成功了){
resolve(成功数据)
}else{
reject(失败原因)
}
})

方法： then :接收数据 fn.then(function(value){成功(resolve)},function(value){失败(reject)}).then()返回的也是一个promise对象 链式调用;
catch: 捕获错误 fn.catch();跟throw结合使用
all: 将多个Promise对象组合包装成一个全新的promise对象 Promise.all([p,p1,true]).then() 如果所有的promise对象都正确才走成功 只要有一个错误就失败了;
race: 返回的也是一个对象 返回的最先能执行的promise结果 哪个最快就用哪个; Promise.race([p1,p2]).then();
reject: 生成错误的promise对象 Promise.reject();
resolve: 生成成功的promise对象
Promise.resolve(value);
Promise.resolve(promise);

结合ajax使用:
let p=new Promise(function(resolve,reject){
ajax(‘1.txt‘,funcition(str){
resolve(str)
},function(err){
reject(err)
})
})
p.then(function(str){},function(err){})

16.Generrator 生成器
是一个函数(状态机) 状态可以遍历
function* show(){
yield xxx
}
函数前面有*号 函数内部用的是yield语句

返回值有next()方法 返回{value:yield后面的值,done:布尔值（是否遍历完毕）} next也可以带参数 参数就是给上一个yield赋值

yield语句本身没有返回值，或者每次返回undefined

for of也可以循环Generrator函数 只能循环yiled语句 不能循环return语句

Generrator如果放在对象中 var obj={*show(){yield}}