1. 程式人生 > >es5和es6的函式區別,陣列區別

es5和es6的函式區別,陣列區別

一、函式擴充套件
    1. rest引數
        es6引入了rest引數(形式:'...args'),主要用於接受函式多餘的引數,因此我們就不需要arguments這個物件了,rest引數對應的是一個數組,將多餘的引數放進這個陣列
        注意:rest引數必須是尾引數,rest引數後邊不能再有別的引數,否則會報錯
        陣列的解構賦值與rest引數配合
    2. 箭頭函式
        es6規定允許使用箭頭(=>)定義函式
            let f2=b=>console.log(b);
            (b=>console.log(b))(3);//3
        如果箭頭函式不需要引數或有多個引數,需要使用一個小括號將引數包裹
        無參:
            let f2=()=>console.log(5);
        很多引數:
            let f4=(a,b,c)=>console.log(a+b+c);
        如果箭頭函式函式體內有多條語句,需要使用大括號括起來,並且使用return語句返回內容
        大括號被編譯器解析為程式碼塊,所以如果箭頭函式只返回一個物件,使用小括號將該物件括起來,就不會被解析為程式碼塊
        箭頭函式與變數解構結合使用
        箭頭函式可以用於簡化回撥函式
            let arr=[5,6,7,8].map(x=>x*x);
        rest引數與箭頭函式結合
        注意事項:
            1) 函式體內的this物件,指向定義時所在的物件,而不是呼叫時所在的物件,箭頭函式本身沒有自己的this,所以箭頭函式通過call,bind,apply呼叫時傳的this也是沒有效果的
                使用箭頭函式作為事件處理函式,this不會指向事件源,而是指向箭頭函式定義時所在的物件
                     function Fun3() {
                            this.a=1;
                            this.b=2;
                            box2.onclick=function () {
                                console.log(this);//box2
                            };
                            box3.onclick=function () {
                                console.log(this);//Fun3
                            }.bind(this);
                            box4.onclick=()=>{
                                console.log(this);//Fun3
                            }
                        }
                     var obj2=new Fun3();
            2) 箭頭函式不可以作為建構函式,就是說不可以使用new命令呼叫箭頭函式,會報錯
            3) 箭頭函式中沒有arguments物件,不可以被呼叫,如果需要,使用rest引數
        箭頭函式的巢狀:
            let fun=()=>({f:()=>({s:()=>console.log(11)})});
            fun().f().s();//11
