ES6新語法(二)

来源:https://www.cnblogs.com/shineguang/archive/2019/07/26/11253290.html
-Advertisement-
Play Games

1.解構 在ES6中,可以使用解構從數組和對象提取值並賦值給獨特的變數，即將數組或對象中的值，拆成一個一個變數。 解構：自動解析數組或對象中的值，並賦值給指定的變數。、 1.1數組解構 1.2對象解構 將對象中的成員值，取出並賦值給多個變數(變數名與對象成員名一致) 1.3函數參數與解構 函數參數使 ...


1.解構

        在ES6中,可以使用解構從數組和對象提取值並賦值給獨特的變數，即將數組或對象中的值，拆成一個一個變數。

        解構：自動解析數組或對象中的值，並賦值給指定的變數。、

1.1數組解構

var arr = [3,4,5];
    var [a, b, c] = arr;
    console.log(a, b, c);
    
    //還可以忽略值 需要使用,占位
    var arr = [3,4,5];
    var [a,, c] = arr;
    console.log(a, c);

    //函數返回值為數組，進行解構
    function f5(){
        return [1,2,3];
    }
    var [a, b, c] = f5();
    console.log(a, b, c);

1.2對象解構

        將對象中的成員值，取出並賦值給多個變數(變數名與對象成員名一致)

 

var person = {
    "nickname": "老三",
    "age": 30,
    "sex": "男"
};
//解構時 {}中的變數名，不能加引號
var {nickname, age, sex} = person;
console.log(nickname, age, sex);
//可以忽略值  直接忽略 不需要占位
var {nickname, sex} = person;
console.log(nickname, sex);

 

1.3函數參數與解構

 

        函數參數使用解構數組或解構對象形式

 

//1.函數形參，使用解構數組形式，調用函數時需要傳遞數組實參
function f1([x,y,z]){
      console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);

//相當於
/*
function f1(a){
      var [x,y,z] = a;
      console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);
*/

//2.函數形參，使用解構對象形式，調用函數時需要傳遞對象實參
function f2({nickname,age,sex}){
      //變數名與對象成員名一致
      console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);

//相當於
/*
function f1(a){
      var {nickname, age, sex} = a;
      console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);
*/

 

1.4預設值與解構數組

         函數參數使用解構數組 並設置預設值

<script>
//1.函數參數使用解構數組，調用函數不傳參數會報錯
function fn([x, y, z]){
      console.log(x, y, z);
}
fn(); //會報錯
</script>

<script>
//2.函數參數使用解構數組，對整個數組設置預設值為空數組
function f1([x, y, z] = []){
      console.log(x, y, z);
}
f1(); //不報錯  x y z 都是 undefined

//3.函數參數使用解構數組，對整個數組設置預設值,數組中每個變數對應一個預設值
function f2([x, y, z] = [1,2,3]){
      console.log(x, y, z);
}
f2(); //不報錯  x=1 y=2 z=3
f2([4,5,6]); // x=4 y=5 z=6


//4.函數參數使用解構數組，對整個數組設置預設值為空數組, 在解構數組中對每個變數設置一個預設值
function f3([x=1, y=2, z=3]=[]){
      console.log(x, y, z);
}
f3(); //不報錯  x=1 y=2 z=3
f3([4,5,6]); // x=4 y=5 z=6
</script>

1.5預設值與解構對象

         函數參數使用解構對象 並設置預設值

<script>
//1.函數參數使用解構對象，調用函數不傳參數會報錯
function fn({x, y, z}){
      console.log(x, y, z);
}
fn(); //會報錯
</script>

<script>
//2.函數參數使用解構對象，對整個對象設置預設值為空對象
function f1({x, y, z} = {}){
      console.log(x, y, z);
}
f1(); //不報錯  x y z 都是 undefined

//3.函數參數使用解構對象，對整個對象設置預設值,對象中每個變數對應一個預設值
function f2({x, y, z} = {"x":1,"y":2,"z":3}){
      console.log(x, y, z);
}
f2(); //不報錯  x=1 y=2 z=3
f2({"x":4,"y":5,"z":6}); // x=4 y=5 z=6


//4.函數參數使用解構對象，對整個對象設置預設值為空對象, 在解構對象中對每個變數設置一個預設值
function f3({x=1, y=2, z=3}={}){
      console.log(x, y, z);
}
f3(); //不報錯  x=1 y=2 z=3
f3({"x":4,"y":5,"z":6}); // x=4 y=5 z=6
</script>

2.Symbol數據類型

            ES5數據類型：6種： string number boolean null undefined object

            ES6新增了一種數據類型：Symbol，表示獨一無二的值，Symbol最大的用途是用來定義對象的唯一屬性名

var symbol1 = Symbol();

var symbol2 = Symbol("Alice");

console.log(symbol1, symbol2) // 輸出：Symbol() Symbol(Alice)

                Symbol類型的值是一個獨一無二的值，Symbol函數的參數只是表示對當前Symbol值的描述，因此相同參數的Symbol函數的返回值是不相等的。

var attr_name = Symbol();
var obj = {
    [attr_name]: "Alice"
};
console.log(obj[attr_name]);

var obj = {
      [Symbol()]:"Alice"
};
console.log(obj);

               註：Symbol值作為對象屬性名時，不能用點運算符。由於點運算符後面總是字元串，所以不會讀取attr_name作為標識名所指代的那個值。

           使用[]方括弧，裡面的attr_name不帶引號，表示attr_name是一個變數.

