Learn ES2015

来源:http://www.cnblogs.com/hellotyc/archive/2016/12/20/6203758.html
-Advertisement-
Play Games

折騰了大半年的項目，用的angular折騰快瘋了。 總算有個小結了。正好閑下來為新的項目做準備，學點新的玩意玩玩，以往ES6都沒用過，感覺被大部隊甩好遠了,抓緊跟上大部隊的腳步... 1.利用let和const引入塊級作用域 通過ES6中定義的let關鍵字可以形成僅作用於該塊作用域的局部變數 與le ...


折騰了大半年的項目，用的angular折騰快瘋了。 總算有個小結了。正好閑下來為新的項目做準備，學點新的玩意玩玩，以往ES6都沒用過，感覺被大部隊甩好遠了,抓緊跟上大部隊的腳步...

1.利用let和const引入塊級作用域

通過ES6中定義的let關鍵字可以形成僅作用於該塊作用域的局部變數

for(let i=0;i<10;i++){      
}
console.log(i);//輸出ReferenceError(未定義)
console.log(a);//輸出ReferenceError(未定義)，let聲明的變數不會變數提升，規範了代碼先聲明後使用。
let a =2;
let a=3;//error let申明的變數不能重覆定義。

與let類似const也能形成塊作用域，不同點在於const聲明的變數為常量，不可改變

if(true){
  const a =888;  
  a = 222;//error. const 聲明的變數是常量。不可被修改     
}
console.log(a);//輸出ReferenceError(未定義)。塊級作用域、

//有一點要註意的是不能改變const類型變數存儲的東西
const person = {};
person.nam = 'Fink';
person = {};//error

 

 

2.變數解析與賦值

var [a,b,c] = [1,2,3];

var arr  = [1,2,3];
var [a,b,c] = arr;

//數量不對應
let [a,b,c] = [1,2];
console.log(a);//1
console.log(b);//2
console.log(c); // undefined

//多層數組
let [a,[b,c],d] = [1,[2,3],4];
      1,2,3,4

//多層不對應
let [a,[b,c],d] = [1,[2],3];
console.log(a) //1
console.log(b) //2
console.log(c) //undefined
console.log(d) //3

//對應值非數組
let [a,b,c] = 1;//error
let [a,b,c] = false;//error 等號右邊必須是可遍歷對象。


//瞭解映射的原理之後，一個很好的應用場景就是交換數值。
let [a,b] = [1,2];
[a,b] = [b,a]

//es6在映射賦值中還加入了預設值
let [a,b=2,c] = [1];
console.log(a); //1
console.log(b); //2
console.log(c); // undefined

//針對對象的映射賦值
var {a,b} = {a:'1',b:'2'};
console.log(a); //1
console.log(b); //2
根據key查找value

//掌握這種方法，可以簡化很多操作。如獲取一個對象的某些屬性
var person = {
    name:'fink',
    'age':23,
    'sex':'male'  
}
let {name,age,sex}  = person;
console.log(name+age+sex); // fink23male

 

3.增加了模板字元串

let myName = 'Fink';
document.getElementById("app").innerHTML = `wo name is ${myName}`;

//$(變數名) 不僅支持變數，還支持函數表達式
var result = `my name is ${(function(){return 'fink'})()}`;

 

4.數組的擴展

 

//1.Array.from();將偽數組對象轉換為真正的數組
//什麼是偽數組對象？具有數組的結構，但不是數組對象，不能使用數組的方法如forEach等

let arr1 = {
  'a': 1,
  'b': 2,
  'c': 3

};

function arr2(){
     let a2  = arguments;  
}

let arr3 = document.querySelectAll('div');
//上面三個都是偽數組對象。
'forEach' in arr1;   //false
let arr = Array.from(arr1);// es5的寫法: var arr = Array.slice.call(arr1);
'forEach' in arr1;   //true;返回值是boolean。



//2.Array.find();在數組中檢索第一個匹配到的元素。
// find()參數為一個函數，設置查找條件

let arr = [1,3,5,7];
var result  = arr.find(function(value,index,arr){return value >4});

var result2  = arr.find(function(value,index,arr){return value >10});
console.log(result);// 5
console.log(result2); // 沒有找到的時候返回undefined
//findIndex()和find()類似，只不過是查找到的結果對應的下標


// 3. Array.fill();給定一個值來替換數組元素。
let arr = [1,2,3,4,5];
arr.fill(5); //[5,5,5,5,5];
// fill 也可以接收三個參數，第二個和第三個參數分別為開始個結束的位置

let arr2 = [1,2,3,4,5,6,7];
arr.fill(5,1,3);//[1,5,5,4,5,6,7];

 

 5.函數增加預設參數。

function show(name,age=23){
   console.log(name+","+age)  
}
show('fink'); // fink,23

 

 6.函數新增rest參數(...)。為了不需要使用arguments對象。

function f(v,...vals){
  console.log(v);
  console.log(vals);
}
f('fink',1,2,3,4,5,6); //temp  1,2,3,4,5,6

//可以看成將arguments轉換為數組，要比arguments更靈活。

// ***需要註意的一點。
function f(...vals,v){}//這種方式會報錯，rest參數後不能再加別的參數

除了在函數中作為rest參數，“ ... ”本身可以作為一個運算符使用，用處與rest參數剛好相反，是將一個數組轉為用逗號分隔的參數序列，看看慄子：

function add(x,y){ return x + y; } 
var arr = [23,12]; add(...arr); //35 
Math.max(...[4, 13, 15]) // 等同於Math.max(4, 13, 15); 
//結合rest使用 function f(...vals){ vals //[1,2,3] } var arr = [1,2,3]; f(...arr); //當然上面這樣用是多次一舉，轉換為參數再轉回來，目的是為了理解兩者是互為逆操作的
 //其它用法 var nodeList = document.querySelectorAll('div');
 var array = [...nodeList]; 
var arr1 = [1,2,3],arr2 = [4,5,6]; 
var arr3 = [...arr1,...arr2]; //合併數組，在ES5中我們一般是這樣用的arr1.concat(arr2);

 

 7.=>箭頭函數

 

var f = a =>b
//a為參數，b為返回值

//當傳入多個參數或對象時，要用（）包裹
var add = (a,b) => a + b

//傳入對象
    var plus = ({name,age}) => name + age;
    var person = {
        name:'Vicfeel',
        age:23
    };
    plus(person); //Vicfeel23

//this對象的指向是可變的，但是在箭頭函數中，它是固定的

var show  = {
   init : function(){
      document.addEventListener('click',e = >this.doThing(e),false);
   }
    ,
  dothing: function(e){
   console.log('do something')
}

}

 

8.第七種數據類型。Symbol();

該類型通過 Symbol()來創建。(不能使用new)。表示獨一無二的。

 

9.新的數據結構Set

 Set數據結構和數組類似，區別在於Set內元素是唯一不重覆的,Set函數可以接受一個數組（或類似數組的對象）作為參數，用來初始化，可以通過add方法添加元素

   //ES6環境下
   
   //Set的方法
   //Set - 構造函數，參數為一個數組
   let arr = [1,2,3,3,4,4];
   let s = new Set(arr);//Set{1,2,3,4}
   
   //add - 添加一個值,返回結構本身
   s.add(5); //Set{1,2,3,4,5}
   s.add(2); //Set{1,2,3,4,5}
   s.add(6).add(7);//Set{1,2,3,4,5,6,7}
   
   //delete - 刪除一個值，返回一個布爾值表明刪除是否成功
   s.delete(6); //true,Set{1,2,3,4,5,7}
   
   //has - 判斷是否包含該值，返回一個布爾值
   let ok = s.has(6);//false,Set{1,2,3,4,5,7}
   
   //clear - 清空Set
   s.clear();//Set{}
   
   //Set的屬性
   s.size; //0,與數組不同set通過size獲取大小
   s.add(5);
   s.size; //1

 

 Set內元素具有唯一性，因此最直觀的用途便是數組去重，現在我們可以這樣實現數組去重：

 function unique(arr){
        return [...new Set(arr)]; //...運算符參看ES6系列（二）
        
        //或者 return Array.from(new Set(arr));
    }

 

 10.新數據結構Map

 

map一詞本身就有映射的意思，Map數據結構提供了一種完善的鍵值對結構，之所以稱之為完善是相對於之前而言，我們知道JS中的對象Object本身就是一種鍵值對hash結構,然而這種鍵值對確是不完善的。

Object中只能將字元串作為鍵，無法使用對象作為鍵，Map數據結構的提出就是為瞭解決這個問題

 

