es6基礎知識

来源:https://www.cnblogs.com/1234wu/archive/2019/03/11/10476018.html
-Advertisement-
Play Games

1.超引用:(...) 用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中 2.解構賦值: 賦值: 解構: 3. for of迴圈: es5的for迴圈: for in 迴圈: for of 迴圈:(不能用來遍歷json) 4.Map對象 map對象是因為for of 的出現才出現的,一個map ...


1.超引用:(...)

　　用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中

 

function fun(...args){
            console.log(args);     //[1,2,3,4,5,6]
            args.push(7);
            console.log(args);　　　//[1,2,3,4,5,6,7]
        }
fun(1,2,3,4,5,6)

 

 

2.解構賦值:

　　賦值:

 var a = 10,b = 20,c = 30;
 console.log(a,b,c)        //10 20 30

 

　　解構:

//數組的格式
        var [a,b,c] = [40,20,30];
        console.log(a,b,c)　　　　　　//40 20 30

//json格式
        var {a,b,c} = {a:10,c:30,b:20};    //可以調換順序
        console.log(a,b,c);　　　　　　　　　　//10 20 30

        var [a,[b,c],d] = [5,[10,20],30];  //格式對應即可
        console.log(a,b,c,d)　　　　　　　　　　//5 10 20 30

//混用
        var [{a,b},c,[d,e],f] = [{b : "jack",a : "100"},5,[10,20],30];
        console.log(a,b,c,d,e,f)　　　　　　　　//100 jack 5 10 20 30

 

3. for of迴圈:

　　es5的for迴圈:

var arr = ["red","green","blue","yellow","black"];
        for(var i = 0;i < arr.length;i++){
            console.log(arr[i]);　　　　　　　　　　//
}

 

　　for in 迴圈:

for(var i in arr){
            console.log(i);   //輸出的是索引
            console.log(arr[i]);
}

 

　　

　　 for of 迴圈:(不能用來遍歷json)

for(var i of arr){
        console.log(i);   //輸出的直接是值
}

 

4.Map對象

//map就是用來存東西的，跟obj類似

var map = new Map();   
        console.log(map);
        map.abc = "jack";
        map.age = "100";
        console.log(map);

        // 設置值  增 改
        map.set("a","red");
        map.set("b","green");
        console.log(map)

        //查
        console.log(map.abc);
        console.log(map.get('a'));

        // 刪除
        delete map.abc;
        delete map.a;
        map.delete("a");
        console.log(map)

map對象是因為for of 的出現才出現的,一個map對象只能用for of 來遍歷.

var map = new Map();
        map.set("a","red");
        map.set("b","green");
        map.set("c","blue");
        map.set("d","yellow");
        map.set("e","black");

        for(var index of map.entries()){    //全寫
            console.log(index);
        }

        // 只想迴圈key
        for(var key of map.keys()){
            console.log(key);
        }

        // 只想迴圈value
        for(var value of map.values()){
            console.log(value);
        }

 

 5.箭頭函數

 　　沒有參數時:

var x= () =>{
    console.log("hello");  
}

　　有參數時

 var x = (a,b) =>{
　　console.log(a+b);
}
x(1,2)

　　返回對象時要用小括弧包起來,因為花括弧被解釋為代碼塊了;

var x= () =>{
    return({
　　　　uname:"www",
　　　　gae:18
　　})  
}

　　直接作為事件handle:

document.addEventlistener("onclick",ev =>{
      console.log(ev);  
}

 

6.es6原型

　　在ES6以前，必須有類和構造，在ES6以前是沒有類的概念，構造函數即是構造，也是類;到了ES6，完全劃分開了]

　　es5:

function Grand() {
   this.lastName = "王";
}
var grand = new Grand ();

Father.prototype = grand;  //繼承

function Father() {
  this.play = "打球";
}
var father = new Father;
console.log(father);

Son.prototype = father:
function son() {
   this.play = "打架"
}
var son = new Son();
console.log(son)

　　es6:

//class 類
//constructor 構造函數

calss Person{        //類
     constructor(name, age){    //構造
　　　　　　this.name = name;
　　　　　　this.age = age;
　　}
　　　showName(){
　　　　　　return this.name;
　　}
　　showAge{
　　　　　　return this.age;
　　}
}

var person = new Person("jack",18);

class Student extends Person{   //繼承
   constructor (name,age,pid){
　　　　super(name,age):
　　　　this.pid = pid;
}
   showPid(){
　　　　return this.pid;
}

var student = new Student("mack",50,"00001") ;
console.log(student)

 

 7.promise 　　

　　它就是一個對象，主要是用來處理非同步數據的.

 　　在promise中，有三種狀態 :  pending（等待，處理中） --->  resolve（完成）/   rejected（失敗，拒絕）

var por = Promise(function(relove,reject){
       resolve(123);   //成功的函數,成功後把這個數據傳遞出去
})

pro.then(function(val){        //then方法執行完成後又返回了一個promise對象
       //這是個成功的回調
       console.log("成功了,接收到的數為:"+val);  
       return val +1;
},function(err){
       //這是個失敗的回調
      console.log(err);
}).then(function(val){      //之前的then成功後,返回了一個值,這裡還要繼續執行
    console.log(val)
}.function(err){})

 　　處理數據(簡化步驟)

<div id="box"></div>
    <button id="btn">展示</button>
    <script>
        var box = document.getElementById("box");
        var btn = document.getElementById("btn");

