JavaScript数据类型及语言基础

  • A+
所属分类:JavaScript

1. 第一个页面交互

  • 这里最需要学习的老师的代码中,每一部分功能都由函数控制,没有创建一个全部变量。且最后有一个函数来控制执行代码。这个更多的是思想上的学习吧!
  • 在chrome上相加时,直接两个数拼接到一起了,而不是数值相加。因为输入的值,在获取时,默认是字符串类型的。
  • 在IE8下提示对象不支持“addEventListener”属性或方法。原因是IE8不支持标准的DOM事件绑定函数,它使用attachEvent

1.1 了解JavaScript是什么

JavaScript,一种直译式脚本语言,是一种动态类型、基于原型的语言,内置支持类。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。然而现在JavaScript也可被用于网络服务器,如Node.js。

上面是维基百科上的解释。不过让JavaScript流行起来的原因应该是JavaScript 是目前所有主流浏览器上唯一支持的脚本语言。下面是MDN对其核心功能的解释

核心的 JavaScript 中包含有一组核心的对象,包括 Array,Date 和 Math,以及一组核心的语言要素,包括操作符,控制结构和语句。出于多种目的,可以通过为其增补附加的对象,对核心 JavaScript 加以扩展;例如:

  • 客户端: JavaScript 提供了用于控制浏览器(Navigator 或者其它浏览器)以及其中的文档对象模型(DOM)的对象,从而扩展了核心 JavaScript。例如,客户端扩展允许应用程序在 HTML 的表单中加入元素,以便响应用户事件,比如鼠标点击,表单输入和页面导航。
  • 服务器端: JavaScript 提供了服务于在服务器上运行 JavaScript 的对象,从而扩展了核心 JavaScript。例如,服务器端扩展可以允许应用程序访问关系型数据库,在应用程序的不同调用间提供信息的连续性,甚至于处理服务器之上的文件。

1.2 如何在HTML页面加载JavaScript代码

可以有三种方法加载在HTML页面中引入JavaScript代码:

  1. 内联式: 在HTML标签的style属性中定义样式,在onclick这样的属性中定义Javascript代码;
  2. 嵌入式: 在页面中使用<script>标签定义Javascript代码;
  3. 引用外部文件: 在<script>标签中定义src属性引入Javascript文件.

注意:在<head>或者<body>中都可以创建<script>标签来创建或者引入JavaScript代码。

搜索一下,为什么我们让你把<script>放在</body>前。

  1. 浏览器在解释HTML页面时,是按照先后顺序的,所在放在前面的JS代码就会先被执行。正是因为这种特性,所以放在<head>中的<script>代码会阻塞页面的渲染。
  2. 其实有些JS代码可以放在<head></head >之间,比如IE9以下浏览器兼容HTML5标签的js代码,这是一个底层的兼容脚本,不涉及任何页面逻辑。那么它应该放在<head></head >间。
  3. 新版浏览器<script>标签可以使用defer属性来延迟加载。

最简单的不就是把能放在body中的代码放进去吗?扩展阅读中有详细介绍。

1.3 扩展阅读

2. JavaScript数据类型及语言基础

  • 创建一个JavaScript文件,比如util.js;
  • 实践判断各种数据类型的方法,并在util.js中实现以下方法:

2.1 判断各种数据类型的方法

这里比较简单,可以参考我的另一篇博客JavaScript类型识别.

在ECMAScript5中,判断数组类型可以直接使用Array.isArray()。

2.2 值类型和引用类型的区别.各种对象的读取、遍历方式

了解值类型和引用类型的区别,了解各种对象的读取、遍历方式,并在util.js中实现以下方法:

2.2.1 深度克隆

思路如下

  1. 题目考的主要是有些对象的使用=直接赋值,并不是真正的复制,而是将一个新的变量指向了当前对象,共享同一个地址。在修改原对象时,新对象也会跟着改变。
  2. 经过测试,数字、字符串、布尔、日期、可以直接赋值,修改不会产生影响。所以就思考了在使用typeof值为对象或者是原始类型时的情况。且对象类型为Date对象时,也使用直接赋值的方式。
  3. 再考虑对象类型为Array或者Object的情况。对于结果声明其类型。
  4. 接着往下走,在遍历对象时,只考虑其自身的属性,而不考虑继承来属性。若其自身值还是对象,那么 就递归调用,进一步解析、赋值,否则直接赋值。

实现:

2.3数组、字符串、数字等相关方法

学习数组、字符串、数字等相关方法,在util.js中实现以下函数

2.3.1 数组去重操作

思路如下:

  1. 新建一下新数组
  2. 循环原数组
  3. 判断新数组内元素,原数组是否含有.含有则跳过
    这里使用了数组的indexOf方法,找到某个元素在数组中的索引。简化了查找过程,若使用最简单的遍历寻找的话需要嵌套循环,是这样的,先在循环中取原数组的值,再循环在新数组中查找,若有相等的情况就不添加。(这是我的第一想法,显然比现在复杂很多).
    参看来自MDN的Array对象.里面介绍了一下数组的方法.
  4. 返回新数组.

实现:

2.3.2 实现trim函数,去除字符串首尾空白

实现一个简单的trim函数,用于去除一个字符串,头部和尾部的空白字符

实现如下:

2.3.3 遍历数组,对每一个元素执行fn函数

思路如下:

  1. 这里的实现有点类似ECMA5中数组的forEach()方法
  2. 由示例可知:item为必须参数,index为可选参数.
  3. 且item为数组项,index为数组索引.
  4. 这样就简单了,循环传参.

实现:

2.3.4 获取对象里第一层元素的数量,返回整数

实现:

正则表达式

实现思路

这里参考正则表达式-理论基础篇

  • 手机号码的匹配
    1. 这里匹配的情况是最简单的情况,并没有特别完美,比如限制开头第二位数字的范围:188,158通过,而123,191,不通过等等。
    2. 可利用多选分支,例如:/^1[3|5][0-9]{9}$|^18\d{9}$/。不过现在虚拟运营商的加入,号码段变多了,所以直接用最简单的方法,也没事。
  • 邮箱的匹配
    1. 在@前能出现哪些东西?这里使用(\w+\.)*来匹配出现.的情况,表示出现0次或多次因为.后不能紧跟@,所以后面紧跟\w+匹配普通的字母数字情况。
    2. @后出现的邮箱后缀并不固定所以使用\w+来匹配。
    3. 最后考虑域名结尾的级联情况所以用(\.\w+)+

实现如下:

2.4 参考资料

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: