ES5新语法主要是体现在Object和、Array操作,同时涉及到JSON、 Function、Date 和 String类型上。

1.Object

   ES5最大的特点是对象扩展很多方法。

新建对象:create( 新建一个"干净"的对象,这里的“干净”指的是没有原型链。)

     语法:Object.create(proto, [ propertiesObject ]);

      proto是一个对象,作为新创建对象的原型。

      如果 proto 参数不是 null 或一个对象值,则抛出一个 TypeError 异常。null表示没有原型对象(这样就创建了一个”干净的对象”) 

看下面的例子:

  1. var options = {
  2. 'a':'A'
  3. }
  4. var obj = Object.create(options)
  5. obj.b = 'B'
  6. console.log(obj); //{b: 'B'}
  7. console.log(obj.__proto__) // {a: 'A'}

propertiesObject 是一个对, 它有4个值和两个函数,分别是:

  • value : 设置属性的值
  • writable : 布尔值,设置属性是否可以被重写,默认属性值为false(不能被重写)
  • enumerable : 布尔值,设置属性是否可以被枚举,默认属性值为false(不能被枚举)
  • configurable : 布尔值,设置属性是否可以被删除,默认属性值为false(不能被删除)

两个函数:

  • get : 函数,设置属性返回结果
  • set : 函数,有一个参数

来看看具体的用法:

   writable:

  1. var account = Object.create(Object.prototype,{
  2. type: {
  3. value: "建设银行",
  4. //enumerable: false
  5. //configurable: false
  6. writable: false
  7. }
  8. });
  9. account.type="交通银行";
  10. console.log(account.type);
  11. //建设银行,因为writable设置为false表示该属性不能被修改

  configurable:

  1. var account = Object.create(Object.prototype,{
  2. type: {
  3. value: "建设银行",
  4. //enumerable: false
  5. configurable: false,
  6. writable: false
  7. }
  8. });account.type="交通银行";
  9. delete account.type;
  10. console.log(account.type);
  11. //交通银行,configurable: false表示不能删除该属性值

  enumerable:

  1. var account = Object.create(Object.prototype,{
  2. type: {
  3. value: "建设银行",
  4. enumerable: true,
  5. configurable: false,
  6. writable: false
  7. }
  8. });
  9. for(var i in account){
  10. console.log(account[i]);
  11. //建设银行,如果enumerable为true,那么打印undefined
  12. }

get和set的用法

注意:这个是用来获取和设置属性的值,它不能与writable用在一起,否则就报错,如下:

  1. function defineGetter(obj, name, getter) {
  2. Object.defineProperty(obj, name, {
  3. configurable: true,
  4. enumerable: true,
  5. get: getter
  6. });
  7. };
  8. var req = {};
  9. defineGetter(req, 'xhr', function xhr(){
  10. var val = 'xmlhttprequestx' || '';
  11. return val.toLowerCase() === 'xmlhttprequest';
  12. });
  13. console.log(req.xhr);
  14. //false

设置属性:defineProperty(0bj)和设置多个属性defineProperties(Obj)。

冻结对象:

   seal(obj)  对应:   Object.isSealed

freeze(obj)对应: Object.isFrozen(除了seal(obj)之外,其中的属性值也不能修改,即:writable:false,configureable:false);

遍历属性:

  Object.getOwnPropertyNames

Object.keys

   keys是列出所有enumerable为true的值,用它可以方便判断一个对象是否是空对象。如

  1. options.meta && Object.keys(options.meta).length)?“options非空”:options为空对象

又如:

  1. var obj = {
  2. "x":"y",
  3. "x1":"y1"
  4. };
  5. var keys = Object.keys(obj);
  6. console.log(keys);
  7. //["x","x1"]  