二、陣列擴充套件
    1. Array.from()
        用於將兩類物件轉為陣列:類陣列物件(array-like-object)和可遍歷物件(iterable)
            let divs=document.getElementsByTagName('div');
            var fArr=Array.from(divs);
            var arr2=Array.from(arguments);
        from方法還可以接受第二個引數,作用類似於map方法,用來對每一個元素進行處理,將處理結果放進返回的陣列中,對映
            from方法可以將各種值轉為陣列,還有map功能,只要我們有一個原始的資料結構,就可以先對他進行處理轉為一個標準的陣列,然後就可以使用陣列的各種方法
        from可以將字串轉為陣列,然後返回字串的長度,因為from可以處理各種Unicode編碼字元,可以避免js將大於\uffff的Unicode字元算作兩個字元的bug
    2. Array.of()
        用於將一組值轉換為陣列,這個方法的主要目的是彌補陣列建構函式Array()的不足之處,因為Array()函式會因為引數個數的不同處理有所差異
        Array() 建構函式只有引數多於2的時候才能創造一個正常的陣列
        Array.of() 可以替代array(),Array.of 總是返回引數值組成的新陣列,如果沒有引數就是一個空陣列
    3. copyWithin()
        陣列例項物件的方法,在當前陣列內部,將指定位置的成員複製到其他位置(會覆蓋原有的成員),然後返回當前陣列,這個方法會修改當前陣列
        語法:
            [1,2,3,4].copyWithin(target,start,end);
            target:必須寫,從這個位置開始替換
            start:可選,從該位置開始讀取,預設是0,負值表示倒著數 ,包括當前位置
            end:可選,到該位置結束,預設等於陣列長度,負值表示倒序,不包含該位置
    4. find()和findIndex()
        陣列例項的方法find,用於找出第一個符合條件的成員,引數是一個回撥函式,所有元素依次執行該回調,直到找到第一個返回值為true的成員,將該成員返回,如果沒有找到返回undefined
        find() 方法還可以接收三個引數,依次是當前的值,下標,原陣列
        陣列例項的方法findIndex(),用法與find一樣,返回第一個符合條件的元素的下標,如果沒有符合的元素,返回-1
    5. fill()
        使用給定的值,填充一個數組,fill方法用於空陣列初始化非常方便,陣列中已有的元素全都會抹掉
        fill方法還可以接收第二個和第三個引數,用於指定填充的位置
    6. includes()
        該方法返回一個布林值,表示某個陣列是否包含給定的值,與字串的includes方法類似
        第二個引數表示開始搜尋的起始位置,預設是0,如果是負數表示倒序,如果超出陣列長度範圍,就會認為從0開始
    7. 陣列的空位
        陣列的空位指的是陣列的某個位置上沒有任何值,new Array(3)//[,,];
        注意:空位不是undefined,如果一個位置是undefined,就表示該位置有值
        在es5當中,對空位的處理很不一致,大多數情況會直接跳過忽略空位
            forEach(),filter(),every(),some()等都會跳過空位
            map() 會跳過空位,但是會保留這個值
            join() 和 toString() 會將空位視為undefined,而undefined 和 null 會被處理為空字串
        但是在es6中,所有的空位都是undefined
        由於空位的處理規則不一致,所以儘量避免出現空位
       

相關推薦

es5es6函式區別陣列區別

一、函式擴充套件     1. rest引數         es6引入了rest引數(形式:'...args'),主要用於接受函式多餘的引數,因此我們就不需要arguments這個物件了,rest引數對應的是一個數組,將多餘的引數放進這個陣列         注意:rest

52_RN筆記10_自定義元件在ES5ES6區別

一,ES6自定義元件的一般寫法 //1,匯入資源 import React, { Component } from 'react'; import { Text, View } from 'react-native'; //2,自定義元件 class Greeting

sizeofstrlen的區別陣列指標的區別

sizeof和strlen的區別: 1.sizeof是個關鍵字,因此,sizeof後面是變數名時可以不加括號,而strlen是個函式,必須加括號 2.sizeof是判斷引數所佔的記憶體大小,引數可以是型別,函式,而strlen有點像計數器,從某個記憶體地址開始計數,碰到"\

ES5ES6區別

   (1)      var  宣告變數函式作用域     let   宣告變數        有{}作用域(塊級作用域)不能重複宣告代替封閉空間解決I值的問題const 宣告常量常量不能重新賦值常量不能二次修改 初始化的時候 必須都設定值!(2)        ES6 需

ES5ES6區別淺析

前言 JavaScript一種動態型別、弱型別、基於原型的客戶端指令碼語言,用來給HTML網頁增加動態功能,具體概念不做過多的說明。這裡說一下JavaScript的主要組成: 【組成一】 ECMAScript ECMAScript是JS的核心,它規定了語言

js類的繼承es5es6的方法

type 類的繼承 構造函數 需要 tor for UNC ext ati 存在的差異:1. 私有數據繼承差異  es5:執行父級構造函數並且將this指向子級  es6:在構造函數內部執行super方法,系統會自動執行父級,並將this指向子級2. 共有數據(原型鏈方法)

es6 函式擴充套件引數作用域箭頭函式

