数组的方法

最新推荐文章于 2023-03-27 16:49:37 发布

全栈开发ck

最新推荐文章于 2023-03-27 16:49:37 发布

阅读量432

点赞数

分类专栏：原生js重点

本文链接：https://blog.csdn.net/weixin_44954172/article/details/103616147

版权

原生js重点专栏收录该内容

10 篇文章 0 订阅

订阅专栏

数组的方法

实例方法

变异和非变异的理解

变异的方法：破坏了原始数组
非变异的方法：不会破坏原始数组，产生新数组

valueOf() 数组原始值 toString()将数组转化为字符串

var arr = ['苹果','桔子'];
console.log( arr.valueOf() ); // ['苹果','桔子']
console.log( arr.toString() ); // 苹果，桔子
console.log( arr+'' ); // 隐式转换  苹果，桔子
console.log( arr.join(',') );//  苹果，桔子

join() 将数组按指定的字符转换为字符串

返回新的字符串，不会破坏原始数组，非变异方法。

如果不提供参数，默认用逗号分隔。

var arr = ['苹果','桔子'];
console.log( arr.join('') ); //苹果桔子
console.log( arr.join('@') ); //苹果@桔子
console.log( arr.join() ); //苹果,桔子

var str = Array.prototype.join.call('hello', '-');
console.log( str );//h-e-l-l-o

push() 向数组的尾部追加成员

返回数组最新的长度，该原始数组已经被添加新成员，是变异的方法。

var arr = ['苹果','桔子'];
arr[2] = '菠萝';
var result = arr.push('香蕉'); //执行过后返回数组最新的长度

console.log( result ); // 4
console.log( arr ); // ["苹果", "桔子", "菠萝", "香蕉"]

var arr = ['苹果','桔子'];
arr.push('香蕉','菠萝'); //一次性追加2个
arr.push( ['生菜','西红柿'] ); //追加一个数组
console.log( arr );// ['苹果','桔子','香蕉','菠萝', ['生菜','西红柿'] ]

unshift() 向数组的开头追加成员

返回数组最新的长度，该原始数组已经被添加新成员，是变异的方法。

和上面的push方法几乎一样，只是插入成员的位置不同。

var arr = ['苹果','桔子'];
arr.unshift('香蕉','菠萝'); //一次性追加2个
console.log(arr);//["香蕉", "菠萝", "苹果", "桔子"]

pop() 删除数组最后一个成员

返回被删除成员的值，该方法会破坏原始数组，是变异的方法。

var arr = ['苹果','桔子'];
var result = arr.pop();

console.log( result );// 桔子
console.log( arr );// ['苹果']

shift() 删除数组开头第一个成员

返回被删除成员的值，该方法会破坏原始数组，是变异的方法。

var arr = ['苹果','桔子'];
var result = arr.shift();

console.log( result );// 苹果
console.log( arr );// ['桔子']

concat()

用于多个数组的合并，合并出一个新数组，不会破坏原始数组，是非变异的方法

var a = ['苹果','桔子'];
var b = ['芒果','西瓜'];
var arr = a.concat( b ); 
console.log( arr );// ['苹果','桔子','芒果','西瓜']

push() 和 concat()的区别：

push 返回数组新长度，concat 返回新数组
push 变异的方法，concat 非变异的方法
push 添加的是数组，会产生多维数组，concat 不会产生多维数组
reverse() 反转数组

反转数组，返回已经破坏过后的原始数组，是变异的方法

var arr = [1,2,3];
arr.reverse();
console.log( arr ); // [3,2,1]

示例

//分步操作
var str1 = '今天的天气不错';
var arr = str1.split('');
arr.reverse();
var str1 = arr.join('');
console.log( str1 );  //错不气天的天今


//链式操作
var str2 = '今天的天气不错'.split('').reverse().join('');
console.log( str2 );  //错不气天的天今

splice() 集删除、添加、修改功能的数组方法

该函数集删除、添加、修改功能的数组方法，会破坏原始数组，变异的方法。

起始位置，数值，支持负数，表示从后往前数。

删除的个数，数值，必填，如果设置为0，表示不删除。

返回被删除的数组

语法

数组.splice(起始位置,删除的个数, 新成员值1,新成员值2,....);

splice() 删除操作

