每天10个前端知识点：数组应用篇

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

内容中也补充了少数字符串的应用。

1. 数组翻转方法2

eg:这里说明一下，这个方法用的不是reverse，因为一次面试中被问过不用reverse实现翻转，所以这里标注为数组的翻转方法2。

<script>
    var arr=[1,2,3,4];
    var arr2=[];
    while(arr.length) {
        var num=arr.pop();
        arr2.push(num);
    }
    alert(arr2);
</script>

2. 首字母大写

eg:

<script>
    var str = 'welcome to china';
    var arr = str.split(' ');
    var arr2 = [];
    for(var i = 0; i < arr.length; i++) {
        var first = arr[i].charAt(0).toUpperCase();
        var other = arr[i].substring(1);
        arr2.push(first + other);
    }
    alert(arr2.join(' '));

    //正则写法
    var str2 = str.replace(/\w+/g, function(s) {
        return s.charAt(0).toUpperCase() + s.substring(1);
    })
    alert(str2);
</script>

3.快速清空数组

1. length=0;
2. arr=[];
3. arr.splice(0,arr.length);
4. 循环pop或shift

4. 数组排序方法

更多方法见后续排序算法篇

<script>
    function findMinIndex(arr, start) {
        var iMin = arr[start];
        var iMinIndex = start;
        for(var i = start + 1; i < arr.length; i++) {
            if(iMin > arr[i]) {
                iMin = arr[i];
                iMinIndex = i;
            }
        }
        return iMinIndex;
    }

    for(var i = 0; i < arr.length; i++) {
        var iMinIndex = findMinIndex(arr, i);
        var temp;
        temp = arr[iMinIndex];
        arr[iMinIndex] = arr[i];
        arr[i] = temp;
    }
</script>

5. 数组内查找元素是否存在

<script>
    function findInArr(item, arr) {
        for(var i = 0; i < arr.length; i++) {
            if(item == arr[i]) {
                return true;
            } else {
                return false;
            }
        }
    }
</script>

6. 数组去重的多种方法

(1)findInArr

<script>
    var arr2 = [];

    for(var i = 0; i < arr.length; i++) {
        if(!findInArr(arr[i], arr2)) {
            arr2.push(arr[i]);
        }
    }

    // 数组内查找元素是否存在
    function findInArr(item, arr) {
        for(var i = 0; i < arr.length; i++) {
            if(item == arr[i]) {
                return true;
            } else {
                return false;
            }
        }
    }
</script>

(2)json(自动从小到大排序)

<script>
    var json = {};
    var arr2 = [];

    for(var i = 0; i < arr.length; i++) {
        json[arr[i]] = 'xxx';
    }

    for(var name in json) {
        arr2.push(name);
    }
</script>

摘自也谈JavaScript数组去重

<script>
    function unique(arr) {
        var ret = [];
        var len = arr.length;
        var tmp = {};
        for(var i=0; i<len; i++){
          if(!tmp[arr[i]]){
            tmp[arr[i]] = 1;
            ret.push(arr[i]);
        }
    }
    return ret;
}
</script>

(3)sort()

<script>
    arr.sort();
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] == arr[i+1]) {
            arr.splice(i, 1);
            i--;
        }
    }
</script>

(4) indexOf

这个方法是在前端公众号偶然看到的，数组的indexOf方法第一次用到

<script>
    for(var i = 0; i < arr.length; i++) {
        if(arr2.indexOf(arr[i]) < 0) {
            arr2.push(arr[i]);
        }
    }
</script>

(5)二分法

<script>
    var arr = [1, 2, 3, 2, 4, 3, 1, 5, 7, 2, 5];

    // 数组内查找元素是否存在
    function findInArr(item, arr) {
        for(var i = 0; i < arr.length; i++) {
            if(item == arr[i]) {
                return true;
            }
        }
        return false;
    }

    function del(arr, s, e) {
        if(s > e) {
            return [];
        } else if(s == e) {
            return [arr[s]];
        }

        var c = Math.floor((s + e) / 2);
        var l = del(arr, s, c);
        var r = del(arr, c + 1, e);

        for(var i = 0; i < r.length; i++) {
            if(!findInArr(r[i], l)) {
                l.push(r[i]);
            }
        }

        return l;
    }

    console.log(del(arr, 0 , arr.length - 1));
</script>

(6)Map(ES6)

摘自也谈JavaScript数组去重

Map的存取使用单独的get()、set()接口。

<script>

function unique(arr) {
    var ret = [];
    var len = arr.length;
    var tmp = new Map();
    for(var i=0; i<len; i++){
        if(!tmp.get(arr[i])){
            tmp.set(arr[i], 1);
            ret.push(arr[i]);
        }
    }
    return ret;
}
</script>

(7)Set(ES6)

摘自也谈JavaScript数组去重

Set不允许重复元素出现。

<script>
function unique(arr){
    var set = new Set(arr);
    return Array.from(set);
}
</script>

补一个字符串的应用

(1) 字符串中出现次数最多的字符

• json

<script>
    var str = 'abcdaaaaaa';
    var json = {};

    for(var i = 0; i < str.length; i++) {
        if(json[str.charAt(i)]) {
            json[str.charAt(i)]++;
        } else {
            json[str.charAt(i)] = 1;
        }
    }

    var num = -1;
    var char = '';

    for(var name in json) {
        if(num < json[name]) {
            num = json[name];
            char = name;
        }
    }

    console.log(num, char);
</script>

• 正则

<script>
    var str = 'abcdaaaaaa';
    var arr = str.split("")
        .sort()
        .join("")
        .match(/([a-z])\1*/g)
        .sort(function(a, b) {
            return b.length - a.length;
        })
    console.log("出现最多的是: " + arr[0][0] + "共" + arr[0].length + "次");
    var hash = {};
    arr.forEach(function(val) {
        hash[val[0]] = val.length;
    });
    console.dir(hash);
</script>

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。