摘要:改動函數的改變不算太大,都是一些其他語言早就有的功能,而一直比較欠缺的,比如函數參數默認值,任意參數的表示法,最大的變化應該是支持箭頭函數其他語言稱之為表達式,一種對匿名函數的一種簡寫方式,以下來探討一下函數在中的一些改變默認參數任意參數操
ES6 functions改動
????ES6函數的改變不算太大,都是一些其他語言早就有的功能,而Javascript一直比較欠缺的,比如函數參數默認值,任意參數的表示法,最大的變化應該是支持箭頭函數(其他語言稱之為LAMBDA表達式),一種對匿名函數的一種簡寫方式,以下來探討一下函數在ES6中的一些改變:
1. 默認參數(default parameters) 2. 任意參數(rest parameters ...) 3. spread 操作符(...) 4. new.target 元屬性 5. 箭頭函數( => ) 6. 其他一些改動(miscellaneous)1.默認參數
????ES6之前一直是通過其他方法來模擬默認參數的,例如邏輯或||符號,ES6版本真正意義上支持這種便利的寫法。
// ES5模擬默認參數 function person(name, age) { name = name || "James"; age = age || "18"; console.log(name + " " + age); } // 一般情況下這種寫法是沒問題的,當邏輯或前面的值為falsy值,整個表達式返回后面的值 // 例如: person("Louis"); // ok person(); // ok person(undefined, 20); // ok person("baby", 0); // "baby 18" error, 0為falsy值
上面可以看出這種寫法是有一定問題的,各種JS庫給出了另一種寫法
function person(name, age) { if (typeof name === "undefined") { name = name || "James"; } if (typeof age === "undefined") { age = age || "18"; } console.log(name + " " + age); } person(undefined, 0); // ok "James 0"
ES6寫法
function person(name = "James", age = 18) { console.log(name + " " + age); } // 1各種寫法 默認參數出現在中間 function getRequest(url, timeout = 2000, callback) { // do something } gerRequest("/foo", undefined, function() { }); // 2默認參數表達式 let value = 5; function getValue() { return value++; } function add(first, second = getValue()) { return first + second; } add(3); // 8 add(3); // 9 add(1, 1); // 2 // 3后面參數引用前面參數 function add(first, second = first) { return first + second; } add(2); // 4 add(3, 4); // 7
默認參數TDZ(暫時死區)情況:
// 上面的第三種寫法,若寫成第一個參數引用第二個參數 function add(first = second, second) { return first + second; } add(1, 1); // ok 2 add(undefined, 4); // THROW AN ERROR 第二個參數未聲明就引用就會拋出錯誤 // 就相當于 let first = second; // error let second = 4;2.任意參數
????ES6任意參數用 ... 表示,任意參數和arguments之間的差別
ES5使用arguments參數來實現對象屬性拷貝:
function pick(object) { var result = Object.create(null); // 創建一個對象 // 從第二個參數開始 for (var i = 1, len = arguments.length; i < len; i++) { result[arguments[i]] = object[arguments[i]]; } return result; } // arguments將object也計入,所以除開第一個參數要減1 var book = { title: "understanding ES6", author: "Nicholas C.Zakes", year: 2016 }; var o = pick(book, "author", "year"); o.author; // "Nicholas C.Zakes" o.year; // 2016
上面的pick函數看上去不夠直觀,因為除第一個參數外不知道要添加幾個參數,使用新語法
function pick(object, ...keys) { var result = Object.create(null); // 創建一個對象 for (var i = 0, len = keys.length; i < len; i++) { result[keys[i]] = object[keys[i]]; } return result; } // keys將object不計入在其內 var book = { title: "understanding ES6", author: "Nicholas C.Zakes", year: 2016 }; var o = pick(book, "author", "year"); o.author; // "Nicholas C.Zakes" o.year; // 2016
使用rest parameters注意事項:
1.要將任意參數放到函數的最后,不能放在中間位置
2.不能用于對象字面量setter中
function pick(object, ...keys, last) { //... } // 語法錯誤 let object = { set name(...value) { // do something } }; // 語法錯誤3.spread操作符
spread操作符和rest parameters一樣,都使用 ... 表示,spread操作符允許我們將數組中的參數一個一個傳入函數中
例如:
// Math.max()函數, 一般可以加入任意個參數 Math.max(12, 13, 14, 15); // 15 // 以數組的形式 var arr = [1, 2, 3, 4]; Math.max.apply(null, arr); // 4 // 使用 "..." Math.max(...arr); // 4 // 還可以加入其它的一些參數 Math.max(...arr, 5, 10); // 10
將一個數組去重:
var arr = [1, 2, 2, 4, 4]; // 使用Set將重復的去掉,然后將set對象轉變為數組 var mySet = new Set(arr); // mySet {1, 2, 4} // 方法1,使用Array.from轉變為數組 // var arr = Array.from(mySet); // [1, 2, 4] // 方法2,使用spread操作符 var arr = [...arr]; // [1, 2, 4] // 方法3, 傳統forEach var arr2 = []; mySet.forEach(v => arr2.push(v));4.new.target元屬性
????函數內部有兩個方法 [[call]] 和 [[construct]] (箭頭函數沒有這個方法),當使用new 操作符時, 函數內部調用 [[construct]], 創建一個新實例,this指向這個實例; 不使用new 操作符時, 函數內部調用 [[call]]。
????判斷一個函數是否使用new操作符,ES5的方法:
function Person(name) { if (this instanceof Person) { this.name = name; } else { throw new Error("You must use new operator"); } } var p = new Person("James"); // ok var p = Person("James"); // error // 但是可以通過其他方式繞過這種錯誤 var notPerson = Person.call(p, "Nicholas"); // works
ES6 通過new.target 來判斷是否使用new,元屬性 是指一個提供目標相關額外信息(比如new)的非對象屬性。
function Person(name) { if (typeof new.target !== "undefined") { this.name = name; } else { throw new Errow("You must use new operator"); } } var p = new Person("James"); // ok var notPerson = Person.call(p, "Louis"); // error5.箭頭函數
箭頭函數有以下幾個方面的特點:
this, super, arguments和arguments的值由最近一個包含它的非箭頭函數定義。(No this, superm arguments and new.target bindings);
箭頭函數內部沒有 [[construct]]方法, 因此不能當作構造器,使用new操作符;
不存在原型(No prototype);
不能改變this, 在整個箭頭函數生命周期this值保持不變;
不存在arguments對象,不過包含它的函數存在,箭頭函數依靠命名參數和rest parameters;
不能擁有重復的命名參數,ES5只有嚴格模式下才不允許
1.箭頭函數語法
// 語法很簡單 let sum = (n1, n2) => n1 + n2; // 相當于 let sum = function(n1, n2) { return n1 + n2; }; let getTempItem = id => ({ id: id, name: "Temp" }); // 相當于 let getTempItem = function(id) { return { id: id, name: "Temp" }; };
2.沒有this綁定
let PageHandler = { id: "123456", init: function() { document.addEventListener("click", function(event) { this.doSomething(event.type); // error }, false); }, doSomething: function(type) { console.log("Handling " + type + " for " + this.id); } }; // init函數中的this.doSomething,this指向的是函數內部document對象, // 而不是PageHandler對象
使用箭頭函數改寫:
let PageHandler = { id: "123456", init: function() { document.addEventListener("click", event => this.doSomething(evnet.type) }, false); }, doSomething: function(type) { console.log("Handling " + type + " for " + this.id); } }; // 此處箭頭函數this指向包含它的函數,即init,init為PageHandler的方法, // this指向PageHandler對象實例
3.不能使用new
var MyType = () => {}; var obj = new MyType(); // Error
4.沒有arguments對象
箭頭函數沒有arguments對象,但是可以使用包含函數中的arguments對象
function createArrowFunctionReturningFirstArg() { // arguments 為 createArrowFunctionReturningFirstArg中的對象 return () => arguments[0]; } var arrowFunction = createArrowFunctionReturningFirstArg(10); arrFunction(); // 106.其他(misllanceous)
其他的一些變化:
添加name屬性用來判斷函數名,用于調試;
規范塊級別函數(block-level functions),當執行流結束塊級別函數退出,塊級別函數提升變量到塊頂部;
對尾部調用(Tail call, 值一個函數返回另一個函數對象)性能進行優化,尤其是都遞歸函數性能提升很大
總結
ES6對默認參數的支持;
任意參數和spread操作符
箭頭函數
????總體來說,這些改動都是為編寫程序提供了極大的便利,不用再使用workaround來解決語法存在的問題,整體來講,更加符合語言的書寫習慣。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90988.html
摘要:明確規定,如果區塊中存在和命令,這個區塊對這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會報錯。暫時性死區意味著不再是一個百分百的安全操作了不允許重復聲明不允許在相同作用域內,重復聲明同一個變量。 let,const共同擁有的特點 提供了代碼塊級作用域;(代碼塊是用{}來實現的) 不存在變量提升,先聲明再使用; 存在暫時性死區; 不允許重復聲明; ...
摘要:外層作用域不報錯正常輸出塊級作用域與函數聲明規定,函數只能在頂層作用域和函數作用域之中聲明,不能在塊級作用域聲明。規定,塊級作用域之中,函數聲明語句的行為類似于,在塊級作用域之外不可引用。同時,函數聲明還會提升到所在的塊級作用域的頭部。 前言:最近開始看阮一峰老師的《ECMAScript 6 入門》(以下簡稱原...
摘要:年月,的創造者公司,決定將提交給國際標準化組織,希望這種語言能夠成為國際標準。這表示外層代碼塊不受內層代碼塊的影響。也可以運用于函數及其他文中就簡單介紹這么多,想更加了解新特性的可以自尋查看一下阮一峰的一本入門 ES6新特性 最近在項目中遇到了很多ES6的語法,遇到了不少坑坑洼洼,因此,在這里就簡單介紹一下ES6中的一些新特性 如果想真正的了解ES6和ES5有什么不同,這里推薦看一下...
閱讀 2637·2023-04-26 02:17
閱讀 1610·2021-11-24 09:39
閱讀 1070·2021-11-18 13:13
閱讀 2598·2021-09-02 15:11
閱讀 2770·2019-08-30 15:48
閱讀 3406·2019-08-30 14:00
閱讀 2431·2019-08-29 13:43
閱讀 658·2019-08-29 13:07