ECMASCRIPT5新特性（转载）

时间：2014-10-20 11:15:25 阅读：203 评论：0 收藏：0 [点我收藏+]

标签：des style blog http io os ar 使用 java

Function 1: Object.create

这是一个很重要的改动，现在我们终于可以得到一个原型链干净的对象了。以前要创建一个类

Js代码

function Cat(name) {
this.name = name;
this.paws = 4;
this.hungry = false;
this.eaten = [];
}
Cat.prototype = {
constructor : Cat,
play : function () { this.hungry = true; return ‘playing!‘; },
feed : function (food) { this.eaten.push(food); this.hungry = false; },
speak : function () { return ‘Meow‘; }
};

必须要分两步走，但是现在可以不必了

Js代码

var Dog = {
name : ‘dog‘,
paws : 4,
hungry : false,
eaten : null,
play : function () { this.hungry = true; return ‘playing!‘; },
speak : function () { return ‘Woof!‘; }
};
var dog = Object.create(Dog);

Object.create他还有第2个参数，是一个properties descriptor object ，关于这方面的详细解释，请看第2点。

另外：如果浏览器不支持Object.create，可以用这种方法代替

Js代码

if (typeof Object.create !== ‘function‘) {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

Function 2: Object.defineProperty

如果你想为一个对象定义属性，那么就必须my_dog.age = 2; 用这种方法。但是在ECMAScript5中，提供了更好的包装方法Object.defineProperty

Parameters:

1.对象引用

2.属性名

3.修饰对象

修饰对象中的定义如下：

●　value: use this to set the value of a property. Defaults to undefined.

●　writable: use this boolean to define whether this is a read-only variable. If it’s writable, it’s true. Defaults to false.

●　configurable: use this boolean to define whether the type (value vs. method) of this property can be changed, or whether the property can be deleted. If it’s configurable, it’s true. Defaults to false.

●　enumerable: use this boolean to define whether this property is included when the properties of the object are enumerated (a for-in loop or the keys method). Defaults to false.

●　get: use this to define a custom getter method. Defaults to undefined.

●　set: use this to define a custom setter method. Defaults to undefined.

Sample:

Js代码

var Dog = {
name : ‘dog‘,
paws : 4
};
var dog = Object.create(Dog);
Object.defineProperty(dog, ‘age‘, {
set : function (age) { this.humanYears = age * 7; },
get : function () { return this.humanYears / 7; },
enumerable : true
});
dog.age = 2;
dog.humanYears; // 14

以上代码让age和humanYears保存了同步，如果你不想对外界暴露humanYears，可以这样使用闭包:

Js代码

Object.defineProperty(dog, ‘age‘, (function () {
var humanYears;
return {
set : function (age) { humanYears = age * 7; },
get : function () { return humanYears / 7; },
enumerable : true
};
}()));

当然，也可以用在Object.create方法上面

Js代码

var yourDog = Object.create(Dog, {
age : {
get : function () { /* . . . */ },
set : function () { /* . . . */ },
enumerable: true
},
gender : {
value : ‘female‘
}
});

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

Function 3: Object.defineProperties

当然，如果你想像Object.create方法那样一口气给对象加入很多属性的话，你可以用Object.defineProperties方法

Js代码

Object.defineProperties(dog, {
age : {
get : function () { /* . . . */ },
set : function () { /* . . . */ },
enumerable: true
},
gender : {
value : ‘female‘
}
});

注意区别 Object.create和Object.defineProperties第一个参数的不同，Object.create是prototype，而Object.defineProperties是对象

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

Function 4: Object.getOwnPropertyDescriptor

用途：得到一个属性的定义

Js代码

var person = { name : ‘Joe‘ };
Object.getOwnPropertyDescriptor(person, ‘name‘); // { configurable : true,enumerable : true, value : ‘Joe&‘, writable : true }

但是这个函数只能适用于函数自身的对象，并不能取得原型链上的属性

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

Function 5: Object.keys

用途：取得所有的属性名

Js代码

var horse = { name : ‘Ed‘, age : 4, job : ‘jumping‘, owner : ‘Jim‘ };
var horseKeys = Object.keys(horse); // [‘name‘, ‘age‘, ‘job‘, ‘owner‘];

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

Function 6: Object.getOwnPropertyNames

此函数功能基本和第5点相同，但是她可以取得所有的属性名，即使那个属性是不可枚取的(属性的enumerable =false，详细请参照第2点)

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

Function 7: Object.preventExtensions / Object.isExtensible

这个函数能把一个对象的属性锁住，让他不能扩展。

Js代码

var product = { name : ‘Foobar‘, rating : 3.5 };
Object.isExtensible(product); // true
Object.preventExtentions(product);
Object.isExtensible(product); // false
product.price = ‘$10.00‘; // doesn‘t work
product.price; // undefined

但是仅仅只是不能增加属性，他的值仍然是可以改的，而且这个属性也能够被delete

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Chrome 6+

Function 8: Object.seal / Object.isSealed

Seal一个对象意味着你无法增加删除属性，也无法把已经定义好的属性值指向一个accessor （a method or

function)，反过来也是一样

Js代码

var pet = { name : ‘Browser‘, type : ‘dog‘ };
Object.seal(pet);
pet.name = ‘Oreo‘;
pet.age = 2; // doesn‘t work
pet.type = function () { /**/ }; // doesn‘t work
delete pet.name; // doesn‘t work

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Chrome 6+

Function 9: Object.freeze / Object.isFrozen

freeze一个对象，意味着你不能通过任何手段修改对象内容，他变成了完全只读的

Js代码

var obj = { greeting : ‘Hi!‘ };
Object.freeze(obj);
Object.isFrozen(obj); // true

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Chrome 6+

Function 10: Array.isArray

很显然，这是一个判断是否是数组的函数

Js代码

var names = [‘Collis‘, ‘Cyan‘];
Array.isArray(names); // true

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

○　Opera 10.5+

Function 11: Date.prototype.toJSON

提供了从Date类型转成json的方法。

Js代码

new Date().toJSON(); // "2010-12-06T16:25:40.040Z"

Function 12: Function.prototype.bind

你会发现这个函数的功能和下面的很相似

Js代码

var arr1 = [‘1‘, ‘2‘, ‘3‘],
arr2 = [‘4‘, ‘5‘, ‘6‘];
// 等同于arr1.push(arr2);
Array.prototype.push.apply(arr1, arr2);
alert(arr1);

bind和上面的不同之处在于apply是直接执行的，而bind只是绑定函数内部的this，并且将函数返回

Js代码

var tooltip = { text: ‘Click here to . . . ‘ },
overlay = { text: ‘Please enter the number of attendees‘ };
function showText () {
// really, do something more useful here
alert(this.text);
}
tooltip.show = showText.bind(tooltip);
tooltip.show();
overlay.show = showText.bind(overlay);
overlay.show();

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Chrome 7+

Function 13: Date.now()

大致这个函数就是等同于new Date().getTime() or +new Date，不是什么大的改动

Function 14: Object.getPrototypeOf

这个函数提供了从通过Object.create得到的对象中提取原型的方法，当然，如果这个对象是通过老的new

function的方法创造出来的，那也可以通过这个方法得到原型

Js代码

var Dog = {
name : ‘dog‘,
paws : 4,
hungry : false,
speak : function () { return ‘Woof!‘; }
};
var dog = Object.create(Dog);
// true
alert(Object.getPrototypeOf(dog) === Dog);
// 老方法判断
function Cat() {}
// true
alert(Object.getPrototypeOf(new Cat()) === Cat.prototype);

Function 15: String.prototype.trim

用来去除字符串两边的空格

Js代码

var origin = " foo ";
document.write(origin.trim());

Function 16: Array.prototype.indexOf

这个函数用来返回查找的对象在数组中第一次出现的index

他有两个参数，第一个参数是要查找的对象，第二个参数是查找的起始位置

Js代码

var array = [2, 5, 9];
var index = array.indexOf(2);
// index is 0
index = array.indexOf(7);
// index is -1
var element = 5;
var indices = [];
var idx = array.indexOf(element);
while (idx != -1) {
indices.push(idx);
idx = array.indexOf(element, idx + 1);
}

当然如果浏览器没有支持indexOf，你可以用以下方法实现

Js代码

if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement /*, fromIndex */) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (len === 0)
return -1;
var n = 0;
if (arguments.length > 0) {
n = Number(arguments[1]);
if (n !== n)
n = 0;
else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0))
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
if (n >= len)
return -1;
var k = n >= 0
? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) {
if (k in t && t[k] === searchElement)
return k;
}
return -1;
};
}

Function 17: Array.prototype.lastIndexOf

用法和16相似，取得最后一次出现的index

如果浏览器没有实现此方法，你可以通过这种方式实现

Java代码

if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement /*, fromIndex */) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (len === 0)
return -1;
var n = 0;
if (arguments.length > 0) {
n = Number(arguments[1]);
if (n !== n)
n = 0;
else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0))
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
if (n >= len)
return -1;
var k = n >= 0
? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) {
if (k in t && t[k] === searchElement)
return k;
}
return -1;
};
}
Function 17: Array.prototype.lastIndexOf
用法和16相似，取得最后一次出现参数的index
如果浏览器没有实现此方法，你可以通过这种方式实现
if (!Array.prototype.lastIndexOf) {
Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (len === 0)
return -1;
var n = len;
if (arguments.length > 0) {
n = Number(arguments[1]);
if (n !== n)
n = 0;
else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0))
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
var k = n >= 0
? Math.min(n, len - 1)
: len - Math.abs(n);
while (k >= 0) {
if (k in t && t[k] === searchElement)
return k;
}
return -1;
};
}

Function 18: Array.prototype.every

对于数组中的每一项都执行某个callback function,这个function的参数为当前数组元素，当前元素index，整个数组。当function中返回为false的时候，停止循环数组。仅当返回为true的时候继续循环

Js代码

function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

当浏览器没有实现此方法时，可以用以下方式代替

Js代码

if (!Array.prototype.every) {
Array.prototype.every = function(fun /*, thisp */) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in t && !fun.call(thisp, t[i], i, t))
return false;
}
return true;
};
}

Function 19: Array.prototype.some

大致意思和every有些相似，当数组中有一个元素符合要求，就会返回true。所以callback中，一旦返回true，就不再循环，返回false则继续循环。

Js代码

function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true

当浏览器不支持的时候，你可以用以下代码代替

Java代码

if (!Array.prototype.some) {
Array.prototype.some = function(fun /*, thisp */) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in t && fun.call(thisp, t[i], i, t))
return true;
}
return false;
};
}

Function 20: Array.prototype.forEach

此函数对数组的所有元素循环执行一个callback function

Js代码

function printElt(element, index, array) {
print("[" + index + "] is " + element); // assumes print is already defined
}
[2, 5, 9].forEach(printElt);
// Prints:
// [0] is 2
// [1] is 5
// [2] is 9

当浏览器没有实现的时候，你可以通过如下方法代替

Js代码

if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fun /*, thisp */) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in t)
fun.call(thisp, t[i], i, t);
}
};
}

Function 21: Array.prototype.map

循环数组每个元素，用于执行callback，之后返回循环结果作为一个新数组，而原数组不变.

Sample1:

Js代码

function makePseudoPlural(single) {
return single.replace(/o/g, "e");
}
var singles = ["foot", "goose", "moose"];
var plurals = singles.map(makePseudoPlural);
// plurals is ["feet", "geese", "meese"]
// singles is unchanged<span style="white-space: normal;"> </span>

