ES6 - Note3：數組、對象與函數的擴展

来源:http://www.cnblogs.com/zmxmumu/archive/2016/06/14/5581476.html
-Advertisement-
Play Games

一、數組的擴展，ES6在數組擴展了一些API，以實現更多的功能 1.Array.from:可以將類數組和可遍歷的數據結構轉換成真正的數組，如下所示 如果參數是真正的數組，則直接返回一個一樣的新數組，參數也可是一個實現了Iterator介面的數據結構，如set，如下所示 Array.from還支持第二 ...


一、數組的擴展，ES6在數組擴展了一些API，以實現更多的功能

1.Array.from:可以將類數組和可遍歷的數據結構轉換成真正的數組，如下所示

var a = { '0':1,'1':1,length:2 };
var arr = Array.from(a);
console.log(arr)
Array [ 1, 1 ]
---------------ES5的實現-----------
var arr = [].slice.call(a);
console.log(arr)
Array [ 1, 1 ]

function fun(){ var arr = Array.from(arguments); console.log(arr); }
fun(2,3,4);
Array [ 2, 3, 4 ]

如果參數是真正的數組，則直接返回一個一樣的新數組，參數也可是一個實現了Iterator介面的數據結構，如set，如下所示

var a = new Set([3,4]);
var arr = Array.from(a);
console.log(arr);
Array [ 3, 4 ]

Array.from還支持第二個參數，是一個用來處理每一個元素的函數，然後將處理後的元素放回數組，如下所示

var a = new Set([3,4]);
var arr = Array.from(a,x => x+1 );
console.log(arr);
Array [ 4, 5 ]

因此可以利用該方法做一些方便的操作，如下所示

var arr = Array.from({length:3},()=>'a');//生成一個有3個元素的數組，並初始化

2.Array.of:該方法可以將一組數轉換成數組，且總是返回以參數為數值的數組，這個可以避免Array構造函數帶來的歧義，如下所示

var arr = Array.of(1,2,3), arr1 = Array.of(1);
console.log(arr);
Array [ 1, 2, 3 ]
console.log(arr1);
Array [ 1 ]
var arr2 = Array(3), arr3 = Array(1,2);
console.log(arr2);
Array [ <3 個空的存儲位置> ] //這裡的空位就是沒有值，也不是undefined
console.log(arr3);
Array [ 1, 2 ]

3.數組實例方法find，用於找出數組中第一個符合條件的元素，沒有找到則返回undefined，參數為函數 ,如下所示

var arr = [1,10,9,88];
console.log(arr.find(x=>x>10));
88
console.log(arr.find(x=>x<1));
undefined

這裡還有個findIndex的實例方法，找出匹配元素所在的位置，未找到就返回-1，如下所示

console.log(arr.findIndex(x=>x>50));
3
console.log(arr.findIndex(x=>x>100));
-1

並且這兩個方法都可遍歷到NaN，如下所示

var arr = [NaN,1];
console.log(arr.findIndex(x=>Object.is(NaN,x)));
0

4.fill實例方法，使用給定值填充數組,並會覆蓋以前的值，如下所示

console.log(new Array(1,3,4).fill('a'));
Array [ "a", "a", "a" ]
--------------- 也可以指定開始位置和結束位置 --------------
console.log(new Array(2,5,8,11).fill('a',1,2));
Array [ 2, "a", 8, 11 ]

5.返回遍歷器的實例方法keys,entries，keys得到鍵的遍歷器，entries是得到鍵值的遍歷器，如下所示

var arr = [1,2,5,7,11,15];
for( let i of arr.keys()){console.log(i);};
0
1
2
3
4
5
for(let [k,v] of arr.entries() ){ console.log(k+':'+v); }
0:1
1:2
2:5
3:7
4:11
5:15

二、函數的擴展

1.函數參數允許預設值，在ES6以前實現預設值通常是先判斷某個參數是否為undefined，然後賦值為預設值。如下所示