//來看一下Map數據結構的基礎用法:
    //構造函數
    var m = new Map();
    var p = {name:'vicfeel'};
    //添加鍵值對
    m.set(p,'val');
    //獲取鍵值對
    m.get(p); //"val"
    m.get('name'); //undefined
    //返回大小
    m.size; //1
    //重覆添加相同鍵會覆蓋先前的
    m.set(p,'newVal');
    m.get(p); //"newVal"
    
    //利用包含鍵值對的數組初始化Map,相同鍵後面也會覆蓋前面
    var arr = [{'name':'vicfeel'},{'age':23},{'age':25}];
    var m2 = new Map(arr);
    m2.get('age'); //25
    
    //判斷是否含有某個鍵
    m2.has('name');  //true
    //刪除某個鍵
    m2.delete('name');
    m2.has('name'); //false
    
    //清空
    m2.clear();
    m2.size; //0


另外，另外Map數據結構也有一個forEach方法用於遍歷：

    let m = new Map();
    m.set('name','vicfeel').set('age',25);
    m.forEach(function(val,key,map){
        console.log("Key: %s, Value: %s", key, val);
        //Key: name, Value: vicfeel
        //Key: age, Value: 25
    });

 

 11.Iterator(遍歷器)

ES新提供的遍歷方法for...of的遍歷方式便是自動尋找該對象的Iterator介面,一些數據結構是預設部署Iterator介面的，包括數組、Set和Map結構、偽數組（比如arguments對象、DOM NodeList對象）、後文的Generator對象，以及字元串，因此這些數據結構是可以直接使用for...of進行遍歷的

 


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

-Advertisement-
Play Games
更多相關文章
  • 清除輸入框內的空格
    ...
  • webpack-dev-server輕量級js高速打包、熱部署伺服器
    webpack是一個打包web項目的工具 ，可以實現css，js，less，cass，html的混淆加密，minify，結合webpack-dev-server熱部署，非常方便前端頁面和Nodejs的開發。 webpack 安裝方法 npm install webpack --save-dev np ...
  • JS高程5.引用類型（4）Array類型的各類方法
    一.轉換方法 所有的對象都具有toLocaleString（），toString（）和valueOf（）方法。調用toString（）方法會返回由數組中的每個值的字元串拼接而成的一個以逗號分隔的字元串。而調用valueOf（）返回的還是數組。 valueOf() 方法返回 Array 對象的原始值。 ...
  • 交互過程中封裝了一些常用的函數（不斷添加中）
    1、截取字元串或是多行顯示省略號 2、獲取ID 3、轉換手機號碼中間四位為星號 4、根據data-url跳轉頁面 5、獲取當前頁面路徑攜帶的參數值 6、驗證手機號 7、倒計時 8、獲取今天、明天、後天的日期 9、範圍隨機數 ...
  • Effective前端5：減少前端代碼耦合
    什麼是代碼耦合？代碼耦合的表現是改了一點毛髮而牽動了全身，或者是想要改點東西，需要在一堆代碼裡面找半天。由於前端需要組織js/css/html，耦合的問題可能會更加明顯，下麵按照耦合的情況分別說明： 1. 避免全局耦合 這應該是比較常見的耦合。全局耦合就是幾個類、模塊共用了全局變數或者全局數據結構， ...
  • Bootstrap之字體圖標
    優點:1.減少請求 2.容易控制樣式 所在位置:在下載的bootstrap文件中的fonts文件夾存放字體圖標 預設路徑為當前目錄下，如需修改路徑，則需在bootstrap.css中查找font-face後找到url進行修改 字體圖標引入示例:<span class="glyphicon glyph ...
  • CSS3 Flexbox輕鬆實現元素的水平居中和垂直居中
    CSS3 Flexbox輕鬆實現元素的水平居中和垂直居中 網上有很多關於Flex的教程，對於Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其實這兩種叫法都沒有錯，只是Flexbox舊一點，而Flex是剛出來不久的東西而已，為了方便說明，趕上新技術，下麵我就把這種佈局叫Flex佈局。 元 ...
  • React Native學習筆記
    React 是使用ES6 ,支持JSX語法, 開發組件化web或native的工具. 現階段使用Babel工具轉換成ES5 代碼. 組件通過props屬性傳遞不變化的內容,UI通過state屬性變動來產生變化. React 一個界面框架, 數據的管理在js中比較麻煩, 容易混亂 . 有個redux庫 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類