ECMA-Script5

来源：互联网发布：电脑版地图软件编辑：程序博客网时间：2024/05/21 04:01

严格模式

所谓严格模式，从字面上就很好理解，即更严格的模式

在这种模式下执行，浏览器会对JS的要求更苛刻。

举例：

function m1(){

max = 100;

}

m1();

alert(max); //由于max没有var声明，因此max会变成全局变量

但是在严格模式下：

function m1(){

"use strict";

max = 100;

}

m1();

alert(max);

Uncaught ReferenceError: max is not defined

不加var报错

with被禁用

callee 被禁用

禁止delete window对象属性

八进制被禁用

arguments与形参不同步

this不允许指向window

所以不要轻易在全局范围开头增加 "use strict" 声明

建议在作用域内部使用

bind方法

Jquery里面也有bind方法，它大概长这个样子：

$("#btn").bind("click",function(){

alert(this.id);

})

或许你真的从来没有认真的想过，为什么我们的匿名函数里会有this关键字？

当你点击的时候，#btn的ID就被弹了出来。this为什么会指向了#btn???

举例：

btn.onclick = function(){

setTimeout(function(){

this.innerText = "已点击";

}.bind(this),2000)

}

我们都知道定时器的匿名函数里不能写this，它会指向window

但有了bind方法以后，我们可以随意设定this 的指向

貌似在字面量编程风格中，可能好处就更明显

举例：

var Engine = {

body : $("#main"),

setBackground : function(){

this.body.css("background","url(xxxx.png) repeat-y");

}

loadEvents : function(){

$("#cb").click(function(){ //我们给某个元素添加单击事件

this.setBackground(""); //但实际操作却是Engine本身，从结构上做到了解耦

}.bind(this));

init : function(){

//.......

this.loadEvents();

return this;

}

JSON.parse / JSON.stringify

我们从eval方法，过渡到了JSON.parse()，去除了eval方法注入代码的风险

JSON提供了两个方法

JSON.parse，解析一个字符串，并返回对象

举例：

var obj = JSON.parse('{"id":3, "value":30}');

obj.value; //30

注意：id\value都使用了双引号，否则解析不正确

JSON.stringify，解析一个对象，并返回字符串

举例：

var obj = { id: 3, value: 30 };

JSON.stringify(obj); //'{"id":3, "value":30}'

扩展：额外的处理函数

var obj = JSON.parse('{"id":3, "value":30.99}');

obj.value; //30.99

如果你想四舍五入

JSON.parse('{"id":3, "value":30.99}', function(key, val){

if(typeof val == "string"){

return Math.round(Number(val));

} else {

return Math.round(val);

}

})

最终结果： obj.value // 31

数组的额外方法

indexOf

[2, 5, 7, 3, 5].indexOf(5) //返回1

无法判定对象数组，这时候可以用some

forEach

["a", "b", "c", "d", "e"].forEach(function(item, index, array){

//跟jquery几乎一样，除了参数顺序

//item表示当前遍历的元素，index表示下标，array表示数组本身

console.log(item);

});

其实也可以更简单：

["a", "b", "c", "d", "e"].forEach(alert);

注意：

["a", "b", "c", "d", "e"].forEach(console.log); //会出现Uncaught TypeError: Illegal invocation(…),forEach(function(){},this)

因为执行上下文非法导致的，我们需要指定一下上下文：

["a", "b", "c", "d", "e"].forEach(console.log, console); //正确执行，forEach(function(item){console.log(item)},console)

map 映射，遍历---->操作----->返回

var newarr = [1,2,3,4,5].map(function(item, index, array){

return item+2; //

})

newarr;

结果： [3, 4, 5, 6, 7]

reduce 归并

[1,2,3,4].reduce(function(pre, next, index, array){

//参数中的x和y，代表了之前的处理结果和下一个元素

return x+y; //return的结果会赋值给下一个函数的x参数

});

结果： 10

var list=['a',1,2,3,4,5];list.reduce=function(callback){//模拟实现var _tmp=this[0];for(var i=1;i<this.length;i++){_tmp=callback(_tmp, this[i], i, this)}return _tmp;}var new_value=list.reduce(function(pre, next, index, array){return pre*next;});console.log(new_value);

filter 过滤

var res = [88,69,92,77,90,96,98,99].filter(function(item, index, array){

return item>80;//找出所有大于80的元素

});

结果：[88,92,90,96,98,99]

var list=[1,2,3,4,5];list.filter=function(callback){//模拟实现var _tmp=[];for(var i in list){if(callback(this[i],i,this))_tmp.push(this[i]);}return _tmp;}var newList=list.filter(function(item,index,arr){return index%2==0?true:false;});console.log(newList);

some 某些 (我觉得叫anyone更适合)

if(["yt","hr","wc","jk"].some(function(item){

//判断数组中是否存在yt？

return item=="yt";

})){

alert("好的！");

}

跟过滤器好像差不多，但它只会返回一个布尔类型，如果匹配成功，则返回true

而且一旦匹配成功，后面就不再遍历了，如果没有匹配成功，最后返回false

可以用来做一些检测

every

["ab","bc","cd","xy","zz"].every(function(item){

return typeof item === "string";

});

跟some一样，但要求每一项都符合，才返回true

有一项不合格就返回false

String的trim方法

"   abc   ".trim();
首尾去空格
"abc"

Object.keys() /Object.values()

用于获取对象的属性和对象的值

对于不可枚举的属性无效

var obj = {id:3, age: 20};

Object.keys(obj);     // ["id","age"]
Object.values(obj);   // [3, 20]

Object.defineProperty(obj, "age", {
    enumerable : false
});

Object.keys(obj);     // ["id"]
Object.values(obj);   // [3]

Object.create

创建对象的一种新形式：

var father = {

money: 999999

}

var son = Object.create(father);

son.money; //999999

//不要误以为这是在复制对象，实际上这是在继承，因为fahter对象的内容被存入了son对象的原型当中

举例：

function Father(){

this.name = "王健林";

this.age = 60;

}

Father.prototype = {

wanda : function(){

return "$99999999999";

}

//以前的写法，大概是这样：

//Son.prototype = new Father();

//缺点很明显就是，连名字和年龄都继承了，其实我们并不想要这些

//下面的写法，带来了一定的好处，Son的原型的原型是Fahter的原型，同样是原型链继承的效果。

Son.prototype = Object.create(Father.prototype);

function Son(){

this.name = "王思聪";

this.age = 30;

}

new Son().wanda();

//要注意这个方法不能实现对象拷贝，因为这里是原型的赋值，并且生成了新对象，不是简单的属性复制

例如：

var a = {

text1 : "abc"

}

var b = {

text2 : "def"

}

b = Object.create(a); //结果b虽然继承了a，但原有内容被覆盖了！

b.text1; //abc

b.text2; //undefined

解决办法如下：

var b = Object.create(a, {

text2 : {

value : "def"

}

})

Object.defineProperty

对于属性的定义和拦截，讲个实用的例子吧

<!DOCTYPE html>

<html>

<head>

</head>

"use strict";

window.onload = function(){

QF.appInit();

}

var QF = {

scope : {},

appInit(){

this.htmlstr = document.body.innerHTML

this.app = $("[qf-app]").get(0);

this.inputlist = $(this.app).find("[qf-model]").get();

for(let inpt of this.inputlist){

if(inpt.nodeName=="INPUT" && inpt.type == "text"){

let modelname = inpt.getAttribute("qf-model");

let vm = {

viewlist : $(QF.app).find(":contains('"+"{{"+modelname+"}}')")

};

//view model的修改监听

Object.defineProperty(vm, "value", {

configurable: true,

enumerable: true,

set : function(val){

this.viewlist.each(function(){

$(this).html(val);

});

}

});

this.scope[modelname] = vm;

//输入框的修改监听

Object.defineProperty(HTMLInputElement.prototype, "value", {

configurable: true,

enumerable: true,

set: function(val){

console.log(val, inpt.value);

QF.scope[this.getAttribute("qf-model")].value = this.value;

}

})

}

$("input").bind("input",function(){

this.value = this.value;

});

}

</script>

<body>

<p>{{yourname}}</p>

<p>{{hername}}</p>

</div>

</body>

</html>

上面这段代码是一个简单的View —— > Model —— > View的数据绑定

defineProperty函数最大的好处就是可以自定义属性的读写权限，以及遍历权限(可枚举性)

Object.defineProperty(stu, 'score', {

writeable: true, //表示该属性是否可写

enumerable: true, //表示该属性是否可以枚举（遍历）

configurable: true, //表示该属性是否可删除，以及是否可配置, 比如writeable能不能被修改

set: function(val){

//当属性被赋值时，做一些拦截动作，例如将数据同步到view

}

get: function(){

//当属性被获取时，做一些拦截动作，例如权限检查之类的

}

});

Object.getPropertyOf

用来获取原型对象，可以充当JAVA中的super来使用

function Person(){
    this.method1 = function(){     alert(1);     }
}

Man.prototype = new Person();//原型继承
function Man(){
    this.method1 = function(){
        //相当于this.__proto__.method1();
        Object.getPrototypeOf(this).method1();
    }
}

var man = new Man();  
man.method1();

阅读全文

0 0