【js小技巧(5)】前端小菜也想来日更

77 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第5天,点击查看活动详情

清空数组的两种方法

如果你定义了一个数组,然后你想清空它。 通常,你会这样做:

    // 定义一个数组
    var list = [1, 2, 3, 4];
    function empty() {
        //清空数组
        list = [];
    }
    empty();

但是,这有一个效率更高的方法来清空数组。 你可以这样写:

    var list = [1, 2, 3, 4];
    function empty() {
        //empty your array
        list.length = 0;
    }
    empty();
  • list = [] 将一个新的数组的引用赋值给变量,其他引用并不受影响。 这意味着以前数组的内容被引用的话将依旧存在于内存中,这将导致内存泄漏。
  • list.length = 0 删除数组里的所有内容,也将影响到其他引用。

然而,如果你复制了一个数组(A 和 Copy-A),如果你用 list.length = 0 清空了它的内容,复制的数组也会清空它的内容。

考虑一下将会输出什么:

    var foo = [1,2,3];
    var bar = [1,2,3];
    var foo2 = foo;
    var bar2 = bar;
    foo = [];
    bar.length = 0;
    console.log(foo, bar, foo2, bar2);

    //[] [] [1, 2, 3] []

对数组洗牌

这段代码运用了 Fisher-Yates Shuffling 算法对数组进行洗牌:

    function shuffle(arr) {
        var i, 
            j,
            temp;
        for (i = arr.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
        return arr;    
    };

调用示例:

    var a = [1, 2, 3, 4, 5, 6, 7, 8];
    var b = shuffle(a);
    console.log(b); // [6, 1, 3, 5, 8, 4, 2, 7]

返回对象,使方法可以链式调用

在面向对象的Javascript中为对象建立一个方法时,返回当前对象可以让你在一条链上调用方法:

    function Person(name) {
      this.name = name;

      this.sayName = function() {
        console.log("Hello my name is: ", this.name);
        return this;
      };

      this.changeName = function(name) {
        this.name = name;
        return this;
      };
    }

    var person = new Person("演员");
    person.sayName().changeName("峡谷演员").sayName();

安全的字符串拼接

假如你需要拼接一些不确定类型的变量为字符串,你需要确保算术运算符在你拼接时不会起作用。可以使用 concat

    var one = 1;
    var two = 2;
    var three = '3';

    var result = ''.concat(one, two, three); //"123"

这应该就是你所期望的拼接结果。如果不这样,拼接时加号可能会导致你意想不到的结果:

    var one = 1;
    var two = 2;
    var three = '3';

    var result = one + two + three; // "33"