demo結構

dist為編譯後的程式碼  
src放es5程式碼

環境搭建

<!-- 安裝babel -->
npm install --save-dev babel-cli
<!-- //轉換es5 -->
cnpm i --save-dev babel-preset-es2015 babel-cli

<!-- 建立一個.babelrc檔案 -->
{
    "presets": [
        "es2015"
    ],
    "plugins": [

    ]
}
<!-- 然後，改寫package.json。 -->
{
    // ...
    "devDependencies": {
        "babel-cli": "^6.0.0"
    },
    "scripts": {
        "build": "babel src -d dist"
    },
}
<!-- 執行下面的命令。 -->
$ npm run build
 

方法

<!-- for…of 的迴圈可以避免我們開拓記憶體空間，增加程式碼執行效率-->
function cc(f, ...arg) {
    for (let val of arg) {
        console.log(val)
    }
}

cc(1, 2, 3, 4)

<!--    判斷是否包含指定字串 -->
let cc = "王乘衝";
arr.includes(cc);
<!-- 判斷開頭是否存在： -->
arr.startsWith(cc);
<!-- 判斷結尾是否存在： -->
arr.endsWith(cc);
<!--          重複複製字串 -->
document.write(`${cc}`.repeat(3));
document.write(`王乘衝`.repeat(3));

<!-- 數字判斷的格式化|判斷等方法在 ##數字判斷和轉換裡 -->
<!-- 陣列的方法 遍歷 替換 轉換 查詢 替換 -->
 

第3節解構賦值：

陣列的解構賦值：

<!-- 陣列是按順序解構的 -->
es6  let [a, b, c] = [1, 2, 3];    es5  var a = 1, b = 2, c = 3;
     let [a, [b, c], d, e = "cc"] = [1, [2], 3, undefined]; 
     console.log(a)//1
     console.log(e)//cc  

物件的解構賦值：

let foo; //foo已經定義了變數  再賦值時在外邊加括號
({foo}={foo:'bb'}) ;
<!-- 物件是按照key值解構的 -->
let { fo, bar } = { fo: 'cc', bar: 'wd' } 
 

字串的解構賦值：

const [f, g, h, j, k, l] = 'jspang';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);

第4節運算子

物件擴充套件運算子

<!-- 引數不確定個數時候 -->
function cc(...arg) {
    console.log(arg[0])
    console.log(arg[1])
    console.log(arg[2])
    console.log(arg[3])
    console.log(arg[4])
}
cc(1, 2, 3, 4)
eg:     let arr1 = ['www', 'qqq'];
        let arr2 = arr1;
        arr2.push('eeee');  <!-- 這樣arr1和arr2都改變  因為let會使arr2從arr1對映一個值， -->

        let arr1 = ['www', 'qqq'];
        let arr2 = [...arr1];
        arr2.push('eeee');<!-- 這樣就沒問題 -->

rest擴充套件運算子 rest譯為剩餘

<!-- 宣告方法時候 進行變數不確定處理 -->
function cc(f, ...arg) {
    console.log(arg.length);
}
cc(1, 2, 3, 4) //length為3

第5節：字串模板 （拼接字串）

let cc = "乘衝"
let blog = `字串拼接 ${cc},不以物喜不以己悲`
console.log(blog) //字串拼接 乘衝,不以物喜不以己悲

支援html標籤

let blog = `<b>非常高興你能看到這篇文章</b>，我是你的老朋友${cc}。<br/>這節課我們學習字串模版。`;
document.write(blog);

對運算的支援：

let a=1;
let b=2;
let result=`文字${a+b}`;
document.write(result);

字串查詢

console.log(blog.indexOf(cc)); //ES5的方法是 返回的是6
console.log(blog.includes(cc)) //直接返回true

判斷開頭是否存在：

blog.startsWith(cc);

判斷結尾是否存在：

blog.endsWith(cc);
!!starts和ends 後邊都要加s

複製字串

document.write('cc,'.repeat(3));

第6節：ES6數字操作

