环境
babel-preset-es2015 babel-cli
babel .. -o .. 转换
声明方式
var、let、const（常量）
let局部声明
var a=2;
{ let a=3; }
console.log(a) //输出2
赋值
let [a,b] = [1,2];
let [a,[a,c],d] = [1,[2,3],4];
let [foo = true]=[];
condole.log(foo); //输出true
let foo;
({foo} = {foo: 'liu'});
字符串解构
const [a,b]="JS";
console.log(a);
console.log(b);
扩展运算符... rest
字符串模板
let liu = 123;
`jksahdf科技三点${liu}sadf` ${a+b}
let blog = 'dskjfhksjdfksliu'
es5字符查找blog.indexOf('liu'); 输出索引
es6--blog.includes('liu');//true || flase
判断开头是否存在：
blog.startsWith(jspang);
判断结尾是否存在：
blog.endsWith(jspang);
复制字符串：document.write('jspang|'.repeat(3));
ES6数字操作
二进制声明：
let binary = 0B010101;
console.log(binary);//21
八进制声明
let b=0o666;
console.log(b);//438
数字验证Number.isFinite( xx )
可以使用Number.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是×××都会返回true，其他时候会返回false。
let a= 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('jspang'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false
NaN是特殊的非数字，可以使用Number.isNaN()来进行验证
判断是否为整数Number.isInteger(xx)
Es6数组新增知识
Json数组格式转换
Let json = {
‘0’:’liu’,
‘1’:’he’,
‘3’:’dong’
Length:3
}
Let arr = Array.from(json);
Console.log(arr))// ["jspang", "技术胖", "大胖逼逼叨"];
Array.of() : 把文本或者变量转换成数组
Find()实例方法： 实例针对已经存在的数组
Let arr = [1,2,3,4];
Arr.find(function(value,index,arr){ return value > 5}
Value：表示当前查找值； index：当前查找数据的索引； arr：当前数组
Fill()实例方法：
接收三个参数：1、填充的变量；2、开始填充的位置；3、填充到的位置；
Let arr=[1,2,3,4,5,6]
arr.fill(‘liu’,2,5);
Console.log(arr);//[1, 2, "liu", "liu", "liu",6]
For...of循环:
let arr = [ 1,2,34,5];
for (let item of arr){
Console.log(item)
}
数组索引：
for ( let index of arr.keys() ){
Console.log(index)
}
内容与索引
for (let [index,val] of arr.entries() ){
Console.log(index索引 val：值)
}
Enties实例
entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值；
let arr=['js','刘合东','逼逼叨']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);
console.log(list.next().value);
函数中的严谨模式
我们在ES中就经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在ES6中我们可以写在函数体中，相当于针对函数来使用。
function add(a,b=1){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}
console.log(add(1));
上边的代码如果运行的话，你会发现浏览器控制台报错。这个错误的原因就是如果你使用了默认值，再使用严谨模式的话，就会有冲突，所以我们要取消默认值的操作，这时候你在运行就正常了。
function add(a,b){
function add(a,b){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}
console.log(add(1,2));
获得需要传递的参数个数
如果你在使用别人的框架时，不知道别人的函数需要传递几个参数怎么办？ES6为我们提供了得到参数的方法(xxx.length).我们用上边的代码看一下需要传递的参数个数。
3 4 5 6 7 8 9 | function add(a,b){ 'use strict' if(a == 0){ throw new Error('This is error'); } return a+b; } console.log(add.length); |
这时控制台打印出了2，但是如果我们去掉严谨模式，并给第二个参数加上默认值的话，这时候add.length的值就变成了1， 也就是说它得到的是必须传入的参数。
对象的函数解构:JSON格式数据当作参数
let json = {
a:'jsp',
b:'技术'
}
function fun({ a,b='jspang'}){
console.log(a,b);
}
fun(json);
数组的函数解构
let arr = ['js','技术','免费教程'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr);
in的用法
in是用来判断对象或者数组中是否存在某个值的
let obj={
a:'js',
b:'技术'
}
console.log('a' in obj); //true
forEach循环的特点是会自动省略为空的数组元素
数组转字符串arr.join('|')、arr.toString()
ES6对象
ES6允许把声明的变量直接赋值给对象
let name="js";
let skill= 'web';
var obj= { name,skill};
console.log(obj); //Object {name: "jspang", skill: "web"}
对象key值构建
let key='skill';
var obj={
[key]:'web'
}
console.log(obj.skill);
自定义对象方法
var obj={
add:function(a,b){
return a+b;
}
}
console.log(obj.add(1,2));
Object.is()对象比较
2 3 4 | var obj1 = { name:'js'}; var obj2 = { name:'js'}; console.log(obj1.name === obj2.name);//true console.log(Object.is(obj1.name,obj2.name)); //true |
console.log(+0 === -0);//true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true
===为同值相等，is()为严格相
Object.assign()合并对象
var a={ a:'j'};
var b={ b:'技术'};
var c={ c:'web'};
let d=Object.assign(a,b,c)
console.log(d);
Symbol，它的意思是全局标记
var a = new String;
var b = new Number;
var c = new Boolean;
var d = new Array;
var e = new Object;
var f= Symbol();//声明方式
console.log(typeof(f)); //symbol
var jspang = Symbol();
var obj={
[jspang]:'技术'
}
console.log(obj[jspang]);//技术
obj[jspang]='web';
console.log(obj[jspang]);//web
Symbol对像元素的保护
不想别人知道我的年龄，这时候我就可以使用Symbol来进行循环保护
let obj={ name:'jspang',skill:'web'};
let age=Symbol();
obj[age]=18;
for (let item in obj){
console.log(obj[item]);
}
console.log(obj);
Set(数组)与weakset(对象)数据结构
let setArr = new Set(['js','技术','web','js']);
console.log(setArr);//Set {"js", "技术", "web"}
Set和Array 的区别是Set不允许内部有重复的值，如果有只显示一个，相当于去重。虽然Set很像数组，但是他不是数组。
let setArr = new Set(['js','技术','web','js']);
console.log(setArr);//Set {"js", "技术", "web"}
setArr.add('前端职场');//追加
console.log(setArr); //Set {"js", "技术", "web", "前端职场"}
setArr.delete('前端职场');//删除
console.log(setArr); //Set {"js", "技术", "web"}
setArr.clear();//清除
console.log(setArr);//Set(0) {}
console.log(setArr.size);//size属性可以获得Set值的数量
Weakset
let weakObj=new WeakSet();
let obj={ a:'js',b:'技术'}
weakObj.add(obj);
console.log(weakObj);这里需要注意的是，如果你直接在new 的时候就放入值，将报错,WeakSet里边的值也是不允许重复的,传入值必须是对象作
map数据结构
反应的速度要低于数组和map结构。而且Map的灵活性要更好，你可以把它看成一种特殊的键值对，但你的key可以设置成数组，值也可以设置成字符串，也可key字符串，value是对象
let json = {
name:'js',
skill:'web'
}
var map=new Map();
map.set(json,'iam');
map.set('js',json);
map.get(json)取json对应的值
map.delete(json)删除delete的特定值
map.size
map.has('js')查找是否存在has
map.clear()清除所有元素
Proxy进行预处理
New Proxy({} ,{});
需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方;
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am Jspang'
}, {
get:function(target,key,property){
console.log('come in Get');
return target[key];
}
});
console.log(pro.name);
get属性是在你得到某对象属性值时预处理的方法，他接受三个参数
· target：得到的目标值
· key：目标的key值，相当于对象的属性
· property：这个不太常用，用法还在研究中，还请大神指教。
set属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数。
· target:目标值。
· key：目标的Key值。
· value：要改变的值。
· receiver：改变前的原始值。
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am Js'
}, {
get:function(target,key){
console.log('come in Get');
return target[key];
},
set:function(target,key,value,receiver){
console.log(` setting ${ key} = ${ value}`);
return target[key] = value;
}
});
console.log(pro.name);
pro.name='技术';
console.log(pro.name);
apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时
let target = function () {
return 'I am JS';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments);
}
}
var pro = new Proxy(target, handler);
console.log(pro());
promise对象的使用
let state=1;
function step1(resolve,reject){
console.log('1.开始-洗菜做饭');
if(state==1){
resolve('洗菜做饭--完成');
}else{
reject('洗菜做饭--出错');
}
}
function step2(resolve,reject){
console.log('2.开始-坐下来吃饭');
if(state==1){
resolve('坐下来吃饭--完成');
}else{
reject('坐下来吃饭--出错');
}
}
function step3(resolve,reject){
console.log('3.开始-收拾桌子洗完');
if(state==1){
resolve('收拾桌子洗完--完成');
}else{
reject('收拾桌子洗完--出错');
}
}
new Promise(step1).then(function(val){
console.log(val);
return new Promise(step2);
}).then(function(val){
console.log(val);
return new Promise(step3);
}).then(function(val){
console.log(val);
return val;
});
class类的使用
已经声明了一个类，并在类里声明了name方法，现在要实例化类，并使用类中的方法
class Coder{
name(val){
console.log(val);
}
}
let jspang= new Coder;
jspang.name('jsp');
类的多方法声明
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('jsp')+':'+'Skill:'+val);
}
}
let jspang= new Coder;
jspang.name('jsp');
jspang.skill('web');
类的传参
在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('jsp')+':'+'Skill:'+val);
}
constructor(a,b){
this.a=a;
this.b=b;
}
add(){
return this.a+this.b;
}
}
let jspang=new Coder(1,2);
console.log(jspang.add());
我们用constructor来约定了传递参数，然后用作了一个add方法，把参数相加
class的继承
class htmler extends Coder{
}
let pang=new htmler;
pang.name('技术');
模块化操作
· export :负责进行模块化，也是模块的输出。
· import : 负责把模块引，也是模块的引入操作。
export的用法：
export可以让我们把变量，函数，对象进行模块话，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。我们新建一个temp.js文件，然后在文件中输出一个模块变量。
1 | export var a = 'js'; |
然后可以在index.js中以import的形式引入。
1 2 3 | import { a} from './temp.js';
console.log(a); |
这就是一个最简单的模块的输出和引入。
多变量的输出
这里声明了3个变量，需要把这3个变量都进行模块化输出，这时候我们给他们包装成对象就可以了。
1 2 3 4 5 | var a ='js'; var b ='技术'; var c = 'web';
export { a,b,c} |
函数的模块化输出
1 2 3 | export function add(a,b){ return a+b; } |
as的用法
有些时候我们并不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。
1 2 3 4 5 6 7 8 9 | var a ='js'; var b ='技术'; var c = 'web'; export { x as a, y as b, z as c } |
export default的使用
加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export default的区别
1.export
1 2 3 4 5 | export var a ='js';
export function add(a,b){ return a+b; } |
对应的导入方式
1 | import { a,add} form './temp';//也可以分开写 |
2.export defalut
1 | export default var a='js'; |
对应的引入方式
1 | import str from './temp'; |