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
由於空位的處理規則不一致,所以儘量避免出現空位
相關推薦
es5和es6的函式區別,陣列區別
一、函式擴充套件 1. rest引數 es6引入了rest引數(形式:'...args'),主要用於接受函式多餘的引數,因此我們就不需要arguments這個物件了,rest引數對應的是一個數組,將多餘的引數放進這個陣列 注意:rest
52_RN筆記10_自定義元件在ES5和ES6的區別
一,ES6自定義元件的一般寫法 //1,匯入資源 import React, { Component } from 'react'; import { Text, View } from 'react-native'; //2,自定義元件 class Greeting
sizeof和strlen的區別,陣列和指標的區別
sizeof和strlen的區別: 1.sizeof是個關鍵字,因此,sizeof後面是變數名時可以不加括號,而strlen是個函式,必須加括號 2.sizeof是判斷引數所佔的記憶體大小,引數可以是型別,函式,而strlen有點像計數器,從某個記憶體地址開始計數,碰到"\
ES5和ES6的區別
(1) var 宣告變數函式作用域 let 宣告變數 有{}作用域(塊級作用域)不能重複宣告代替封閉空間解決I值的問題const 宣告常量常量不能重新賦值常量不能二次修改 初始化的時候 必須都設定值!(2) ES6 需
ES5和ES6區別淺析
前言 JavaScript一種動態型別、弱型別、基於原型的客戶端指令碼語言,用來給HTML網頁增加動態功能,具體概念不做過多的說明。這裡說一下JavaScript的主要組成: 【組成一】 ECMAScript ECMAScript是JS的核心,它規定了語言
js類的繼承,es5和es6的方法
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,父
合併兩個陣列並去重(ES5和ES6兩種方式實現)
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 decode和nvl 函式的用法及區別?
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 ()
ES5和ES6及繼承機制
這幾天在學習react的時候學習到ES6的 class extends 繼承方式,就複習一下ES5的繼承機制,並整理下來。 ES5繼承機制 ES6繼承機制 兩者的區別總結 ES5繼承機制 在js萬物皆物件,但事還是區分普通物件和函式物件,那大家需要知道是隻有函
ES5和ES6新的運算元組的方法(常用)
// 普通的for迴圈// var arr = ['張飛', '趙雲', '馬超', '劉備']// for (var i = 0; i < arr.length; i++) {// console.log(arr[i])// } // forEach方法:// 讓陣列中的每個元素都執
凸函式和凹函式判定,Jensen 不等式的理解和記憶
最近看到 EM 演算法,其中的證明有用到琴生不等式,在這裡做一個筆記。 在剛開始學習凸函式和凹函式的時候,我們會被凸函式和凹函式的命名所困擾,命名看起來是凹的,一些教材上卻偏偏說它是凸函式。其實這個只是一個定義,它叫什麼,並不影響函式本身的性質。就像我在 B 站上看到有些人戲稱三國時期的
ES5和ES6變數宣告比較
ES5變數宣告之var: 1.var宣告的變數,會出現宣告提前的問題,內層變數覆蓋外層變數 例如:var tmp = now Date(); function test() { console.log(tmp); // undefined 宣告提前 if(true){
ES5和ES6那些你必須知道的事兒(一)
ES5和ES6那些你必須知道的事兒 ES5新增的東西 一、陣列方法 1、forEach 用途:遍歷,迴圈 對於空陣列不會執行回撥函式 //用法 array.forEach( function(currentValue, index, ar
ES5和ES6那些你必須知道的事兒(二)
ES5和ES6那些你必須知道的事兒 ES5新增的東西 二、物件方法 1、Object.getPrototypeOf(object) 返回物件的原型 function Pasta(grain, width) { this.grain = grain; this.wid