//删除操作
var arr = ['苹果','桔子','芒果'];
arr.splice(1,1);  //索引值1  参数2要删除的项目数量
console.log( arr );   // ['苹果','芒果']

//1. 清空数组 splice
var arr1 = ['苹果','桔子','芒果'];
arr1.splice(0);//第2个参数省略，代表数组最大的长度
console.log(arr1);  //[]

//2. 始终删除第一个成员 splice
var arr2 = ['苹果','桔子','芒果'];
arr2.splice(0,1);//index  howmany
console.log(arr2);  //['桔子','芒果'];

//3. 始终删除最后一个成员 splice
var arr3 = ['苹果','桔子','芒果'];
arr3.splice(-1,1);//index  howmany
console.log(arr3);//['苹果','桔子'];

//4. 始终只取数组最后两个成员 splice
var arr4 = ['苹果','桔子','芒果'];
arr4.splice(0, arr4.length-2);  //index  取数组最后两个
console.log(arr4); //['桔子','芒果'];

splice() 添加操作

注意：添加是在起始位置的前面追加

//添加操作

//1. 在桔子后追加香蕉1个成员
var arr1 = ['苹果','桔子','芒果'];
arr1.splice( 2, 0, '香蕉' );
console.log( arr1 );//['苹果','桔子','芒果', '香蕉'];

//2. 在苹果后面追加火龙果、樱桃2个成员
var arr2 = ['苹果','桔子','芒果'];
arr2.splice( 1, 0, '火龙果','樱桃' );
console.log( arr2 );//['苹果','火龙果','樱桃'，'桔子','芒果'];


//3. 在芒果后面追加数组['哈密瓜','西瓜']
var arr3 = ['苹果','桔子','芒果'];
arr3.splice( arr3.length, 0, ['哈密瓜','西瓜'] );//类似push方法
console.log( arr3 );//['苹果','桔子','芒果', ['哈密瓜','西瓜'] ];

splice 修改操作，采用先删后加原则

//1. 在桔子修改为香蕉
var arr1 = ['苹果','桔子','芒果'];
arr1.splice(1,1,'香蕉');
console.log( arr1 );//['苹果','香蕉','芒果'];

//2. 在桔子修改为香蕉，芒果修改为西瓜
var arr2 = ['苹果','桔子','芒果'];
arr2.splice(1,2,'香蕉','西瓜');
console.log( arr2 );// ['苹果','香蕉','西瓜'];

slice() 分割数组

slice 按照起始位置和结束位置分割出一个新数组，它不会破坏原始数组，是非变异的方法，返回新数组。

起始位置，数值，可以是负数，表示从后开始算,-1 表示倒数第一个

结束位置，数值，可以是负数，表示从后开始算,-1 表示倒数第一个

省略结束位置，表示到数组末尾（相当于数组的长度）。

语法

数组.slice(起始位置,结束位置)

示例

var arr = ['苹果','桔子','香蕉','菠萝','西瓜'];

//1. 提取第一个成员
console.log( arr.slice(0,1) );  //['苹果']

//2. 提取第桔子和香蕉
console.log( arr.slice(1,3) );  // ['桔子','香蕉']

//3. 始终提取最后一个成员
console.log( arr.slice(-1) ); //['西瓜']

//4. 始终提取`除`第一个和最后一个成员
console.log( arr.slice(1,-1) ); //['桔子','香蕉','菠萝']

//5. 始终提取最后两个成员
console.log( arr.slice(-2) );//['菠萝','西瓜']

示例求学生三门成绩的总分、平均分、最低分、最高分

    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body{
          padding: 20px;
        }
        table{
          border-collapse:collapse;
          border: 1px solid #ccc;
        }
        th,td{
          padding: 10px;
        }
        tbody tr:nth-child(odd) td{
          background-color: #eee;
        }
      </style>
  <script>
  var data = [
    { id: 1, name:'张三', score: [ 78, 88, 75] },
    { id: 2, name:'李四', score: [ 66, 79, 85] }
  ];

  var temp = `<table cellspacing="0" border="1">
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>外语</th>
        <th>总分</th>
        <th>平均分</th>
        <th>最低分</th>
        <th>最高分</th>
      </tr>
    </thead>
    `;
  
  for(var i=0;i<data.length;i++){

    var score = data[i].score;
    var sum = score.reduce( function( prev, next ){ 
      return prev + next;
    });//总分
    var min = Math.min.apply( null, score );//最低分
    var max = Math.max.apply( null, score );//最高分
    var avg = (sum/3).toFixed(1);//平均分

    temp += `
    <tbody>
      <tr>
        <td>${data[i].id}</td>
        <td>${data[i].name}</td>
        <td>${score[0]}</td>
        <td>${score[1]}</td>
        <td>${score[2]}</td>
        <td>${sum}</td>
        <td>${avg}</td>
        <td>${min}</td>
        <td>${max}</td>
      </tr>
    </tbody>
    `;
  }

  temp += '</table>';

  document.write( temp );

  var arr = [2,3,5,6,8,9];
  var num = Math.max.apply( null, arr );
  

  console.log( num );

  </script>

分页四要素

当前页 page
总个数 total
每页多少个 perpage
总页数 totalpage

sort() 对数组成员进行排序，默认是按照字典顺序排序，排序后，原数组将被改变，变异的方法。

//数字排序
var arr = [ 2,6,1,9, 4];
arr.sort();
console.log( arr ); // [1, 2, 4, 6, 9]

//数字排序不正确，是按字符串排序
var arr = [ 2, 6, 1, 9, 4, 12, 24];
arr.sort();
console.log( arr ); // [1, 12, 2, 24, 4, 6, 9]

//字符串排序
var arr = [ 'b', 'a', 'c', 'd', 'ab', 'bc'];
arr.sort();
console.log( arr ); //["a", "ab", "b", "bc", "c", "d"]

以上排序有局限性，比如数字它是字符来排序的，而且也不方便升序、降序切换

我们可以通过设置一个回调函数使得排序更加精确

语法

数组.sort( function( prev, next ){
  return prev - next;
})

数值排序示例

//数值排序
var arr = [ 2, 6, 1, 9, 4, 12, 24];
var flag = -1;// 1 为升序  -1 降序
arr.sort( function( a, b ){
  return ( a - b ) * flag;
});
console.log( arr );  //[24,12,9,6,4,2,1]

字符串排序

//字符串排序
var arr = [ 'b', 'a', 'c', 'd', 'ab', 'bc' ];
var flag = 1; // 1 为升序  -1 降序

arr.sort( function( a, b ){
  return a.localeCompare( b ) * flag;
})

console.log( arr ); //['a','ab','b','bc','c','d']

数组也可以用来替代条件语句输出

var day = new Date().getDay();//0 - 6
var week = ['日','一','二','三','四','五','六'];
console.log('今天是星期' + week[day] );//今天是星期三

map() 将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回，它是非变异的方法。

var arr = [ 1, 2, 3, 4, 5];
var newArr = arr.map(function( item ){
  return item * 2;
})

console.log( newArr );// [ 2, 4, 6, 8, 10 ]

//取出偶数成员
var arr = [ 1, 2, 3, 4, 5];
var newArr = arr.map(function( item ){
  if(item % 2 == 0) {
    return item;
  }
})
console.log( newArr );//[undefined, 2, undefined, 4, undefined]

//map中this指向第二个参数，下图也就是arr数组

var arr = ['a', 'b', 'c'];
var newData= [0, 2].map(function ( item ) {
  return this[ item ];
}, arr);

console.log( newData ); // ['a','c']

forEach() 与map方法很相似，也是对数组的所有成员依次执行参数函数，forEach方法不返回值，只用来操作数据。

示例

var arr = [ 1, , 3, , 5];
arr.forEach(function( item, index, arr ){
  console.log( item, index, arr );
  // 1 0 [1,3,5],  3 2[1,3,5],  5 4 [1,3,5]
})

forEach 和 map的区别

forEach 没有return返回值，它会跳过空位
map 有return返回值，它会跳过空位

filter() 方法用于过滤数组成员，满足条件的成员组成一个新数组返回，非变异的方法。

//查找出不及格的分数
var score = [ 50, 70, 58, 62, 80];
var newScore = score.filter( function(item){
  return item < 60;
})

console.log( newScore );//[50, 58]

//也可以利用排除法删除
var arr = [ 50, 70, 58, 62, 80];
arr = arr.filter( function(item){
  return item != 62;
})
console.log( arr );//[ 50, 70, 58, 80];