而getOwnPropertyNames为列出所有defineProperty方法设置的值。

  1. var obj ={"attr1":"xyz"};
  2. Object.defineProperty(obj,'type',{
  3. value: "建设银行",
  4. enumerable: false,
  5. configurable: true,
  6. writable: false
  7. });
  8. var getPro = Object.getOwnPropertyNames(obj);
  9. console.log(getPro); //["attr1","type"]
  10. Object.keys(obj);// ["attr1"]
  11.  
  12. Object.defineProperty(obj,'type',{
  13. value: "建设银行",
  14. enumerable: true,
  15. configurable: true,
  16. writable: false
  17. });
  18. var getPro = Object.getOwnPropertyNames(obj);
  19. console.log(getPro); //["attr1","type"]
  20. Object.keys(obj);// ["attr1","type"]

锁住对象

  Object.preventExtensions(O) 对应Object.isExtensible:

方法用于锁住对象属性,使其不能够拓展,也就是不能增加新的属性,但是属性的值仍然可以更改,也可以把属性删除,Object.isExtensible用于判断对象是否可以被拓展。

  1. var o = {};
  2. console.log(Object.isExtensible(o)); //true
  3. o.lastname ="yinlei";
  4. Object.preventExtensions(o);
  5. console.log(Object.isExtensible(o)); //false
  6. console.log(o.lastname); //yinlei
  7. o.firstname="liu";
  8. console.log(o.firstname); //undefined
  9. delete o.lastname;
  10. console.log("lastname="+o.lastname); //undefined   

Object.getOwnPropertyDescriptor(O,property)

   这个方法用于获取defineProperty方法设置的property 特性。

  1. var account = Object.create(Object.prototype,{
  2. type: {
  3. value: "建设银行",
  4. enumerable: false,
  5. configurable: false,
  6. writable: false
  7. }
  8. });
  9. var getPro = Object.getOwnPropertyDescriptor(account,'type');
  10. console.log(getPro);
  11. //Object {value: "建设银行", writable: false, enumerable: false, configurable: false}

2.use strict

"严格模式"规定:

  • 未声明的变量赋值抛出一个ReferenceError, 而不是创建一个全局变量。
  • 不止一次对对象字面量分配相同的属性会抛出SyntaxError。
  • 使用with语句抛出SyntaxError。
  • 变量必须在声明后使用。

3.Array

Array上构建了一个静态方法,用来判断数据类型是否为数组

  1. Array.isArray(["3","4"]);
  2. //true
  3. Array.isArray({"x":"y"});
  4. //false

同时还提供了很多操作数组的方法:

其中最有用的有以下五个: indexOf、map、reduce、filter、forEach,这五个方法根据字面意思就很好理解。

4.Date获取时间戳

  1. var date = new Date();
  2. //1480312139830
  3. console.log(date.getTime());
  4.  
  5. //ES5
  6. Date.now() //Date构造类型添加一个now()静态方法

5.Function.prototype.bind(this,arg1,arg2)

  1. function A(x){
  2. this. x = x;
  3. }
  4.  
  5. function B(y){
  6. console.log(this.x + ":y=" + y );
  7. }
  8. B.bind(new A(5),6)();

另外还有一种写法:

  1. /*express-mysql-session源码*/
  2. var done = function() {
  3. this.setExpirationInterval();
  4. if (cb) {
  5. cb.apply(undefined, arguments);
  6. }
  7. }.bind(this);

6.String.prototype.trim

  1. var str = " hello world ";
  2. console.log(str.trim()); //可以忽略jquery的 $.trim() 了
  3. //hello world

