Web前端-ES6-箭頭函數,symbol.(...),set,迭代器,map集合,Generator函數,async await異步函數

箭頭函數

什麼是箭頭函數:
格式: ()=>{
}

相當於原來的
function(){

}

意義:
簡化了原來關於函數的寫法格式函數更簡潔
在一定意義上優化了 this丟失問題

在箭頭函數中沒有默認的this指向只是靠外部函數的this來使用

* 箭頭函數注意點:
* 1. typeof 箭頭函數返回的也是 "function"
*
* 2.箭頭函數不能作爲構造函數使用(不能用new 去調用箭頭函數)
*
* 3.箭頭函數中沒有arguments對象

第一種格式(無參數無返回值):

 var show=function (){
    }
//    箭頭函數(全局直接寫箭頭函數 沒啥太大意義)
    var show=()=>{
    }

第二種格式: 有一個參數的箭頭函數

 var show=function (a) {
        console.log(a);    
    }
//    箭頭函數
   var show=a=>{
        console.log(a);
    }

    show("哈哈");

第三種格式: 有兩個或兩個以上的參數

 /*var show=function(a,b){
        console.log(a,b);
    }*/
//箭頭函數
    var show=(a,b)=>{
        console.log(a,b);
    }
    show("呵呵",198);

第四種格式: 有返回值的(就返回一個變量沒有其代碼)

/*var show=function (a) {
        return a;
        
    }*/
//    箭頭函數(如果函數只有一個返回值 並且返回值是一個變量 那麼直接寫後面就行)
    var show=a=>a
console.log(show("Hello World!"));

第五種格式: 有返回值還有其他代碼

/* var show=function (a) {
        console.log("haha:"+a);
        return a+10;

    }*/
//    箭頭函數
    var show=a=>{
        console.log("haha:"+a);
        return a+10;
    }
    console.log(show("呵呵"));

第六種格式 :返回值是一句表達式的

 /*var show=function (a) {
        return a>0?"數是正數":"我也不知道是啥";
        
    }*/
//箭頭函數
    var show=a=>a>0?"數是正數":"我也不知道是啥";

    console.log(show(-5));

第七種格式 : 返回一個大括號對象

/* var scroll=function () {
       return {
           left:window.pageXOffset,
           top:window.pageYOffset
       }
    }*/

//    箭頭函數  (如果返回值是一個大括號對象 那麼要用小括號包起來) 或者下一行的那種寫法也行
    var scroll=()=>({left:window.pageXOffset, top:window.pageYOffset});
    var scroll=()=>{
        return {
            left:window.pageXOffset,
            top:window.pageYOffset
        }

    };

箭頭函數作爲回調函數使用

setTimeout(()=>{
        console.log(5);

    },1000)

Symbol類型

symbol類型不用糾結值等於什麼
而是要注意它代表了一種獨一無二的值
也就是 Symbol()!==Symbol()

let s=Symbol();

    console.log(typeof s);//symbol (新的類型)
//    console.log(s);
    let s1=Symbol();
    
    console.log(s===s1);//false
    console.log(s==s1);//false

Symbol() 不是構造函數也不是對象也不是基本類型
所以不能使用new

symbol的description屬性就是返回Symbol函數的描述字符串

let s1=Symbol("奧利給");
console.log(s1.description);//奧利給

綁定屬性名

   var a=Symbol("aaa");
    const AA={
    };
    AA[a]="hahaha";
    console.log(typeof a);
    console.log(AA[a]);

消除魔術字符串

const config={
  /*  //登錄的手機號
    loginMobile:"xx",  //發現這個值是什麼無所謂 所以這個就叫魔術字符串
    //登錄的頭像
    loginHead:"qq",
    //登錄的購物車
    loginGWCNumber:"kk"*/

            //這種魔術字符串很容易出現重複 所以我們可以用Symbol代替

    //登錄的手機號
    loginMobile:Symbol("xx"),
    //登錄的頭像
    loginHead:Symbol("qq"),
    //登錄的購物車
    loginGWCNumber:Symbol("kk")

}

cookie.set(config.loginMobile,"13812345678")
cookie.set(config.loginHead,"頭像.jpg")

(...) 擴展符

(...) 擴展符專門用來展開數組的

(...) 的例子1: 需求:把arr的三個元素傳入show方法的三個參數

 var arr=["張飛","關羽","劉備"];
        function show(a,b,c) {
            return a+"---"+b+"----"+c;
        }
//es6的做法:  利用(...)擴展符 展開數組
   console.log(show(...arr));

(...)擴展符例子2: 需求:想要合併兩個數組

