1、模板字符串
反引號`` 內用于輸入格式化的字符串文本,在``" />

ES6學習筆記之字符串、數組、對象、函數新增知識點實例分析

 更新時間:2020-01-22 12:00:09   作者:佚名   我要評論(0)

本文實例講述了ES6學習筆記之字符串、數組、對象、函數新增知識點。分享給大家供大家參考,具體如下:
1、模板字符串
反引號`` 內用于輸入格式化的字符串文本,在``

本文實例講述了ES6學習筆記之字符串、數組、對象、函數新增知識點。分享給大家供大家參考,具體如下:

1、模板字符串

反引號`` 內用于輸入格式化的字符串文本,在``內可以將表達式用${}包含起來

  let str=`
    <!DOCTYPE html>
      <html lang="en">
        <body>
          <div>
            <p class="pClass">格式化字符串</p>
          </div>
        </body>
      </html>
  `;
  console.log(str);

2、轉化為數組

Array.form將偽數組、集合轉化為數組

let allLi=document.querySelectorAll('li');
console.log(Array.isArray(allLi));//輸出false,allLi不是個數組
let arr=Array.from(allLi);
console.log(Array.isArray(arr));//輸出true,arr被轉化為數組

Array.of將元素構建為數組

let arrayOf=Array.of('str',2,{});  //創建由字符串、數字、對象構成的數組
let arr=Array.of(7);         //數組包含一個元素7
let arr=Array(7);          //數組包含7個空元素

3、類的封裝

通過class來包裝類

  class Person{    
    constructor(name,age){  //Person類的構造函數
      this.name=name;
      this.age=age;
    }
    
     print(){        //類函數輸出
      console.log("My name is "+this.name+",I'm "+this.age+" years.");
    }
  }
  let p=new Person('tony',15);
  p.print();

4、對象的使用

在用變量作為對象的元素時,會將變量名作為鍵值,將變量值作為值

let name='tony';
let age=15;
let person={
  name,
  age
}  
console.log(person);

輸出結果為:

Object { name: "tony", age: 15 }

Object.assign()方法實現對象合并,參數為:合并目標,合并源1,合并源2...

let obj1={'name':'tony'};
let obj2={'age':15};
let obj3={'sex':'男'};
let obj={};
Object.assign(obj,obj1,obj2,obj3);  //將后面的對象并到第一個對象
console.log(obj);

輸出為:

Object { name: "tony", age: 15, sex: "男" }

5、延展操作符...

將整體字符串、對象等拆成單個元素  

let str="這是一個字符串";
let arr=[...str];
console.log(arr);

輸出為:

6、函數Rest參數

當不確定傳入的參數個數時,可以采用"...參數"的方式,然后遍歷操作每個參數

  function sum(name,...num) {
    console.log(name);
    let res=0;
    for (let value of num){  //將后面未知個數的參數當作數組num遍歷
      res+=value;      
    }
    return res;
  }
  console.log(sum('tony',10,2,3));

7、箭頭函數

箭頭函數可以將函數function (參數) {表達式}簡化為:(參數...)=>{表達式...},無需輸入function,甚至省略(),{},return。

1、當只有一個參數時,可以寫為參數 => 表達式,例如使用map函數遍歷一個數組,使每個元素乘2:

var arr = [1, 4, 9, 16];
const map1 = arr.map(x => x * 2);  //利用map()遍歷數組,傳入一個參數當作x,并返回x*2

map中的函數以x為參數遍歷每個arr中的元素,*2之后自動返回,形成map1數組

2、當有多個參數時,需要給參數加括號:() =>表達式,例如遍歷數組輸出索引與值:

let arr=['data0','data1','data2'];
arr.forEach((value,index)=>   //通過forEach遍歷數組,傳入兩個參數value與index
  console.log(index+':'+value)
);

輸出如下:

3、當有多行表達式時,要用{}將函數包含成一塊:() =>{},并且使用塊語句時,函數不會自動返回值,需要使用return將值返回。

4、JavaScript的{}也可以表示一個對象,當使用箭頭函數返回對象時,為了與函數體區別需要將對象用()包含起來:() =>({}),否則會報錯,例如在react中使用setState方法,需要返回一個對象:

this.setState((prevState) =>({
  flag: !prevState.flag
}))

8、Promise函數

在使用接口調用時,有時需要根據調用返回是否成功分別去調用不同的函數,ES6提供了Promise函數來解決這個問題。在調用成功時,執行.then方法,失敗時執行.catch方法來分別處理不同情況,返回不同的數據。

