技术文章 | Technical articles

web前端开发源码笔记_ES5 第一天

一、ES5

javascript最早是由网景公司推出的,极其简单,被很多开发者接受,逐渐流行起来,后来IE为了抢占市场微软,将IE浏览器内置在windows系统中,所以IE的市场占有率相当的高。IE脚本语言是Jscriptvbscript

网景公司为了推广js,与sun公司合作,为了让js更流行,借助当时极其流行的语法java,将js更名为javascript,所以javajavascript关系就像雷锋和雷峰塔。网景公司做了一件好事,将js的语言规范提交给ECMA组织,所以我们学习ECMAScript规范就是在学习javascript规范,所以ECMAScriptjs规范的未来。微软很有个性,自己非要研制一套规范,研制的非常不好用,后来自己内部工程师都不干了,非要重新研制新的浏览器,所以微软决定放弃xp系统(放弃IE6,7)。重新研制了IE9浏览器,完全遵守ECMAScript语言规范,所以IE9是微软的第一代高级浏览器(是所有高级浏览器中,最差的一款)。

在国内,我们还要维护IE6,7,8,原因是国内一些企业决定维护xp系统,所以IE6,7就无法淘汰,所以就苦了国内的工程师了,还要维护IE6,7,8

好消息是移动端基本都是webkit内核,因此我们可以放心的使用html5css3ES5规范等等

pc端,由于高级浏览器都实现了html5css3ES5规范等等,所以我们可以直接用高级浏览器测试它们

ES规范版本 ES1ES2ES3ES4ES3.1ES5ES6ES2016ES2017ES2018

 

 

二、 JSON拓展

2.1 parse

该方法是将json字符串解析为js对象的

使用方式:

JSON.parse(str, fn)

str: 要处理的字符串

fn: 要处理的函数

返回值就是本次处理的结果

有两个参数

第一个参数: 属性名称

第二个参数: 属性值

从外部向内部遍历

 

举例:

// 定义json字符串

var str = '{"a": 1, "b": "2", "c": {"d": 3}}';

// str转为js对象

var result = JSON.parse(str, function(key, value) {

console.log(arguments);

// 对属性值进行判断

if (typeof value === "string") {

 return +value;

10  }

11  return value;

12 });

13 

输出:

14 // 我们希望将字符串转为数字

console.log(result);

 

结果:

图片1.png

 

2.2 stringify

该方法用于将js对象转为json字符串

使用方式:

JSON.stringify(obj, fn)

obj: 要处理的对象

fn: 处理的函数

返回值就是本次处理的结果

有两个参数

第一个参数: 属性名

第二个参数:属性值

从内部向外部遍历

 

举例:

// 定义对象

var obj = {

a: 1,

b: "2",

c: {

 d: 3

}

}

10 // obj转为json字符串

11 var result = JSON.stringify(obj, function(key, value) {

12  console.log(arguments);

13  // 我们想让所有的属性值作为数字保留

14  // 要对value进行判定

15  if (typeof value === "string") {

16   return +value;

17  }

18  return value;

19 });

20 

 

输出:

console.log(result);

结果:

图片2.png

 

三、 数组拓展

 

3.1判断数组

第一种方式 判断对象类型是数组

Object.prototype.toString.call(obj)

第二种方式 判断构造函数是否是Array

obj.constructor === Array

第三种方式 判断是否是实例化对象

obj instanceof Array

第四种方式 判断数组的静态方法isArray

Array.isArray(obj)

 

举例:

// 第一种  instanceof

console.log(arr instanceof Array);

// 判断数组是准确的, 但是构造函数是Object也是true

console.log(arr instanceof Object);

console.log(obj instanceof Array);

// 第二种 constructor

console.log(arr.constructor === Array);

console.log(arr.constructor === Object); // false

10 console.log(obj.constructor === Array);

11 

12 // 第三种 toString

13 console.log(Object.prototype.toString.call(arr) === "[object Array]");

14 console.log(Object.prototype.toString.call(obj) === "[object Array]");

15 

16 // 第四种 数组的静态方法

17 console.log(Array.isArray(arr));

18 console.log(Array.isArray(obj));

 

3.2 获取成员的索引值

ES5为数组拓展了两个方法: indexOf, lastIndexOf , 分别用于获取数组中成员的索引值

参数就是要查找的成员

返回值就是成员的索引值

如果没有找到成员, 返回-1

在查找成员的时候不会做数据的类型转为,是真正的全等查找

 

// 兼容IE8

// 实例化对象拥有的方法应该在类的原型上

if (!Array.prototype.indexOf) {

// 拓展方法

Array.prototype.indexOf = function(item) {

 // 遍历数组,就是遍历this

 for (var i = 0; i < this.length; i++) {

  // i 表示 索引值 arr[i] 表示成员值

  // 判断arr[i]是否与item全等

10    if (arr[i] === item) {

11     // 如果找到成员,返回索引值

12     return i;

13    }

14   }

15   // 遍历完毕后,没有找到就返回-1

16   return -1;

17  }

18 }

 

3.3 forEach

该方法用于代替for循环,是数组的迭代器方法,并没有将for循环移除, 只是将循环封装在了数组迭代器方法forEach中。

使用方式:

数组.forEach(fn)

fn: 要执行的函数

有三个参数:

第一个参数:成员值

第二个参数:索引值

第三个参数: 原数组

作用域是window

函数的返回值对forEach的执行结果是没有影响的

forEach方法的返回值始终是undefined

jQuery中也有一个类似的方法, each方法,与forEach方法的区别是:

jquery中的each方法,第一个参数是索引值,第二个参数是成员值






6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:

 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 

从小白到就业,我们全权负责!

爱创课堂 言行一致、从不忽悠!

请把自己放心的交给我们吧!


上一篇文章: JavaScript进阶_贪吃蛇项目实战 课堂笔记
下一篇文章: web前端开发源码笔记_ES5 第二天
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>