資訊專(zhuān)欄INFORMATION COLUMN
摘要：返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組。方法測(cè)試數(shù)組中的某些元素是否通過(guò)了指定函數(shù)的測(cè)試，返回值非常實(shí)用的功能，判斷數(shù)組中是否某元素符合特定條件。
ECMAScript 5發(fā)布于2009年12月。ECMAscript 5.1版(下文稱ES5)發(fā)布于2011年6月，，并且成為ISO國(guó)際標(biāo)準(zhǔn)（ISO/IEC 16262:2011）
http://www.ecma-international...
ECMAScript 5.1 是ECMAScript(基于JavaScript的規(guī)范)標(biāo)準(zhǔn)最新修正。 與HTML5規(guī)范進(jìn)程本質(zhì)類(lèi)似，ES5通過(guò)對(duì)現(xiàn)有JavaScript方法添加語(yǔ)句和原生ECMAScript對(duì)象做合并實(shí)現(xiàn)標(biāo)準(zhǔn)化。實(shí)用特性 Object Object.defineProperty()
該方法直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)已經(jīng)存在的屬性， 并返回這個(gè)對(duì)象。Object.defineProperties()與其一樣,只是可以同時(shí)定義多個(gè)屬性。
該方法允許精確添加或修改對(duì)象的屬性。常用的場(chǎng)景
定義setter和getter。 (在ES6中已經(jīng)有了更好的定義方法)
定義對(duì)象屬性是否可枚舉enumerable。
可枚舉的屬性鍵值能夠被for in和Object.keys獲得。
最常見(jiàn)的例子就是，[]數(shù)組中索引屬性是可枚舉的，而標(biāo)準(zhǔn)成員方法就是不可枚舉的。
~! 這也是為什么我們不要使用for in遍歷數(shù)組的原因，因?yàn)榭赡苡幸恍┳玖拥纳舷挛拇a，為數(shù)組添加了一個(gè)可枚舉的方法，因此我們?cè)跀U(kuò)展一個(gè)特殊對(duì)象屬性時(shí)特別需要特別關(guān)注這一點(diǎn)
Object.keys()把對(duì)象的返回一個(gè)包括對(duì)象可枚舉鍵值的數(shù)組。
Object.keys和語(yǔ)句 for in 的功能十分相似，經(jīng)常是一些細(xì)心的javascript開(kāi)發(fā)者的討論熱點(diǎn)?；叵肽荅S5還不完全兼容的年代， for in 承擔(dān)了遍歷對(duì)象鍵值的任務(wù)。
但是兩者實(shí)際上是不一樣的！
for in會(huì)遍歷對(duì)象原型鏈上所有的屬性，包括繼承下來(lái)的屬性，而 Object.keys 只會(huì)遍歷對(duì)象本身自己擁有的屬性，因此在一些場(chǎng)景下 Object.keys 更快，所以在很多場(chǎng)景下我們都應(yīng)該優(yōu)先使用Object.keys 。
var a = {a1:1,a2:2,a3:3};
var b = {b1:1,b2:2,b3:3};
b.__proto__ = a;
for(var key in b) {
console.log(key); //b1,b2,b3,a1,a2,a3
}
Object.keys(b); //b1,b2,b3
參考：why-is-object-keys-faster-than-hasownproperty
而且由于該方法返回的是一個(gè)數(shù)組，因此我們也能很好的結(jié)合數(shù)組方法去處理對(duì)象中的數(shù)據(jù)
var obj = { a:"1", b:"2", c:"3" };
var values = Object.keys(obj).map(function(key){return obj[key]}); // 1,2,3
Object.freeze() 與 Object.isFrozen
方法可以凍結(jié)一個(gè)對(duì)象。凍結(jié)對(duì)象是指那些不能添加新的屬性，不能修改已有屬性的值，不能刪除已有屬性，以及不能修改已有屬性的可枚舉性、可配置性、可寫(xiě)性的對(duì)象。也就是說(shuō)，這個(gè)對(duì)象永遠(yuǎn)是不可變的。該方法返回被凍結(jié)的對(duì)象。
注意的是這個(gè)方法只會(huì)凍結(jié)被傳入的對(duì)象,而不會(huì)凍結(jié)對(duì)象key值所引用的對(duì)象。
var obj = {a: {b: "c" }};
Object.freeze(obj);
obj.a = 123; //不能成功賦值,但也不會(huì)報(bào)錯(cuò),只會(huì)靜默失敗
obj.a.b = "d"; //能成功賦值 => {a: {b: "d"}}
類(lèi)似的方法還有Object.seal(obj)和Object.preventExtensions(obj)
Object.freeze引入不可變數(shù)據(jù)概念，但是由于實(shí)際開(kāi)發(fā)中對(duì)性能的憂慮，實(shí)際很少被用到。
如果有場(chǎng)景需要避免對(duì)象使用者修改對(duì)象，Object.freeze將是一個(gè)很好的方法。而且由于數(shù)組[]也是一種對(duì)象，同樣也可以為通過(guò)該方法凍結(jié)數(shù)組。
Array對(duì)于數(shù)組標(biāo)準(zhǔn)API的擴(kuò)展可以說(shuō)是ES5.1中的重頭戲，這些核心API今天和未來(lái)都將為我們帶來(lái)便利和啟發(fā), 這里列舉和介紹一些常用的標(biāo)準(zhǔn)API。
Array.isArray()Array.isArray() 方法用來(lái)判斷某個(gè)值是否為數(shù)組。如果是，則返回 true，否則返回 false。
javascript有六種原始數(shù)據(jù)類(lèi)型primitive，包括undefined,object,function,boolean,number,string
其中object包括四種能通過(guò)語(yǔ)法糖構(gòu)造的形態(tài){},null,/w+/(正則表達(dá)式),[](數(shù)組)
對(duì)于后三種特殊object，null可以使用xxx === null，正則表達(dá)式可以通過(guò)xxx instanceof RegExp判斷，而數(shù)組大多數(shù)時(shí)候似乎可以通過(guò)xxx instanceof Array判斷。
但是數(shù)組的情況仍然比較特殊,主要是數(shù)組在iframe中被傳遞時(shí)的場(chǎng)景,xxx instanceof Array會(huì)出現(xiàn)誤判。這種情況較為罕見(jiàn)，相關(guān)資料參考:
Difference between using Array.isArray and instanceof Array
Determining with absolute accuracy whether or not a JavaScript object is an array
盡管xxx instanceof Array和Array.isArray()大多數(shù)時(shí)候表現(xiàn)是一致的，但是我們?nèi)匀粦?yīng)該使用更加完備健壯的后者。
注意的是該方法并不能判斷一些很像數(shù)組的對(duì)象ArrayLike，例如querySelectorAll返回的ElementsList，通過(guò)ES6(ECMAScript 2015)引入的Array.from我們可以將其轉(zhuǎn)換成為標(biāo)準(zhǔn)數(shù)組
[...].forEach(fn)讓數(shù)組的每一項(xiàng)都執(zhí)行一次給定的函數(shù)，返回值為undefined
大多數(shù)時(shí)候該方法是語(yǔ)句for(var i=0;i
對(duì)于大規(guī)模的數(shù)組處理，forEach性能比for語(yǔ)句要慢很多，而且有沒(méi)有額外的產(chǎn)出，筆者覺(jué)得大多數(shù)時(shí)候比較雞肋。但是forEach仍然可能算是讀過(guò)的代碼中使用頻率較高的數(shù)組方法之一。
[...].map(fn)返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組。
map方法實(shí)際上是把一個(gè)數(shù)組映射成為另外一個(gè)數(shù)組
功能雖然簡(jiǎn)單，和forEach很像，但因?yàn)槟芊祷匦碌臄?shù)組而變得十分實(shí)用（失之毫厘，差之千里）。
對(duì)于任何一個(gè)數(shù)組集合，都可以使用map進(jìn)行映射操作，實(shí)現(xiàn)很豐富的功能，而且保證代碼的可讀性，該API也十分受開(kāi)發(fā)者歡迎。
**
var arr = ["a","b","c"]
var arrToUpperCase = arr.map(function(ele,index){return ele.toUpperCase()});
// ["A","B","C"]
[...].filter(fn)
方法使用指定的函數(shù)測(cè)試所有元素，并返回一個(gè)包含所有通過(guò)測(cè)試的元素的新數(shù)組。
同樣也是十分實(shí)用的方法，有時(shí)候會(huì)看到不熟悉的小伙伴會(huì)使用for和新數(shù)組push實(shí)現(xiàn)類(lèi)似的功能。
var alinks = docuement.querySelector("ul a");
var alinksValid = arrayFrom(alinks).filter(function(a){
return a.getAttribute("href")[0]!=="#"
})
function arrayFrom(arrayLike){
//... Array.from polyfill
}
/*
[
,
,
]
*/
[...].some(fn)
方法測(cè)試數(shù)組中的某些元素是否通過(guò)了指定函數(shù)的測(cè)試，返回boolen值
非常實(shí)用的功能，判斷數(shù)組中是否某元素符合特定條件。如果傳入的方法校驗(yàn)為true則余下的元素都不會(huì)繼續(xù)遍歷，不會(huì)有冗余的元素訪問(wèn)。
var arr = [
{name:"xiaoA"}
,{name:"xiaoB"}
,{haha:">_<"}
,{name:"xiaoB"} //不會(huì)被訪問(wèn),已經(jīng)跳出
]
arr.some(function(ele){return !!ele.haha}) // true
該方法有很多用途
數(shù)組元素進(jìn)行一些靈活的校驗(yàn)
選擇數(shù)組中第一個(gè)符合條件的元素
和for continue break組合相比，.some方法提供更好的可讀性和靈活性。
[...].every(fn)和some類(lèi)似，但作用是檢查所有元素是否符合條件，與some互為補(bǔ)充。大多數(shù)場(chǎng)景下都可以用some實(shí)現(xiàn)相關(guān)的判斷，使用頻率不高。
[...].reduce() 與 [...].reduceRight()方法接收一個(gè)函數(shù)作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開(kāi)始合并，最終為一個(gè)值。
最靈活的方法，能夠?qū)崿F(xiàn)非常豐富的功能。
reduce和reduceRight作用一樣，不同的是分別是從左右方向開(kāi)始累加
reduce(fn,initialValue)方法第二個(gè)參數(shù)為初始值initialValue，會(huì)傳入累加方法的第一次調(diào)用時(shí)的第一個(gè)參數(shù)中，默認(rèn)是數(shù)組的第一個(gè)元素
作為累加器，數(shù)值計(jì)算可以說(shuō)是最普通的使用方法。
[1,2,3].reduce(function(a,b){return a+b}); // 1+2+3 => 6
[1,2,2,3,3,3].reduce(function(arr,curr){
if (arr.some(equal(curr))) return arr;
arr.push(curr);
return arr;
},[]); // [1,2,3]
function equal(value){
return function(target){return value===target}
}
var obj = { a:1, b:2, c:3 }
Object.keys(obj).reduce(function(_obj,key){
_obj[obj[key]] = key;
return _obj;
},{}) // {1:"a", 2:"b", 3:"c"}
...更多
數(shù)組加工管道map、filter和reduce都能返回一個(gè)數(shù)組,因此我們可以讓其通過(guò)鏈?zhǔn)?/b>組合成為數(shù)組加工的管道。
[...].map(fn).filter(fn).reduce(fn)JSON
兩個(gè)JSON方法都很常用了~
JSON.parse()根據(jù)rfc4627標(biāo)準(zhǔn)解析JSON文本。
注意parse如果結(jié)果錯(cuò)誤時(shí)會(huì)拋出異常，阻塞當(dāng)次事件循環(huán)中接下來(lái)的代碼。所以通常需要進(jìn)行try catch進(jìn)行防御性校驗(yàn)
function JSONparseSafe(str) {
try {
return JSON.parse(str);
} catch(e) {
console.warn(str,e);
}
return {};
}
補(bǔ)充：該方法有第二個(gè)參數(shù)
JSON.parse(text[, reviver])
reviver 可選 一個(gè)函數(shù)，用來(lái)轉(zhuǎn)換解析出的屬性值。
JSON.stringify()把對(duì)象序列化成為JSON格式字符串
很常用了~,和JSON.parse()一樣會(huì)拋出異常,筆者認(rèn)為同樣需要進(jìn)行try catch進(jìn)行防御性校驗(yàn)
注意該方法還有第二和第三個(gè)參數(shù)的
JSON.stringify(value[, replacer [, space]])
replacer
如果該參數(shù)是一個(gè)函數(shù)，則在序列化過(guò)程中，被序列化的值的每個(gè)屬性都會(huì)經(jīng)過(guò)該函數(shù)的轉(zhuǎn)換和處理；如果該參數(shù)是一個(gè)數(shù)組，則只有包含在這個(gè)數(shù)組中的屬性名才會(huì)被序列化到最終的 JSON 字符串中。關(guān)于該參數(shù)更詳細(xì)的解釋和示例，請(qǐng)參考使用原生的 JSON 對(duì)象一文。
space
指定縮進(jìn)用的空白字符串，用于美化輸出（pretty-print）。
var obj = { a:1, b:2 };
obj.self = obj;
// JSON.stringify(obj)
// Uncaught TypeError: Converting circular structure to JSON(…)
// 總所周知,JSON.stringify在序列化循環(huán)對(duì)象時(shí)會(huì)拋出異常
// 這時(shí)我們可以使用這樣來(lái)解決循環(huán)對(duì)象的問(wèn)題
JSON.stringify(obj ,function(key,value){
if (key && value === obj) return "{[circular]}"
return value
}) //"{"a":1,"b":2,"self":"{[circular]}"}"
String
"string".trim()
方法會(huì)刪除一個(gè)字符串兩端的空白字符。在這個(gè)字符串里的空格包括所有的空格字符
(" aa ").trim() //"aa"
方法雖然簡(jiǎn)單,但是那些還用正則替換實(shí)現(xiàn)同樣的功能的同學(xué)好自為之吧<_<
DateDate.now
Date.prototype.toISOString
保留關(guān)鍵字雖然在ES5時(shí)代,ES6的具體標(biāo)準(zhǔn)特性還沒(méi)有定稿,但是已經(jīng)定義一些"未來(lái)"會(huì)被使用的保留的關(guān)鍵字,在完全實(shí)現(xiàn)ES5標(biāo)準(zhǔn)的瀏覽器/JS引擎中關(guān)鍵字是不能作為字面量(literal)名的,否則將會(huì)報(bào)錯(cuò)。這些關(guān)鍵字包括：
class
extend
super
enum
import
export
var class = "abc" // Uncaught SyntaxError: Unexpected token =
嗯，沒(méi)錯(cuò)我們將（已經(jīng)）在ES6中用上了他們。
兼容性與性能 影響雖然如今再談這些"老掉牙"的方法，在如今這個(gè)言必及ES6的時(shí)代略顯落伍，但是ES5作為javascript發(fā)展中的重要一環(huán)，我們?nèi)匀挥斜匾ナ煜ず土私馑?/p>
隨著Web的發(fā)展,前端開(kāi)發(fā)者對(duì)javascript數(shù)據(jù)處理能力的訴求越來(lái)越強(qiáng)烈，以至于誕生了后來(lái)如jQuery、underscore等廣泛使用的工具庫(kù)。
而ECMAScript 5的到來(lái)也正是響應(yīng)這一訴求，通過(guò)對(duì)js標(biāo)準(zhǔn)庫(kù)的擴(kuò)展，極大的增強(qiáng)了js的處理數(shù)據(jù)的能力，尤其是面對(duì)js中[](數(shù)組)和{}(對(duì)象/哈希表)為核心的復(fù)合數(shù)據(jù)類(lèi)型時(shí)。標(biāo)準(zhǔn)API抹平了不同工具庫(kù)對(duì)同一個(gè)功能的實(shí)現(xiàn)差異，同時(shí)也提高了代碼的可讀性。
ECMAScript 5的API設(shè)計(jì)也吸收了其他類(lèi)型編程語(yǔ)言中實(shí)用思想，例如管道(pipeline)、無(wú)副作用(no side effects)、數(shù)據(jù)不可變(immumable)等概念，更后來(lái)引入的Stream(pipe(...).pipe(...))和Promise(then(...).then(...))也能看到這些影子。
還促進(jìn)了實(shí)用工具庫(kù)的完善，例如后來(lái)的lodash 和 ramda等工具庫(kù)。
ES6也是朝著同樣的方向?qū)s進(jìn)行完善。
有了這些工具，開(kāi)發(fā)者最終能從數(shù)據(jù)處理繁雜的邏輯中解放出來(lái)，去關(guān)注那些用戶關(guān)注的部分（界面、核心邏輯等）
兼容性http://kangax.github.io/compa...
作為javascript標(biāo)準(zhǔn)庫(kù)，ES5的特性已經(jīng)被主流瀏覽器完全支持，包括桌面端、移動(dòng)端和Node.js中都可以放心使用。
（即使你的客戶還在使用IE5、IE7、IE8，大多數(shù)也能使用es5-polyfill進(jìn)行兼容）
對(duì)某些標(biāo)準(zhǔn)API帶來(lái)潛在性能損耗的猜疑確實(shí)使得相當(dāng)多小伙伴望而卻步，但是我們?nèi)匀粦?yīng)該去了解這些標(biāo)準(zhǔn)的API，學(xué)習(xí)他們的設(shè)計(jì)思想，即便在一些性能要求較高的場(chǎng)景中，我們?nèi)匀荒軌蛞詷?biāo)準(zhǔn)作為參考，設(shè)計(jì)出優(yōu)雅的可讀性高的方法，而在大部分的場(chǎng)景中我認(rèn)為應(yīng)該合理去使用它們，享受標(biāo)準(zhǔn)完善帶來(lái)的紅利。
這樣能以一個(gè)更好地準(zhǔn)備，擁抱未來(lái)更多的新特性。
相關(guān)鏈接JavaScript 標(biāo)準(zhǔn)庫(kù) - MDN
Optimization-killers - bluebird (JavaScript性能優(yōu)化技巧)
Composers and audiences (譯文)
Enjoy!~ 當(dāng)我們?yōu)?b>ES6的特性感到興奮的同時(shí), 我們已經(jīng)知曉如何應(yīng)用ES5了嗎?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86477.html
摘要：返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組。方法測(cè)試數(shù)組中的某些元素是否通過(guò)了指定函數(shù)的測(cè)試，返回值非常實(shí)用的功能，判斷數(shù)組中是否某元素符合特定條件。 ECMAScript 5發(fā)布于2009年12月。ECMAscript 5.1版(下文稱ES5)發(fā)布于2011年6月，，并且成為ISO國(guó)際標(biāo)準(zhǔn)（ISO/IEC 16262:2011） http://www.ecma...
摘要：只要上述版權(quán)通知版權(quán)許可和免責(zé)聲明均包含在所有此類(lèi)副本和衍生物中。它應(yīng)用于網(wǎng)景后來(lái)所有的瀏覽器中以及微軟之后的版本中。年月，這份標(biāo)準(zhǔn)采用快速程序提交給，并被核準(zhǔn)成為國(guó)際標(biāo)準(zhǔn)。標(biāo)準(zhǔn)第三版在年月會(huì)議上通過(guò)并在年月作為標(biāo)準(zhǔn)發(fā)布。 ECSA-262標(biāo)準(zhǔn)第六版/2015年6月 ECMAScript 2015語(yǔ)言規(guī)范 這是 ECMA-262 第六版，ECMAScript 2015 語(yǔ)言規(guī)范 HTM...
摘要：除和外，所有的數(shù)據(jù)類(lèi)型都是可以轉(zhuǎn)化為對(duì)象，而如果是對(duì)象，就肯定有構(gòu)造函數(shù)。特性因?yàn)楹蜎](méi)有構(gòu)造函數(shù)，因此不能用此方法來(lái)判斷。由于同一條原型繼承鏈上的各個(gè)對(duì)象的構(gòu)造函數(shù)都不一樣，因此，此方法可以區(qū)分開(kāi)繼承鏈上的各個(gè)自定義數(shù)據(jù)類(lèi)型。 typeof 用法示例 var arr = []; typeof arr; //object typeof(arr); //object typeo...
摘要：更新了個(gè)版本，最新正式版是語(yǔ)言的下一代標(biāo)準(zhǔn)，早已在年月正式發(fā)布。基本不支持移動(dòng)端瀏覽器對(duì)的支持情況版起便可以支持的新特性。比較通用的工具方案有，，，等。 1、ECMAScript是什么？ 和 JavaScript 有著怎樣的關(guān)系？ 1996 年 11 月，Netscape 創(chuàng)造了javascript并將其提交給了標(biāo)準(zhǔn)化組織 ECMA，次年，ECMA 發(fā)布 262 號(hào)標(biāo)準(zhǔn)文件（ECMA-...
摘要：瀏覽器兼容性列表可以看到還是全線飄紅的和支持特新列表?yè)?jù)此在和上使用這些新特新待補(bǔ)充二相關(guān)教程最重要的產(chǎn)品規(guī)格書(shū)，什么教程也脫離不了這里的標(biāo)準(zhǔn)，英文好的還是多看點(diǎn)。 一. ES6新特性相關(guān) es6features : 經(jīng)典的ES6新特性預(yù)覽，github 逼近 10k star . ES6新特性概覽 ：同樣也很全面的特性介紹的中文版。 瀏覽器兼容性列表 ：可以看到還是全線飄紅的~~~ ...
閱讀 698·2021-11-22 09:34
閱讀 3831·2021-09-22 15:42
閱讀 1343·2021-09-03 10:28
閱讀 1082·2021-08-26 14:13
閱讀 1912·2019-08-29 15:41
閱讀 1440·2019-08-29 14:12
閱讀 3376·2019-08-26 18:36
閱讀 3320·2019-08-26 13:47
