ES5_6_7(1)——ES5

1. ECMA简述

ECMA是脚本语言规范,是由ECMA国际组织制定和发布的脚本语言规范。而 JavaScript 就是其规范的一种实现。当然了,类似的还有其它脚本语言。但习惯性的把术语 ECMAScript 和 JavaScript 表达为同一意思。

2. ECMA5

ECMA5的兼容性对于各个常用浏览器都是兼容的,除了最恶心的IE浏览器。

IE8: 只支持defineProperty,getOwnPropertyDescriptor部分特性及JSON新特性

IE9: 不支持严格模式,其余都可以

IE10:IE10和其它主流浏览器均支持

总结:PC端开发需要注意IE9以下的兼容,但移动端开发时不需要

2.1 严格模式(strict mode)

顾名思义 :使得 JavaScript 在更严格的语法条件下运行。

目的/作用:

消除JavaScript语法的一些不合理、不严谨之处,减少怪异行为

消除代码运行的一些不安全之处,保证代码运行的安全

为未来新版本 JavaScript 做好铺垫

使用:在全局或函数的第一条语句定义为 ‘use strict‘; 如果浏览器不支持,只简析为一条简单的语句,没有任何副作用

全局使用:

‘use scrict‘;
// code...
function scrict() {
    ‘use scrict‘;
     // code...
}

语法和行为改变:

1. 变量的生命必须使用 var 关键字

2. 创建 eval 函数作用域

3. 禁止 this 执行 window 对象

4. 对象不能用重复属性

5. 函数不能有重名的形参

2.2 JSON对象扩展

JSON对象:JSON对象或数组是一个字符串,console.info(json)会打印出字符串

JS对象:JS对象是Object或Array,console.info(obj/arr)会打印出 > Object/Array[]

JSON对象:

JSON.stringify(obj/arr): js对象(或数组)转换为json对象(或数组)

JSON.parse(json): json对象(或数组)转换为js对象(或数组)

2.3 Object对象扩展

ES5给Object扩展了好几个方一些静态方法,举例两个:

Object.create(prototype[, descriptors]):创建一个新对象

1. 以指定对象为原型创建新的对象

2. 指定新的属性,并对属性进行描述

value: 指定值

writable: 标识当前属性是否可修改,默认 true

set: 监视设置当前属性值变化的回调

get: 监视获取当前属性值的回调

var obj = {name: ‘Tom‘, setName: function(name) { this.name = name; }};
var new = Object.create(obj, {
    age: {
        value: 12,
        writable: false,
        set: function() { //... },
        get: function() { //... }
    }
});

Object.defineProperty(object, descriptors):为指定对象定义扩展多个属性

2.4 Array对象扩展

ES5给Array扩展了好几个常用又便捷的方法,常用的有5个:

1. Array.prototype.indexOf(value): 得到值在数组中的第一个下标

2. Array.prototype.lastIndexOf(value): 得到值在数组中的最后一个下标

3. Array.prototype.forEach(function(item, index) {}): 数组遍历

4. Array.prototype.map(function(item, index) {}): 遍历数组,返回一个新的数组

5. Array.prototype.filter(function() {}): 遍历过滤出一个新的子数组

6. Array.prototype.reduce(function() {}[, initialVal]): 将数组的每个值(从左到右)将其降低到一个值


场景: 统计一个数组中有多少个不重复的单词

Reduce方法之前:

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){

var obj = {};

for(var i= 0, l = arr.length; i< l; i++){

var item = arr[i];

obj[item] = (obj[item] +1 ) || 1;

}

return obj;

}

console.log(getWordCnt());

Reduce方法之后:

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){

return arr.reduce(function(prev,next){

prev[next] = (prev[next] + 1) || 1;

return prev;

},{});

}

console.log(getWordCnt());

2.5 函数扩展

Function.prototype.bind(obj): 将函数内的 this 绑定为 obj,并将函数返回。


场景: 统计一个数组中有多少个不重复的单词

var name = ‘Window‘;