7.JSON的两个方法

  1. //这两个已经用到很多了
  2. JSON.stringify(obj); //obj ---> str
  3. JSON.parse(str); //str ---> json
  1. JSON.stringify(value[, replacer[, space]])
    value是需要转换的值,必选。
    replacer可以是函数,也可以是数组,如果是函数,则会显示函数返回值,参数为value中的keyval,如果是数组,则只会显示数组中与value对应的值。
    space可选,文本添加缩进、空格和换行符
    code:
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>菜鸟教程(runoob.com)</title>
  5. </head>
  6. <body>
  7.  
  8. <p id="demo"></p>
  9. <script>
  10. var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"}
  11. //{"name":"菜鸟教程","site":"http://www.runoob.com"}
  12. str_pretty1 = JSON.stringify(str)
  13. document.write( "只有一个参数情况:" );
  14. document.write( "<br>" );
  15. document.write("<pre>" + str_pretty1 + "</pre>" );
  16. document.write( "<br>" );
  17. //
  18. str_pretty2 = JSON.stringify(str, function(){return 9;}, 4) //使用四个空格缩进
  19. document.write( "使用参数情况:" );
  20. document.write( "<br>" );
  21. document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出
  22. </script>
  23.  
  24. </body>
  25. </html> 

    

ES5语法的更多相关文章

  1. 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)

    本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...

  2. es5语法下,javascript如何判断函数是new还是()调用

    es5语法没有支持类class,但是可以通关函数来申明一个类,如下: function Person(name){ this.name=name; } var john=new Person('joh ...

  3. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  4. webpackES6语法转ES5语法

    安装babel-loader: npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 webpack.config. ...

  5. 在项目中ES6语法转ES5语法 babel转码器

    es6 babel 安装以及使用   1,安装好node(需要使用npm包管理工具) 2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json 3,本地安装 ...

  6. [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

    es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 ...

  7. javascript基础语法——变量和标识符

    × 目录 [1]定义 [2]命名规则 [3]声明[4]特性[5]作用域[6]声明提升[7]属性变量 前面的话 关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript ...

  8. es6继承 vs js原生继承(es5)

    最近在看es2015的一些语法,最实用的应该就是继承这个新特性了.比如下面的代码: $(function(){ class Father{ constructor(name, age){ this.n ...

  9. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

随机推荐

  1. gcc中__builtin_return_address和__VA_ARGS__

    — Built-in Function: void * __builtin_return_address (unsigned int level) This function returns the ...

  2. php基础教程

    PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言. PHP Hypertext Preprocessor 什么是 PHP 文件? PHP 文件能够包含文本.HTML.CSS 以及 PHP 代 ...

  3. 【java开发】方法重写和方法重载概述

    类的继承   父类-子类 关键字 extends 新建一个父类 public class Person {     private String name;          private int ...

  4. [WPF系列]-参考文献

      DataTemplates Data Templating Overview Styling and Templating DataTemplate Class FrameworkTemplate ...

  5. Python版本2.7切3.5和3.5切2.7

    在Ubuntu上是自带Python2.7和3.5的 当你在终端输入Python的时候是显示Python2.7的 叫大家你怎么切换到Python3.5版本 1,查看是否存在python3.5终端输入 c ...

  6. Hibernate延迟加载、三种状态、脏检查 缓存

    一.持久化对象的唯一标识 java中按内存地址不同区分同一个类的不同对象,关系数据库用主键区分同一条记录,Hibernate使用OID来建立内存中的对象和数据库中记录的对应关系 什么是OID? 解析: ...

  7. (原创)JAVA多线程二线程池

    一,线程池的介绍 线程池包括一下三种: 线程池名称 创建方法 特点 其他 固定大小线程池 ExecutorService threadpool = Executors.newFixedThreadPo ...

  8. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - .NET商业化成品成熟各种数据权限的需求对应例子代码

    还是我上次提出的那个问题问题:假设一个订单表,1.角色A可以看自己的2.角色B可以看工作组的3.角色C可以看金额是1000元以下的(自定义条件是否可行?如果可以,请详细说明)4.角色D可以看整个部门的 ...

  9. js 运算符

    一.算术运算符: 1.运算符: “+”:功能:对数字进行代数求和:对字符串进行连接操作:将一个数值转换为字符串(数值+空字符串). “-”:功能:对操作数进行取反操作:对数字进行减法操作:将字符串转换 ...

  10. Flink 1.1 – ResourceManager

    Flink resource manager的作用如图,   FlinkResourceManager /** * * <h1>Worker allocation steps</h1 ...