var arr=["張飛","關羽","劉備"];
    var arr1=["草莓","車釐子","帶字的蘋果9.9"];

    //需求:想要合併兩個數組

    //es5的做法:
//    console.log(arr.concat(arr1));

    //es6的做法
    var newArr=[...arr,...arr1];
    console.log(newArr);*/

將字符串變換成真正的數組

 var arr=[..."hello"];
    console.log(arr);

展開字符串

 function show(a,b,c) {
        console.log(a);
        console.log(b);
        console.log(c);
   }
//    還可以展開字符串
    show(..."xyz");

與解構賦值結合

用於數組只能放在在最後一位

//1  
 var  lest="abcdefg";
     [a,...rest]=lest;
  console.log(a); //a
  console.log(...rest);//b c d e f g

//2
const [a,...b]=[1,2,3,4,5];
  console.log(a);//1
  console.log(b);// 2 3 4 5

實現了 Iterator 接口的對象

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

Iterator（迭代器）

Set.prototype.keys()：返回鍵名的遍歷器
Set.prototype.values()：返回鍵值的遍歷器
Set.prototype.entries()：返回鍵值對的遍歷器
Set.prototype.forEach()：使用回調函數遍歷每個成員

arr[Symbol.iterator]取出的是一個迭代器方法後面() 調用這個方法

返回一個迭代器的指針對象

 let arr = ['a', 'b', 'c'];
 let iter = arr[Symbol.iterator]();
console.log(iter.next());//0號元素的對象表示  對象的value屬性 是當前的數組元素本身
                            //done屬性表示 當前是否遍歷到末尾  沒到返回false
    //{value: "a", done: false}

    console.log(iter.next());//{value: "b", done: false}
    console.log(iter.next());//{value: "c", done: false}
    console.log(iter.next());//{value: undefined, done: true}*/
    
    //用while循環改進
    /*var it=iter.next();
    while(!it.done){
        console.log(it.value);
        it=iter.next();}

用迭代器遍歷set集合

var set=new Set(["張飛","關羽","劉玄德","張翼德"]);
    var iter=set[Symbol.iterator]();
//    console.log(iter);
    var it=iter.next();
    while(!it.done){
        console.log(it.value);
        it=iter.next();

    }

set集合

所謂集合就是高級數組

set:

每放入一個元素 set集合都會自動查重
不允許元素出現重複
一旦有重複的只會有一個
set集合沒有索引值功能!!!!!!!
所以set集合也叫散列存放沒有順序

創建對象（返回長度用size）

var s=new Set(); //創建一個空集合
console.log(s.size); //0

根據數組的元素創建一個具有跟數組一樣初始元素的集合

 var s1=new Set([9,1,2,3,7]);

set集合的元素不允許重複

var s2=new Set([9,1,2,4,4,6]);
//    console.log(s2);//Set(5) {9, 1, 2, 4, 6} 只有一個4

對象.add(“可以是任意類型（但是不推薦）”)

 s2.add("xx"); //也可以放任意類型(但是不推薦)
//    s2.add(55,77,66,33); //一次只能放一個
//    console.log(s2);

可以用forEach方法和遍歷

var s=new Set();
    [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
//遍歷
set.forEach((item,index,set)=>{
            //item和index形參 最後都是元素 而沒有角標
        console.log(item,index,set);

可以用for..of..方法遍歷

  let s=new Set([46,1,1,85,41,2,6,9,4]);
    for(let v of s){
        console.log(v)
    }

map集合

es6爲了解決對象屬性名只能是字符串的問題推出了Map集合

Map集合的鍵可以是任意類型(包括所有的引用數據類型)

Map集合的特點:
每一個元素都是鍵值對
鍵如果重複則值覆蓋
沒有索引值功能

var map=new Map();

增加元素 set方法

    map.set(document.getElementById("myDiv"),"這個鍵居然是一個div元素對象");
    map.set("我是字符串鍵","我是字符串值");
    map.set(99,"我的鍵居然是一個數字");
 console.log(map);
//    取出指定元素  根據鍵取值
console.log(map.get(document.getElementById("myDiv")));
    console.log(map.get(99));
    console.log(map.get("哈哈"));//undefined   不存在的鍵值爲undefined

判斷是否存在指定鍵

console.log(map.has(document.getElementById("myDiv")));//true
    console.log(map.has("哈哈"));//false

根據鍵移除元素

console.log(map);
    console.log(map.delete(document.getElementById("myDiv")));
    
    console.log(map);

數組想要轉換成map集合前提必須保證數組是二維數組裏面每一個小數組分別有兩個元素
//每個對象有一個鍵值對

var map=new Map([
        ["name","小白白"],
        ["age",16],
        ["location","文化大廈"]
    ])
console.log(map);

map集合大小.size

console.log(map.size);

清空集合.clear()

map.clear()

Map.prototype.keys()：返回鍵名的遍歷器。取出來再用for...of遍歷
Map.prototype.values()：返回鍵值的遍歷器。取出來再用for...of遍歷
Map.prototype.entries()：返回所有成員的遍歷器。取出來再用for...of遍歷
Map.prototype.forEach()：遍歷 Map 的所有成員。

 //map集合遍歷

    //forEach遍歷map集合是 回調的第一個參數是值  第二個參數是鍵
    /*map.forEach((value,key)=>{
        console.log(value,key);
    })*/


    //Map.prototype.keys()：返回鍵名的遍歷器。
  /* var keyit= map.keys(); //把map集合所有的鍵放到一個迭代器裏面
//   console.log(keyit);
//    for...of遍歷迭代器(迭代器本身有next方法可以遍歷,或者用for...of遍歷迭代器也行)
    for(let v of keyit){
        console.log("鍵:"+v+" 值:"+map.get(v));

    }*/

    /*var  valueit=map.values();
    for(let v of valueit){
        console.log("值:"+v);

    }*/