var func = function(x=0,y=7){ return x+y; }
console.log(func())
7
console.log(func(1,2))
3
var fun1 = function(x,y){ x = x||0; y=y||7; return x+y; } //ES6以前的寫法實現預設值
console.log(fun1())
7
console.log(fun1(1))
8

在使用預設值的時候，如果預設參數不是位於尾部，則該預設參數不能被跳過，如下所示

var fun2 = function(x=1,y){ return x+y; }
console.log(fun2())
NaN
console.log(fun2(,2))
SyntaxError: expected expression, got ','
console.log(fun2(null,2))
2
console.log(fun2(undefined,2))
3

使用了預設參數的函數的length屬性的值將不准確,且不包涵rest參數，如下所示

var fun3 = function(a=0,b=1){ return a-b; }
console.log(fun3.length);
0

rest參數：形式為"...變數"的參數，接收函數剩餘參數，搭配的變數為一個數組，rest參數後面不能再有參數，用法如下所示

var fun4 = (...arg) => arg.sort((a,b) => a<b);
console.log(fun4(8,87,1));
Array [ 87, 8, 1 ]
//在rest參數還有參數便會報錯
var fun5 = (...arg,x) => arg.sort((a,b) => a<b);
SyntaxError: expected closing parenthesis, got ','
//函數的length會忽略rest參數
console.log(fun4.length)
0

擴展運算符(...)，類似rest參數的逆運算，將一個數組轉換成逗號分開的參數列表，用法如下所示

var fun5 = (...arg) => [...arg];
console.log(fun5(1,19));
Array [ 1, 19 ]
//也可以用來取代apply在某些地方的應用
console.log(Math.max.apply(null,[1,98,7]));
98
console.log(Math.max(...[1,98,7]));
98

2.箭頭函數

箭頭函數是ES6新增的語法，允許使用箭頭=>定義函數，如下所示

var fun = a=>a+1;
console.log(fun(8));
9
----------------------
var fun1 = (a,b) => a*b;
console.log(fun1(2,8));
16

箭頭函數有幾個使用註意點。

（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象，即便使用call,apply也不能改變。

（2）不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。

（3）不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用Rest參數代替。

（4）不可以使用yield命令，因此箭頭函數不能用作Generator函數。

(function(){return (()=>console.log(this.a)).call({a:2})}).call({a:1})
1

嵌套的箭頭函數，如下所示

const pipefun = (...funs) => initVal => funs.reduce((f1,f2) => f2(f1),initVal );
var testfun = pipefun(a=>a+1,b=>b+1);
testfun(10);
12

 ES6中還明確規定在實現ES6代碼時必須使用尾遞歸優化，尾遞歸優化就是在遞歸的尾部調用自身（尾調用就是在函數的最後一步調用另一個函數，且沒有任何其他的操作），這樣做到好處是不易造成棧溢出，如下所示

function fibonacci(n){
	return n<=1?n:fibonacci(n-1)+fibonacci(n-2);
}
console.log(fibonacci(30));
832040
//在這裡參數給到100就會棧溢出，如果改成尾遞歸，則可解決這個問題
function fibonacci(n,acc1,acc2){
	return n<=1?acc1:fibonacci(n-1,acc2,acc1+acc2);
}
console.log(fibonacci(30,1,1));
832040
console.log(fibonacci(100,1,1));
354224848179262000000

三、對象的擴展

1.屬性和方法可以簡寫，可以直接使用變數和函數作為對象的屬性和方法，如下所示

var x = 1,
    y = 2;
var obj = {
	x,
	y,
	show(){
		console.log(this.x,this.y);
	}
};
console.log(obj.x,obj.y)
1 2
obj.show()
1 2

簡潔寫法的屬性名總是字元串，所示不會出現關鍵字報錯，如下所示

var obj1 = {
       //這裡相當於'new':function(){console.log("new");}
	new(){
		console.log("new");
	}
};
obj1.new()
new

在ES6以前訪問對象的屬性或者方法有兩種方式，一是使用點(.)操作符，另一種是使用中括弧["propertyName"]，如下所示

var o = {x:1};
console.log(o.x);
1
console.log(o["x"]);
1

但是在定義對象的屬性或方法是只能使用屬性名:的方式，在ES6中則可以使用中括弧來定義，如下所示

var name = 'hehe';
var obj2 = {
	[name]:"hello"
}
console.log(obj2[name]);
hello

2.Object.is該方法可以用來判斷兩個值是否一樣，可以判斷NaN與NaN，-0和+0，採用的是等值演算法，如下所示

console.log(+0===-0,NaN===NaN,"hello"==="hello",{x:1}==={x:1});
console.log(Object.is(NaN,NaN));
console.log(Object.is(+0,-0));
console.log(Object.is({x:1},{x:1}));
true false true false
true
false
false

3.Object.assign用來合併對象，採用的是淺複製且存在同名屬性後者會覆蓋前者，如下所示

var o = {x:1},
    o1 = {y:2},
    o2 = {y:3,x:2};
console.log(Object.assign(o,o1,o2));
var o3 = {z:4,fun:()=>console.log("hello")};
Object.assign(o,o3);
o.fun();
o3.fun = null;
o.fun();
Object { x: 2, y: 3 }
hello

如果只給出一個參數且是對象，則直接返回這個對象，不是對象便會先轉換成對象，如不能轉換成對象則報錯，如下所示

onsole.log(Object.assign(2));
console.log(Object.assign(undefined));
console.log(Object.assign(null));
Number { 2 }
TypeError: can't convert undefined to object

而且該方法拷貝不了不可枚舉的屬性

　

　

　　

 

　

 

 

　　


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

-Advertisement-
Play Games
更多相關文章
  • 在node.js中，使用基於ORM架構的Sequelize，操作mysql資料庫之增刪改查
    Sequelize是一個基於promise的關係型資料庫ORM框架，這個庫完全採用JavaScript開發並且能夠用在Node.JS環境中，易於使用，支持多SQL方言(dialect)，。它當前支持MySQL,、MariaDB、SQLite、PostgreSQL、Sql Server 資料庫。 目前 ...
  • 【Javascript 基礎】嵌入另一張HTML文檔、通過插件嵌入內容
    1.嵌入另一張HTML文檔 iframe 元素允許在現有的HTML文檔中嵌入另一張文檔。下麵代碼展示了iframe元素的用法： 在這個例子里，創建一個 name 屬性為 myframe 的 iframe 。這樣就創建了一個名為 myframe 的瀏覽上下文。然後就可以把這個瀏覽上下文與其他元素（具體 ...
  • nodejs npm常用命令
    nodejs npm常用命令 npm是一個node包管理和分發工具，已經成為了非官方的發佈node模塊（包）的標準。有了npm，可以很快的找到特定服務要使用的包，進行下載、安裝以及管理已經安裝的包。 1、npm install moduleNames：安裝Node模塊安裝完畢後會產生一個node_m ...
  • javascript類型系統——包裝對象
    [1]定義 [2]生存期 [3]顯式創建 [4]轉型函數 [5]比較運算 ...
  • 使用Vert.x構建Web伺服器和消息系統
    如果你對Node.js感興趣，Vert.x可能是你的下一個大事件：一個建立在JVM上一個類似的架構企業制度。 這一部分介紹Vert.x是通過兩個動手的例子（基於Vert.x 2.0）。 當Node.js出現，許多開發者興奮的感到可以用不尋常的方法來構建可擴展的伺服器端應用程式。 而不是開始，將服務使 ...
  • js裡面的 InttoStr 和 StrtoInt
    javascript 字元串 和 數字的轉換，話說好靈活，感覺回不去pascal了 ...
  • plupload 限制上傳數量 只能選擇一張圖片上傳
    var files=[];var errors=[]; var chunk=<%=request.getParameter("chunk")%>; var root="",xml=""; var max_file_size='20MB'; var image='<%=request.getParam ...
  • 如何使用遞歸遍歷對象獲得value值
    一般要用到遞歸，就要判斷對象是否和父類型是否一樣 這裡演示簡單的對象遞歸，還有數組遞歸類似。 返回結果：1,2,3,4,5,6,7,8,9 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類