3.箭頭函數

              ES6可以使用“箭頭”（=>）定義函數，註意是普通函數，不要使用這種方式定義類（構造器）。

3.1語法

           具有一個參數並直接返回的函數

var f1 = a=>a;
//相當於  var f1 = function(a){ return a;};
console.log(f1('hello'));//'hello'

              沒有參數的需要用在箭頭前加上小括弧

var f2 = () => '來了老弟';
console.log(f2());

              多個參數需要用到小括弧，參數間逗號間隔

var f3 = (a, b) => a+b;
console.log(f3(3,4));//7

              函數體多條語句需要用到大括弧

var f4 = (a, b) => {
      console.log('來了老弟');
      return a+b;
}
console.log(f4(5,6));//11

              返回對象時需要用小括弧包起來，因為大括弧被占用解釋為代碼塊

var f5 = () => {
      return ({"name":"老弟", "age":40});
}

//var f5 = () => ({"name":"老弟", "age":40});
console.log(f5());

               直接作為事件處理函數

<input type="button" value="點擊" id="btn">
<script>
    document.getElementById('btn').onclick = evt=>{
          console.log(evt);//evt 事件對象
    }
</script>

                 賦值為對象的方法

var obj = {};
obj.say = ()=>{return "hello,我是obj的say方法";}
console.log(obj.say());

                 作為回調函數

var f6 = (f)=>{
    console.log(f(100));
};
// f6(a=>a);
var f7 = a=>a;
f6(f7);

1.2註意點

             typeof 判斷箭頭函數 結果為function

var f1 = a=>a;
console.log(typeof f1);//'function'

                 instanceof判斷是否Function的實例，結果為true

var f1 = a=>a;
console.log(f1 instanceof Function);//true

                 箭頭函數不綁定this, 內外this指向固定不變

var obj = {
      say:function(){
          //非箭頭函數
          var _this = this;
          var f1 = function(){
              console.log(_this);//obj
            console.log(this);//window
        };
          f1();
          //箭頭函數
        var f2 = ()=>{
            console.log(this);
        };
          f2();
      }
};
obj.say();

               箭頭函數不能做構造函數，不能用new實例化，也沒有prototype屬性

var Person = ()=>{};
console.log(Person.prototype);//undefined
var p = new Person();//報錯

                不能使用arguments

var f1 = ()=>{
    console.log(arguments);
};
f1(); //報錯

                 箭頭函數也支持預設參數、剩餘參數、解構 

 

var f1 = (x=1,y)=>{
      console.log(x, y); //3 4
};
f1(3,4);
var f2 = (...x)=>{
      console.log(x); //[3,4]
};
f2(3,4);
var f3 = ([x,y]=[])=>{
      console.log(x, y); //3 4
};
f3([3,4]);

 


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

-Advertisement-
Play Games
更多相關文章
  • 初學資料庫
    EOMONTH()查詢日期數據所屬月數的最後一天； YEAR(COL)輸出日期數據的年份、month（col）輸出日期數據的月份； 查詢數據時in與exist的區別：in是先查詢條件，然後只查詢一次條件。而exists是先運行select語句，查詢出所有的數據以後在運行條件語句，多次查詢，查詢的次數 ...
  • CG-CTF SQL註入
    SQL註入1 題目 訪問題目網址 先查看一下源碼 仔細分析一下核心源碼 通過分析源碼知道了 的值為 ,因為sql查詢語句里有and，必須and前後同時成立才可以查詢，但是現在不知道 對應的值，所以考慮能不能不判斷pass，直接判斷user，於是想到是不是可以將user判斷語句閉合併註釋後面的內容，這 ...
  • iOS 類知乎”分頁”效果的實現?
    我們先看張gif圖看一下效果(LICEcap錄製的有點卡, 湊合看) 好像還是卡, 懟個視頻演示鏈接吧: https://m.weibo.cn/1990517135/4398431764047996 我們先來分析一下頁面結構, 然後分析具體動畫實現. 頁面結構: 可以將當前頁面和下個頁面復用, 下個 ...
  • iOS----------項目的目錄結構能看出你的開發經驗
    1、項目的目錄結構能看出你的開發經驗 2、iOS工程目錄結構的思考 ...
  • 那些你不知道的Mac截屏功能
    今天介紹Mac的截圖功能，如果你以為Shift + Command + 3 / 4就是Mac全部的截屏功能的話，那你小看Mac了。它遠比你想得強大。 1.Shift + Cmd + 3 ——截取全屏 2.Shift + Cmd + 4 直觀地拖動滑鼠截屏： 按一下空格鍵： 以下操作都是在Shift ...
  • Android CHM文件閱讀器
    CHM格式是1998年微軟推出的基於HTML文件特性的幫助文件系統。以替代早先的winHelp幫助系統，它也是一種超文本標識語言。在Windows 98中把CHM類型文件稱作“已編譯的HTML幫助文件”。 CHM用了ITS文件壓縮格式，使得文件體積大大減小。事實上CHM文件不僅可以包含HTML文件， ...
  • Android App安裝包瘦身計劃
    Android App安裝包體積優化: 理由, 指標和可以採用的方法. ...
  • 02、HTML 基礎
    1、HTML 標題 HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>靈_夜</title> </head> <body> <h1>這是標題 1</h1 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類