task0002（一）- JavaScript数据类型及语言基础

发表于2015-12-14更新于2020-03-12字数统计3.2k阅读时长21分

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类型识别.

1
2
3
4
5
6
7
8
9
10
// 判断arr是否为一个数组，返回一个bool值
function isArray(arr) {
    return typeof (arr) === "object" && Object.prototype.toString.call(arr) === "[object Array]";
}

// 判断fn是否为一个函数，返回一个bool值
function isFunction(fn) {
    return typeof (fn) === "function";
}

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

1
2
Array.isArray([]); //true
Array.isArray(function(){}); //false

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

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

2.2.1 深度克隆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 使用递归来实现一个深度克隆，可以复制一个目标对象，返回一个完整拷贝
// 被复制的对象类型会被限制为数字、字符串、布尔、日期、数组、Object对象。不会包含函数、正则对象等
function cloneObject(src) {
    // your implement
}

// 测试用例：
var srcObj = {
    a: 1,
    b: {
        b1: ["hello", "hi"],
        b2: "JavaScript"
    }
};
var abObj = srcObj;
var tarObj = cloneObject(srcObj);

srcObj.a = 2;
srcObj.b.b1[0] = "Hello";

console.log(abObj.a);
console.log(abObj.b.b1[0]);

console.log(tarObj.a);      // 1
console.log(tarObj.b.b1[0]);    // "hello"

思路如下

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

实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function cloneObject(src) {
    var result ;//返回的复制后的结果。
    if (typeof(src)==="object"){
        //对象为日期对象时也直接赋值。
        if(Object.prototype.toString.call(src)==="[object Date]"){
            result = src;
        }else{
            //判断对象的类型是Array还是Object，结果类型更改。
            result = (Object.prototype.toString.call(src)==="[object Array]")? [] : {};
            for (var i in src){
                if (src.hasOwnProperty(i)) { //排除继承属性
                    if (typeof src[i] === "object") {
                        result[i] = cloneObject(src[i]); //递归赋值
                    } else {
                        result[i] = src[i]; //直接赋值
                    }
                }
            }
        }
    }else{
        //对于原始类型直接赋值。
        result = src;
    }
    return result;
}

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

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

2.3.1 数组去重操作

1
2
3
4
5
6
7
8
// 对数组进行去重操作，只考虑数组中元素为数字或字符串，返回一个去重后的数组
function uniqArray(arr) {
    // your implement
}
// 使用示例
var a = [1, 3, 5, 7, 5, 3];
var b = uniqArray(a);
console.log(b); // [1, 3, 5, 7]

思路如下：

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

实现：

1
2
3
4
5
6
7
8
9
10
11
function uniqArray(arr) {
    // your implement
    var result = []; //创建一个新数组。
    for (var i = 0, l = arr.length; i < l; i++) {
        if (result.indexOf(arr[i]) === -1) { //查找是否已经含有该元素
            result.push(arr[i]); //添加到新数组
        }
    }
    return result; //返回新数组

}

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

  • 实现一个简单的trim函数，用于去除一个字符串，头部和尾部的空白字符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//1.字符串查找
// 假定空白字符只有半角空格、Tab
// 练习通过循环，以及字符串的一些基本方法，分别扫描字符串str头部和尾部是否有连续的空白字符，并且删掉他们，最后返回一个完成去除的字符串
function simpleTrim(str) {
    // your implement
}
//2.正则
// 很多同学肯定对于上面的代码看不下去，接下来，我们真正实现一个trim
// 对字符串头尾进行空格字符的去除、包括全角半角空格、Tab等，返回一个字符串
// 尝试使用一行简洁的正则表达式完成该题目
function trim(str) {
    // your implement
}
// 使用示例
var str = '   hi!  ';
str = trim(str);
console.log(str); // 'hi!'

实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//1.字符串查找
//这里就是利用两个循环，找到头尾第一个不是空格且不是tab符的元素。记录它们的索引，之后截取字符串。
function simpleTrim(str) {
    // your implement
    var result = "";
    for (var i = 0, il = str.length; i < il; i++) { //从头查找
        if (str[i] != " " && str[i] != "\t") {
            break; //查找到第一个不为空格及tab符的元素
        }

    }
    for (var j = str.length - 1; j >= 0; j--) { //从尾查找
        if (str[j] != " " && str[j] != "\t") {
            break;
        }

    }
    result = str.slice(i, j + 1); //截取需要的字符串。
    return result;
}
//2.正则
function trim(str) {
    // your implement
    var result = "";
    result = str.replace(/^\s+|\s+$/g, ""); //使用正则进行字符串替换
    return result;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 实现一个遍历数组的方法，针对数组中每一个元素执行fn函数，并将数组索引和元素作为参数传递
function each(arr, fn) {
    // your implement
}

// 其中fn函数可以接受两个参数：item和index

// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output(item) {
    console.log(item)
}
each(arr, output);  // java, c, php, html

// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output(item, index) {
    console.log(index + ': ' + item)
}
each(arr, output);  // 0:java, 1:c, 2:php, 3:html

思路如下:

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

实现：

1
2
3
4
5
6
function each(arr, fn) {
    // your implement
    for (var i = 0, l = arr.length; i < l; i++) {//遍历传参
        fn(arr[i], i);
    }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 获取一个对象里面第一层元素的数量，返回一个整数
function getObjectLength(obj) {}

// 使用示例
var obj = {
    a: 1,
    b: 2,
    c: {
        c1: 3,
        c2: 4
    }
};
console.log(getObjectLength(obj)); // 3

实现：

1
2
3
4
5
6
7
8
9
10
11
//使用for in遍历时,直接获取到的就是第一层的结果
//排除继承来的属性,使用外部变量保存循环次数
function getObjectLength(obj) {
    var count = 0;
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            count++;
        }
    }
    return count;
}

正则表达式

1
2
3
4
5
6
7
8
9
// 判断是否为邮箱地址
function isEmail(emailStr) {
    // your implement
}

// 判断是否为手机号
function isMobilePhone(phone) {
    // your implement
}

实现思路

这里参考我对于正则表达式入门的两篇博客

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

实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
// 判断是否为邮箱地址
function isEmail(emailStr) {
    // your implement
    var reg = /^(\w+\.)*\w+@\w+(\.\w+)+$/;
    return reg.test(emailStr);
}

// 判断是否为手机号
function isMobilePhone(phone) {
    // your implement
    var reg = /^1\d{10}$/;
    return reg.test(phone);
}

2.4 参考资料

使用搜索：谷歌必应百度