二進位制和八進位制

<!-- Binary -->
let binary = 0B010101;//21
<!-- Ovtal -->
let octal = 0O666;//438

<!-- 使用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驗證 -->
console.log(Number.isNaN(NaN));
<!-- 判斷是否為整數Number.isInteger(xx) -->
let a=123.1;
console.log(Number.isInteger(a)); //false<!-- 整數轉換Number.parseInt(xxx)和浮點型轉換Number.parseFloat(xxx) -->
let a='9.18';
console.log(Number.parseInt(a)); 
console.log(Number.parseFloat(a));
<!-- 整數取值範圍操作(最大值|最大安全整數) -->
let a = Math.pow(2,53)-1;
console.log(a); //9007199254740991
<!-- 最大安全整數 -->
console.log(Number.MAX_SAFE_INTEGER);
<!-- 最小安全整數 -->
console.log(Number.MIN_SAFE_INTEGER);
<!-- 安全整數判斷isSafeInteger( ) -->
let a= Math.pow(2,53)-1;
console.log(Number.isSafeInteger(a));//false

第7節：陣列

JSON陣列格式轉換

<!-- json陣列格式 -->
let  json = {
    '0': 'jspang',
    '1': '技術胖',
    '2': '大胖逼逼叨',
    length:3
}
let arr = Array.from(json);//json字串轉換為陣列

<!-- 陣列轉換為字串 -->
arr.toString() 
arr.join('|') //改變陣列或者字串的分隔符

Array.of()方法：

<!-- 字串轉陣列 -->
let arr1 = Array.of(3, 4, 5, 6);

find()例項方法：

什麼是例項方法：是已經例項出來物件的方法，不需要呼叫Array物件

<!-- 查詢字串裡面的值，滿足條件就在找到的第一個地方停止 -->
var arr =[1,2,3,4,5,6]
console.log(arr.find(function(value, index, arr) {
    return value > 2;
})) 

第8節：fill( )例項方法：

<!-- 陣列填充 它接收三個引數，第一個引數是填充的變數，第二個是開始填充的位置，第三個是填充到的位置 -->
var arr4 = [0, 1, 2, 3, 4, 5, 6];
arr4.fill('cc', 1, 2);
document.write(arr4) //輸出 [0, "cc", 2, 3, 4, 5, 6]

for…of迴圈

let arr5 = ['jspang', '技術胖', '逼逼叨']
for (let item of arr5) {
    console.log(index, item)//只輸出值
}
for (let item of arr5.keys()) {
    console.log(index, item)//只輸出索引
}
for (let item of arr5.entries()) {
    console.log(item )//一起輸出值和索引
}
for (let [index, value] of arr5.entries()) {
    console.log(index, value)//分來輸出值和索引
}

entries( )例項方法

<!-- entries()例項方式生成的是Iterator形式的陣列，那這種形式的好處就是可以讓我們在需要時用next()手動跳轉到下一個值。進行手動遍歷 -->
let arr=['jspang','技術胖','逼逼叨']
let list=arr.entries();
console.log(list.next().value);
console.log('執行完這個，再繼續遍歷')
console.log(list.next().value);
console.log('執行完這個，再繼續遍歷')
console.log(list.next().value);

in的方法

let arr=[,,,,,];
console.log(arr.length); 
//上邊的程式碼輸出了5，但是陣列中其實全是空值，這就是一個坑 ES6的in就可以解決這個問題   
console.log(0 in arr); //這裡的0指的是陣列下標位置是否為空。

<!-- 陣列的遍歷方法 -->

陣列的遍歷

forEach遍歷

let arr=['jspang','技術胖','cc'];    
arr.forEach((val,index)=>console.log(index,val));

.filter遍歷

arr.filter(x=>console.log(x));

.some遍歷

arr.some(x=>console.log(x));

.map遍歷

arr.map(x => console.log(x));
<!-- 陣列遍歷替換 -->
console.log(arr.map(x=>'web'));

第9節：箭頭函式和擴充套件

#

