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

很清晰的说明了这点。

 

 

~~~~~~~~学习博客，欢迎批评

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程