JavaScript基础知识整理（1）

摘要：从这段描述可以得到以下对象小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了，一看到人就会每隔半秒叫一声地不停叫唤。将一个函数的对象上下文从初始的上下文改变为由指定的新对象。

基本数据类型：Number、String、Boolean、Null、Undefined

引用数据类型：Object（Array、Date、RegExp、Function）

那么问题来了，如何判断某变量是否为数组数据类型？

判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效

obj instanceof Array 在某些IE版本中不正确

obj.constructor === Array

在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：

function isArrayFn(o) {
    if(typeof Array.isArray === "function") {
        return Array.isArray(o);
    } else {
        return Object.prototype.toString.call(o) === "[object Array]"
    }
}
var o1 = [1,2,3,4,5];
var o2 = {a: 1, b: 2};
var o3 = [{a: 1, b: 2}];
isArrayFn(o1);    // true
isArrayFn(o2);    // false
isArrayFn(o3);    // true

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

Ajax是异步 JavaScript 和 XML，用于在Web页面中实现异步数据交互。

优点：

　- 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量

　- 避免用户不断刷新或者跳转页面，提高用户体验

缺点：

　- 对搜索引擎不友好（

　- 要实现ajax下的前后退功能成本较大

　- 可能造成请求数的增加

　- 跨域问题限制

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

var str = "get-element-by-id";
var arr = str.split("-");
for (var i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);
}
var res = arr.join("");
console.log(res)

实现对该数组的倒排

实现对该数组的降序排列

var numberArray = [3,1,6,7,4,2];
console.log(numberArray.reverse()); // 2,4,7,6,1,3

numberArray.sort(function(a, b) {
    return b - a;
})
console.log(numberArray) // 7,6,4,3,2,1

function escapeHtml(str) {
    return str.replace("/[<>"&]/g", function(match) {
        switch(match) {
            case "<":
                return "<";
                break;
            case ">":
                return ">";
                break;
            case "":
                return """;
                break;
            case "&":
                return  "&"
                break;
        }
    });
}

var iArray = [];

function getRandom(istart, iend) {
    var iChoice = iend - istart + 1;
    return Math.floor(Math.random() * iChoice + istart);
}

for (var i = 0; i < 10; i++) {
    iArray.push(getRandom(10, 100));
}

console.log(iArray.sort());

function getUrlParam(url) {
    var result = {};
    url = url.split("?")[1];
    var map = url.split("&");
    for (var i = 0; i < map.length; i++) {
        result[map[i].split("=")[0]] = map[i].split("=")[1];
    }
    return result;
}
var url = "http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e";
var res = getUrlParam(url);
console.log(res);// {a: "1", b: "2", c: "", d: "xxx", e: undefined}

当使用RegExp()构造函数的时候，不仅需要转义引号（即”表示”），并且还需要双反斜杠（即表示一个）。使用正则表达字面量的效率更高。

for (var i = 0; i < 3; i++) {
    setTimeout((function() {
        console.log(i)
    })(i))
}

if (!String.prototype.trim) {
    String.prototype.trim = function () {
        return this.replace(/^s+/g, "").replace(/s+$/g, "");
    }
}
var str = " this is a test string ";
alert(str.trim() == "this is a test string") // true

考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚

考察点2：是否知道如何判断一个变量是什么类型的

考察点3：递归算法的设计

function clone (obj) {
    var res;
    if (obj instanceof Array) {
        res = [];
        var i = obj.length;
        while (i--) {
            res[i] = clone(obj[i]);
        }
        return res;
    }
    else if (obj instanceof Object) {
        res = {};
        for (var k in obj) {
            res[k] = clone(obj[k]);
        }
        return res;
    }
    else {
        return obj;
    }
}

function Dog () {
    this.wow = function () {
        console.log("wow")
    }
    this.yelp = function () {
        this.wow();
    }
}

小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）

function MadDog () {
    this.yelp = function () {
        var self = this;
        setInterval(function () {
            self.wow();
        }, 500);
    }
}

MadDog.prototype = new Dog();
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

    
1
    
2
    
3


// 方法一
var lis = document.getElementById("test").getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onclick = (function (a) {
        return function () {
            alert(a)
        }
    })(i);
}

// 方法二
var lis = document.getElementById("test").getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
    (function (i) {
        lis[i].addEventListener("click", function () {
            alert(i)
        })
    })(i)
}

addSpace(“Hello World”) // -> ‘h e l l o  w o r l d’

String.prototype.space = function () {
    return this.split("").join(" ");
}

var str = "hello world";
console.log(str);// hello world
console.log(str.space());// h e l l o   w o r l d

function log (str) {
    console.log(str);
}

如果需要满足多个参数？

function log () {
    console.log.apply(this, arguments);
}

log(111,222,333）// 111 222 333

call和apply的区别？

对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。 如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3]) 。

function Person (name, age) {
    this.name = name;
    this.age = age;
    this.speakname = function () {
        alert(this.name)
    }
    this.speakage = function () {
        alert(this.age)
    }
}

function Man (name, age, sex) {
    Person.call(this, name, age);    // 继承Person对象 this指向Person
    this.sex = sex;
    this.speaksex = function () {
        alert(this.sex)
    }
}

var person = new Man("ashin", 35, "man");
person.speakname();
person.speakage();
person.speaksex();

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

var fakeArray = {0: "a", 1: "b", length: 2}; // 伪数组
var arr = Array.prototype.slice.call(fakeArray);

假设接第八题题干，我们要给每个log方法添加一个”app”前缀，比如’hello world!’ ->’app hello world!’。

function log () {
    var args = Array.prototype.slice.call(arguments);
    args.unshift("hello nodejs");
    console.log.apply(this, args);
}

log(1,2);    // hello nodejs 1 2

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）

var result = [];
function fn (n) {
    if (n == 1) {
        result = 1;
    }
    else if (n == 2) {
        result = 1;
    }
    else {
        if (result[n]) {
            return result[n];
        }
        else {
            // arguments.callee 表示 fn()
            result[n] = arguments.callee(n-1) + arguments.callee(n-2);
            return result[n];
        }
    }
}

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

function ready (fn) {
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function () {
            // 注销事件 避免反复触发
            document.removeEventListener("DOMContentLoaded", arguments.callee, false);
            fn();// 执行函数
        }, false);
    }
    else if (document.attachEvent) {
        document.attachEvent("onreadystatechange", function () {
            if (readyState == "complete") {
                document.detachEvent("onreadystatechange", arguments.callee);
                fn();
            }
        })
    }
}

给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

mousedown事件触发后，开始拖拽

mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置

mouseup时，拖拽结束

需要注意浏览器边界的情况