ES6初识

环境搭建

//初始化项目
npm init -y
//全局安装babel-cli
npm install -g babel-cli
//安装转换包
npm install --save-dev babel-preset-env babel-cli

新建.babelrc文件

{
    "presets":[
        "env"
    ],
    "plugins":[]
}

使用babel转化ES5

babel src/index.js -o dist/index.js

let const

let 局部作用域
const 常量

解构赋值

数组解构赋值

数组解构是按照顺序进行解构

let [a,b,c] = [0,1,2];    
console.log(a,b,c);   //0,1,2

let [d,[e,f],g] = [1,[2,3],4];
console.log(d,e,f,g);  //1,2,3,4

let [h,i='greentea'] = ['klaus'];
console.log(h,i);    //klaus,greentea

对象解构赋值

对象解构是按照key进行解构

let {foo,bar} = {foo:'greentea',bar:'klaus'};
console.log(foo,bar); //greentea,klaus

先声明再解构要有括号

let a;
({a} = {a : 'greentea'}); 
console.log(a);  //greentea

字符串解构赋值

const [a,b,c,d,e] = 'green';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);

JSON对象的解构赋值

let json = {
    a:'greentea',
    b:'qwer'
}
function fun({a,b='wang'}){
    console.log(a,b);
}
fun(json);

扩展运算符和rest运算符

对象扩展运算符

对于不确定参数传递数量的时候,可以使用对象扩展运算符

function a(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
}
a(1,2,3);

传入arr1里面的数组成员,而不是引用

let arr1 = ['www','green','com'];
let arr2 = [...arr1];
arr2.push('wang');
console.log(arr1);
console.log(arr2);

rest

rest是剩余的意思,也就是说,前面如果有确定的参数,那么rest会补上后面的参数

function b(first,...arg){
    console.log(arg.length);    //8
}
b(0,1,2,3,4,5,6,7,8);   //传递参数数量9,arg.length是8

function b(first,...arg){
    //循环
    for(let val of arg){
        console.log(val);
    }
}
b(0,1,2,3,4,5,6,7,8);  

字符串模板

可以识别标签及运算

let me = 'greentea';
let str = `my name is 
 ${me}`; //支持识别标签
let a = 1;
let b = 5;
let result = `
${a+b}`; //可以进行运算
document.write(str,result);

字符串查找

let name = '王';
let str = 'my name is 王';
document.write(str.indexOf(name)>-1);   //传统判断方式  true
document.write(str.includes(name));   //ES6写法  true

查看开头和结尾

document.write(str.startsWith(name));   //查看开头  false
document.write(str.endsWith(name));   //查看结尾  true

字符串的复制

document.write(str.repeat(5));   //字符串的复制

数字操作

二进制和八进制

//二进制声明 Binary
let binary = 0b010101;
console.log(binary);
//八进制声明 Octal
let octal = 0o666;
console.log(octal);

判断是否是数字

let a = 11/3;
console.log(Number.isFinite(a));    //true
console.log(Number.isFinite('sss'));    //false
console.log(Number.isFinite(NaN));    //false
console.log(Number.isFinite(undefined));    //false

判断是否是NaN

console.log(Number.isNaN(NaN)); //true

判断是否是整型

let num = 111.1;
console.log(Number.isInteger(num));

转换为整型和浮点型

let num = 111.1;
console.log(Number.parseInt(num));
console.log(Number.parseFloat(num));

整数取值范围操作

let num = Math.pow(2,53)-1;
console.log(num);
console.log(Number.MAX_SAFE_INTEGER);  //最大整数
console.log(Number.MIN_SAFE_INTEGER);  //最小整数 
console.log(Number.isSafeInteger(num));  //true   安全整数

数组

JSON转换为数组

let jsonStr = {
  '0'  : 'greentea',
  '1'  : '24',
  '2'  : 'man',
  length:3
}
console.log(Array.from(jsonStr));   //["greentea", "24", "man"]

变量转换为数组

console.log(Array.of(1,2,3,4));   //[1,2,3,4]

数组的查找方法

let arr = [1,2,3,4,5,6,7];
console.log(arr.find(function(value,index,arr){
  return value === 1;    //1  没有则返回undefined
}))

数组的替换

let arr = [1,2,3,4,5,6];
//参数:需要替换的值,被替换的起始索引位置,替换到第几个结束
console.log(arr.fill('abc',1,4));   //[1,"abc","abc","abc",5,6]

数组的循环

let arr = [1,2,3,4,5,6];
for(let item of arr){
  console.log(item);  //1,2,3,4,5,6
}
for(let item of arr.keys()){
  console.log(item);  //0,1,2,3,4,5
}
for(let [index,val] of arr.entries()){
  console.log(index,val);  //
}

实例entries()方法

let arr = ['greentea','wang','klaus'];
let list = arr.entries();
console.log(list);  //Array Iterator
console.log(list.next().value);   [0, "greentea"]
console.log(list.next().value);   [1, "wang"]
console.log(list.next().value);   [2, "klaus"]