//    取出每一個鍵值對 放入entry數組 多個entry數組放入迭代器
        //每一個entry數組 有兩個元素 0號元素是鍵 1號元素是值
//    Map.prototype.entries()：返回所有成員的遍歷器。
    var entryit=map.entries();
    for(let v of  entryit){
        console.log("鍵:"+v[0]+" 值:"+v[1]);
        
    }

Generator函數

想要用promise代碼去寫很繁瑣
所以我們可以使用es6推出的專門用來執行異步函數的代碼
Generator函數

Generator異步函數

function* 函數名(){
yield 第一個異步代碼;
yield 第二個異步代碼;
.
return 結果

}

//   定義一個generator異步函數
   /*function*  gen() {
       yield "遊戲開始";
       yield "準備戰鬥";
       yield "在團戰五里地以外開大";
       yield "被反殺";

       return "0-10-0";

   }
 var g=gen(); //接收到的是一個迭代器對象

//每次next 都會往下執行一個yield步驟  直到執行到return 語句 done屬性變成true

   console.log(g.next());//{value: "遊戲開始", done: false}
   console.log(g.next());//{value: "準備戰鬥", done: false}
   console.log(g.next());//{value: "在團戰五里地以外開大", done: false}
   console.log(g.next());//{value: "被反殺", done: false}
   console.log(g.next());//{value: "0-10-0", done: true}

沒有yield 變成了暫緩執行函數 yield表達式只能用在 Generator 函數裏面，用在其他地方都會報

    function * show() {
        console.log("請不要秀");

    }
    var gen=show(); //沒有yield  變成了暫緩執行函數
    gen.next(); //真正執行函數

async await異步函數

async異步函數:
再調用async函數時就會自動開始執行裏面代碼
返回一個promise
通過then方法接收結果

async function show(){
        await "遊戲開始";
        await "準備戰鬥吧";
        await "往死裏磕";
        return "死翹翹";


    }
    var pro=show();
    
//    console.log(pro);
    
    pro.then(function (data) {
        console.log(data);
    })

和promise區別

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

    }

    async function show() {
       let s1= await  add(50,60);
       let s2=await  add(s1,80); //把第一次運行的結果給第二次
        return s2;

    }
    show().then(function (data) {
        console.log(data);
        
    })

Web前端-ES6-箭頭函數,symbol.(...),set,迭代器,map集合,Generator函數,async await異步函數

箭頭函數

Symbol類型

(...) 擴展符

Iterator（迭代器）

set集合

set:

map集合

Generator函數

async await異步函數

《日本蠟燭圖》讀書筆記 & 技術分析回測

《期貨-市場技術分析》讀書筆記

Python多線程編程深度探索：從入門到實戰

mongodb處理json數據很好

35K*14 薪，入職了！這公司只要不裁員，我能一直呆下去！

Web前端-Vue--vue-cli腳手架

Web前端-Vue--路由，本地mock數據搭建，keep-alive，active-class，重定向redirect

Web前端-Vue--vue鉤子函數,自帶的方法,computed計算屬性,過濾器,watch監聽器，動畫

Web前端-Vue-v-html,v-cloak,v-model,template,v-on,event,事件修飾符

Web前端-Vue--v-bind，vue-resource，vue-axios

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結