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

1.Object

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

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

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

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

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

看下面的例子:

var options = {
'a':'A'
}
var obj = Object.create(options)
obj.b = 'B'
console.log(obj); //{b: 'B'}
console.log(obj.__proto__) // {a: 'A'}

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

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

两个函数:

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

来看看具体的用法:

   writable:

var account = Object.create(Object.prototype,{
type: {
value: "建设银行",
//enumerable: false
//configurable: false
writable: false
}
});
account.type="交通银行";
console.log(account.type);
//建设银行,因为writable设置为false表示该属性不能被修改

  configurable:

var account = Object.create(Object.prototype,{
type: {
value: "建设银行",
//enumerable: false
configurable: false,
writable: false
}
});account.type="交通银行";
delete account.type;
console.log(account.type);
//交通银行,configurable: false表示不能删除该属性值

  enumerable:

var account = Object.create(Object.prototype,{
type: {
value: "建设银行",
enumerable: true,
configurable: false,
writable: false
}
});
for(var i in account){
console.log(account[i]);
//建设银行,如果enumerable为true,那么打印undefined
}

get和set的用法

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

function defineGetter(obj, name, getter) {
Object.defineProperty(obj, name, {
configurable: true,
enumerable: true,
get: getter
});
};
var req = {};
defineGetter(req, 'xhr', function xhr(){
var val = 'xmlhttprequestx' || '';
return val.toLowerCase() === 'xmlhttprequest';
});
console.log(req.xhr);
//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的值,用它可以方便判断一个对象是否是空对象。如

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

又如:

var obj = {
"x":"y",
"x1":"y1"
};
var keys = Object.keys(obj);
console.log(keys);
//["x","x1"]  

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

var obj ={"attr1":"xyz"};
Object.defineProperty(obj,'type',{
value: "建设银行",
enumerable: false,
configurable: true,
writable: false
});
var getPro = Object.getOwnPropertyNames(obj);
console.log(getPro); //["attr1","type"]
Object.keys(obj);// ["attr1"] Object.defineProperty(obj,'type',{
value: "建设银行",
enumerable: true,
configurable: true,
writable: false
});
var getPro = Object.getOwnPropertyNames(obj);
console.log(getPro); //["attr1","type"]
Object.keys(obj);// ["attr1","type"]

锁住对象

  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   

Object.getOwnPropertyDescriptor(O,property)

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

var account = Object.create(Object.prototype,{
type: {
value: "建设银行",
enumerable: false,
configurable: false,
writable: false
}
});
var getPro = Object.getOwnPropertyDescriptor(account,'type');
console.log(getPro);
//Object {value: "建设银行", writable: false, enumerable: false, configurable: false}

2.use strict

"严格模式"规定:

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

3.Array

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

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

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

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

4.Date获取时间戳

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

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

 function A(x){
this. x = x;
} function B(y){
console.log(this.x + ":y=" + y );
}
B.bind(new A(5),6)();

另外还有一种写法:

/*express-mysql-session源码*/
var done = function() {
this.setExpirationInterval();
if (cb) {
cb.apply(undefined, arguments);
}
}.bind(this);

6.String.prototype.trim

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

7.JSON的两个方法

//这两个已经用到很多了
JSON.stringify(obj); //obj ---> str
JSON.parse(str); //str ---> json
JSON.stringify(value[, replacer[, space]])
value是需要转换的值,必选。
replacer可以是函数,也可以是数组,如果是函数,则会显示函数返回值,参数为value中的key和val,如果是数组,则只会显示数组中与value对应的值。
space可选,文本添加缩进、空格和换行符
code:
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p id="demo"></p>
<script>
var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"}
//{"name":"菜鸟教程","site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(str)
document.write( "只有一个参数情况:" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );
document.write( "<br>" );
//
str_pretty2 = JSON.stringify(str, function(){return 9;}, 4) //使用四个空格缩进
document.write( "使用参数情况:" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出
</script> </body>
</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. SQL Server自动化运维系列——关于邮件通知那点事(.Net开发人员的福利)

    需求描述 在我们的生产环境中,大部分情况下需要有自己的运维体制,包括自己健康状态的检测等.如果发生异常,需要提前预警的,通知形式一般为发邮件告知. 邮件作为一种非常便利的预警实现方式,在及时性和易用性 ...

  2. W3School-CSS 定位 (Positioning) 实例

    CSS 定位 (Positioning) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 ...

  3. Fragment 代码怎么写

    public class Voice extends Fragment implements OnClickListener { public View onCreateView(LayoutInfl ...

  4. Linux 信号(三)—— sigaction 函数

    ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 #include <signal.h> int sigaction(int signo, con ...

  5. (转)java字节流和字符流的区别

    转载: http://www.cnblogs.com/dolphin0520/category/361055.html 字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同 ...

  6. JS入门学习,写一个时钟~

    <!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <t ...

  7. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

  8. MBR与GPT

    mrb用于win平台gpt主要用于mac(苹果),MBR分区表与GPT分区表的关系 与支持最大卷为2 TB(Terabytes)并且每个磁盘最多有4个主分区(或3个主分区,1个扩展分区和无限制的逻辑驱 ...

  9. Python-11-RabbitMQ、Redis使用

    RabbitMQ RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列(M ...

  10. FineUI(专业版)新增 5 款 Metro 皮肤,邀您共赏!

    http://fineui.com/demo_pro/ 顺应当前流行趋势,五款Metro皮肤闪亮登场,她们分别是: Metro Blue Metro Dark Blue Metro Gray Metr ...