https://www.zhangxinxu.com/wordpress/2012/01/introducing-ecmascript-5-1/
上面為翻譯文檔。
JSON
ES5提供一個全局的JSON對象,用來序列化(JSON.stringify)和反序列化(JSON.parse)對象為JSON格式。
如果是老舊的瀏覽器,推薦使用json2.js來實(shí)現(xiàn)同樣的功能。
JSON.parse接受文本(JSON格式)并轉(zhuǎn)換成一個ECMAScript值。該可選的reviver參數(shù)是有帶有key和value兩個參數(shù)的函數(shù),其作用于結(jié)果——讓過濾和轉(zhuǎn)換返回值成為可能。
JSON.parse(text [, reviver])
var result = JSON.parse('{"a": 1, "b": "2"}');
console.log(result)
//{a: 1, b: "2"}
如果我們想對這些解析的值做某些篩選,那么就可以利用reviver來進(jìn)行操作。
var result = JSON.parse('{"a": 1, "b": "2"}');
result.b// "2"
var result = JSON.parse('{"a": 1, "b": "2"}', function(key, value){
if (typeof value == 'string'){
return parseInt(value);
} else {
return value;
}
})
result.b//2
JSON.stringify允許作者接受一個ECMAScript值然后轉(zhuǎn)換成JSON格式的字符串。(在我們傳遞向后端傳遞參數(shù)的時候經(jīng)常用到) 在其最簡單的形式中,JSON.stringify接受一個值返回一個字符串
JSON.stringify(value [, replacer [, space]])
var result = JSON.stringify({a:99,b:11});
result//‘{"a":99,"b":11}’
space表明了作縮進(jìn)的JSON字符串或字符串每個水平上縮進(jìn)的空格數(shù)。
添加對象
通過復(fù)制一個或多個對象來創(chuàng)建一個新的對象。
var source = {a : 1};
var result = Object.assign({},source);
console.log(result) // {a: 1}
var source = {a : 1};
var result = Object.assign({b : 3,a : 7},source);
console.log(result)// {b: 3, a: 1}
針對深拷貝,需要使用其他方法,因?yàn)?Object.assign()拷貝的是屬性值。假如源對象的屬性值是一個指向?qū)ο蟮囊茫仓豢截惸莻€引用值。
let obj1 = {a:1,b:{c:0}};
let obj2 = Object.assign({},obj1);
console.log(JSON.stringify(obj2)); // {"a":1,"b":{"c":0}}
obj1.a = 2;
console.log(JSON.stringify(obj1)); //{"a":2,"b":{"c":0}}
console.log(JSON.stringify(obj2)); //{"a":1,"b":{"c":0}}
obj2.a = 5;
console.log(JSON.stringify(obj1)); //{"a":2,"b":{"c":0}}
console.log(JSON.stringify(obj2)); //{"a":5,"b":{"c":0}}
obj1.b.c = 3;
console.log(JSON.stringify(obj1)); //{"a":2,"b":{"c":3}}
console.log(JSON.stringify(obj2)); //{"a":5,"b":{"c":3}}
//deep clone
let obj1 = {a:1,b:{c:1}}
let obj3 = JSON.parse(JSON.stringify(obj1))
obj1.a = 2;
obj1.b.c = 8;
console.log(JSON.stringify(obj1)); //{"a":2,"b":{"c":8}}
console.log(JSON.stringify(obj3)); //{"a":1,"b":{"c":1}}
Object.create()方法創(chuàng)建一個新對象,使用現(xiàn)有的對象來提供新創(chuàng)建的對象的_proto_。也就是說,新創(chuàng)建對象的_proto_ 就是我們所提供的對象。
let person1 = {car: 'audi',age:'26'};
let person2 = Object.create(person1);
console.log(person2); //{} __proto__: age: "26"car: "audi"
person2是個空對象,但是他的_proto_屬性上面就是person1。
實(shí)現(xiàn)類式繼承
// Shape - 父類(superclass)
function Shape() {
this.x = 0;
this.y = 0;
}
// 父類的方法
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
};
// Rectangle - 子類(subclass)
function Rectangle() {
Shape.call(this); // call super constructor.
}
// 子類續(xù)承父類
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
console.log('Is rect an instance of Rectangle?',
rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved
Object.keys 返回一個所有元素為字符串的數(shù)組,其元素來自于從給定的object上面可直接枚舉的屬性。這些屬性的順序與手動遍歷(for...in...)該對象屬性時的一致。
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // ["0", "1", "2"]
var obj = {a:1,b:2,c:3};
console.log(Object.keys(obj));// ["a", "b", "c"]
額外的數(shù)組
forEach() 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)
array.forEach(callback(currentValue(數(shù)組當(dāng)前項(xiàng)的值), index(數(shù)組當(dāng)前項(xiàng)的索引), array(數(shù)組對象本身)){
//do something
}, this)
var arr2 = [1,2,3,4,5];
arr2.forEach((element) => {
console.log(element*3) // 3,6,9,12,15
})
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
for和forEach的轉(zhuǎn)換。
const items = ['item1', 'item2', 'item3'];
const copy = [];
for (let i=0; i<items.length; i++) {
copy.push(items[i])
}