例如定義一個檢查登陸的Promise方法,當傳入參數為true時登陸成功,回調函數為then,false失敗,調用catch:

    //定義promise函數
    let checkLog=function (flag) {    
     return new Promise(function(resolve,reject){
      if(flag){        //如果判定條件為真,執行resolve函數
       resolve({       //其括號內的參數作為結果返回
        status:1,
        info:"登陸成功"
       })
      }else{          //判定為假執行reject函數
       reject({
        status:0,
        info:"登陸失敗"
        }
       )
      }
     })
    };
    //使用promise函數
    checkLog(false).then(res=>{  //根據promise返回的不同值分別執行then或catch
     console.log(`成功信息:${res.info}`);
    }).catch(err=>{
     console.log(`錯誤信息:${err.info}`);
    })

當傳入true:當傳入false:

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

  • 詳解JavaScript ES6中的模板字符串
  • 淺談ES6 模板字符串的具體使用方法
  • ES6新特征數字、數組、字符串
  • ES6新特性之變量和字符串用法示例
  • JavaScript中ES6字符串擴展方法
  • JavaScript學習筆記之ES6數組方法
  • ES6使用Set數據結構實現數組的交集、并集、差集功能示例
  • ES6新特性七:數組的擴充詳解
  • ES5 ES6中Array對象去除重復項的方法總結
  • 淺談ES6新增的數組方法和對象
  • ES6中箭頭函數的定義與調用方式詳解

相關文章

  • ES6學習筆記之字符串、數組、對象、函數新增知識點實例分析

    ES6學習筆記之字符串、數組、對象、函數新增知識點實例分析

    本文實例講述了ES6學習筆記之字符串、數組、對象、函數新增知識點。分享給大家供大家參考,具體如下: 1、模板字符串 反引號`` 內用于輸入格式化的字符串文本,在``
    2020-01-22
  • springcloud如何使用dubbo開發rpc服務及調用

    springcloud如何使用dubbo開發rpc服務及調用

    這篇文章主要介紹了springcloud如何使用dubbo開發rpc服務及調用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考
    2020-01-22
  • 使用Python實現Wake On Lan遠程開機功能

    使用Python實現Wake On Lan遠程開機功能

    Wake-On-LAN簡稱WOL,是一種電源管理功能;如果存在網絡活動,則允許設備將操作系統從待機或休眠模式中喚醒。許多主板廠商支持IBM提出的網絡喚醒標準。該標準允許網
    2020-01-22
  • SpringSecurity 默認表單登錄頁展示流程源碼

    SpringSecurity 默認表單登錄頁展示流程源碼

    SpringSecurity 默認表單登錄頁展示流程源碼 本篇主要講解 SpringSecurity提供的默認表單登錄頁 它是如何展示的的流程, 涉及 1.FilterSecurityInterceptor,
    2020-01-22
  • java GUI編程之監聽操作實例分析

    java GUI編程之監聽操作實例分析

    本文實例講述了java GUI編程之監聽操作。分享給大家供大家參考,具體如下: 當點擊Frame中的component組件時,會產生相應的效果,但是相應的其必須進行監聽,確定是
    2020-01-22
  • JavaScript設計模型Iterator實例解析

    JavaScript設計模型Iterator實例解析

    這篇文章主要介紹了JavaScript設計模型Iterator實例解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 Iter
    2020-01-22
  • java GUI編程之paint繪制操作示例

    java GUI編程之paint繪制操作示例

    本文實例講述了java GUI編程之paint繪制操作。分享給大家供大家參考,具體如下: import java.awt.*; public class Testpint { public static void main(Stri
    2020-01-22
  • java GUI編程之布局控制器(Layout)實例分析

    java GUI編程之布局控制器(Layout)實例分析

    本文實例講述了java GUI編程之布局控制器(Layout)。分享給大家供大家參考,具體如下: 布局控制器,是用來系統自動分配各個component在window內部是怎么排布的;默
    2020-01-22
  • Vue設置長時間未操作登錄自動到期返回登錄頁

    Vue設置長時間未操作登錄自動到期返回登錄頁

    Vue設置長時間未操作登錄以后自動到期返回登錄頁 首先我們寫在main.js文件中 import routerUtil from "@/utils/routerutil";//先將js文件在main.js中引入 routerU
    2020-01-22
  • Python @property裝飾器原理解析

    Python @property裝飾器原理解析

    這篇文章主要介紹了Python @property裝飾器原理解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 1.通過@p
    2020-01-22

最新評論

老快3投注技巧