var obj = {name: ‘Tom‘};

setTimeout(function() {

console.info(this.name); // Window

}, 100);

setTimeout(function() {

console.info(this.name); // Tom

}.bind(obj), 100);

时间: 2024-08-02 06:23:39

ES5_6_7(1)——ES5的相关文章

Atitit js es5 es6新特性 attilax总结

1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 基本chrome ff 360se8全面支持了2 2. ECMAScript 2015(ES6)的十大特征 – WEB前端开发 - 专注前端开发,关注用户体验.html2 1.1. JavaScript发展时间轴: 1.1995:JavaScript诞生,它的初始名叫LiveScript. 2.1997:ECMAScript标准确立. 3.1999:ES3出

[js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 1 function Person( uName ){ 2 if ( this instanceof Person ) { 3 this.userName = uName; 4 }else { 5 return new Person( uName ); 6 } 7 } 8 Person.proto

React/React Native 的ES5 ES6写法对照表

转载: http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8 英文版: https://babeljs.io/blog/2015/06/07/react-on-es6-plus 很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends

es5 新增对象介绍

我们都知道在js里对象是很容易改变的 var obj1 ={ a:'111' } obj1.a = '222'; console.log( obj.a ) //output 222 对象的属性发生了变化 现在我们来看看es5 给我提供一个对象的新方法冻结对象(浅冻结). Object.freeze(obj) obj是要冻结的对象,Object.freeze()可以防止对象新增属性或方法,防止删除和修改现有的属性和方法.他其实就是让对象变成不可变的数据; var obj = { a:'111' }

一种基于ES5的JavaScript继承

关于JavaScript继承,方式很多,包括compile-to-javascript的语言TypeScript, CoffeeScript以及网站MDN, GitHub, Modernizr各种polyfill都给出了稳妥的实现方案. 从ES5的角度看,这其中一些方案在功能上OK,但在语义上却不尽如人意. 本人从这些方案中采取一些比较潮的思路,整理出一份方案,可实现与原生DOM类继承的风格一致,达到功能和语义兼得的效果(当然,就别再老想着99后ES3了). 如果你的WebApp是基于ES5运行

字符串模版,替代原来Es5的+号拼装字符串

字符串模版 这节我们主要学习ES6对字符串新增的操作,最重要的就是字符串模版,字符串模版的出现让我们再也不用拼接变量了,而且支持在模板里有简单计算操作.小伙伴们是不是已经摩拳擦掌等不急了那?那我们就开始吧. 先来看一个在ES5下我们的字符串拼接案例: let xzdemo='小智'; let blog = '非常高兴你能看到这篇文章,我是你的朋友'+xzdemo+'.这节课我们学习字符串模版.'; document.write(blog); ES5下必须用+ xzdemo +这样的形式进行拼接,

为Array对象添加一个去重的方法(ES5和ES6的实现)

输入一个例子 [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq() 需要输出 [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a'] 分析 题目要求给Array添加方法,所以我们需要用到prototype,数组去重本身算法不是很难,但是在Javascript中很多人会忽视NaN的存在,因为JS中NaN != NaN 在不考虑NaN的情况下我是使用inde

ES5 对数组方法的扩展 以及 正则表达式

ES5 对数组的扩展 forEach map some every indexOf lastIndexOf forEach 与 map 语法: 数组.forEach(function ( v, i ) { }) 数组.map(function ( v, i ) {}) 1.   forEach 就是在模拟 jq 中 each 例:var arr = [ 11, 22, 33 ];        var res = arr.forEach(function ( v, i ) {          

ES6和ES5中数据结构的遍历

看了ES6就感觉各种数据结构的遍历方法好多好混乱,就写下来总结下,看看应用场景上有什么区别 Array: ES5: (1)Array.prototype.forEach(function(item,index,array){...}) (2)Array.prototype.map(function(value,index,array){...//return value,该值会被插入新数组})映射为一个新数组 (3)Array.prototype.some(function(item){.../