| JavaScript, 难点, 易错点

JavaScript中的难点及易错点（一）

1. 延时写法

在想到让大家写一个延时的代码时，大家可能第一时间想到的是：setTimeout("callFunction()",1000);
但是，我们可以对上述的代码进行一个更好的优化，可以将其改为如下所示代码：

1
2
3
4
5
6
7
function delayeFunction(content,time){
	setTimeout(function(){
		// 可以对content的内容进行修改，在这里我就简单的写一个打印content的内容
		console.log(content);
	},time);
}
delayeFunction("hello_javascript",1000);   // 此时控制台会延迟1s之后打印"hello_javascript"

2. js实现字符串的翻转

其实对于js来实现字符串的翻转是比较容易的，但是可能对于初学者来说还有一点模糊，下面我就来实现一种简单的方法，代码如下所示：

1
2
3
let str = "hello_javascript";
let new_str = str.split("").reverse().join("");
console.log(new_str);     // "tpircsavaj_olleh"

下面我来解释一下new_str中实现的原理，首先使用split()方法把一个字符串转换成字符串数组，让后再使用reverse()方法颠倒数组中元素的顺序，最后再使用join()方法将数组中的所有元素放入一个字符串，进而实现了字符串的一个翻转效果。在上面的代码中大家应该注意到上述三种方法究竟是属于数组对象中的方法，还是属于字符串对象中的方法。

3. 点和中括号的区别

  1. 中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。
  2. 中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。
  3. 中括号运算符可以用纯数字为属性名。点运算符不能。
  4. 中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。

4. 变量提升

  1. 全局变量的提升，先看看如下所示的代码：
    1
    2
    3
    console.log(a);   // undefined
    var a = "hello_javascript";
    console.log(a);   // "hello_javascript"
    此时你一定会很纳闷，为什么打印第一个a的时候没有报错，其原因是因为全局变量提升造成的。
    我们可以把上述的代码解析成下面所提供的代码：
    1
    2
    3
    4
    5
    // 解析
    var a;  // 全局变量提升
    console.log(a);
    a = "hello_javascript";
    console.log(a);
  2. 函数体内部也可以进行一个变量的提升，现看看如下所示的代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var name = 'hello_javascript';
    (function () {
        if (typeof name === 'undefined') {   // 此时在这里还挖了一个坑，那就是typeof返回的类型是一个字符串类型的
            var name = 'JS';
            console.log('hello:' + name);
        } else {
            console.log('nohello:' + name);
        }
    })();
    // 此时控制台打印出来的内容为:
    // hello:JS
    在立即执行函数内部有一个var name = ‘JS’;此时函数内部中的name就看函数内部中定义name的那一部分，而不能看外部的name。可能一时半会有的小伙伴有点懵，那我还是给大家来解析一下上面的代码执行过程：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var name = 'hello_javascript';
    (function () {
    	var name;  // 变量name提升了，因此name为undefined
     if (typeof name === 'undefined') {   // 此时在这里还挖了一个坑，那就是typeof返回的类型是一个字符串类型的，此时name值变为'undefined'
         name = 'JS';
         console.log('hello:' + name);
     } else {
         console.log('nohello:' + name);
     }
    })();