zoukankan      html  css  js  c++  java
  • js Array Map and Set

    Array

    slice

    slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array:

    var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']
    arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
    

    Note:slice()的起止参数包括开始索引,不包括结束索引。

    如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array:

    var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    var aCopy = arr.slice();
    aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    aCopy === arr; // false
    

    push和pop

    push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉:

    var arr = [1, 2];
    arr.push('A', 'B'); // 返回Array新的长度: 4
    arr; // [1, 2, 'A', 'B']
    arr.pop(); // pop()返回'B'
    arr; // [1, 2, 'A']
    arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
    arr; // []
    arr.pop(); // 空数组继续pop不会报错,而是返回undefined
    arr; // []
    

    unshift和shift

    如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉:

    var arr = [1, 2];
    arr.unshift('A', 'B'); // 返回Array新的长度: 4
    arr; // ['A', 'B', 1, 2]
    arr.shift(); // 'A'
    arr; // ['B', 1, 2]
    arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
    arr; // []
    arr.shift(); // 空数组继续shift不会报错,而是返回undefined
    arr; // []
    

    sort

    sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序:

    var arr = ['B', 'C', 'A'];
    arr.sort();
    arr; // ['A', 'B', 'C']
    

    能否按照我们自己指定的顺序排序呢?完全可以.

    如果是数字,我们可以直接比较,但如果是字符串或者两个对象呢?直接比较数学上的大小是没有意义的,因此,比较的过程必须通过函数抽象出来。通常规定,对于两个元素x和y,如果认为x < y,则返回-1,如果认为x == y,则返回0,如果认为x > y,则返回1,这样,排序算法就不用关心具体的比较过程,而是根据比较结果直接排序。

    JavaScript的Array的sort()方法就是用于排序的,但是排序结果可能让你大吃一惊:

    // 看上去正常的结果:
    ["Google", "Apple", "Microsoft"].sort(); // ["Apple", "Google", "Microsoft"];
    
    // apple排在了最后:
    ["Google", "apple", "Microsoft"].sort(); // ["Google", "Microsoft", "apple"]
    
    // 无法理解的结果:
    [10, 20, 1, 2].sort(); // [1, 10, 2, 20]
    

    第二个排序把apple排在了最后,是因为字符串根据ASCII码进行排序,而小写字母a的ASCII码在大写字母之后。

    第三个排序结果是什么鬼?简单的数字排序都能错?

    这是因为Array的sort()方法默认把所有元素先转换为String再排序,结果'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。

    如果不知道sort()方法的默认排序规则,直接对数字排序,绝对栽进坑里!

    幸运的是,sort()方法也是一个高阶函数,它还可以接收一个比较函数来实现自定义的排序。

    要按数字大小排序,我们可以这么写:

    var arr = [10, 20, 1, 2];
    arr.sort(function (x, y) {
        if (x < y) {
            return -1;
        }
        if (x > y) {
            return 1;
        }
        return 0;
    }); // [1, 2, 10, 20]
    

    如果要倒序排序,我们可以把大的数放前面:

    var arr = [10, 20, 1, 2];
    arr.sort(function (x, y) {
        if (x < y) {
            return 1;
        }
        if (x > y) {
            return -1;
        }
        return 0;
    }); // [20, 10, 2, 1]
    

    默认情况下,对字符串排序,是按照ASCII的大小比较的,现在,我们提出排序应该忽略大小写,按照字母序排序。要实现这个算法,不必对现有代码大加改动,只要我们能定义出忽略大小写的比较算法就可以:

    var arr = ['Google', 'apple', 'Microsoft'];
    arr.sort(function (s1, s2) {
        x1 = s1.toUpperCase();
        x2 = s2.toUpperCase();
        if (x1 < x2) {
            return -1;
        }
        if (x1 > x2) {
            return 1;
        }
        return 0;
    }); // ['apple', 'Google', 'Microsoft']
    

    忽略大小写来比较两个字符串,实际上就是先把字符串都变成大写(或者都变成小写),再比较。

    从上述例子可以看出,高阶函数的抽象能力是非常强大的,而且,核心代码可以保持得非常简洁。

    Note:sort()方法会直接对Array进行修改,它返回的结果仍是当前Array:

    var a1 = ['B', 'A', 'C'];
    var a2 = a1.sort();
    a1; // ['A', 'B', 'C']
    a2; // ['A', 'B', 'C']
    a1 === a2; // true, a1和a2是同一对象
    

    reverse

    reverse()把整个Array的元素给掉个个,也就是反转:

    var arr = ['one', 'two', 'three'];
    arr.reverse(); 
    arr; // ['three', 'two', 'one']
    

    splice

    splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:

    var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
    // 从索引2开始删除3个元素,然后再添加两个元素:
    arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
    arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
    // 只删除,不添加:
    arr.splice(2, 2); // ['Google', 'Facebook']
    arr; // ['Microsoft', 'Apple', 'Oracle']
    // 只添加,不删除:
    arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
    arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
    

    concat

    concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array:

    var arr = ['A', 'B', 'C'];
    var added = arr.concat([1, 2, 3]);
    added; // ['A', 'B', 'C', 1, 2, 3]
    arr; // ['A', 'B', 'C']
    

    请注意,concat()方法并没有修改当前Array,而是返回了一个新的Array。

    实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:

    var arr = ['A', 'B', 'C'];
    arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
    

    join

    join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:

    var arr = ['A', 'B', 'C', 1, 2, 3];
    arr.join('-'); // 'A-B-C-1-2-3'
    如果Array的元素不是字符串,将自动转换为字符串后再连接。

    filter

    filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。

    和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

    例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:

    var arr = [1, 2, 4, 5, 6, 9, 10, 15];
    var r = arr.filter(function (x) {
        return x % 2 !== 0;
    });
    r; // [1, 5, 9, 15]
    

    把一个Array中的空字符串删掉,可以这么写:

    var arr = ['A', '', 'B', null, undefined, 'C', '  '];
    var r = arr.filter(function (s) {
        return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
    });
    arr; // ['A', 'B', 'C']
    

    可见用filter()这个高阶函数,关键在于正确实现一个“筛选”函数。

    filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

    var arr = ['A', 'B', 'C'];
    var r = arr.filter(function (element, index, self) {
        console.log(element); // 依次打印'A', 'B', 'C'
        console.log(index); // 依次打印0, 1, 2
        console.log(self); // self就是变量arr
        return true;
    });
    

    利用filter,可以巧妙地去除Array的重复元素:

    'use strict';
    
    var
        r,
        arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
    
    r = arr.filter(function (element, index, self) {
        return self.indexOf(element) === index;
    });
    
    alert(r.toString());
    

    去除重复元素依靠的是indexOf总是返回第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等,因此被filter滤掉了。

    reduce

    Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

    [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
    

    比方说对一个Array求和,就可以用reduce实现:

    var arr = [1, 3, 5, 7, 9];
    arr.reduce(function (x, y) {
        return x + y;
    }); // 25
    

    Map

    Map是一组键值对的结构,具有极快的查找速度。

    举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:

    var names = ['Michael', 'Bob', 'Tracy'];
    var scores = [95, 75, 85];
    

    给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。

    如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。用JavaScript写一个Map如下:

    var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
    m.get('Michael'); // 95
    

    初始化Map需要一个二维数组,或者直接初始化一个空Map。Map具有以下方法:

    var m = new Map(); // 空Map
    m.set('Adam', 67); // 添加新的key-value
    m.set('Bob', 59);
    m.has('Adam'); // 是否存在key 'Adam': true
    
    m.get('Adam'); // 67
    m.delete('Adam'); // 删除key 'Adam'
    
    m.get('Adam'); // undefined
    

    由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

    Set

    Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

    要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set:

    var s1 = new Set(); // 空Set
    var s2 = new Set([1, 2, 3]); // 含1, 2, 3
    

    重复元素在Set中自动被过滤:

    var s = new Set([1, 2, 3, 3, '3']);
    s; // Set {1, 2, 3, "3"}
    

    注意数字3和字符串'3'是不同的元素。

    通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:

    s.add(4)
    s// {1, 2, 3, 4}
    s.add(4)
    s// {1, 2, 3, 4}
    

    通过delete(key)方法可以删除元素:

    var s = new Set([1, 2, 3]);
    s; // Set {1, 2, 3}
    s.delete(3);
    s; // Set {1, 2}
    

    Note:Map和Set是ES6标准新增的数据类型,请根据浏览器的支持情况决定是否要使用。

    遍历for ... of

    遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。

    具有iterable类型的集合可以通过新的for ... of循环来遍历。

    用for ... of循环遍历集合,用法如下:

    var a = ['A', 'B', 'C'];
    var s = new Set(['A', 'B', 'C']);
    var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    
    for (var x of a) { // 遍历Array
        alert(x);
    }
    
    for (var x of s) { // 遍历Set
        alert(x);
    }
    
    for (var x of m) { // 遍历Map
        alert(x[0] + '=' + x[1]);
    }
    

    for ... of和for ... in区别

    for ... in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。

    当我们手动给Array对象添加了额外的属性后,for ... in循环将带来意想不到的意外效果:

    var a = ['A', 'B', 'C'];
    a.name = 'Hello';
    
    for (var x in a) {
        alert(x); // '0', '1', '2', 'name'
    }
    

    for ... in循环将把name包括在内,但Array的length属性却不包括在内。

    for ... of循环则完全修复了这些问题,它只循环集合本身的元素:

    var a = ['A', 'B', 'C'];
    a.name = 'Hello';
    for (var x of a) {
        alert(x); // 'A', 'B', 'C'
    }
    

    这就是为什么要引入新的for ... of循环。

    然而,更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。以Array为例:

    var a = ['A', 'B', 'C'];
    a.forEach(function (element, index, array) {
        // element: 指向当前元素的值
        // index: 指向当前索引
        // array: 指向Array对象本身
        alert(element);
    });
    

    注意,forEach()方法是ES5.1标准引入的,你需要测试浏览器是否支持。

    Set与Array类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:

    var s = new Set(['A', 'B', 'C']);
    s.forEach(function (element, sameElement, set) {
        alert(element);
    });
    

    Map的回调函数参数依次为value、key和map本身:

    var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    m.forEach(function (value, key, map) {
        alert(value);
    });
    

    如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得Array的element:

    var a = ['A', 'B', 'C'];
    a.forEach(function (element) {
        alert(element);
    });
    

  • 相关阅读:
    HDU 2116 Has the sum exceeded
    HDU 1233 还是畅通工程
    HDU 1234 开门人和关门人
    HDU 1283 最简单的计算机
    HDU 2552 三足鼎立
    HDU 1202 The calculation of GPA
    HDU 1248 寒冰王座
    HDU 1863 畅通工程
    HDU 1879 继续畅通工程
    颜色对话框CColorDialog,字体对话框CFontDialog使用实例
  • 原文地址:https://www.cnblogs.com/zi-xing/p/9502845.html
Copyright © 2011-2022 走看看