20160304小结task002_2-JS数据类型及语言基础

发表于   |   分类于   |  

判断arr是否为一个数组，返回一个bool值

1
2
3
4
5
6
7
8
9
方法一
function isArray(arr) {
	return Object.prototype.toString.call(arr) === '[object Array]';
}
console.log(isArray([])) // true
方法二(ECMAScript 5)
function isArray(arr) {
	return Array.isArray();
}

判断fn是否为一个函数，返回一个bool值

1
2
3
4
5
function isFunction(fn) {
	return Object.prototype.toString.call(fn) === '[object Function]';
}
var f = function() {};
console.log(isFunction(f)) // true

使用递归来实现一个深度克隆

使用递归来实现一个深度克隆，可以复制一个目标对象，返回一个完整拷贝
被复制的对象类型会被限制为数字、字符串、布尔、日期、数组、Object对象。不会包含函数、正则对象等

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
28
29
30
31
32
33
34
function cloneObject(src) {
	var o;
	if (Object.prototype.toString.call(src) === '[object Array]' ){
        o = [];
    } else {
        o = {};
    }
    for (var i in src) {
        if (scr.hasOwnProperty(i)) {
            if (typeof src[i] === 'object') {
                o[i] = cloneObject(src[i]);
            } else {
                o[i] = src[i];
            }
        }
    }
    return o;
}
// 测试用例：
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);       // 2
console.log(abObj.b.b1[0]);     // "Hello"   因为对象是引用值，通过浅克隆得到的对象始终指向原型
console.log(tarObj.a);      // 1
console.log(tarObj.b.b1[0]);    // "hello"

对数组进行去重操作，只考虑数组中元素为数字或字符串，返回一个去重后的数组

1
2
3
4
5
6
7
8
9
10
11
12
13
function uniqArray(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
// 使用示例
var a = [1, 3, 5, 7, 5, 3];
var b = uniqArray(a);
console.log(b); // [1, 3, 5, 7]

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

假定空白字符只有半角空格、Tab
练习通过循环，以及字符串的一些基本方法，分别扫描字符串str头部和尾?部是否有连续的空白字符，并且删掉他们，最后返回一个完成去除的字符串

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
function simpleTrim(str) {
    var i;
    var j;
    for (i = 0; i < str.length; i++) {
        if (str.charAt(i) !== " " && str.charAt(i) !== "/t") {
            break;
        }
    }
    for (j = str.length-1;j >= 0; j--) {
        if (str.charAt(j) !== " ") && str.charAt(j) !== "/t" {
            break;
        }
    }
    return str.slice(i, j+1);
}
// 测试实例
var str = '   hi!  ';
str = simpleTrim(str);
console.log(str); // 'hi!'
// 正则表达式:
function trim(str) {
    retun str.replace(/^\s+|\s+$/g, "")；
}
// 测试实例
var str = '    hi!    ';
console.log(trim(str));  // 'hi!'

正则表达式

  • ^: 匹配字符串的开头，在多行检索中，匹配一行的开头
  • $: 匹配字符串的结尾，在多行检索中，匹配一行的结尾
  • +: 重复1次或更多次
  • \s: 匹配任意空白符
  • |: 匹配该符号左边的表达式或者右边的表达式
  • g: 执行一个全局匹配，即找到所有匹配，而不是找到第一个之后就停止

实现一个遍历数组的方法，针对数组中每一个元素执行fn函数，并将数组索引和元素作为参数传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function each(arr, fn) {
    for (var i = 0; i < arr.length; i++) {
        fn(arr[i], i);
    }
}
// 测试实例
function output(item) {
    console.log(item);
}
var arr = ['java', 'c', 'php', 'html'];
each(arr, output) // java, c, php, html
// 测试实例2
function output(item, index) {
    console.log(index + ':' + item);
}
var arr = ['java', 'c', 'php', 'html'];
each(arr, output) // 0:java, 1:c, 2:php, 3:html

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 方法一
function getObjectLength(obj) {
    return Object.keys(obj).length;
}
// 方法二
function getObjectLength(obj) {
    var count = 0;
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            count++;
        }
    }
    return count;
}
// 使用示例
var obj = {
    a: 1,
    b: 2,
    c: {
        c1: 3,
        c2: 4
    }
};
console.log(getObjectLength(obj)); // 3

判断是否为邮箱地址

1
2
3
4
5
6
7
function isEmail(emailStr) {
    var reg = /^(\w+\.)*\w+@\w+(\.\w+)+$/;
    return reg.test(emailStr);
}
// 测试用例
var email = "whiskey0705@gmail.com";
console.log(isEmail(email)); // true

判断是否为手机号

1
2
3
4
5
6
7
function isMobilePhone(phone) {
    var reg = /^1\d{10}$/;
    return reg.test(phone);
// 测试用例
var phone = 13777774567;
console.log(isMobilePhone(phone)); // true
}