zoukankan      html  css  js  c++  java
  • 操作数组不要只会for循环

    很多时候,我们在操作数组的时候往往就是一个for循环干到底,对数组提供的其它方法视而不见。看完本文,希望你可以换种思路处理数组,然后可以写出更加漂亮、简洁、函数式的代码。

    reduce

    数组里所有值的和

    var sum = [0, 1, 2, 3].reduce(function (a, b) {
        return a + b;
    }, 0);
    // sum is 6
    

    将二维数组转化为一维数组

    var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
        function (a, b) {
            return a.concat(b);
        },
        []
    );
    // flattened is [0, 1, 2, 3, 4, 5]
    

    计算数组中每个元素出现的次数

    var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    
    var countedNames = names.reduce(function (allNames, name) {
        if (name in allNames) {
            allNames[name]++;
        }
        else {
            allNames[name] = 1;
        }
        return allNames;
    }, {});
    // countedNames is:
    // { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
    

    使用扩展运算符和initialValue绑定包含在对象数组中的数组

    // friends - an array of objects 
    // where object field "books" - list of favorite books 
    var friends = [{
        name: 'Anna',
        books: ['Bible', 'Harry Potter'],
        age: 21
    }, {
        name: 'Bob',
        books: ['War and peace', 'Romeo and Juliet'],
        age: 26
    }, {
        name: 'Alice',
        books: ['The Lord of the Rings', 'The Shining'],
        age: 18
    }];
    
    // allbooks - list which will contain all friends' books +  
    // additional list contained in initialValue
    var allbooks = friends.reduce(function (prev, curr) {
        return [...prev, ...curr.books];
    }, ['Alphabet']);
    
    // allbooks = [
    //   'Alphabet', 'Bible', 'Harry Potter', 'War and peace', 
    //   'Romeo and Juliet', 'The Lord of the Rings',
    //   'The Shining'
    // ]
    

    数组去重

    var arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
    var result = arr.sort().reduce(
        function (init, current) {
            if (init.length === 0 || init[init.length - 1] !== current) {
                init.push(current);
            }
            return init;
        },
        []
    );
    console.log(result); //[1,2,3,4,5]
    

    数组变整数

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

    map

    求数组中每个元素的平方根

    var numbers = [1, 4, 9];
    var roots = numbers.map(Math.sqrt);
    // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
    

    格式化数组中的对象

    var kvArray = [{key: 1, value: 10},
        {key: 2, value: 20},
        {key: 3, value: 30}];
    
    var reformattedArray = kvArray.map(function (obj) {
        var rObj = {};
        rObj[obj.key] = obj.value;
        return rObj;
    });
    
    // reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}], 
    
    // kvArray 数组未被修改: 
    // [{key: 1, value: 10}, 
    //  {key: 2, value: 20}, 
    //  {key: 3, value: 30}]
    

    用一个仅有一个参数的函数来mapping一个数字数组

    var numbers = [1, 4, 9];
    var doubles = numbers.map(function(num) {
      return num * 2;
    });
    
    // doubles数组的值为: [2, 8, 18]
    // numbers数组未被修改: [1, 4, 9]
    

    反转字符串

    var str = '12345';
    Array.prototype.map.call(str, function(x) {
      return x;
    }).reverse().join('');
    
    // 输出: '54321'
    // Bonus: use '===' to test if original string was a palindrome
    

    every

    检测所有数组元素的大小

    function isBigEnough(element, index, array) {
        return (element >= 10);
    }
    
    var passed = [12, 5, 8, 130, 44].every(isBigEnough);
    // passed is false
    passed = [12, 54, 18, 130, 44].every(isBigEnough);
    // passed is true
    

    filter

    筛选排除掉所有的小值

    function isBigEnough(element) {
      return element >= 10;
    }
    var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    

    find

    用对象的属性查找数组里的对象

    var inventory = [
        {name: 'apples', quantity: 2},
        {name: 'bananas', quantity: 0},
        {name: 'cherries', quantity: 5}
    ];
    
    function findCherries(fruit) {
        return fruit.name === 'cherries';
    }
    
    console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
    

    寻找数组中的质数

    function isPrime(element, index, array) {
      var start = 2;
      while (start <= Math.sqrt(element)) {
        if (element % start++ < 1) {
          return false;
        }
      }
      return element > 1;
    }
    
    console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
    console.log([4, 5, 8, 12].find(isPrime)); // 5
    

    some

    测试数组元素的值

    function isBigEnough(element, index, array) {
        return (element >= 10);
    }
    
    var passed = [2, 5, 8, 1, 4].some(isBigEnough);
    // passed is false
    passed = [12, 5, 8, 1, 4].some(isBigEnough);
    // passed is true
    

    sort

    升序排序

    var list = [1, 3, 7, 6];
    
    list.sort(function(a, b) {
        return a-b;
    });
    

    降序排序

    var list = [1, 3, 7, 6];
    
    list.sort(function(a, b) {
        return b-a;
    });
    

    使用映射改善排序

    // 需要被排序的数组
    var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
    
    // 对需要排序的数字和位置的临时存储
    var mapped = list.map(function (el, i) {
        return {index: i, value: el.toLowerCase()};
    })
    
    // 按照多个值排序数组
    mapped.sort(function (a, b) {
        return +(a.value > b.value) || +(a.value === b.value) - 1;
    });
    
    // 根据索引得到排序的结果
    var result = mapped.map(function (el) {
        return list[el.index];
    });
    
  • 相关阅读:
    俄罗斯方块源码解析(带下载)[2]
    gridView基本操作
    俄罗斯方块源码解析 系列 更新
    俄罗斯方块源码解析(带下载)[1]
    《CLR Via C#》 学习心得一 CLR基础知识
    《CLR Via C#》 学习心得之二 类型基础
    《CLR Via C#》 学习心得之三 基元类型、引用类型和值类型
    观《大话设计模式》之——简单工厂模式
    观Fish Li《细说 Form (表单)》有感
    总结做了八个月asp.net程序员
  • 原文地址:https://www.cnblogs.com/laixiangran/p/9548046.html
Copyright © 2011-2022 走看看