ECMAScript 5.1学习总结

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。 与HTML5规范进程本质类似,ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。

ES5的严格模式(strict mode)

在JS文件或是函数的顶部(前无语句,可有注释)添加"use strict";即可启用严格模式。

//全局开启严格模式
    "use strict";

//函数内部开启严格模式
    function asd(){ 
      "use strict";
        //code...
    }

开启严格模式的几点注意

  • 全局变量显式声明 变量名称拼错将抛出异常(正常模式下创建新全局变量,之后有可能报错)
for (i=0; i<5; i++) {code}  //新手常犯错误
  • 任何在正常模式下引起静默失败的赋值操作 (给不可写属性赋值, 给只读属性(getter-only)赋值, 给不可扩展对象的新属性赋值) 都会抛出异常(正常模式下无提示)
"use strict";
// 给不可写属性赋值
var obj1 = {};
Object.defineProperty(obj1, "x", { value: 42, writable: false });
obj1.x = 9; // 抛出TypeError错误
// 给只读属性赋值
var obj2 = { get x() { return 17; } };
obj2.x = 5; // 抛出TypeError错误
// 给不可扩展对象的新属性赋值
var fixed = {};
Object.preventExtensions(fixed);
fixed.newProp = "ohai"; // 抛出TypeError错
  • 严格模式下, 试图删除不可删除的属性时会抛出异常(正常模式下无提示)
"use strict";
delete Object.prototype; // 抛出TypeError错误
  • 一个对象内的所有属性名在对象内必须唯一(正常模式下后者覆盖前者)
  • 一个函数内的所有参数名在函数内必须唯一(正常模式下如有多个重名的参数,可用arguments[i]读取)
  • 函数必须声明在顶层,不允许在非函数的代码块内声明函数
  • 严格模式下,无法直接删除变量。只有configurable设置为true的对象属性,才能被删除

JSON

ES5提供一个全局的JSON对象,
用来序列化(JSON.stringify)和反序列化(JSON.parse)对象为JSON格式。

  • JSON.stringify
    JSON.stringify(value [, replacer [, space]])

允许接受一个ECMAScript值然后转换成JSON格式的字符串。
在其最简单的形式中,JSON.stringify接受一个值返回一个字符串,

    var asd = JSON.stringify({a: "1"})  //undefined

    typeof asd; //"string"

    console.info(asd);// '{"a": "1"}'

如果我们需要改变值字符串化的方式,或是对我们选择的提供过滤,我们可以将其传给replacer函数。
如果replacer方法返回undefined, 则键值对就不会包含在最终的JSON中。

var asd = { 'a': 1, 's': 2,'d':3}
var as = JSON.stringify(asd, function(key, value){ 
//过滤出即将被字符串化的对象中值为3的属性
    if (value == 3) { 
        return undefined; 
    } else { 
        return value; 
    }
});
console.info(as);
// ' { "a": 1, "s": 2}'

我们同样可以传递一个space参数以便获得返回结果的可读性帮助。space参数可以是个数字,表明了作缩进的JSON字符串或字符串每个水平上缩进的空格数。如果参数是个超过10的数值,或是超过10个字符的字符串,将导致取数值10或是截取前10个字符。

var asdf =  {  "a": 1, "s": 2, "d":3, "f":4'}
var as2 = JSON.stringify(asdf, function(key, value) { 
    if (value == 3) {
        return undefined; 
    } else { 
        return value; 
    }
}, 2);
console.info(as2);
// '{ 
    "a": 1, 
    "s": 2, 
    "f":4
}'
  • JSON.parse
     JSON.parse(text [, reviver])

接受文本(JSON格式)并转换成一个ECMAScript值。
该可选的reviver参数是有带有key和value两个参数的函数,
其作用于结果——让过滤和转换返回值成为可能。

    var result = JSON.parse('{"a": 1, "b": "2"}');//Object 

    result.b//"2"

如果我们想确保解析的值是个整数,我们可以使用reviver方法。

    var result = JSON.parse('{"a": 1, "b": "2"}', function(key, value){ 
        if (typeof value == 'string'){ 
            return parseInt(value); 
        } else { 
            return value; 
        }
    });
    result.b //2

新增数组方法

以下方法添加到了Array.prototype对象上(isArray除外)

indexOf

类似字符串的indexOf()方法

stringObject.indexOf(searchvalue,fromindex)
var data = [2, 5, 7, 3, 5];
console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)
console.log(data.indexOf(4)); // -1 (未找到)
console.log(data.indexOf("5")); // -1 (未找到,因为5 !== "5")

lastIndexOf

类似indexOf()方法(顺序相反)

forEach

Array在ES5新增的方法中,参数都是function类型,默认有传参(遍历的数组内容,对应的数组索引,数组本身)

[].forEach(function(value, index, array) {
    // ...
});

forEach方法 遍历数组元素

var colors = ['red', 'green', 'blue'];
colors.forEach(function(color) { 
    console.log(color);
});

forEach除了接受一个必须的回调函数参数,还可以接受一个可选的上下文参数(改变回调函数里面的this
指向)(第2个参数)如果这第2个可选参数不指定,则使用全局对象代替(在浏览器是为window),严格模式下甚至是undefined

array.forEach(callback,[ thisObject])

map

映射(一一对应)。[].map();基本用法跟forEach方法类似:

array.map(callback,[ thisObject]);

但是callback需要有return值(如果没有,就像会返回undefined)

var a1 = ['a', 'b', 'c'];
var a2 = a1.map(function(item) { 
    return item.toUpperCase(); 
});
console.log(a2); // logs A,B,C

filter

过滤筛选(callback在这里担任的是过滤器的角色,当元素符合条件,过滤器就返回true,而filter则会返回所有符合过滤条件的元素)。

array.filter(callback,[ thisObject]);

指数组filter后,返回过滤后的新数组。用法跟map相似

var a1 = ['a', 10, 'b', 20, 'c', 30];
var a2 = a1.filter(function(item) { 
    return typeof item == 'number'; 
});
console.log(a2); // logs 10,20,30

every(且)

every(callback[, thisObject])当数组中每一个元素在callback上被返回true时就返回true。

function isNumber(value){ 
    return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.every(isNumber)); // logs false

some(或)

some(callback[, thisObject]) 只要数组中有一项在callback上被返回true,就返回true。

function isNumber(value){ 
return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.some(isNumber)); // logs true
var a3 = ['1', '2', '3'];
console.log(a3.some(isNumber)); // logs false

reduce(从左到右累加)

对数组中的所有元素调用指定的回调函数。
该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。

var a = [10, 20, 30];
var total = a.reduce(function(first, second) { 
    return first + second; 
}, 0);
console.log(total) // Prints 60

reduceRight(从右到左累加)

reduce的作用完全相同,唯一的不同是,reduceRight是从右至左遍历数组的元素。

Array构造器上的isArray

Array.isArray直接写在了Array构造器上,而不是prototype对象上。
Array.isArray会根据参数的[[Class]]内部属性是否是”Array”返回true或false.

Array.isArray("NO U")
falseArray.isArray(["NO", "U"])// true

Array.prototype.slice.call

真实数组具有slice方法,可以对数组进行浅复制(不影响原数组),返回的依然是数组。
类似数组虽然有length属性,可以使用for循环遍历,却不能直接使用slice方法,会报错!但是通过Array.prototype.slice.call则不会报错,本身(类似数组)被从头到尾slice复制了一遍——变成了真实数组!
将类似数组的对象(比如arguments)转换为真实的数组

Array.prototype.slice.call(arguments)

bind函数扩展

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容