es5的語法學習


 

1. strict模式

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

2. Array增加方法

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

PS: 還有其他方法 Function.prototype.bind、String.prototype.trim、Date.now

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可以幫助我們新建一個對象。

用法:Object.creat(proto,propertiesobject

   proto是一個對象,作為我們新建對象的原型。它的值可以是一個對象或者null,否則就會拋出一個typeError的異常,如果我們傳入null的話,我們將會創建一個沒有原型的對象就像這樣  

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

   數據屬性

  • value : 設置屬性的值,默認值為undefined
  • writable : 布爾值,設置屬性是否可以被重寫,默認屬性值為true(能被重寫)
  • enumerable : 布爾值,設置屬性是否可以被for in遍歷,默認屬性值為true(能被枚舉)
  • configurable : 布爾值,默認值為true(默認為可以),表示能否通過 delete 刪除屬性從而重新定義屬性

   訪問器屬性

  • get : 函數,設置屬性返回結果
  • set : 函數,有一個參數

  接下來我們認識一下他們的用法:

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

很清晰的說明了這點。

 

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM