ECMAscript5.1新增語法

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ù)。

添加對象

Object.assign()

通過復(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()

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()

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ù)組

Array.prototype.forEach()

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])
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容