in的用法

对象判断

let obj={
    a:'greentea',
    b:'123'
}
console.log('a' in obj);  //true

数组判断

let arr=[,,,,,];
console.log(0 in arr); //false
let arr1=['123','abc'];
console.log(0 in arr1);  // true  这里的0指的是数组下标位置是否为空

箭头函数

let add = (a,b=1) => a+b;
console.log(add(1));

如果是两句话,则需要加上{}

var add =(a,b=1) => {
    console.log('greentea');
    return a+b;
};
console.log(add(1));

对象

对象赋值

let name = 'greentea';
let age = 24;
let obj = {name,age};
console.log(obj);    //{name: "greentea", age: 24}

key值的构建

let key = 'skill';
var obj = {
  [key] : 'web'
}
console.log(obj);    //{skill: "web"}

Object.is()对象比较

let obj1 = {name : 'greentea'};
let obj2 = {name : 'greentea'};
console.log(obj1.name === obj2.name);    //true
console.log(Object.is(obj11.name,obj22.name));    //true

is()严格相等

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

Object.assign()合并对象

var a={a:'aaa'};
var b={b:'bbb'};
var c={c:'ccc'};
 
let d=Object.assign(a,b,c)
console.log(d);    //{a: "aaa", b: "bbb", c: "ccc"}

Symbol

声明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(d));

Symbol在对象中的应用

var name = Symbol();
var obj={
    [name]:'greentea'
}
console.log(obj[name]);
obj[name]='web';
console.log(obj[name]);

Symbol对象元素的保护作用

let obj = {name:'greentea',skill:'web'};
let age = Symbol();
obj[age] = 18;
for (let item in obj){
    console.log(obj[item]);  //
} 
console.log(obj);

Set和WeakSet

Set

Set是一种数据结构,不是数据类型.Set的数据结构是以数组的形式构建的.Set和Array 的区别是Set不允许内部有重复的值,如果有只显示一个,相当于去重,虽然Set很像数组,但是他不是数组.

let setArr = new Set(['greentea',24,'klaus']);
//追加使用add而不是push
setArr.add('hello')    
//has查找
console.log(setArr.has('greentea'));
//delete
console.log(setArr.delete('greentea'));
//clear全部删除
console.log(setArr.clear());
console.log(setArr);

//for... of
for(let item of setArr){
    console.log(item)
}

//forEach
setArr.forEach((value)=>console.log(value));
//size
console.log(setArr.size);

WeakSet

用来存放对象,同样不可以重复(不可以是相同的引用)

let weakObj=new WeakSet();
let obj={a:'greentea',b:'klaus'}
weakObj.add(obj);
console.log(weakObj);

Map

key和value都可以是字符串或者对象

let json = {
    name : 'greentea',
    skill : 'web'
}
var map = new Map();
map.set(json,'iam');
console.log(map)

//取值get
console.log(map.get(json));
//删除delete
map.delete(json)
//size
map.size
//has是否存在
map.has('web')
//clear清除所有
map.clear()

Proxy

预处理

let pro = new Proxy({
    add : (val) => val+100
    ,
    name : 'i am greentea'
},{
    get : (target,key,property) => {
        console.log('get');
        return target[key];     
    },
    set : (target,key,value,receiver) => {
        console.log(`setting ${key} = ${value}`);
        return target[key]=value;
    }   
});
console.log(pro.name);
pro.name='jjjjj';
console.log(pro.name);

Promise

解决ES5中的回调地狱问题

centos.html:1 Slow network is detected. Fallback font will be used while loading: chrome-extension://ikhdkkncnoglghljlkmcimlnlhkeamad/bundle/selection-translator.woff


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类

方法之间不要写逗号,

class Coder{
    name(val){
        console.log(val);
    }
}
 
let a = new Coder;
jspang.name('a');

传参

class Coder{
    name(val){
        console.log(val);
        return val;
    }
    skill(val){
        console.log(this.name('greentea')+':'+'Skill:'+val);
    }
 
    constructor(a,b){
        this.a = a;
        this.b = b;
    }
 
    add(){
        return this.a+this.b;
    }
}
 
let greentea = new Coder(1,2);
console.log(greentea.add());

继承

class htmler extends Coder{
 
}
 
let klaus = new htmler;
pang.name('greentea');

模块化操作

export var a = 'greentea';

import {a} from './temp.js';
console.log(a);

多变量输出

var a ='aaa';
var b ='bbb';
var c = 'web'; 
export {a,b,c}

函数的模块化输出

export function add(a,b){
    return a+b;
}

as的用法

var a ='jspang';
var b ='技术胖';
var c = 'web';
 
export {
    x as a,
    y as b,
    z as c
}

export default

1.export

//输出
export var a ='jspang';
 
export function add(a,b){
    return a+b;
}
//引入
import {a,add} form './temp';//也可以分开写

2.export default

//输出
export default var a='jspang';
//引入
import str from './temp';