es5的語法學習

時間 2019-11-12

標籤 es5 語法學習简体版

原文原文鏈接

1. strict模式

嚴格模式，限制一些用法，'use strict';javascript

2. Array增長方法

增長了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法html

PS：還有其餘方法 Function.prototype.bind、String.prototype.trim、Date.nowjava

3. Object方法

Object.create

Object.defineProperty

Object.defineProperties

Object.getOwnPropertyDescriptor

Object.keys

Object.getOwnPropertyNames

Object.getPrototypeOf

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen

PS：這裏咱們只講有什麼，不講是什麼。

接下來咱們開始學習，其實這些東西有的平時也用到過，如今是進行已知事物的概括及未知事物的學習，這會是一篇很長的博客，接下來的幾天會持續更新，若是你發現內容不全，別急那是我尚未學完。

首先咱們學習Object的擴展方法

1.Object

Object.creat能夠幫助咱們新建一個對象。json

用法：Object.creat（proto，propertiesobject）數組

　　 proto是一個對象，做爲咱們新建對象的原型。它的值能夠是一個對象或者null，不然就會拋出一個typeError的異常,若是咱們傳入null的話，咱們將會建立一個沒有原型的對象就像這樣安全

　　 propertiesobject，是一個對象，內部有數據屬性和訪問器屬性函數

　　數據屬性
學習

value : 設置屬性的值，默認值爲undefined

writable : 布爾值,設置屬性是否能夠被重寫,默認屬性值爲true(能被重寫)

enumerable : 布爾值,設置屬性是否能夠被for in遍歷,默認屬性值爲true(能被枚舉)

configurable : 布爾值,默認值爲true（默認爲能夠），表示可否經過 delete 刪除屬性從而從新定義屬性

　　訪問器屬性ui

get : 函數,設置屬性返回結果

set : 函數,有一個參數

　　接下來咱們認識一下他們的用法：this

　　writable

		var  obj = Object.create(null,{
			type:{
				value:{
					name:"pianruijie",
					age:20
				},
				writable:false/*設置該值爲false，表明只讀屬性，不可重寫*/
			}
		});
		obj.type= {
			name:"xxx"
		};
		console.log(obj.type)

　　輸出

能夠看到並無對屬性進行修改，當咱們將false改成true，再次運行發現

發現value值被更改了，這裏須要注意的一個地方是，這個屬性只能對value起做用，例如咱們設置的value值是一個對象，它只能控制咱們是否能改變value，可是不能控制咱們改變value內部的值，也就是說若是咱們經過.或者[]來操做對象內部的屬性，是不起做用的，其它兩個屬性也是如此。對此咱們作一個事例證實一下：

                var  obj = Object.create(null,{
			type:{
				value:{
					name:"pianruijie",
					age:20
				},
				writable:false/*設置該值爲false，表明只讀屬性，不可重寫*/
			}
		});
		obj.type.name = "xxx";
		console.log(obj.type)

這裏咱們設置爲不能對屬性進行修改，可是咱們對value對象裏面的值單獨進行了修改，是能夠修改爲功的。

就像這樣

　　 configurable

                var  obj = Object.create(null,{
			type:{
				value:{
					name:"pianruijie",
					age:20
				},
				configurable:true
			}
		});
		delete obj.type;
		console.log(obj.type)

　　輸出爲

由於咱們將該值設爲了true，將該屬性成功刪除了，變成了undefined

　　 enumerable

                var obj = Object.create(Object.prototype,{
			type:{
				value:[{
					name:"pianruijie",
					age:20
				},{
					name:"jerry",
					age:21
				}],
				configurable:false,
				writable:false,/*設置該值爲false，表明只讀屬性，不可重寫*/
				enumerable:true/*設置該值爲false，不可枚舉，設置爲false，將輸出undefined*/
			}
		});
//		delete obj.type;
		for(var i in obj){
			console.log(obj[i]);
		}

　　輸出爲

上面這些主要讓咱們認識了一下這四個數據屬性，實際上咱們不多直接這樣用，接下來介紹的一個es5中的方法，能讓咱們靈活的使用這些屬性

要修改屬性默認的特性，必須使用 ECMAScript 5 的 Object.defineProperty()方法。這個方法接收三個參數：屬性所在的對象、屬性的名字和一個描述符對象描述符對象中的值上面咱們也介紹過了

這是書中原話，理解一下，當咱們須要使對象中的某個屬性具備某些特性，或者改變某些特性時咱們就能夠用到這個方法

                var person = {
			age:20
		};
		console.log(person)
		Object.defineProperty(person,"name",{
			writable:false,
			value:'jerry'
		})

		console.log(person); //{age:20,name,jerry}該方法將該值初始化，接下來將沒法設置
                person.name = 'lisi' //不生效

　　好比這樣，咱們首先定義了一個對象person，而後咱們經過這個方法，改變了這個屬性的值，而且可使這個屬性具備了一些特性（不能重寫），這就須要使用到咱們上面所說的四種數據屬性。

　　值得一提的是，一個普通對象，它們的這四種數據屬性的默認值都是true和undefined；可是調用 Object.defineProperty()方法時，若是不指定，configurable、enumerable 和 writable 特性的默認值都是 false。

　　還有configurable的屬性做用擴充了一點：須要注意的一個地方是該屬性設置爲false以後，後面就不能在調用該函數操做該對象了，由於這個值表明了不允許在進行配置它的做用再也不是單純的禁止刪除，也就是說，能夠屢次調用 Object.defineProperty()方法修改同一個屬性，但在把 configurable 特性設置爲 false 以後就會有限制了。

　　多數狀況下，可能都沒有必要利用 Object.defineProperty() 方法提供的這些高級功能。不過，理解這些概念對理解 JavaScript 對象卻很是有用。

　　訪問器屬性

　　[[Configurable]]：表示可否經過 delete 刪除屬性從而從新定義屬性，可否修改屬性的特性，或者可否把屬性修改成數據屬性。對於直接在對象上定義的屬性，這個特性的默認值爲 true。

　　[[Enumerable]]：表示可否經過 for-in 循環返回屬性。對於直接在對象上定義的屬性，這個特性的默認值爲 true。

　　[[Get]]：在讀取屬性時調用的函數。默認值爲 undefined。

　 [[Set]]：在寫入屬性時調用的函數。默認值爲 undefined。

　　訪問器屬性不能直接定義，必須使用 Object.defineProperty()來定義。

　　請看下面的例子。

var book = {
         _year: 2004,
         edition: 1
    };
Object.defineProperty(book, "year", {
     get: function(){
         return this._year;
     },
     set: function(newValue){
             if (newValue > 2004) {
                 this._year = newValue;
                 this.edition += newValue - 2004;
         }
     }
});
book.year = 2005;
alert(book.edition); //2

　　_year 前面的下劃線是一種經常使用的記號，用於表示只能經過對象方法訪問的屬性。

　　訪問器屬性year，擁有get和set兩個方法。getter 函數返回_year 的值，setter 函數經過計算來肯定正確的版本。這是使用訪問器屬性的常見方式，即設置一個屬性的值會致使其餘屬性發生變化。

　　Object.defineProperties()方法。這個方法接收兩個對象參數：第一個對象是要添加和修改其屬性的對象，第二個對象的屬性與第一個對象中要添加或修改的屬性一一對應。

     Object.defineProperties(people,{
            _year:{
                value:2017
            },
            age:{
                value:20
            },
            year:{
                get:function(){
                    return this._year;
                },
                set:function(newValue){
                    if(newValue > 2004){
                        this._year = 2005;
                    }
                }
            }
            
        });
        people.year = 2018;    
        console.log(people)

　　　　須要注意的是，這樣建立的數據屬性，和普通對象聲明的值不同，普通對象聲明的值，四個數據屬性默認值都是true，而這樣建立的對象的屬性數據屬性的默認值都爲false

　　這個例子就說明了這點：咱們更改了year的值，在set裏面，函數試圖改變_year的值，可是它沒法作到，由於默認的writable的值爲false

　　Object.getOwnPropertyDescriptor用法：var descriptor = Object.getOwnPropertyDescriptor(book, "_year");這樣就能夠獲取到，對象的屬性，同時直接(descriptor.configurable）獲取到該屬性的值。Object.getOwnPropertyDescriptor()方法只能用於實例屬性，要取得原型屬性的描述符，必須直接在原型對象上調用 Object.getOwnPropertyDescriptor()方法。

　　Object.keys()方法。這個方法接收一個對象做爲參數，返回一個包含全部可枚舉屬性的字符串數組。

function Person(){}
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
};
var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName"
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys); //"name,age"