<!-- 手動丟擲異常  -->
throw new Error('丟擲異常')
<!-- se6中的嚴禁模式  可以不寫在頭部，實現區域性嚴謹-->
'use strict'
<!-- 獲取傳遞引數的個數 -->
function add(a, b) {
    return a + b;
}
console.log('幾個引數:' + add.length)

箭頭函式

<!-- 箭頭函式中不可加new，也就是說箭頭函式不能當建構函式進行使用。 -->
var add11 = (a, b = 1) => a + b //只有一行執行邏輯的程式碼時不用帶括號
console.log(add11(1))
var add11 = (a, b = 1) => {
    console.log('多行程式碼')
    return a+b;                 //多行情況下
}
console.log(add11(1,3))

第10節：物件|陣列的函式結構

let obj={a:'cc',b:'qizhi'} 
let arr=['cc','qizhi'];
function fun({a,b='qizhi'}){
    console.log(a,b);
}
fun(obj) //cc qizhi
fun(arr) //cc qizhi

in的用法

<!-- in是用來判斷物件或者陣列中是否存在某個值的 -->
let obj = {
    a: 'cc',
    b: 'qizhi'
}
console.log('a' in obj);
<!-- 陣列中的用處 -->

let arr=[,,,,,];
console.log(arr.length); 
//上邊的程式碼輸出了5，但是陣列中其實全是空值，這就是一個坑 ES6的in就可以解決這個問題   
console.log(0 in arr); //這裡的0指的是陣列下標位置 看它是否為空。

<!-- 陣列的遍歷方法 在頂部-->

第11節：ES6物件

物件的賦值

變數直接賦值給物件
let name="cc";
let skill= 'web';
var obj= {name,skill}; //鍵和值都是變數
console.log(obj);  //Object {name: "cc", skill: "web"}

物件Key值的變數構建

key允許變數 構建
let key='skill';
var obj={
    [key]:'web'
}
console.log(obj.skill); //obj {skill:"web}

Object.is()物件值的比較