Sample2

Js代码

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

如果浏览器没有实现，则可以用如下方法代替

Java代码

if (!Array.prototype.map) {
Array.prototype.map = function(fun /*, thisp */) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== "function")
throw new TypeError();
var res = new Array(len);
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in t)
res[i] = fun.call(thisp, t[i], i, t);
}
return res;
};

Function 22: Array.prototype.filter

从数组中筛选出符合callback条件的元素，如果callback中返回true，则此元素会被加入到新数组中

Js代码

function isBigEnough(element, index, array) {
return (element >= 10);
}
// 12, 130, 44
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

如果浏览器没有实现，则可以用如下方式代替:

Js代码

if (!Array.prototype.filter) {
Array.prototype.filter = function(fun /*, thisp */) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== "function")
throw new TypeError();
var res = [];
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i]; // in case fun mutates this
if (fun.call(thisp, val, i, t))
res.push(val);
}
}
return res;
};
}

Function 23: Array.prototype.reduce

这个函数有两个参数，第一个为callback function，第二个为初始值。

Callback function的格式为:

.reduce(function(previousValue, currentValue, index, array){ // ...})

如果没有设置初始值， previousValue从第一个元素开始， currentValue从第二个元素开始循环。
总共循环Array.prototype.length – 1次。
如果设置了初始值，previousValue从初始值开始，currentValue从第一个元素开始循环。
总共循环Array.prototype.length次。
最后返回最后一次callback function调用的结果.
Sample:

Js代码

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
// total == 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

如果浏览器没有实现，则可用以下代码代替

Js代码

if (!Array.prototype.reduce) {
Array.prototype.reduce = function(fun /*, initialValue */) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== "function")
throw new TypeError();
// no value to return if no initial value and an empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var k = 0;
var accumulator;
if (arguments.length >= 2) {
accumulator = arguments[1];
} else {
do {
if (k in t) {
accumulator = t[k++];
break;
}
// if array contains no values, no initial value to return
if (++k >= len)
throw new TypeError();
} while (true);
}
while (k < len) {
if (k in t)
accumulator = fun.call(undefined, accumulator, t[k], k, t);
k++;
}
return accumulator;
};
}

Function 24: Array.prototype.reduceRight

这个函数有两个参数，第一个为callback function，第二个为初始值。

Callback function的格式为:

.reduce(function(previousValue, currentValue, index, array){
  // ...
})

如果没有设置初始值， previousValue从最后一个元素开始， currentValue从倒数第二个元素开始循环。
总共循环Array.prototype.length – 1次。
如果设置了初始值，previousValue从初始值开始，currentValue从最后一个元素开始循环。
总共循环Array.prototype.length次。
最后返回最后一次callback function调用的结果.

Sample：

Js代码

var total = [0, 1, 2, 3].reduceRight(function(a, b) { return a + b; });
//total == 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
return a.concat(b);
}, []);
// flattened is [4, 5, 2, 3, 0, 1]

 如果浏览器没有实现，则可以用如下代码代替

Js代码

if (!Array.prototype.reduceRight) {
Array.prototype.reduceRight = function(callbackfn /*, initialValue */) {
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof callbackfn !== "function")
throw new TypeError();
// no value to return if no initial value, empty array
if (len === 0 && arguments.length === 1)
throw new TypeError();
var k = len - 1;
var accumulator;
if (arguments.length >= 2) {
accumulator = arguments[1];
} else {
do {
if (k in this) {
accumulator = this[k--];
break;
}
// if array contains no values, no initial value to return
if (--k < 0)
throw new TypeError();
} while (true);
}
while (k >= 0) {
if (k in t)
accumulator = callbackfn.call(undefined, accumulator, t[k], k, t);
k--;
}
return accumulator;
};
}

ECMASCRIPT5新特性（转载）

标签：des style blog http io os ar 使用 java

原文地址：http://www.cnblogs.com/zhishaofei/p/4036640.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行