ES5语法
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语法的更多相关文章
- 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)
本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...
- es5语法下,javascript如何判断函数是new还是()调用
es5语法没有支持类class,但是可以通关函数来申明一个类,如下: function Person(name){ this.name=name; } var john=new Person('joh ...
- WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...
- webpackES6语法转ES5语法
安装babel-loader: npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 webpack.config. ...
- 在项目中ES6语法转ES5语法 babel转码器
es6 babel 安装以及使用 1,安装好node(需要使用npm包管理工具) 2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json 3,本地安装 ...
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 ...
- javascript基础语法——变量和标识符
× 目录 [1]定义 [2]命名规则 [3]声明[4]特性[5]作用域[6]声明提升[7]属性变量 前面的话 关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript ...
- es6继承 vs js原生继承(es5)
最近在看es2015的一些语法,最实用的应该就是继承这个新特性了.比如下面的代码: $(function(){ class Father{ constructor(name, age){ this.n ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
随机推荐
- [django]表格的添加与删除实例(可以借鉴参考)
自己并未采用任何表格插件,参考网上例子,自己编写出来的django网页实例,请各位参考! 首先看图做事,表格布局采用bootstrap,俗话说bootstrap橹多了就会css了,呵呵,下面看图: 上 ...
- Redis学习总结
Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API,其实当前最热门的NoSQL数据库之一,NoSQL还包括了Mem ...
- c++学习之容器细枝末节(2)
从昨天到现在,还依然停留在容器的学习上,现在写例程代码顺手多了,看来写代码还是要多多练习才能有感觉. 经过一天的学习,有一下几点知识点让我觉得很有意义: (1)删除容器中的元素的时候,pop_fron ...
- [转]中国最大的Webshell后门箱子调查,所有公开大马全军覆没
起因 对这件事情的起因是某天我渗透了一个大站,第二天进webshell时就发现,当前目录出现了新的后门,仔细一查,发现是博彩团伙干的,网站被全局劫持黑帽程序如下代码 set_time_limit(); ...
- Eclipse InstaSearch搜索词法 (很多并不支持)
1. 中文翻译 http://www.cnblogs.com/xing901022/p/4974977.html 2. 英文原文 http://lucene.apache.org/core/3_0_3 ...
- Linux下快速迁移海量文件的操作记录
有这么一种迁移海量文件的运维场景:由于现有网站服务器配置不够,需要做网站迁移(就是迁移到另一台高配置服务器上跑着),站点目录下有海量的小文件,大概100G左右,图片文件居多.目测直接拷贝过去的话,要好 ...
- 为普通Object添加类似AttachedProperty的属性
为普通Object添加类似AttachedProperty的属性 周银辉 我们知道,在WPF中对应一个DependencyObject,我们很容易通过AttachedProperty来为类型附加一 ...
- 物联网平台设计心得:管中窥豹之HeartBeat
前言 在写这篇文章之前,我曾对HeartBeat做过诸多的研究,也做过诸多的项目,在这些项目中,有客户端为了维持状态,而定时向服务端发送的HeartBeat:有服务端为了维持客户端连接状态而处理Hea ...
- CSS中不为人知Zoom属性的使用介绍(IE私有属性)
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...
- WPF MultiRangeSlider 简单实现
WPF 多滑块Slider简单实现(MultiRangeSlider) WPF中的MultiRangeSlider,网上有商业的,有开源的,找了几个都不太理想,那就自己写 一个吧,给大家提供点思路. ...