var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(obj1.name === obj2.name);//true
console.log(Object.is(obj1.name,obj2.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
===為同值相等  is()為嚴格相等

Object.assign()合併物件

var a={name:'cc'};
var b={age:18};
var c={stature:'180cm'};    
let d=Object.assign(a,b,c)
console.log(d);

第12節：Symbol在物件中的應用

使用Symbol來進行資料保護
let obj = { name: 'cc', skill: 'web' };
let age = Symbol();
obj[age] = 18;
for (let item in obj) {
    console.log(obj[item]);// cc web
}
console.log(obj);  //{name: "cc", skill: "web", Symbol(): 18}
console.log(obj[age]);  //18

第13節：Set和WeakSet資料結構

set是一個數組結構  最重要的是去重
let setArr = new Set(['cc', 'web', 18, 18])
console.log(setArr) // Set(3) {"cc", "web", 18}

Set值的增刪查

//add
setArr.add('前端職場'); //不能增加重複的 會報錯
//delete
setArr.delete('前端職場');
//has  查
console.log(setArr.has('cc'));//true
//.clear  刪除全部
setArr.clear();

set的迴圈

//for…of…迴圈：
for (let item of setArr){
    console.log(item);
}

size屬性

console.log(setArr.size); //3  18去重了一個

forEach迴圈

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

WeakSet的宣告

set是一個數組結構  weakSet就是一個物件版的set
不能直接在new 的時候就放入值，將報錯 eg let weakObj=new WeakSet({a:'cc',b:'wd'});//報錯
let weakObj=new WeakSet();
let obj={a:'cc',b:'乘衝'}
let obj1=obj;   obj1和obj用的是同一個記憶體空間  所以重複不會被新增進去

weakObj.add(obj);
weakObj.add(obj1);   

console.log(weakObj);

let obj={a:'cc',b:'乘衝'}
let obj1={a:'cc',b:'乘衝'};

weakObj.add(obj);
weakObj.add(obj1);//obj1產生的記憶體空間和obj不一樣  所以會被新增進去

console.log(weakObj);

第14節：map資料結構

json和map的對比

Map的靈活性要更好，你可以把它看成一種特殊的鍵值對，但你的key可以設定成陣列，值也可以設定成字串，讓它不規律對應起來。
給 var map賦值 key為物件  value為字串
let json = {
    name:'jspang',
    skill:'web'
}
console.log(json.name);    
var map=new Map();
map.set(json,'iam'); //拿json物件作為key  iam字串作為值
console.log(map);

當然也可key字串，value是物件。我們調換一下位置，依然是符合map的資料結構規範的。  
map.set('jspang',json);
console.log(map);

map的增刪查取

取值get

獲取json對應的value值 (json物件是key值)
console.log(map.get(json));

刪除delete

map.delete(json);

size屬性

console.log(map.size) //列印map物件的長度  從0開始

查詢是否存在某值 has

查詢的是key值
map.set('jspang',json);
console.log(map.has('jspang'));

清除所有的元素 clear

map.clear()

第15節:用Proxy進行預處理

get set是得到會要改變物件屬性值時預處理的方法

proxy為代理的意思   是es6用它增強物件和函式的方法
//es5定義物件的方法
let obj={
    add:function(){
        return val+100;
    },
    name:"i am cc"
}
//se6proxy的方法
let pro = new Proxy({放物件體},{放預處理機制}) 
let pro = new Proxy({
    add:function(){
        return val+100;
    },
    name:"i am cc"},{
        //get 得到資料之前 預處理的事情
        get:function(target,key,property){//三個引數是固定的
            console.log('come in get')
            return target[key]
        }，
        set:function(target,key,value,receiver){
                    //目標，屬性名，要變成的值，原始值
            console.log(`setting ${key}=${value}之前的值是${receiver}`)
            return target[key]
        }
    }
);

console.log(pro.name)//列印的是get函式執行的結果
console.log(pro.name = 'cc');//這裡列印的是set裡面的返回值

apply apply的作用是呼叫內部的方法，它使用在方法體是一個匿名函式時。

語法：函式名.apply(物件，陣列(或者偽陣列))
功能：1，呼叫該函式  2，將this指向第一個引數  3，將第二個引數的陣列拆解成一個個的元素，依次作為函式的實參
let target = function () {
    return 'I am JSPang';
};
var handler = {
    apply(target, ctx, args) {
        console.log('do apply');
        return Reflect.apply(...arguments); //固定格式 並未完全解釋，要自己查文件深究
    }
}

var pro = new Proxy(要處理的函式, 放預處理機制);
var pro = new Proxy(target, handler);

console.log(pro());

第16節 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;
});

第17節：class類的使用

類裡面是方法和函式
宣告類
class Coder{
    name(val){
        console.log(val)
    }
}
例項化類
let cc = new Coder;
cc.name('cc');

在類裡面 多個方法不需要,號隔開

class Coder {
    name(val) {
        console.log(val)
        return val
    }
    skill(val) {
        console.log(this.name('cc') + ":" + val)
    }
}
// 例項化類
let cc1 = new Coder;
cc1.skill('web');

類的引數傳遞

類引數傳遞 eg: new Coder('val')  
與類裡面方法的引數傳遞區分開eg：cc1.skill('web')
<br> 
在類的引數傳遞中我們用constructor( )進行傳參
class Coder{    
    constructor(a,b){
        this.a=a;
        this.b=b;
    }    
    add(){
        return this.a+this.b;
    }
}

let cc=new Coder(1,2);
console.log(cc.add());  

class的繼承

類的一大特點就是繼承
class htmler extends Coder{}

let pang=new htmler;
pang.name('cc-extends');
宣告一個htmler的新類並繼承Coder類，htmler新類裡邊為空，這時候我們例項化新類，並呼叫裡邊的name方法。結果也是可以呼叫到的。

第18節：模組化操作

export :負責進行模組化，也是模組的輸出。 生成模組

import : 負責把模組引，也是模組的引入操作。 引入模組