函式的擴充套件 函式引數的預設值 基本用法 ES6 之前,不能直接為函式的引數指定預設值,只能採用變通的方法。 function log(x, y = 'World') { console.log(x, y); } log('Hello

系統呼叫函式及API的區別

   在寫程式的過程中,像MFC,VC++這些程式設計,都會涉及到函式的呼叫,有庫函式也有系統函式,下面看一看它們的區別!!            系統呼叫(system call)和庫函式呼叫(Library function call)的區別?            

【Linux/OS/Network】fork函式vfork函式的分析及區別

fork和vfork相關程式碼見: fork函式 標頭檔案:#include《unistd.h》 函式原型:pid_t fork(void); 一個現有程序可以呼叫fork建立一個新程序。 返回值:子程序中返回0,父

合併兩個陣列並去重(ES5ES6兩種方式實現)

 ES6實現方式 let arr1 = [1, 1, 2, 3, 6, 9, 5, 5, 4] let arr2 = [1, 2, 5, 4, 9, 7, 7, 8, 8] f

C++學習筆記(三)--函式引數陣列函式指標const,二維陣列函式遞迴函式指標

C++ Primer Plus學習筆記之三 每一塊寫了一個詳細闡釋的demo,具體使用方法以及注意事項在程式碼裡都有備註 第七章函式--C++的模組程式設計,總計分為以下幾塊-- 函式引數

【學習Lua】ipairs函式pairs函式之間有什麼區別

變長引數(variable number of arguments) Lua函式中傳遞引數可以使用(…)來表示不確定數量的引數。一個函式要訪問變長引數,需要藉由{…}形式來訪問,此時變長引數被轉化為了一個數組。 function add(...)

Oracle decodenvl 函式的用法及區別

Decodedecode(條件,值1,翻譯值1,值2,翻譯值2,...,預設值)    該函式與程式中的 If...else if...else 意義一樣NVL格式:NVL( string1, replace_with)功能:如果string1為NULL,則NVL函式返回re

js this 指向(es5)es6箭頭函數this指向問題總結(鄒文豐版)

一個 hat 登入 new this fun body 網上 情況 本文純屬自己結合網上文章總結,有問題和不同想法歡迎留言指正/********************簡單小例子********************/ var test =function ()

ES5ES6及繼承機制

這幾天在學習react的時候學習到ES6的 class extends 繼承方式,就複習一下ES5的繼承機制,並整理下來。 ES5繼承機制 ES6繼承機制 兩者的區別總結 ES5繼承機制 在js萬物皆物件,但事還是區分普通物件和函式物件,那大家需要知道是隻有函

ES5ES6新的運算元組的方法(常用)

// 普通的for迴圈// var arr = ['張飛', '趙雲', '馬超', '劉備']// for (var i = 0; i < arr.length; i++) {// console.log(arr[i])// }   // forEach方法:// 讓陣列中的每個元素都執

函式函式判定Jensen 不等式的理解記憶

最近看到 EM 演算法,其中的證明有用到琴生不等式,在這裡做一個筆記。 在剛開始學習凸函式和凹函式的時候,我們會被凸函式和凹函式的命名所困擾,命名看起來是凹的,一些教材上卻偏偏說它是凸函式。其實這個只是一個定義,它叫什麼,並不影響函式本身的性質。就像我在 B 站上看到有些人戲稱三國時期的

ES5ES6變數宣告比較

ES5變數宣告之var: 1.var宣告的變數,會出現宣告提前的問題,內層變數覆蓋外層變數 例如:var tmp = now Date(); function test() { console.log(tmp); // undefined 宣告提前     if(true){

ES5ES6那些你必須知道的事兒(一)

ES5和ES6那些你必須知道的事兒 ES5新增的東西 一、陣列方法   1、forEach       用途:遍歷,迴圈     對於空陣列不會執行回撥函式 //用法 array.forEach( function(currentValue, index, ar

ES5ES6那些你必須知道的事兒(二)

ES5和ES6那些你必須知道的事兒 ES5新增的東西 二、物件方法   1、Object.getPrototypeOf(object)     返回物件的原型 function Pasta(grain, width) { this.grain = grain; this.wid