　　這裏，變量 keys 中將保存一個數組，數組中是字符串"name"、"age"、"job"和"sayName"。這個順序也是它們在 for-in 循環中出現的順序。若是是經過 Person 的實例調用，則 Object.keys() 返回的數組只包含"name"和"age"這兩個實例屬性。

　　若是你想要獲得全部實例屬性，不管它是否可枚舉，均可以使用 Object.getOwnPropertyNames() 方法。

　　 var keys = Object.getOwnPropertyNames(Person.prototype); alert(keys); //"constructor,name,age,job,sayName"（注意結果中包含了不可枚舉的 constructor 屬性）

　　Object.getPrototypeOf 至關於獲取函數或者對象的_proto_ 如一個構造函數，實例一個對象，Object.getPrototypeOf（這個對象）就會訪問到構造函數的prototype，Object.getPrototypeOf（構造函數）就會訪問到Function的prototype。　　

凍結對象：

　 seal(obj) 對應： Object.isSealed

　 freeze(obj)對應： Object.isFrozen（除了seal(obj)以外，其中的屬性值也不能修改，即:writable:false,configureable:false);

鎖住對象

　　Object.preventExtensions(O) 對應Object.isExtensible：

方法用於鎖住對象屬性，使其不可以拓展，也就是不能增長新的屬性，可是屬性的值仍然能夠更改，也能夠把屬性刪除，Object.isExtensible用於判斷對象是否能夠被拓展。

var o = {};
console.log(Object.isExtensible(o));   //true
o.lastname ="yinlei";
Object.preventExtensions(o);
console.log(Object.isExtensible(o));   //false
console.log(o.lastname);                  //yinlei
o.firstname="liu";
console.log(o.firstname);                //undefined
delete o.lastname;                        
console.log("lastname="+o.lastname);   //undefined

2. Array

array增長了不少方法，分爲迭代方法和歸併方法。

迭代方法有：

　　every():對數組中每一個元素都給定方法，若是方法對每一項都返回true，則返回true。

　　some():對數組中每一個元素都給定方法，若是方法對任意一項返回true，則返回true。

　　filter():對數組中的每一個元素都給定方法，返回數組中在給定方法中返回true的元素。結果保存在新數組中，不會改變原數組。

　　map():對數組中每一個元素都給定方法，返回方法調用結果組成的數組。結果保存在新數組中，不會改變原數組。

　　forEach():做用於mao相似，區別在於該方法會對原來的數組進行改變。

給定方法的參數都爲（item,index,array）

　　實例：

        var arr = [1,2,3,4,2,2,2,2,2,3,4,3,4,3,1,2,];
        var result = arr.filter(function(element,index,self){
            return self.indexOf(element) === index;
        });

　　運用filter方法，達到去重的目的。

歸併方法：

　　reduce和reduceRight：這兩個方法會迭代數組的全部項，而後構建一個最終返回的值，區別是前者是從數組中第一項開始，後者是從數組中最後一項開始。

　　實例：

     var arr = [1,2,3,4,5,6,7,8,9,10];
        var sum = arr.reduce(function(prev,cur,index,array){
            return prev*cur;
        });

3.Use Strict

設立"嚴格模式"的目的，主要有如下幾個：

　　- 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

　　- 消除代碼運行的一些不安全之處，保證代碼運行的安全；

　　- 提升編譯器效率，增長運行速度；

　　- 爲將來新版本的Javascript作好鋪墊。

　　關於這個我就不露怯了，由於阮老師總結的很好了。你們能夠詳細的瞭解這個模式帶來的一些後果

　　傳送門：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

補充：

json

什麼是 JSON ？

JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON 是輕量級的文本數據交換格式
JSON 獨立於語言 *
JSON 具備自我描述性，更易理解

咱們經常使用的兩個JSON的方法爲：JSON.parse和JSON.stringify

第一個用於從字符串中讀取對象，第二個用於將對象轉換爲字符串

證實

        var jsonstring = '{"name":"zhangsan","age":"24"}';    
        console.log(JSON.parse(jsonstring));
        console.log(typeof JSON.parse(jsonstring))
        var jsonobj = {
            name:"lisi",
            age:"25"
        }
        console.log(JSON.stringify(jsonobj));
        console.log(typeof JSON.stringify(jsonobj));

很清晰的說明了這點。

~~~~~~~~學習博客，歡迎批評