操作数组不要只会for循环

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

金沙官网线上,jQuery.grep(array, callback, [invert])

使用过滤函数过滤数组元素。

此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

invert:如果 "invert" 为 false 或为设置,则函数返回数组中由过滤函数返回 true 的元素,当"invert" 为 true,则返回过滤函数中返回 false 的元素集。

  var list=[{name:"zs",age:17},{name:"ls",age:20},{name:"ww",age:18}];
    var adult=$.grep(list,function (val,index) {
        if(val.age>=18){
            return true
        }
    });
    console.log(adult); //[{name:"ls",age:20},{name:"ww",age:18}]

reduce

jQuery.makeArray(obj)

将类数组对象转换为数组对象。

类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。

数组里所有值的和

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

jQuery.map(arr|obj,callback)

将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。

<body>
    <div id="textArea">
        one
        two
        three
        four
    </div>
</body>
<script>
    var spanArray=$.makeArray($("#textArea span")).map(function (obj) {
        var param={}
        param.text=obj.textContent;
        param.value=$(obj).attr("data-val");
        return param;
    });
    console.log(spanArray);//[{text:"one",value:"1"},{text:"two",value:"2"},{text:"three",value:"3"},{text:"four",value:"4"}]
</script>

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

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

arrayObject.sort(sortby)

sortby可选。规定排序顺序。必须是函数。

返回值是对数组的引用。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。

 var list=[{name:"zs",age:17},{name:"ls",age:20},{name:"ww",age:18}];
    list.sort(function (a,b) {
        return a.age-b.age;
    })
    console.log(list);//[{name:"zs",age:17},{name:"ww",age:18},{name:"ls",age:20}]

 

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

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

本文由金沙官网线上发布于Web前端,转载请注明出处:操作数组不要只会for循环

您可能还会对下面的文章感兴趣: