JavaScript数组方法

主要记录一些数组常用的方法,如有不对,欢迎评论指正!

  1. forEach() 用于遍历数组,对数组的每个元素执行一次给定的函数。不会改变原数组

格式:forEach(function(item,index?,array?),thisValue?)

  • item 必填,当前元素的值

  • thisValue 可选 执行callback函数时值被用作 this。如果省略或传入null,undefined那么callback函数的this为全局对象

        function logArrayElements(element, index, array) {
          console.log('a[' + index + '] = ' + element);
        }
        
        // 注意索引 2 被跳过了,因为在数组的这个位置没有项
        [2, 5, , 9].forEach(logArrayElements);
        // logs:
        // a[0] = 2
        // a[1] = 5
        // a[3] = 9
  1. map() 遍历数组里的每一个元素,执行函数体的一些操作后,返回新数组,原数组不会改

格式:map(function(item,index?,array?),thisValue?)

  • 函数体内需要有返回值
  • 返回新数组,每个数组的元素是调用函数后的返回值
        // 使用 map 重新格式化数组中的对象
        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}],
  1. filter() 用于对数组数据进行遍历的时候,根据条件筛选数组数据,返回新数组,不会改变原数组

格式:

filter(function(item,index){

​ return 条件

​ })

  • return 后跟的是筛选条件
        // 筛选出字符串数组中长度大于6的字符串
        const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
        
        const result = words.filter(word => word.length > 6);
        
        console.log(result);
        // log: ["exuberant", "destruction", "present"]
  1. reduce() 对数组进行遍历,并进行统计,返回的是回调函数的第一个参数,不会改变原数组

格式:数组.reduce(function(pre, item, index, arr){},初始值)

  • reduce 会重复调用 function(pre, item, index, arr){} ,没有传初始值,pre初始值为数组的第一个元素,item为数组的第二个元素,进行遍历。
  • 在首次遍历时会将 初始值 传递给 pre ,最后的遍历都是将回调函数的 返回值 赋值给 pre
      // 查找偶数
	  const arr = [2, 6, 4, 5, 10, 11, 7, 3];
      const newArr = arr.reduce(function (pre, item, index) {
        if (item % 2 === 0) pre++;
        return pre;
      }, 0);
      console.log(newArr);  // pre  4
      console.log(arr);  // arr [2, 6, 4, 5, 10, 11, 7, 3]

  1. join() 将数组元素拼接为字符串,如果只有一个元素,将返回该元素不会使用分隔符分割,默认使用 分号 分割元素,返回一个字符串,不会改变原数组

格式:数组.join()

  • 默认使用 ‘,’ 分割
  • 只有一个元素是返回的这个元素的字符串形式
      const arr = ["a", "b", "c", "d"];
      const str = arr.join();
      console.log(arr); //  ['a', 'b', 'c', 'd']
      console.log(str); // a,b,c,d
  1. every() 遍历数组,并判断是否 每个元素 都满足条件,如果全满足就返回true,否则返回false

some() 遍历数组,并判断是否 有元素 满足条件,如果就返回true,否则返回false

格式:

​ every(function(item, index, arr){

​ return 条件

​ })

        // 检查是否数组中的所有数字都小于40
        const flag = (item) => item < 40;
        const array1 = [1, 30, 39, 29, 10, 13];
        console.log(array1.every(flag));
        // log: true
  1. reverse() 将数组中元素的位置颠倒,并返回该数组。该方法修改原数组。
        var arr = [1,2,3,4,5];
        arr.reverse();
        // arr数组被修改: [5,4,3,2,1]
  1. find() 查找元素,返回满足条件的第一个元素,如果没有找到返回 undefined
        // 获取数组中第一个大于10的值
        const array1 = [5, 12, 8, 130, 44];
        
        const found = array1.find(element => element > 10);
        
        console.log(found);
        // expected output: 12
  1. concat() 用于合并两个或多个数组。返回一个新数组,不会改变原数组
        var arr1 = ['a', 'b', 'c', 'd'];
        var arr2 = ['e','f']
        var arr3 = arr1.concat(arr2);
        // arr3数组为: ['a', 'b', 'c', 'd','e','f']
  1. sort(),对数组的元素进行排序。此方法修改原数组。

格式:数组.sort((a, b) => a - b)

  • 当直接使用时 sort() ,方法内的回调函数默认为 a - b 从小到大排序
  • 返回值为 b - a 则是从大到小排序
  • 函数会改变原数组
      const arr = [3, 2, 5, 1, 4];
      const newArr = arr.sort(function (a, b) {
        return b - a;
      });
      console.log(arr); //  [5, 4, 3, 2, 1]
      console.log(newArr); //  [5, 4, 3, 2, 1]
  1. Array.from() 将伪数组变为真数组

  2. push() 将一个或多个元素添加到数组的末尾,并返回该数组的新长度。此方法修改原有数组

        var arr = ['a','b','c'];
        var ele = arr.push('d');
        // ele结果为: 4;
        // arr数组被修改: ['a','b','c','d'];
  1. pop(),从数组中删除最后一个元素,并返回该元素的值。如果数组为空,则返回undefined。此方法修改原有数组
        var arr = ['a','b','c','d'];
        var ele = arr.pop();
        // ele结果为: 'd';
        // arr数组被修改: ['a','b','c'];
  1. shift(),从数组中删除第一个元素,并返回该元素的值此方法修改原有数组
        var arr = ['a','b','c','d'];
        var ele = arr.shift();
        // ele结果为: 1;
        // arr数组被修改: ['b''c','d'];
  1. unshift(),将一个或多个元素添加到数组的开头,并返回该数组的新长度。此方法修改原有数组
        var arr = ['a','b','c'];
        var ele = arr.unshift('d');
        // ele结果为: 4;
        // arr数组被修改: ['d','a','b','c'];
  1. slice(begin?,end?)返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

begin 可选 提取起始处的索引(从0开始),从该索引开始提取原数组元素
如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,
例:slice(-2) >表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。
如果省略 begin,则 slice 从索引 0 开始。
如果 begin 超出原数组的索引范围,则会返回空数组。

end 可选 提取终止处的索引(从 0 开始),在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素(包含 begin,但不包含 end)。
例:slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。
如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice>(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一>个元素,也就是只有倒数第二个元素)。
如果 end 被省略,则 slice 会一直提取到原数组末尾。
如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

        var arr = ['a','b','c','d'];
        var res = arr.slice(0,2); 
        // arr数组未被修改: ['a', 'b', 'c', 'd'];
        // res数组为: ['a', 'b'];
  1. splice(start,deleteCount?,item 1?),通过删除或替换现有元素或者原地添加新的元素来修改数组, 并以数组形式返回被修改的内容 (如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组)。此方法修改原数组。

start:
指定修改的开始位置(从0计数)在该位置修改数组。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于 array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。

deleteCount (可选):
整数,表示要移除的数组元素的个数。
如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。
如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于 start之 后的所有元素的数量),那么 start 之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。

item1, item2, … (可选):
要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

    var arr = ['a', 'b', 'c', 'd'];
    // 从索引 2 的位置开始删除 0 个元素,插入"e"
    var insertOnce = arr.splice(2,0,'e');
    insertOnce = []
    arr = ['a', 'b', 'e', 'c', 'd']
    // 从索引3的位置开始删除一个元素
    var delOnce = arr.splice(3,1);
    // delOnce数组为: ['c']
    // arr数组被修改: ['a', 'b', 'e', 'd']
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值