es6 sort()、map()、filter()、find()、findIndex()、every()、some()、reduce()方法解说

1.sort()方法
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码小。

我们可以用这种方法对数字数组进行排序

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

同样的忽略字符串数组大小写进行排序,将字符串转换成小写或大写后在进行排序

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']

map映射数组映射

1、将一个普通数组映射为对象数组

将[1,2,3] 映射为 [{id: 1}, {id: 2}, {id: 3}]

将一个对象数组映射为另一个对象数组

attachmentList是一个对象数组,需要其中的属性转换为另外一个对象数组fileList,如下:

    this.fileList = this.attachmentList.map(item=>{
          return {id:item.id,name:item.fileName,url:item.filePath}
    });

map高阶函数用法:
举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);

map()作为高阶函数,事实上它把运算规则抽象了,因此,我们不但可以计算简单的f(x)=x2,还可以计算任意复杂的函数,比如,把Array的所有数字转为字符串

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

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

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

4.filter()函数用法
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]

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;
});

5.find()函数
find()方法用于查找符合条件的第一个元素,如果找到了,返回这个元素,否则,返回undefined:

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.find(function (s) {
    return s.toLowerCase() === s;
})); // 'pear', 因为pear全部是小写

console.log(arr.find(function (s) {
    return s.toUpperCase() === s;
})); // undefined, 因为没有全部是大写的元素

6.findIndex()函数
findIndex()和find()类似,也是查找符合条件的第一个元素,不同之处在于findIndex()会返回这个元素的索引,如果没有找到,返回-1:

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.findIndex(function (s) {
    return s.toLowerCase() === s;
})); // 1, 因为'pear'的索引是1

console.log(arr.findIndex(function (s) {
    return s.toUpperCase() === s;
})); // -1

7.every()函数
every()方法可以判断数组的所有元素是否满足测试条件。

例如,给定一个包含若干字符串的数组,判断所有字符串是否满足指定的测试条件

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.every(function (s) {
    return s.length > 0;
})); // true, 因为每个元素都满足s.length>0

console.log(arr.every(function (s) {
    return s.toLowerCase() === s;
})); // false, 因为不是每个元素都全部是小写

8.some()函数
some()方法可以判断数组只要有一个元素满足测试条件就行。

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.some(function (s) {
    return s.length > 0;
})); // true, 因为每个元素都满足s.length>0

console.log(arr.some(function (s) {
    return s.toLowerCase() === s;
})); // false, 因为是'orange'和‘pear’两个其中都满足条件,只需一个满足条件即返回true

eS6ES2015)引入了许多新的数组方法,以下是其中一些常见的方法: 1. `Array.from()`:将类数组对象或可迭代对象转换为真正的数组。 2. `Array.of()`:创建一个包含传入参数的新数组。 3. `Array.prototype.find()`:返回数组中满足条件的第一个元素。 4. `Array.prototype.findIndex()`:返回数组中满足条件的第一个元素的索引。 5. `Array.prototype.includes()`:判断数组是否包含指定的元素。 6. `Array.prototype.fill()`:用一个固定值填充整个数组或指定的部分。 7. `Array.prototype.keys()`:返回一个包含数组索引的新迭代器对象。 8. `Array.prototype.values()`:返回一个包含数组值的新迭代器对象。 9. `Array.prototype.entries()`:返回一个包含数组索引和值的新迭代器对象。 10. `Array.prototype.flat()`:将多维数组扁平化为一维数组。 11. `Array.prototype.flatMap()`:首先使用映射函数映射每个元素,然后将结果扁平化为一维数组。 12. `Array.prototype.forEach()`:对数组中的每个元素执行提供的函数。 13. `Array.prototype.map()`:创建一个新数组,其中每个元素为原始数组元素调用提供的函数的结果。 14. `Array.prototype.filter()`:创建一个新数组,其中仅包含满足条件的原始数组元素。 15. `Array.prototype.reduce()`:将数组元素通过提供的函数累积为单个值。 16. `Array.prototype.reduceRight()`:与`reduce()`相同,但从右向左处理数组元素。 17. `Array.prototype.some()`:检查数组中是否至少有一个元素满足条件。 18. `Array.prototype.every()`:检查数组中的所有元素是否都满足条件。 19. `Array.prototype.sort()`:原地对数组进行排序。 20. `Array.prototype.reverse()`:原地反转数组元素的顺序。 这些是ES6中常见的数组方法,它们提供了更便捷和灵活的方式来操作和处理数组。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值