        function ajax(url,succ,erro){
            var xhr = new XMLHttpRequest();
            xhr.open("GET",url,true);
            xhr.send();
            xhr.onload = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    succ(xhr.responseText);
                }else{
                    erro(xhr.status);
                }
            }
        }

        btn.onclick = function(){
            var p = new Promise(function(resolve,reject){
                ajax('04.txt',function(data){
                    resolve(data);
                },function(status){
                    reject(status);
                })
            });
            p.then(function(data){
                box.innerHTML = data;
            },function(err){
                box.innerHTML = err;
            })
        }
    </script>

　　與之配套的一些方法:

　　　catch() : 捕獲

<script>
        // catch    捕獲
        var p = new Promise(function(resolve,reject){
            resolve("success");
        })
        p.then(function(data){
            console.log(data);
            throw "發生錯誤了"
        }).catch(function(err){
            console.log(err);
        })
    </script>

　　  all()

<script>
        // 只有當所有的promise全部成功才能走成功，否則失敗
        var p1 = Promise.resolve(10);
        var p2 = Promise.resolve(20);
        // var p3 = Promise.reject(30);



        Promise.all([p1,p2,true,false]).then(function(data){
            console.log(data);
        },function(err){
            console.log(err);
        })
</script>

　　  race()

<script>
        // race也是返回一個promise對象
            // 獲取最先得到的結果，得到以後就不去執行了

        var p1 = new Promise(function(resolve,reject){
            setTimeout(resolve,100,"first");
        })
        var p2 = new Promise(function(resolve,reject){
            setTimeout(resolve,50,"second");
        })
        Promise.race([p1,p2]).then(function(val){   //cdn   >    本地載入
            console.log(val)
        })
    </script>

　　reject()

<script>
        var p1 = Promise.resolve(10);
        var p2 = Promise.resolve(p1);    //成功的promise裡面可以傳遞一個成功的promise對象
        p2.then(function(data){
            console.log(data);
        })
    </script>

 

8,generator(狀態機)

　　遍歷完成後,下一個元素的done值會是true

<script>
    //generator是一個函數，可以將它看做狀態機
    function* fun(){
        yield "hello";
        yield "ES6";
        yield "hello";
        yield "mercy";
    }
    var fn = fun();
    //1
    console.log(fn.next());         //{value: "hello", done: false}
    console.log(fn.next());         //{value: "ES6", done: false}
    console.log(fn.next());         //{value: "hello", done: false}
    console.log(fn.next());         //{value: "mercy", done: false}
    console.log(fn.next());         //{value: undefined, done: true}     done表示已經講整個generator函數遍歷完成

    //2
    for (var a of fn){
        console.log(a);
    }

    //1和2兩者只能有一個存在，如果1存在的話，2就不會執行
    </script>

 

 

 

 

 

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • GreenDao的初次使用--號稱Android最快的關係型資料庫
    一、準備工作 1、項目build.gradle文件下的dependencies中引入插件： 2、在module的build.gradle文件下頂部依賴插件： 3、在module的build.gradle文件下的dependencies中引入依賴： 二、GreenDao的註解 1、實體@Entity註 ...
  • RxJava操作符的簡單使用
    一、準備工作在app的build.gradle文件下的dependencies中添加依賴： 二、RxJava的操作符用法： 1、create 2、from 3、just 4、map 5、flatMap 此處用到的getCityWeathData方法返回出來一個泛型為WeathData的Observa ...
  • Flutter 即學即用系列博客——07 RenderFlex overflowed 引發的思考
    背景 在進行 Flutter UI 開發的時候，控制台報出了下麵錯誤： flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flut ...
  • iOS 好文源碼收藏
    iOS 好文源碼收藏 Swift 優雅的適配大小 http://www.cocoachina.com/ios/20181025/25289.html iOS：一分鐘集成主流APP個人資料頁 http://www.cocoachina.com/ios/20181219/23578.html 30個讓你 ...
  • Wonder 1.0正式版發佈-----WebGL 3D引擎和編輯器
    我們很榮幸地向大家發佈Wonder 1.0正式版-----WebGL 3D引擎和編輯器！ ...
  • 2018-11-23 手工翻譯Vue.js源碼:嘗試重命名標識符與文本
    續前文: "手工翻譯Vue.js源碼第一步:14個文件重命名" 對core/instance/索引中的變數, 方法進行重命名如下(題圖): javascript import { 混入初始化 } from './初始化' import { 混入狀態 } from './狀態' import { 混入 ...
  • 快樂前端-圖片預載入
    前言 正所謂金三銀四五吃土，因此這些天幾個前端技術群討論最多的話題就是面試題了。某日群內討論一道面試題：“前端如何實現大量圖片預載入以及預載入進度動畫進度條顯示？” 恰巧本人以前jquery、zepto一把梭快樂切圖的時候，寫過不少形式的圖片預載入動畫。對於圖片預載入的原理稍微瞭解接觸過那麼一點點， ...
  • 2018-11-09 VS Code英漢詞典插件v0.0.4-駝峰下劃線命名
    首先, 在兩天時間內安裝數破百, 多謝支持. VS Code插件市場地址: "英漢詞典 Visual Studio Marketplace" 開源庫地址同前文: "Visual Studio Code插件 英漢詞典初版發佈" 查詢單詞功能基本不變, 在詳細信息的開頭添加了原詞: 如題圖, 支持駝峰命 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類