摘要:返回布爾值標簽?zāi)0蹇梢跃o跟一個函數(shù)名后邊,該函數(shù)將被調(diào)用來處理這個模板字符串。其它情況下返回值為在內(nèi)部,整數(shù)和浮點數(shù)使用同樣的存儲方法,所以和被視為同一個值。
簡介
ES6目標,讓JavaScript變成一個企業(yè)級的開發(fā)語言,不僅僅限制與前端頁面的腳本語言。
標準(Standard): 用于定義與其他事物區(qū)別的一套規(guī)則 實現(xiàn)(Implementation): 某個標準的具體實施/真實實踐編譯
服務(wù)端使用 babel 編譯
構(gòu)建工具fis使用
插件:fis-parser-babel2 編譯ES6
fis.match("**.ts", { parser: fis.plugin("babel2"), rExt: ".js" });
TypeScript與babel編譯有區(qū)別:
例如:對一個類的編譯TypeScript編譯的結(jié)果是一個閉包類,babel編譯的結(jié)果是一個安全類.
function _classCallCheck( instance, Constructor ) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Person = function Person() { _classCallCheck(this, Person); };
瀏覽器端編譯traceur庫來編譯.
traceur庫,引入兩個庫:traceur.js 和 treaceur-bootstrap.js
寫 let&const let
let聲明一個塊級作用域,并且可以初始化該變量。用法與var類似。只能在所在的代碼塊內(nèi)有效。
塊作用域:{}構(gòu)成的一個代碼庫處的作用域叫做塊作用域。
let 允許吧變量的作用域限制在塊級域中。與var 不同的是:var聲明變量要么是全局的,要么是函數(shù)級的,而無法是塊級的。
典型應(yīng)用:for循環(huán)中的計數(shù)器
let定義的變量,會在塊作用域保留下來,訪問的就是當(dāng)前循環(huán)的變量值。
for ( let j=0; j<4; j++ ) { } console.log(j); // error 報錯。
for(let i = 0; i < 5; i++){ setTimeout(function(){ console.log(i); }, i * 100); }
作用域規(guī)則
用let定義的變量的作用域是定義它們的塊內(nèi),以及包含在這個塊中的子塊
與var區(qū)別,是否可以有塊級概念,是否有存在變量提升
function test () { let a = 10; if ( true ) { let a = 20; console.log(a); // 20 } console.log(a); // 10 } test();
不存在變量提升
console.log(b); // undefined console.log(a); // 報錯ReferenceError let a = 10; var b = 10;
function foo(){ a = 20; // 報錯 ReferenceError console.log(a); let a = 10; console.log(a); } foo();
let 的暫存死區(qū)
在同一個函數(shù)或同一個作用域中的let重復(fù)定義一個變量將引入TypeError
注意:switch中聲明的變量。
if ( true ) { let a; let a; // TypeError thrown. }
如果塊中存在let 和const。 凡是在聲明之前就使用這些變量,就會報錯。
let聲明之前,該變量都是不可用的。稱之為:暫時性死區(qū)(temproal dead zone簡稱 TDZ)
if (true) { // TDZ開始 a = 10; // ReferenceError console.log(tmp); // ReferenceError let a; // TDZ結(jié)束 console.log(tmp); // undefined a = 100; console.log(tmp); // 100 }
ES6中的TDZ 像是運行時的檢查而不是語法聲明上的概念.
if(true){ setTimeout(function(){ console.log(x); // 1 }); let x = 1; }
let特點:
具有塊級作用域
沒有變量提升
不允許重復(fù)聲明
具有暫時性死亡區(qū)
為了不出發(fā)死亡區(qū),必須,變量先聲明,后使用的規(guī)定。
let聲明的全局變量并不是全局對象的屬性
let聲明的變量知道控制流到達該變量被定義的代碼行時才會被裝載,所以在到達之前會使用該變量會觸發(fā)錯誤,也就是所說的暫時性死亡區(qū)。沒有分為預(yù)解析階段。
塊級作用域的意義:
ES5中,只有全局作用域和函數(shù)作用域,沒有塊級作用域。
缺點:
1:內(nèi)存變量可能會覆蓋外層變量。
2:用來計數(shù)的循環(huán)變量泄漏為全局變量。(循環(huán)內(nèi)變量過度共享)
const聲明一個只讀的常量。 一旦聲明,常量的值就不可更改。
意味著,const一旦聲明常量,就必須立即初始化,不可留到以后賦值。
語法:const key = value;
在定義常量的前面,不能訪問到常量,因此一般都將常量定義在文件的最前面。
例如:require() 模塊的時候使用。
const http = require("http");
常量不能被重復(fù)定義,為了保證常量定義使用的時候的安全性。
const 和 let 的區(qū)別:
const具有l(wèi)et的所有特性,比let更加嚴格,不可以被重復(fù)定義(賦值)。
const 只是保證變量名指向的地址不變,并不保證該地址的數(shù)據(jù)不變。所以將一個對象聲明為常量必須非常小心。
const foo = {}; foo.k1 = 100; console.log( foo.k1 ); foo = {}; // TypeError: "foo" is read-only // 常量foo 儲存的是一個地址,這個地址指向一個對象。不可變的只是這個地址,即不能把foo指向另一個地址,但是對象本身是可變的,所以依然可以為其添加新的屬性。
Objcet.freeze()
作用:凍結(jié)對象(不可為對象添加屬性和和方法)
參數(shù):被凍結(jié)的對象
const foo = {} Object.freeze(foo); // 常規(guī)模式時,下面一行不起作用, 忽略添加 // 嚴格模式時,該行會報錯 foo.k1 = 100; console.log(foo);解構(gòu)賦值
結(jié)構(gòu)的作用是可以快速取得數(shù)組或?qū)ο螽?dāng)中的元素或?qū)傩?,而無需使用arr[x]或者obj[key]等傳統(tǒng)方式進行賦值.
數(shù)組的結(jié)構(gòu)賦值解構(gòu):從數(shù)組和對象中提取值,對變量進行賦值。
基本用法:
let [a, b, c] = [1, 2, 3]; // 從數(shù)組中提取值,按照對應(yīng)位置,對變量賦值。 // 這種寫法,本質(zhì)上屬于“模式匹配”。 只要等號兩邊的模式相同,左右的變量就會賦予對應(yīng)的值。 let [foo, [[bar], baz]] = [1, [[10], 100]]; let [x, y, ...z] = ["a", "b", "c", "d"]; console.log(x,y,z); // a b ["c", "d"]
如果解構(gòu)不成功,變量值為undefiend。
let [d] = []; // undefined let [e, f] = [1]; // 1 undefined
不完全解構(gòu): 等號左邊的模式,只匹配一部分等號右邊的數(shù)組。
let [x, y] = [1, 2, 3]; console.log(x, y); // 1 2 let [a, [b], c] = [1, [2, 3], 4]; console.log(a, b, c); // 1 2 4
等號的右邊不是數(shù)組,(嚴格的說,不是可遍歷的結(jié)構(gòu)),會報錯。
// 報錯 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {}; // 轉(zhuǎn)為對象以后不具備Iterator接口(前面5個表達式), 本身就不具備Iterator接口(最后一個表達式)
只要某種數(shù)據(jù)結(jié)構(gòu)具有Iterator接口,都可以采用數(shù)組形式的解構(gòu)賦值。 (例如:函數(shù)執(zhí)行之后的返回值)
默認值
解構(gòu)賦值允許設(shè)置默認值
let [a = 100] = []; console.log(a); // 100
ES6內(nèi)部使用嚴格相等 運算符(===),判斷一個位置是否有值。如果一個數(shù)組成員不嚴格等于undefeind,默認值不會生效。
let [a = 1] = [undefined]; let [b = 10] = [null]; let [c = 100] = [NaN]; console.log(a, b, c); // 1 null NaN
如果默認值是一個表達式,這個表達式是惰性求值(只有在用到的時候才會求值)。
function fn () { console.log("a"); } let [x = fn()] = [1]; console.log(x); // 1 // fn(); 函數(shù)不會執(zhí)行
默認值可以引用其它解構(gòu)賦值的變量
默認值可以引用解構(gòu)賦值的其它變量,但該變量必須已經(jīng)聲明,如果不聲明,將會報錯。
let [x = 1, y = x] = []; // x = 1 y = 1 let [x = y, y = 1] = []; // ReferenceError // x用到默認值y時,y還沒有聲明。
最為常用的地方是:函數(shù)參數(shù)的arguments類數(shù)組對象的解構(gòu)賦值。
對象的解構(gòu)賦值對象的解構(gòu)與數(shù)組有一個重要的不同之處,數(shù)組的元素是按次序排序,變量的取值由它的位置決定的,而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。
let {a, b} = {b: 10, a: 100}; console.log(a, b); // 10 100 let { c } = {d: 1000, e: 100 } console.log(c); // undefined
對象的解構(gòu)賦值的內(nèi)部機制:先找到同名屬性,然后再賦值給對應(yīng)的變量。真被賦值的是后者,而不是前者。
let {foo: baz} = {foo: "aaa", bar: "bbb"} console.log(baz); // aaa console.log(foo); // ReferenceError // 被賦值的是變量baz,而不是模式foo
默認值
默認值生效的條件:對象的屬性值嚴格等于undefined。
let {x = 3} = {x: undefined} // x = 3; let {y = 10} = {y: null} console.log(x, y); // 3 null
如果解構(gòu)失敗,變量值等于undefined
字符串的解構(gòu)賦值字符串的解構(gòu)賦值本質(zhì):字符串被轉(zhuǎn)為類數(shù)組對象,類數(shù)組對象中有l(wèi)ength屬性,可以有Iterator接口,可以被遍歷。
const [a, b, c, d, e] = "hello"; console.log(a, b, c, d, e); // h e l l o數(shù)值和布爾值的解構(gòu)賦值
需要指定包裝對象toString
解構(gòu)規(guī)則:等號右邊的值不是對象,就先將其轉(zhuǎn)為對象。 undefind 和 null 無法轉(zhuǎn)為對象,對其二者解構(gòu)賦值,都會報錯。
let {toString: s} = 10; console.log( s === Number.prototype.toString ); // true console.log(s); // function toString() { [native code] } let { toString: t } = true; console.log(t); // function toString() { [native code] }函數(shù)參數(shù)解構(gòu)賦值
可以解構(gòu)賦值,可以使用默認值
[[1, 2], [3, 4]].map( ([a, b]) => a + b ); // 3 7 [[, 2], [, 4]].map(function ( [a = 10, b] ) { return a + b; });圓括號問題
對于編譯器來說,一個式子到底是模式,,還是表達式,沒有辦法從一開始就知道,必須解析到(或解析不到)等號才能知道。
問題:模式中出現(xiàn)的圓括號怎么處理。
解析規(guī)則:只要有可能導(dǎo)致解構(gòu)的歧義,就不得使用圓括號。
建議:只要有可能,就不要再模式中放置圓括號。能不使用,就不使用圓括號。
不能使用圓括號的情況
變量聲明語句中,不能帶有圓括號
// 全部報錯 var [(a)] = [1]; var {x: (c)} = {}; var ({x: c}) = {}; var {(x: c)} = {}; var {(x): c} = {};} var { o: ({ p: p }) } = { o: { p: 2 } }; // 都是變量聲明語句,模式不能使用圓括號。
函數(shù)參數(shù)中,模式不能帶有圓括號。
// 報錯 function f([(z)]) { return z; }
賦值語句中,不能將整個模式,或嵌套模式中一層,放在圓括號之中。
// 全部報錯 ({ p: a }) = { p: 42 }; ([a]) = [5];
可以使用圓括號的情況:
賦值語句的非模式部分,可以使用圓括號。
[(b)] = [3]; // 正確 // 模式是取數(shù)組的第一個成員,跟圓括號無關(guān) ({ p: (d) } = {}); // 正確 // 模式是p,而不是d; [(parseInt.prop)] = [3]; // 正確 // 模式是取數(shù)組的第一個成員,跟圓括號無關(guān)用途
交換變量的值
[x, y] = [y, x]
從函數(shù)返回多個值
函數(shù)只能返回一個值,如果要返回多個值,只能將它們放在數(shù)組或?qū)ο罄锓祷亍?/p>
// 返回一個數(shù)組 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返回一個對象 function example() { return { foo: 1, bar: 2 }; } var { foo, bar } = example();
函數(shù)參數(shù)定義
將一組參數(shù)與變量名對應(yīng)。
// 參數(shù)是一組有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 參數(shù)是一組無次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});
提取JSON數(shù)據(jù)
提取JSON對象中的數(shù)據(jù)
函數(shù)參數(shù)的默認值遍歷Map結(jié)構(gòu)
輸入模塊的指定方法
加載模塊時,往往需要指定輸入那些方法。
const { SourceMapConsumer, SourceNode } = require("source-map");String的擴展 satrtsWith
str.starsWith(str1, num);
判斷字符串以指定參數(shù)開頭
參數(shù)1:開頭的字符
參數(shù)2:可選,指定開始查找的索引位置
返回布爾值
str.endWith(str1, num);
判斷字符串以指定參數(shù)結(jié)束
參數(shù)1:結(jié)束的字符子串
參數(shù)2:可選,指定開始查找的索引位置
返回布爾值
str.includes(str1, num);
判斷指定的參數(shù)字符串是否包含在字符串中。
參數(shù)1:被查詢的字符串
參數(shù)2:可選,從那邊開始查找索引位置。
返回布爾值
``可以緊跟一個函數(shù)名后邊,該函數(shù)將被調(diào)用來處理這個模板字符串。 稱之為:“標簽?zāi)0濉?tagged template);
alert`123`; alert(123); // 等同
標簽?zāi)0鍖嵸|(zhì)并不是模板,而是函數(shù)的調(diào)用的一種特殊形式?!皹撕灐敝傅木褪呛瘮?shù),緊跟在后面的模板字符串就是它的參數(shù)。
如果模板字符里面有變量,就不在是簡單的調(diào)用,而是會將模板字符串先處理成多個參數(shù),再調(diào)用函數(shù)。
模板字符串語法:${表達式}
需要通過``來聲明字符串,才會生效。
如果使用""單引號聲明沒有效果。并不會解析模板中的表達式。
//let num = `十`; let num = `5`; let intro = `repeat笑一笑,${5 * 2}年少
`;
重復(fù)字符串
參數(shù):指定重復(fù)的次數(shù)
let num = "10"; let intro = `raw笑一笑,${num * 2}年少
`; let introT = intro.repeat(2); console.log(intro); console.log(introT);
返回原始字符串,該方法不會將字符串中的轉(zhuǎn)義字符轉(zhuǎn)義
這個方法特殊,不需要使用()調(diào)用.
是String底下的一個方法,直接通過String調(diào)用即可。
console.log("success 1"); let str = String.raw`success 1`; console.log(str);Number的擴展
ES6在Number對象上,提供了Number.isFinite() 和 Number.isNaN();兩個方法。
用來檢查Infinite和NaN這兩個特殊值。
檢查是否是作為數(shù)字存在,對于不存在或者是NaN返回值為:false,對于數(shù)字返回值為:true
Number.isFinite(15); // true Number.isFinite(0.8); // true Number.isFinite(NaN); // false Number.isFinite(Infinity); // false Number.isFinite(-Infinity); // false Number.isFinite("foo"); // false Number.isFinite("15"); // false Number.isFinite(true); // false
// 實現(xiàn)方式 (function (global) { var global_isFinite = global.isFinite; Object.defineProperty(Number, "isFinite", { value: function isFinite(value) { return typeof value === "number" && global_isFinite(value); }, configurable: true, enumerable: false, writable: true }); })(this);isNaN();
當(dāng)參數(shù)是NaN的時候,才返回true,其它情況都返回false。
Number.isNaN(NaN) // true Number.isNaN(15) // false Number.isNaN("15") // false Number.isNaN(true) // false Number.isNaN(9/NaN) // true Number.isNaN("true"/0) // true Number.isNaN("true"/"true") // true
// 實現(xiàn)方式 (function (global) { var global_isNaN = global.isNaN; Object.defineProperty(Number, "isNaN", { value: function isNaN(value) { return typeof value === "number" && global_isNaN(value); }, configurable: true, enumerable: false, writable: true }); })(this);
與傳統(tǒng)的全局方法isFinte()方法isNaN()的區(qū)別:
傳統(tǒng)方法先調(diào)用Number()將非數(shù)值的值轉(zhuǎn)為數(shù)值,再進行判斷。
Number.isFinte()和isNaN();只對數(shù)值有效,非數(shù)值一律返回false.
ES6將全局方法parseInt();和parseFloat();方法 移植到Number對象上,行為完全保持不變。
目的:逐漸減少全局性方法,是的語言逐步模塊化。
isInteger當(dāng)參數(shù)是正整數(shù),負整數(shù),0,-0,的時候返回值為:true。其它情況下返回值為:false
在JavaScript內(nèi)部,整數(shù)和浮點數(shù)使用同樣的存儲方法,所以3和3.0被視為同一個值。
Math.sign();用來判斷一個數(shù)到底是整數(shù),負數(shù),還是零。
返回值:
參數(shù)為整數(shù),返回+1
參數(shù)為負數(shù),返回-1
參數(shù)為0 ,返回0
參數(shù)為-0,返回-0
參數(shù)為其它值,返回NaN
Math.sign(""); // NaN
Math.sign("a"); // NaN
Math.sign(NaN); // NaN
Math.sign(false); // NaN
Math.sign(undefined); // NaN
Math.sign(0); // 0
Math.sign(-0); // -0
Math.sign(-2); // -1
Math.sign(+2); // 1
// 模擬 Math.sign(); 方法 Math.sign = Math.sign || function ( x ) { x = +x; if ( x === 0 || isNaN(x) ) { return x; } return x > 0 ? 1 : 1; }trunc
Math.trunc(); 用于去除一個數(shù)的小數(shù)部分,返回 整數(shù)部分。
非數(shù)值,Math.trunc()內(nèi)部先使用Number();將其轉(zhuǎn)為數(shù)值。
Math.trunc(123.456); // 123
對于空值和無法截取整數(shù)的值,返回NaN
Math.trunc(NaN); // NaN Math.trunc("hello"); // NaN // 模擬Math.trunc(); Math.trunc = Math.trunc || function ( x ) { return x < 0 ? Math.ceil(x) : Math.floor(x); }Array的擴展 form
作用:將類數(shù)組對象轉(zhuǎn)化成數(shù)組對象
參數(shù)1:類數(shù)組對象
參數(shù)2:可選,處理的回調(diào)函數(shù)。可以處理類對象每個成員
該回調(diào)函數(shù)中參數(shù)1:value值,(類數(shù)組的成員), 參數(shù)2:索引值。返回值會保留最終結(jié)果,如果沒有返回值,那么from函數(shù)會返回由undefined構(gòu)成的一個新數(shù)組
如果是轉(zhuǎn)一個真正的數(shù)組,Array.from();會返回一個一模一樣的新數(shù)組。
更經(jīng)常的使用時:arguments 和 獲取的DOM元素。
// 類數(shù)組對象 let arrayLike = { 0: "a", 1: "b", length: 2 } // ES5的寫法 let arr1 = [].slice.call(arrayLike); // ES6的寫法 let arr2 = Array.from(arrayLike); console.log(arr1, arr2); // ["a", "b"]["a", "b"]
let arrayLike = { 0: "a", 1: "b", length: 2 } // ES6的寫法 let arr2 = Array.from(arrayLike, function ( value, index ) { return value + "-xixi"; });of
Array.of();將一組值,轉(zhuǎn)為數(shù)組。
返回值:返回參數(shù)值組成的數(shù)組,如果沒有參數(shù),就返回一個空數(shù)組。
作用:彌補數(shù)組構(gòu)造函數(shù)Array()的不足。因為參數(shù)個數(shù)的不同,會導(dǎo)致Array()的行為有所差異。
Array()如果是一個參數(shù),則表示當(dāng)前數(shù)組的長度。如果是二個或二個以上,則表示數(shù)組成員。
Array.of(1, 2, 3, "xixi");
Array.of();基本上可以用來替代Array()或new Array(); 并且不存在由于參數(shù)不同而導(dǎo)致的重載問題。
Array.of() // [] Array.of(undefined) // [undefined] Array.of(1) // [1]
// 模擬Arraay.of();方法 function ArrayOf () { return [].slice.call(arguments); }find
find();方法和findIndex();方法
find();
作用:獲取第一個符合條件的數(shù)組成員。
參數(shù):回調(diào)函數(shù)。所有的數(shù)組成員一次執(zhí)行該回調(diào)函數(shù)。知道找出一個返回值為true的成員。如果沒有符合條件的成員,則返回false。
回調(diào)函數(shù)中的參數(shù): 當(dāng)前value值,當(dāng)前索引值index(可選), 原數(shù)組arr(可選)
[1, 2, 23, 10].find( (n) => n > 10 ); // 23 [1, 2, 3].find( ( value, index, arr ) => value < 2 ) // 1
findIndex();
作用:返回第一個符合條件的數(shù)組成員的索引值,如果所有成員都不符合條件,則返回 -1.
參數(shù):和find();參數(shù)一樣是一個回調(diào)函數(shù)。
["cyan", "pink", "tan", "red"].findIndex( (value, index, arr) => Object.is("tan", value) );
提出的解決問題:
indexOf();無法檢測出成員中是否有NaN
[NaN].indexOf(NaN); // -1
findIndex();搭配 Object.is(); 可以檢測出來
[10,NaN].findIndex( (value) => Object.is(NaN, value) ); // 1fill
使用給定值,填充一個數(shù)組。
參數(shù)1:填充的值
參數(shù)2:可選,填充的起始位置。
參數(shù)3: 可選,填充的結(jié)束位置。
keys() & values(); & entrices();
keys();
獲取數(shù)組所有成員的索引值。
返回的是一個迭代器對象。
需要通過 for-of遍歷數(shù)組迭代器
let colors = ["cyan", "pink", "tan", "red"]; let Idx = colors.keys(); console.log( Idx ); // ArrayIterator {} for ( let index of Idx ) { console.log(index); }
values();
獲取所有成員的值,返回一個數(shù)組迭代器對象。
let colors = ["cyan", "pink", "tan", "red"]; let vals = colors.values(); console.log( vals ); // ArrayIterator {} for ( let val of vals ) { console.log(val); }
entries();
對鍵值對的遍歷。
將數(shù)組成員的索引值以及數(shù)組成員的值,保留在一個新數(shù)組中。
let colors = ["cyan", "pink", "tan", "red"]; let entri = colors.entries(); console.log(entri); for ( let entris of entri ) { console.log( entris ); } // 輸出: // [0, "cyan"] // [1, "pink"] // [2, "tan"] // [3, "red"]
如果不使用for-of遍歷,可以手動調(diào)用遍歷器對象的next();方法,進行遍歷。
let colors = ["cyan", "pink", "tan", "red"]; let entri = colors.entries(); console.log( entri.next().value ); // [0, "cyan"] console.log( entri.next().value ); // [1, "pink"] console.log( entri.next().value ); // [2, "tan"] console.log( entri.next().value ); // [3, "red"] // next();方法返回:Object {value: Array[2], done: false}空位
數(shù)組的空位:數(shù)組的某一個位置沒有任何值。
例如:Array構(gòu)造函數(shù)返回的數(shù)組都是空位。
空位不是undefined,一個位置的值等于undefined,依然是有值的。空位是沒有任何值
注意:空位不是undefiend,一個位置的值等于undefeind。依然是有值??瘴皇菦]有任何值。
0 in [undefined, undefined, undefined] // true 0 in [, , ,] // false // 第一個數(shù)組的0號位置是有值的,第二個數(shù)組的 0 號位置沒有值。
ES5中對于空位的不一致:
forEach(), filter(), every() ,some()都會跳過空位。
map()會跳過空位,但會保留這個值
join()和toString()會將空位視為undefined,而undefined和null會被處理成空字符串。
// forEach();
[,"a"].forEach((x,i) => console.log(i)); // 1
// filter();
["a",,"b"].filter(x => true) // ["a","b"]
// every();
[,"a"].every(x => x==="a") // true
// some();
[,"a"].some(x => x !== "a") // false
// map();
[,"a"].map(x => 1) // [,1]
// join();
[,"a",undefined,null].join("#") // "#a##"
// toString();
[,"a",undefined,null].toString() // ",a,,"
ES6則明確將空位轉(zhuǎn)成undeinfed
由于空位的處理規(guī)則非常不統(tǒng)一,所以應(yīng)該盡量避免出現(xiàn)空位。
ES6允許直接寫入變量和函數(shù),作為對象的屬性和方法。
在定義一個對象的時候,如果對象的屬性與屬性值對應(yīng)的變量名同名,可以簡寫屬性名。
let objName = "bar"; let obj1 = {objName} console.log( obj1 ); // Object {objName: "bar"} // 等同于 let obj2 = {objName: objName} // Object {objName: "bar"} console.log(obj2); // 在對象之中,只寫屬性名,不寫屬性值,這時候,屬性值等于屬性名所代表的變量。
// 參數(shù)簡寫 function Person ( name, age ) { return {name, age} // ES6 允許直接引入變量,不用對對象添加同名屬性 } console.log( Person("cyan", 22) ); // Object {name: "cyan", age: 22} // 等同于 function Person(name , age) { return {name: name, age: age}; }
// 方法的簡寫 // 如果對象屬性名與對象屬性名對應(yīng)的方法名稱相同,可以省略屬性以及 function關(guān)鍵字, 像定義類中的方法一樣定義這個屬性方法。 let obj1 = { name: "cyan", age: 22, sayAge: function () { console.log(this.age); // 22 }, sayName () { // ES6允許定義方法的時候,可以省略方法對應(yīng)的屬性名,和 fucntion 關(guān)鍵字 console.log(this.name); // cyan } } obj1.sayName(); obj1.sayAge(); // sayName等同于 var obj1 = { sayName: function() { console.log(this.name); } }
// 這種屬性簡寫用于函數(shù)返回非常方便 function getPoint() { var x = 1; var y = 10; return {x, y}; } getPoint(); // {x:1, y:10}屬性名表達式
JavaScript語言定義對象的屬性,有兩種方式。
// 方法一 obj.foo = true; // 標識符作為屬性名 // 方法二 obj["a" + "bc"] = 123; // 表達式作為屬性名
// 允許定義對象時候,對對象屬性應(yīng)用表達式 let a = "num"; let b = "ber"; let obj = { [a + b]: 100 } console.log( obj );
// 表達式也可以用于方法名 let obj = { ["h"+"ello"]() { return "hi"; } }; obj.hello() // hi
注意:屬性名表達式不能與簡潔表示法同時使用,會報錯。
// 報錯 let a = "b"; let b = "pink"; let color = { [a] } console.log(color); // 正確 let a = "cyan"; let color = { [a]: "pink" } console.log(color);方法的name屬性
函數(shù)的name屬性,返回函數(shù)名。
對象方法也是函數(shù),,因此也有name屬性。
let obj = { name: "cyan", sayName() { return this.name; } } console.log( obj.sayName.name ); // sayName
特殊:
bind();方法創(chuàng)造的函數(shù),name屬性返回"bound"加上原函數(shù)的名字。
Function構(gòu)造函數(shù)創(chuàng)造的函數(shù),name屬性返回"anonymous".
console.log( (new Function()).name ); // anonymous let doSomething = function () {} console.log( doSomething.bind().name ); //bound doSomethingis
Object.is();
作用判斷兩個參數(shù)是否相等。
可以判斷0與-0 ,是否相等。
ES5中,比較兩個值是否相等使用:==或者===
==缺點:自動轉(zhuǎn)換數(shù)據(jù)類型
===缺點:NaN不等于自身,以及0等于-0
ES6提出“Same-value equality”(同值相等)算法.
用來比較兩個值是否嚴格相等,與嚴格比較運算符(===)的行為基本一致。
+0 === -0 //true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // trueassgin
Object.assgin();
作用:用于對象合并。
將源對象(source)的所有可枚舉屬性,復(fù)制到目標對象(target)。
參數(shù)1:目標對象。
后面的參數(shù)都是源對象。
只拷貝源對象的自身屬性(不拷貝繼承屬性),也不拷貝不可枚舉的屬性(enumerable: false)。
如果目標對象與源對象有同名屬性,或多個源對象有同名屬性,則后面的屬性會覆蓋前面的屬性。
如果只有一個參數(shù)對象,則返回該參數(shù)對象。
let obj1 = { x: 1, y: 2 } let obj2 = { a: "a", b: "b" } console.log( Object.assign(obj1, obj2) );
如果參數(shù)不是對象,則會先轉(zhuǎn)成對象然后返回。
undefeind和null無法轉(zhuǎn)成對象,作為參數(shù),會報錯。
Object.assign(2); // Number {[[PrimitiveValue]]: 2} Object.assign(undefined) // 報錯 Object.assign(null) // 報錯
Object.assign();是淺拷貝,而不是深拷貝。如果源對象某個屬性的值是對象,那么目標對象拷貝得到的是這個對象的引用。
let obj1 = { x: 1, y: 2 } let obj2 = { a: "a", b: "b" } let resObj = Object.assign(obj1, obj2); console.log( resObj ); console.log( obj1 ); console.log( resObj == obj1 ); // true console.log( obj2 );
assign用途
為對象添加屬性
class Point { constructor (x, y) { Object.assign(this,{x, y}); } } let p = new Point(10, 20); console.log(p); // Point {x: 10, y: 20} // 通過Object.assign();將x屬性和y屬性添加到Point類的對象實例。
為對象添加方法
Object.assign(Some.prototype, { someMethod1 ( arg1, arg2 ) { // .... } someMethod2 ( arg1, arg2 ) { // .... } }) // 等價 Some.prototype.someMethod1 = function ( arg1, arg2 ) { // .... } Some.prototype.someMethod2 = function ( arg1, arg2 ) { // .... }
克隆對象
function clone(origin) { return Object.assign({}, origin); } // 將原對象拷貝到一個空對象,得到了原始對象的克隆。
合并多個對象
將多個對象合并到某個對象,可以是空對象中(合并之后返回新的對象)
const merge = (target, ...sources) => Object.assign({}, ...sources);屬性遍歷
ES6中共有5中可以遍歷屬性的方法:
for-in
for-in循環(huán)遍歷對象吱聲和繼承的可枚舉的屬性(不含Symbol屬性)。
Object.keys(obj)
Object.keys返回一個數(shù)組,包括對象自身的(不含繼承)所有可枚舉屬性(不含Symbol屬性)
Oject.getOwnPropertyNames(obj);
Object.getOwnPropertyNames(); 返回一個數(shù)組,包含對象自身的所有屬性(不含Symbol屬性,但是包括不可枚舉屬性)
Object.getOwnPropertySymbols(obj);
Object.getOwnPropertySymbols();返回一個數(shù)組,包含對象自身的所有Symbol屬性。
Reflect.ownKeys(obj);
Reflect.ownKeys(obj);返回一個數(shù)組,包含對象自身的所有屬性,不管是屬性名Symbol或字符串,也不管是否可枚舉
遍歷規(guī)則:
首先遍歷所有屬性為數(shù)值的屬性,按照數(shù)字排序。
其次遍歷所有屬性名為字符串的屬性,按照生成時間排序。
最后遍歷所有屬性名為Symbol值的屬性,按照生成時間排序。
keys&values&entriesObject.keys();
作用: 參數(shù)對象自身的(不含繼承的) 所有可遍歷屬性的鍵名。
返回數(shù)組
Object.values();
作用:參數(shù)對象自身的(不含繼承的) 所有可遍歷屬性的鍵值。
返回數(shù)組
Object.entries();
作用:參數(shù)對象自身的(不含繼承的) 所有可遍歷屬性的鍵值對數(shù)組。
返回數(shù)組
let obj = { a: 1, b: 2 }; console.log( Object.entries(obj) ); [ ["a", 1], ["b", 2] ]Symbol
ES6引入Symbol的原因:根本上防止屬性名的沖突。
ES6引入一種新的原始數(shù)據(jù)類型Symbol,表示獨一無二的值。
它是JavaScript語言的第七種中數(shù)據(jù)類型。前六中是:Undefiend,Null,布爾值(Boolean),字符串(String),數(shù)值(Number),對象(Object)
let s = Symbol(); typeof s // symbol
Symbol值通過Symbol函數(shù)生成。
對象的屬性名可以有兩種類型,一種是:string。 一種是:Symbol。(凡是屬性名屬于Symbol類型,就是獨一無二,可以保證不會與其它屬性名產(chǎn)生沖突)
注意:Symbol函數(shù)前不能使用new關(guān)鍵字,否則會報錯。因為:Symbol是一個原始類型的值,不是對象。由于Symbol值不是對象,所以不能添加屬性?;旧?,它是一種類似于字符串的數(shù)據(jù)類型。
Symbol函數(shù)可以接收一個字符串作為參數(shù),表示對Symbol實例的描述,
作用:控制臺顯示或轉(zhuǎn)為字符串時,比較容易區(qū)分。
返回值不相等
注意:Symbol函數(shù)的參數(shù)只是表示對當(dāng)前Symbol值的描述,因此相同參數(shù)的Symbol函數(shù)的返回值是不相等的。
// 沒有參數(shù) let s1 = Symbol(); let s2 = Symbol(); console.log(s1 == s2); // false // 參數(shù) let s3 = Symbol("a"); let s4 = Symbol("b"); console.log(s3 == s4); // false
不能與其它類型值進行運算
let sym = Symbol("My Symbol"); console.log("your symbol is" + sym); // TypeError: Cannot convert a Symbol value to a string console.log(`your symbol is` + sym); // TypeError: Cannot convert a Symbol value to a string
可以顯示轉(zhuǎn)換為String,Boolean。(注意:不能夠轉(zhuǎn)為數(shù)值類型)
let sym = Symbol("My Symbol"); console.log(String(sym)); console.log(sym.toString()); console.log(Boolean(sym)); console.log(!sym); console.log(Number(sym)); // TypeError: Cannot convert a Symbol value to a number console.log(sym + 2); // // TypeError: Cannot convert a Symbol value to a number
Symbol與字符串的區(qū)別:
獨一無二
值不相等
不可與其它類型值進行運算
作為屬性名Symbol由于每個Symbol值都是不相等的,意味著Symbol值可以作為標識符。
用于對象的屬性名,就能保證不會出現(xiàn)同名的屬性。 對于一個對象由多個模塊構(gòu)成的模塊情況,能防止某一個鍵被不小心改寫或覆蓋。
Symbol值作為屬性名時,是公開屬性,而不是私有屬性。
let mySymbol = Symbol("a"); // 第一種方法 let a = {}; a[mySymbol] = "hello"; // 第二種寫法 let b = { [mySymbol]: "hell2" }; // 在對象的內(nèi)部,使用Symbol值定義屬性時,Symbol值必須放在方括號之中。 // 第三種寫法 let c = {}; Object.defineProperty(c, mySymbol, { value: "hello3" }); console.log(a[mySymbol], b[mySymbol], c[mySymbol]);
注意:Symbol值作為對象的屬性名,不能使用點語法。
let mySymbol = Symbol("a"); let obj = {}; obj[mySymbol] = "hello"; console.log( obj[mySymbol] ); // hello console.log( obj.mySymbol ); // undefind
定義一組常量,保證這組常量值是不相等。
log.levels = { DEBUG: Symbol("debug"), INFO: Symbol("info"), WARN: Symbol("warn") }; log(log.levels.DEBUG, "debug message"); log(log.levels.INFO, "info message");消除魔術(shù)字符串
魔術(shù)字符串:在代碼之中出現(xiàn)多次,與代碼形成強耦合的某一個具體的字符串或者數(shù)值。
缺點:不利于將來的維護和修改。
消除魔術(shù)字符串的方法:把它寫成一個變量,或者常量。
變量或者常量等于那個值并不重要,只要確保不會跟其它的屬性沖突即可。
const shapeType = { triangle: Symbol(), triangleTow: Symbol() } function getArea ( shape, options ) { let area = 0; switch ( shape ) { case shapeType.triangle: area = .5 * options.width * options.height; break; case shapeType.triangleTow: area = .7 * options.width * options.height; break; } return area; } let a = getArea( shapeType.triangleTow, { width: 20, height: 20 } ); let b = getArea( shapeType.triangle, { width: 10, height: 10 } ); console.log( a,b ); // 280 , 50屬性名的遍歷
Symbol作為屬性名,該屬性不會出現(xiàn)在for-in, for-of循環(huán)中,也不會被Object.kes();. Object.getOwnProperTyNames();返回。
Symbol并不是私有屬性,ES6中提供Object.getOwnPropertySymbols();
Object.getOwnPropertySymbols();
作用:獲取指定對象的所有Symbol屬性名。
返回一個數(shù)組。成員是當(dāng)前對象的所有用作屬性名的Symbol值。
let obj1 = {}; let c = Symbol("c"); let d = Symbol("d"); obj1[c] = "cyan"; obj1[d] = "tan"; let objectSymbol = Object.getOwnPropertySymbols(obj1); console.log( objectSymbol ); // [Symbol(c), Symbol(d)]
Reflect.ownKeys();
作用:返回所有類型的鍵名,包括常規(guī)鍵名和Symbol鍵名。
let obj = { [Symbol("my_key")]: 1, enum: 2, nonEnum: 3 }; console.log( Reflect.ownKeys(obj) ); // ["enum", "nonEnum", Symbol(my_key)]
以Symbol值作為名稱的屬性,不會被常規(guī)方法遍歷得到??梢詾閷ο蠖x一些非私有的,但又希望只用于內(nèi)部的方法。造成一種非私有話的內(nèi)部的效果。
Symbol.for(),Symbol.keyFor()Symbol.for();
作用:使用同一個Symbol的值。
參數(shù):一個字符串。
過程:接收一個字符串后,搜索有沒有以該參數(shù)作為名稱的Symbol值。如果有,就返回這個Symbol值,否則就新建并返回一個以該字符串為名稱的Symbol值。(具有登記機制,被登記的會在全局環(huán)境中供搜索)
let s1 = Symbol.for("a"); let s2 = Symbol.for("a"); console.log( s1 === s2 ); // true
Symbol.keFor();
返回:一個已經(jīng)登記的Symbol類型值的key。
let s1 = Symbol.for("a"); let s2 = Symbol.for("b"); let s3 = Symbol("b"); console.log( Symbol.keyFor(s1), Symbol.keyFor(s2), Symbol.keyFor(s3) ); // a b undefined模塊的Singleton模式
Signleton模式:指的是調(diào)用一個類,任何時候返回的都是同一個實例。
對于 Node 來說,模塊文件可以看成是一個類。怎么保證每次執(zhí)行這個模塊文件,返回的都是同一個實例呢?
很容易想到,可以把實例放到頂層對象global。
對于Node來說,模塊文件可以看成是一個類。怎么保證每次執(zhí)行這個模塊文件,都是返回同一個實例呢? 可以把實例掛載到頂層對象global。
// mod.js function A () { this.foo = "hello"; } if ( !global._foo ) { global._foo = new A(); } module.exprots = global._foo; // 加載mod.js let mod = require("./mod.js"); console.log( mod.foo );
存在問題: 掛載到global的屬性,是可寫的,任何文件都可以修改。
防止這種情況,可以使用Symbol.
// mod.js const FOO_KEY = Symbol.foo("foo"); function A () { this.foo = "hello"; } if ( !global[FOO_KEY] ) { global[FOO_KEY] = new A(); } module.exprots = global[FOO_KEY];Proxy&Reflect Proxy概述
Proxy作用:修改某些操作的默認行為。 在目標對象之前設(shè)置屏障,外界對該對象的訪問,都必須先通過這層攔截,來保護該對象(內(nèi)部的屬性,狀態(tài),方法,行為等等)。(Proxy的操作等同于在語言層面做出修改,所以屬性一種“元編程”,即對編程語言進行編程)
提供一種機制,可以對外界的訪問進行過濾和改寫。
Proxy這個詞的原意是代理,這里表達hi由它來“代理”某些操作,可以譯為“代理器”。
語法: new Proxy(代理對象, 屏蔽對象);
屏障的方法,比較特殊,并不是任意定,只能通過get來獲取代理對象的信息,set來設(shè)置原始對象的額信息。但是它們不是直接處理對象的,在處理之前會過濾一些人為操作。屏蔽對象配置攔截行為(對于每一個被代理的操作,需要提供一個對應(yīng)的處理函數(shù),該函數(shù)將攔截對應(yīng)的操作。)
get();
參數(shù):target,key,receiver
set();
參數(shù):target,key,value,receiver
let Start = { count: 0 } let obj1 = new Proxy(Start, { get: function ( target, key ) { console.log(`getting ${key}!`); return target[key]; }, set: function ( target, key, value ) { console.log(`setting ${key}!`); return target[key] = value; } }); console.log( obj1.count ); obj1.count = 1; console.log( obj1.count );
注意:是的Proxy起作用,必須針對Proxy實例進行操作, 而不是針對目標對象進行操作。
如果屏蔽對象沒有進行任何攔截操作,那就等同于直接通過原對象,操作原對象
let a = {}; let b = {}; let proxy = new Proxy(a, b); proxy.tag = "javascript"; console.log(a.tag); // javascript
將Proxy對象,可以設(shè)置到Object.proxy屬性上,從而達到可以從Object對象上調(diào)用。
Proxy實例可以作為其他對象的原型對象。
// 放在object.proxy 屬性上 let object = { proxy: new Proxy(target, handler) } // 其它對象的原型上 let proxy = new Proxy({}, { get: function ( target, property ) { console.log( target[property] ); return 10; } }); let obj = Object.create(proxy); console.log(obj.time); // 10
同一個攔截器函數(shù),可以設(shè)置多個操作。
var handler = { get: function(target, name) { if (name === "prototype") { return Object.prototype; } return "Hello, " + name; }, apply: function(target, thisBinding, args) { return args[0]; }, construct: function(target, args) { return {value: args[1]}; } }; var fproxy = new Proxy(function(x, y) { return x + y; }, handler); fproxy(1, 2) // 1 new fproxy(1,2) // {value: 2} fproxy.prototype === Object.prototype // true fproxy.foo // "Hello, foo"Proxy攔截器操作函數(shù)
對于可以設(shè)置,但沒有設(shè)置攔截的操作,則直接落在目標對象上,按照原先的方式產(chǎn)生結(jié)果。
get()
攔截對象屬性的讀取
set()
攔截對象屬性的設(shè)置
has(target, propKey)
攔截propKey in proxy的操作,以及對象的hasOwnProperty();
返回值:布爾值。
判斷對象是否具有某個屬性時,方法才會生效。典型的操作就是in運算符。
使用has方法隱藏某些屬性,不被in運算符發(fā)現(xiàn)
let headler = { has ( target, key ) { if ( key[0] === "_" ) { return false; } return key in target; } } let target = { _prop: "aaa", prop: "bbb" } let proxy = new Proxy(target, headler); console.log( "_prop" in proxy ); // false
deleteProperty(target, propKey)
攔截delete proxy[propKey]的操作。
返回值:布爾值。 表示是否刪除成功。
apply(target, object, args)
參數(shù)args:目標對象的參數(shù)數(shù)組。
攔截Proxy實例作為函數(shù)調(diào)用的操作,比如proxy(...ars) ,proxy.call(object, ...args), proxy,apply(...)
let target = function () { return "target"; } let handler = { apply: function () { console.log("apply"); return "handler"; } } let p1 = new Proxy(target, handler); console.log(p1()); // hanlder
construct(target, args)
攔截作為構(gòu)造函數(shù)調(diào)用的操作。 比如: new Proxy(...args)
攔截函數(shù)和PHP中的魔術(shù)方法有相同的原理,當(dāng)一定條件下,會觸發(fā)該聲明的函數(shù)。
Reflect概述Reflect對象與Proxy對象一樣
為了操作對象而提供的新API
設(shè)計目的:
將Object對象的一些明顯屬性語言內(nèi)部的方法(比如Object.defiendProerty),放到Reflect對象上,現(xiàn)階段,某些方法同時在Object和Reflect對象上部署,未來的新方法將只部署在Reflect對象上。
修改某Object方法的返回結(jié)果,讓其變得更合理。
讓Object操作都變成函數(shù)行為
比如: delete obj[name] 和 name in obj 的指令式操作
Reflect對象的方法與Proxy對象的方法一一對應(yīng),只要是Proxy對象的方法,就能在Reflect對象上找到對應(yīng)的方法。
函數(shù)的擴展 參數(shù)的默認值ES5的默認參數(shù)做法
如果沒有if判斷,參數(shù)是否被賦值,如果沒有,再等于默認值
原因:如果參數(shù)賦值了,但是對應(yīng)值是false,則該賦值就不應(yīng)該起作用。 例如:調(diào)用的時候log("hello", ""); 如果參數(shù)是空字符串,就不應(yīng)該被改為默認值。
function log ( x, y ) { if ( typeof y === undefined ) { y = y || "world"; } console.log(x, y); } log("Hello"); // Hello world log("Hello", "hi"); // Hello hi log("Hello", ""); // Hello
ES6使用默認參數(shù),直接寫在參數(shù)定義的后邊。
好處:
1:易閱讀代碼
2:利于未來的代碼優(yōu)化。未來的版本在對外接口中,測底拿掉這個參數(shù),也不會導(dǎo)致以前的代碼無法執(zhí)行。
特點:參數(shù)變量時默認聲明的,不能用let或const再次聲明
function Point ( x, y=10 ) { this.x = x; this.y = y; } let p = new Point(100); console.log(p); // Point {x: 100, y: 10}
參數(shù)默認的位置
一般的,定義默認值的參數(shù),應(yīng)該是函數(shù)的尾參數(shù)。這樣可以比較容易看出來,到底省略了哪些參數(shù)。
如果非尾參數(shù)設(shè)置默認值,這個參數(shù)是沒法省略。(想使用默認值,設(shè)置為undefeind)
function fn ( x = 1, y ) { return [x ,y]; } console.log( fn() ); // [1, undefined] console.log( fn(2) ); // [2, undefined] console.log( fn(undefined, 1) ); // [1, 1] // 如果傳入undefeind,將觸發(fā)該參數(shù)等于默認值, console.log( fn(null, 1) ); // [null, 1] // 如果傳入null,則會輸出。 console.log( fn( , 10) ); // error
function fn2 ( x, y = 1, z ) { return [x, y, z]; } console.log( fn2() ); // [undefined, 1, undefined] console.log( fn2(2) ); // [2, 1, undefiend] console.log( fn2(2, undefined, 3) ); // [2, 1, 3] console.log( fn2(2, , 3) ); // error
函數(shù)的length屬性
length屬性的含義:該函數(shù)預(yù)期傳入的參數(shù)個數(shù)。
指定了默認值后,length屬性將失真。將返回沒有指定默認參數(shù)的個數(shù)。
某個參數(shù)指定了默認值以后,預(yù)期傳入的參數(shù)個數(shù)就不包括這個參數(shù)了。rest參數(shù)不會計入length屬性個數(shù)中。
let len1 = (function (a) {}).length; let len2 = (function (a = 5) {}).length; let len3 = (function ( a, b, c = 1 ) {}).length; let len4 = (fucntion (...args) {}).length; console.log(len1); // 1 console.log(len2); // 0 console.log( len3 ); // 2 console.log( len4 ); // 0
作用域
如果參數(shù)默認值是一個變量,則該變量所處的作用域,與其它變量的作用規(guī)則是一樣的,即先是當(dāng)前函數(shù)的作用域,然后才是全局作用域。
var x = 1; function fn ( x, y = x ) { console.log(y); } fn(2); // 2
如果參數(shù)默認值是一個函數(shù)
該函數(shù)的作用域是其聲明時所在的作用域
let foo = "outer"; function bar ( func = x => foo ) { let foo = "inner"; console.log( func() ); // outer } bar(); // 函數(shù)bar的參數(shù)func的默認值是一個匿名函數(shù),返回值為變量foo。這個匿名函數(shù)聲明時,bar函數(shù)的作用域還沒有形成,所以匿名函數(shù)里面的foo指向外層作用域foo
應(yīng)用
利用參數(shù)默認值,可以指定某一個參數(shù)不得省略,如果省略就拋出一個錯誤。
function throwMsg () { throw new Error("error"); } function foo ( pro1 = throwMsg() ) { return pro1; } foo(); // 拋出錯誤
可以將參數(shù)默認值設(shè)置為unfeined,表明這個參數(shù)是可以省略的。
function foo ( options = undefined ) { }rest參數(shù)
語法:...變量名
作用:把逗號隔開的值序列組合成一個數(shù)組
獲取過來的是數(shù)組,將制定的多余變量放入數(shù)組中。
使用rest參數(shù)就不需要使用arugments對象
function add ( ...nums ) { let sum = 0; for ( let val of nums ) { sum += val; } return sum; } console.log( add(1, 2, 3) ); // 6
注意:rest參數(shù)之后不能再有其它參數(shù)(即只能是最后一個參數(shù))
擴展運算符擴展運算符...。
好比rest參數(shù)的逆運算。
作用:把數(shù)組或類數(shù)組對象展開成一系列用逗號隔開的值(將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列).
console.log(...[1, 2, 3]); // 1 2 3 console.log(1, ...[2, 3, 4], 5 ); // 1 2 3 4 5
一般的,主要用于函數(shù)調(diào)用:
function add ( x, y ) { return x + y; } let nums = [10, 20]; console.log( add(...nums) ); // 30
擴展運算符與正常的函數(shù)參數(shù),rest參數(shù)可以配合使用,體現(xiàn)靈活性。
function fn ( x, y, z, n, m, ...nums ) { console.log(...nums); // 5 ,6 } let args = [1, 2]; fn(-1, ...args, 3, ...[4, 5], 6);
擴展運算符的應(yīng)用
合并數(shù)組
let moreArr = [3,4]; let arr1 = [1, 2].concat(moreArr); console.log(arr1); console.log( [1, 2, ...moreArr] ); let arr2 = ["a", "b"]; let arr3 = ["c", "d"]; let arr4 = ["e", "f"]; // ES5的寫法 console.log( arr2.concat(arr3, arr4) ); // ES6的寫法 console.log( [...arr2, ...arr3, ...arr4] );
與解構(gòu)賦值結(jié)合
擴展運算符與解構(gòu)賦值結(jié)合起來使用,用于生成數(shù)組。
注意:擴展運算符只能放在參數(shù)的最后一位。(否則將會報錯)
const [first, ...rest] = [1, 2, 3, 4, 5]; const [...butLast, last] = [1, 2, 3, 4, 5]; // SyntaxError: Rest element must be last element in array const [first, ...middle, last] = [1, 2, 3, 4, 5]; // SyntaxError: Rest element must be last element in array
函數(shù)返回值
JavaScript的函數(shù)只能返回一個值,如果需要返回多個值,只能返回數(shù)組或?qū)ο?。擴展運算符提供變通方法。
字符串
擴展運算符可以將字符串轉(zhuǎn)為數(shù)組
console.log( [..."hello"] ); // ["h", "e", "l", "l", "o"]
實現(xiàn)了Iterator接口的對象
任何Iterator接口對象,都可以使用擴展運算符轉(zhuǎn)為真正的數(shù)組
例如:arguments對象,nodeList對象
let arrList = { "0": "a", "1": "b", "2": "c", length: 3 } console.log( [...Array.from(arrList)] ); // ["a", "b", "c"] console.log( [...arrList] ); // TypeError: arrList[Symbol.iterator] is not a functionname屬性
函數(shù)的name屬性,返回該函數(shù)的屬性名。
屬性被瀏覽器支持,到ES6才寫入規(guī)范中。
ES5中匿名函數(shù),name屬性會返回空字符串。
ES6中匿名函數(shù),name屬性會返回實際的函數(shù)名
ES5,ES6中,有名的匿名函數(shù),name屬性返回具有函數(shù)名的名字
Function 構(gòu)造函數(shù)返回函數(shù)實例, name 屬性值為:anonymouse
let fn1 = function () {}; // ES5 console.log( fn1.name ); // "" // ES6 console.log( fn1.name ); // fn1 const fn = function fn2 () {} // ES5 console.log( fn.name ); // fn2 // ES6 console.log( fn.name ); // fn2 // Function 構(gòu)造函數(shù) console.log( (new Function).name ); // "anonymouse";箭頭函數(shù)
基本用法
使用 => 定義函數(shù)
() => 表達式
參數(shù) => 表達式
var f = v => v; // 等價 var f = function ( v ) { return v; }
如果箭頭函數(shù)需要多個參數(shù)或者不需要參數(shù),可以使用()代表參數(shù)。
() => { 函數(shù)體 }
var fn = () => 5; // 等同于 var fn = function () { return 5; } var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function ( num1, num2 ) { return num1 + num2 }
箭頭函數(shù)返回對象,需要在對象外加()
var getTemp = id => ({ id: id, name: "cyan" });
箭頭函數(shù)與變量解構(gòu)賦值,rest參數(shù)搭配使用
let fn = (...s) => { console.log(...s); } const full = ( first, last ) => { return first+ " " + last; } // 等同于 function full( first, last ) { return first+ " " + last; }
箭頭函數(shù)使用注意點
函數(shù)體內(nèi)的this對象,就是定義時所在的對象,而不是使用時所在的對象。
不可以當(dāng)作構(gòu)造函數(shù),也就是不可以使用new關(guān)鍵字。否則會拋出一個錯誤。(names is not a constrtucor)
不可以使用arguments對象,因為arguments對象不存在函數(shù)體內(nèi)
不可以使用yield命令, 因此箭頭函數(shù)不能作用Generator函數(shù)。
this固定
this對象在箭頭函數(shù)中,是固定的。
this的指向固定化,有利于封裝回調(diào)函數(shù)。
this指向固定化,并不是因為箭頭函數(shù)內(nèi)部有綁定this的機制,實際原因是箭頭函數(shù)根本沒有自己的this。導(dǎo)致內(nèi)部的this就是外層代碼塊的this。正是因為它沒有this,所以也就不能夠作為構(gòu)造函數(shù)。
箭頭函數(shù)的this永遠指向定義的時候的作用域,在各對象中定義,就指向那個對象。
當(dāng)使用call()和apply()方法更改作用于時候,箭頭函數(shù)this是沒有更改成功。
function foo () { setTimeout(() => { console.log( "id:", this.id ); // 42 },100); setTimeout(function () { console.log("id: " ,this.id); //41 }, 1000); } var id = 21; foo.call({ id: 42 }); // 箭頭函數(shù)導(dǎo)致this總是只想函數(shù)定義生效時所在的對象
對比箭頭函數(shù)的setTimeout和ES5版本的普通回調(diào)函數(shù):
// ES6 function foo () { setTimeout( () => { console.log("id:", this.id); }, 100 ); } foo(); //ES5 function fn2 () { let _this = this; setTimeout(function () { console.log("id:", _this.id); }, 100); } fn2(); // fn2中清楚的說明了,箭頭函數(shù)里面根本沒有自己的this,而是引用外層的this。
function foo() { return () => { console.log(this); // Object {id: 1} return () => { console.log(this); // Object {id: 1} return () => { console.log(this); // Object {id: 1} console.log("id:", this.id); // id: 1 }; }; }; } var f = foo.call( {id: 1} ); f()()();
箭頭函數(shù)中不存在:this,argumetns, super,new.target.相應(yīng)的指向外層函數(shù)的對應(yīng) this,argumetns, super,new.target
function foo () { console.log("args:", arguments); // args: [1, 2, 3, 4] setTimeout( () => { console.log("args:", arguments); // args: [1, 2, 3, 4] },100 ); } foo(...[1, 2, 3, 4]);
箭頭函數(shù)嵌套
箭頭函數(shù)的嵌套:具有管道機制(前一個函數(shù)的輸出是后一個函數(shù)的輸入)。
let insert = (value) => ({ into: (array) => ({ after: (afterValue) => { array.splice( array.indexOf(afterValue) + 1, 0, value ); return array; } }) }); console.log( insert(2).into([1, 3]).after(1) ); //[1, 2, 3]尾調(diào)用優(yōu)化
尾調(diào)用
尾調(diào)用:指某個函數(shù)的最后一步是調(diào)用另一函數(shù)。
尾調(diào)用是函數(shù)式編程的重要概念。
function fn (x) { return g(x); // 函數(shù)的最后一步調(diào)用函數(shù) g() ,就是指的尾調(diào)用 } // 不屬于為調(diào)用的情形 function f1 ( x ) { let y = g(x); return y; } // 調(diào)用函數(shù) g(x) 之后,還有賦值操作。 function f2 (x) { return g(x) + 1; } // 調(diào)用之后還有其它操作 function f3 ( x ) { g(x); } // f3 最后是返回 undefined // 尾調(diào)用不一定要出現(xiàn)在函數(shù)的尾部 function f ( x ) { if ( x > 0 ) { return m(x); } return n(x); }
尾調(diào)用優(yōu)化
尾調(diào)用特殊之處:與其它調(diào)用不同的,在于它特殊的調(diào)用位置。
函數(shù)調(diào)用會在內(nèi)存形成一個“調(diào)用記錄”,又稱“調(diào)用幀” (call frame),保存調(diào)用位置和內(nèi)部變量等信息。
如果在函數(shù)A的內(nèi)部調(diào)用函數(shù)B,那么在A的調(diào)用幀上方,還會形成一個B的調(diào)用幀。等到B運行結(jié)束,將結(jié)果返回到A,B的調(diào)用幀才會消失。如果函數(shù)B內(nèi)部還調(diào)用函數(shù)C,那就還有一個C的調(diào)用幀,以此推類。所有的調(diào)用幀,就形成一個“調(diào)用棧”(call stack)
尾調(diào)用由于是函數(shù)的最后一步操作,所以不需要保留外層函數(shù)的調(diào)用幀,因為調(diào)用位置,內(nèi)部變量等信息都不會再使用到。只要直接用內(nèi)層函數(shù)的調(diào)用幀,取代外層函數(shù)的調(diào)用幀就可以。
尾調(diào)用優(yōu)化:只保留內(nèi)層函數(shù)的調(diào)用幀
function fn () { let m = 1; let n = 2; return g(m+n); // 執(zhí)行到這一步,完全可以刪除fn()的調(diào)用幀,只保留 g(3) 的調(diào)用幀 } fn(); // 等同于 function fn () { return g(3); } fn(); // 等同于 g(3); // “尾調(diào)用優(yōu)化”: 只保留內(nèi)層函數(shù)的調(diào)用幀。
如果所有函數(shù)都是尾調(diào)用,那么完全可以做到每次執(zhí)行時,調(diào)用幀只有一項,效果就大大節(jié)省內(nèi)存。
注意:只有不再用到外層函數(shù)的內(nèi)部變量,內(nèi)層函數(shù)的調(diào)用幀才會取代外層函數(shù)的調(diào)用幀,否則就無法進行“尾調(diào)用優(yōu)化”
尾遞歸
函數(shù)調(diào)用自身,稱為遞歸,如果尾調(diào)用自身,就稱之為:尾遞歸。
遞歸非常消耗內(nèi)存,因為需要同時保存成千上百個調(diào)用幀,很容易發(fā)生"棧溢出"錯誤(stack voerflow).但是對于尾遞歸來說,由于只存在一個調(diào)用幀,所以不會發(fā)生"棧溢出"錯誤。
// 對比階乘 使用尾遞歸 和 不使用尾遞歸的情形 function factorial ( n ) { if ( n === 1 ) { return 1; } return n * factorial(n-1); } // 尾遞歸 function factorial2 ( n, total ) { if ( n === 1 ) { return total; } return factorial2( n-1, n * total ); } factorial2( 5, 1 ); // 120
遞歸函數(shù)的改寫
尾遞歸的實現(xiàn),往往需要改寫遞歸函數(shù),確保最后一步只調(diào)用自身。做到這一點的方法,就是把所有用到的內(nèi)部變量改寫成函數(shù)的參數(shù)。
方法1:是在尾遞歸函數(shù)之外,再提供一個正常形式的函數(shù)。
function tailFactorial(n, total) { if (n === 1) return total; return tailFactorial(n - 1, n * total); } function factorial(n) { return tailFactorial(n, 1); } factorial(5) // 120
方法2:函數(shù)柯里化
柯里化:將多參數(shù)的函數(shù)轉(zhuǎn)換成單參數(shù)的形式。(函數(shù)式編程的重要概念)
方法3:ES6的函數(shù)默認值
function factorial ( n, total = 1 ) { if ( n === 1 ) return total; return factorial(n-1, n * total); } console.log( factorial(5) ); // 120;
遞歸本質(zhì)上是一種循環(huán)操作。純粹的函數(shù)式編程語言沒有循環(huán)操作命令,所有的循環(huán)都是使用遞歸實現(xiàn)。
對于支持“尾調(diào)用優(yōu)化”的語言,只需要知道循環(huán)可以用遞歸代替。
如果一旦使用遞歸,就最好使用尾遞歸。
尾遞歸只在嚴格模式下有效果
正常模式下:函數(shù)內(nèi)部有兩個變量,可以跟蹤函數(shù)的調(diào)用棧。
func.argumetns : 返回調(diào)用時函數(shù)的參數(shù)
func.caller: 返回調(diào)用當(dāng)前函數(shù)的那個函數(shù)。
尾遞歸優(yōu)化生效的時候,函數(shù)的調(diào)用棧會改寫,因此argumetns,caller會失真。嚴格模式下禁用這兩個變量。 所以尾遞歸模式僅在嚴格模式下生效。
Set和Map數(shù)據(jù)結(jié)構(gòu) Set基本用法
Set對象是ES6中新增的一種表示集合的數(shù)據(jù)結(jié)構(gòu)。它類似于數(shù)組,但是成員的值都是唯一的。沒有重復(fù)的值。
Set本身是一個構(gòu)造函數(shù),需要通過new關(guān)鍵字來生成。
Set函數(shù)可以接受一個數(shù)組(或類似數(shù)組的對象)作為參數(shù),用來初始化。
得到的實例化對象是去重復(fù)的Set對象。
let s2 = new Set([123, 23, , 345, 345, 23]); console.log(s2); // Set {123, 23, undefined, 345} console.log(...s2); // 123 23 undefined 345 console.log( s2.size ); // 4
Set實例的屬性和方法
Set結(jié)構(gòu)的實例屬性:
Set.prototype.constructor:構(gòu)造函數(shù),默認就是Set函數(shù)
Set.prototype.size: 返回Set實例的成員總數(shù)
Set實例方法分為:操作方法(用于操作數(shù)據(jù)) 和遍歷方法(用于遍歷成員)
操作方法
add(value): 添加某個值,返回Set結(jié)構(gòu)本身。
delete(value):刪除某個值,返回一個布爾值,表示是否刪除成功。
has(value):返回一個布爾值,表示該值是否為Set成員。
cleart(): 清除所有成員,沒有返回值。
Array.form()可以將Set結(jié)構(gòu)轉(zhuǎn)為數(shù)組。
var items = new Set([1, 2, 3, 5, 6, 3, 4]); console.log( Array.from(items) ); // [1, 2, 3, 5, 6, 4]
遍歷操作
keys(); 返回鍵名的迭代器。
values(); 返回鍵值的迭代器。
entries(); 返回鍵值對的迭代器。
forEach(); 使用回調(diào)函數(shù)遍歷每個成員。
Set結(jié)構(gòu)的遍歷順序是插入順序。 使用場景比如:使用Set結(jié)構(gòu)保存一個回調(diào)函數(shù)列表,調(diào)用的時候,就能夠保證按照添加順序調(diào)用。
由于Set結(jié)構(gòu)沒有鍵名,只有鍵值(或者說鍵名和鍵值是同一個值)。 所以keys() 和values()是相同的。
let set = new Set(["pink", "cyan", "tan"]); for (let item of set.keys()) { console.log(item); } // pink // cyan // tan for (let item of set.values()) { console.log(item); } // pink // cyan // tan for (let item of set.entries()) { console.log(item); } // ["pink", "pink"] // ["cyan", "cyan"] // ["tan", "tan"]
Set結(jié)構(gòu)的實例默認可遍歷,它的默認遍歷器生成函數(shù)就是它values方法。
console.log( Set.prototype[Symbol.iterator] === Set.prototype.values ); // true
遍歷的應(yīng)用
數(shù)組去重
擴展運算符(...) 內(nèi)部使用 for -of循環(huán)
實現(xiàn)交集,并集,差集。
與Array.from()搭配使用
let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 并集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} // 差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/86474.html
摘要:是制定的的規(guī)范,代表發(fā)表的新版本,等以此類推。持續(xù)優(yōu)化更新變量聲明用于聲明常量,變量建議使用命令,建議不再使用命令,聲明的是全局變量,而則為局部變量。聲明的是全局變量也是頂層對象的屬性,則沒有綁定到頂層對象。 ECMAScript6 是 ECMA 制定的 JavaScript 的規(guī)范,ES6代表2016發(fā)表的新版本,ES7、ES5等以此類推。 (持續(xù)優(yōu)化更新) 變量聲明 cons...
摘要:基本用法所聲明的變量,只在命令所在的代碼塊內(nèi)有效。在循環(huán)中適合使用不存在變量提升不像那樣會發(fā)生變量提升現(xiàn)象暫時性死區(qū)只要塊級作用域內(nèi)存在命令,它所聲明的變量就綁定這個區(qū)域,不再受外部的影響。塊級作用域?qū)嶋H上為新增了塊級作用域。 1 let 基本用法 所聲明的變量,只在let命令所在的代碼塊內(nèi)有效。 { let b = 100; console.log(b); //100...
摘要:改變發(fā)布了最新版本,最新版本的模塊名稱都改成前綴,具體可前往英文官網(wǎng)查看,中文網(wǎng)站文檔尚未更新插件包都已更換名稱,以官網(wǎng)為準,不然會報錯構(gòu)造函數(shù)完全更改,一臉懵逼原先個參數(shù)改為一個對象參數(shù),參數(shù)字段具體如下圖具體查看介紹新的寫法根據(jù)最 改變 babel發(fā)布了最新版本,npm最新版本的模塊名稱都改成@babel前綴,具體可前往babel英文官網(wǎng)查看,中文網(wǎng)站文檔尚未更新 插件 plug...
摘要:正則表達式擴展構(gòu)造函數(shù)支持傳入正則得到拷貝,同時可以用第二參修改修飾符引入新的修飾符中的修飾符有個加上的修飾符,一共個修飾符描述描述多行模式忽略大小寫模式全局匹配模式模式粘連模式模式為了兼容自己我們需要在一下情況使用該模式情況很明顯這個是不 正則表達式擴展 構(gòu)造函數(shù)支持傳入正則得到拷貝,同時可以用第二參修改修飾符 var reg = /^abc/ig; var newReg_ig = ...
摘要:筆記和和是塊作用域的,是聲明常量用的。一個對象如果要有可被循環(huán)調(diào)用的接口,就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。這種方式會訪問注冊表,其中存儲了已經(jīng)存在的一系列。這種方式與通過定義的獨立不同,注冊表中的是共享的。 ECMAScript6 筆記 let 和 const let和const是塊作用域的 ,const是聲明常量用的。 {let a = 10;} a ...
閱讀 1992·2021-11-22 14:45
閱讀 2612·2021-10-12 10:11
閱讀 776·2021-09-22 10:02
閱讀 1233·2019-08-30 15:55
閱讀 1147·2019-08-30 15:54
閱讀 3258·2019-08-30 15:54
閱讀 1196·2019-08-29 17:16
閱讀 3093·2019-08-28 17:55