JavaScript数组详解与常用操作-优快云博客

本文链接：https://blog.youkuaiyun.com/wj18740503137/article/details/118959793

数组（Array）

1、数组的简介

数组也是一个对象
它和我们普通的对象功能类似，也是用来存储一些值的
不同的普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作
索引：
从0开始的整数就是索引
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

2、创建数组

    // 创建数组对象
    var arr = new Array();

    //使用typeof来检查数组时返回object
    console.log( typeof arr);

    /*
    *       - 向数组中添加元素
    *       - 语法：数组[索引] = 值       
    */
    arr [0] = 1;
    arr [1] = 10;
    arr [2] = 12;
    console.log(arr);

3、读取数组中的元素

语法：数组[索引]
如果读取不存在的索引则返回undefined

 console.log(arr[1]);

4、获取数组的长度

可以使用length属性来获取数组的长度（元素的个数）
语法：数组.length
对于连续的数组，使用length可以获取到数组的长度（元素的个数）
对于非连续的数组，使用length会获取到数组最大的索引值+1
尽量不要些空数组

 console.log(arr.length);

5、修改数组的长度

如果修改的数组长度大于原长度则会创建出空的索引
如果修改的length小于原长度则多出的长度会被消除

arr.length = 50;
console.log(arr);
arr.length = 2;
console.log(arr);

要是想始终往数组的最后一个添加值则使用：数组名.length

arr[arr.length] = 23;
arr[arr.length] = 33;
arr[arr.length] = 43;
console.log(arr);

7、使用字面量创建数组

语法：var 数组名 = [];

  var arr = [];
  console.log(arr);
  console.log(typeof arr);

使用字面量创建数组时，可以在创建时就指定数组中的元素

 var arr = [1,3,5,7,9];
 console.log(arr);
 console.log(arr[3])

使用构造函数创建数组时也可以同时添加元素，将要添加的元素作为构造函数的参数传递
但是当在构造函数中只传一个参数的话就不是添加元素了，而是设置数组长度

var arr2 = new Array(10) 
console.log(arr2.length);
var arr1 = new Array(2,4,6,8,10);
console.log(arr1);

9、数组元素中可以放任何值

var arr3 = [2,'hello',true,null,undefined];

10、数组元素中也可以放对象

var arr4 = [{name:'孙悟空'},{name:'沙和尚'},{name:'张老三'}];
console.log(arr4);
console.log(arr4[2].name);
var obj = {
        name : '对象1',
        name1 : '对象2',
        name2 : '对象3'
}
var arr5 = [1,true,null,[obj]];
console.log(arr5);
console.log(arr5[3]);

11、数组中也可以放函数

  var arr6 = [function (){  alert('1') },function (){  alert('2') }];
  console.log(arr6);
  //调用函数
  console.log(arr6[0]());

  //数组里面放数组;也称二维数组
  var arr7 = [[1,2,3],[4,5,6],[7,8,9]]
  console.log(arr7[1]);

12、数组的遍历

  var arr = [1,3,5,7,9];
  for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
  }

13、数组的方法

13.1. forEach()用来遍历数组中的元素

这个方法只支持IE8以上的浏览器，IE8及以上的浏览器不支持该方法，因此需要兼容还需使用for循环来遍历
forEach方法需要一个函数作为参数
像这种函数有我们创建但是不由我们调用，我们称之为回调函数
数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来
我们可以定义形参来读取这些内容
浏览器会在回调函数中传三个参数
1. 第一个参数：就是当前遍历的元素
2. 第二个参数：就是当前遍历元素的索引
3. 第三个参数：就是正在遍历的数组

  var arr1 = [1,3,5,7,9];
  arr1.forEach(function(value,index){
      console.log("index ="+index +",value ="+value);
  });

13.2.slice()方法

slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
有两个参数：
1. 参数1：开始提取元素的下标，包括该下标的元素
2. 参数2：结束提取元素的下标，不包括该下标元素
3. 参数也可以是负数:若参数是负数则是从后往前数，仍不包含该元素
  注意： slice() 方法不会改变原始数组。

 var arr2 = ['白兔精','唐僧','孙悟空','猪八戒','沙和尚','白骨精'];
 var p = arr2.slice(1,3); //截止取下标是1的元素，和下标是3的元素（不包含该元素）
 var p1 = arr2.slice(1,-2);//截止取下标是1的元素，和倒数第二个元素（不包含该元素）
 var p2 = arr2.slice(-4,-2);//截止倒数第4个元素（包含）和倒数第2个元素（不包含）
 console.log(p);
  console.log(p1);
  console.log(p2);
 console.log(arr2);

13.3.splice()方法

splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
第一个参数：（必需）规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
第二个参数: （可选）规定应该删除多少元素。必须是数字，但可以是 “0”。
第三个参数及以后：（可选）要添加到数组的新元素

 var arr3 = ['喜羊羊','美羊羊','懒羊羊','慢羊羊','丑羊羊'];
 arr3.splice(2,0,'红太狼','灰太狼')
 console.log(arr3);

13.4. concat()方法

concat()方法用来拼接两个或多个数组，并将结果返回，也可以拼接元素；
该方法拼接不会对原数组又任何影响

var arr4 = [1,2,3,4];
var arr5 = [5,7,6,8];

var result = arr4.concat(arr5,9);
console.log(result);

13.5. jion()方法

该方法用来将数组中的元素转换为字符串的形式，并返回转换后的结果
该方法不会对原数组有任何改变
该方法中的参数可以指定一个字符串作为参数，该参数用来拼接数组元素的连接符,如果不指定连接符则默认为逗号

var result = arr4.join('-');
console.log(result);

13.6. reverse()

该方法用来反转数组（前面的去后面，后面的去前面）
它会对原数组进行改变

arr5.reverse();
console.log(arr5);

13.7.sort()方法

该方法可以用来对数组中的元素进行排序
也会影响原数组，，默认会根据Unicode编码进行排序
即使对纯数字进行排序也会按Unicode进行排序，因此会出现错误
我们可以在sort()中添加一个回调函数，来指定排序规则
- 如果返回值大于1则进行调换
- 如果返回值小于1则不进行调换
- 如果返回值等于0则不进行调换
- 如果返回升序则return a - b;
- 如果返回降序则return b - a;
要是想进行由大到小进行排序可以结合reverse()使用

var arr6 = ['a','c','e','b','d'];
arr6.sort();
console.log(arr6);
arr6.reverse();
console.log(arr6);
var arr7 = [2,5,3,1,4,0,9,8,6,7];
arr7.sort(function (a,b) {
  // if(a > b){
  //   return -1;
  // }else if(a < b ){
  //   return 1;
  // }else{
  //   return 0;
  // }
  //升序排列
  return a - b;
  //降序排列
  //return b - a;
  })
  console.log(arr7);

练习

//构造一个函数
function Person(name,age,gender) { 
  this.name = name;
  this.age = age;
  this.gender = gender;
 }
 Person.prototype.toString = function(){
   return "fun['name ='+this.name+',age = '+this.age+',gender = '+ this.gender]";
 }

 //创建一个对象
 var Per = new Person('孙悟空',8,'男');
 var Per1 = new Person('猪八戒',18,'男');
 var Per2 = new Person('沙和尚',28,'男');
 var Per3 = new Person('白骨精',38,'女');

 /*
 * 将这些对象放入数组中
 */
var Perarr = [Per,Per1,Per2,Per3];
  // console.log(Per);
  // console.log(Per1);
  // console.log(Per2);
  // console.log(Per3);
   /*
 * 创建一个函数将Person中满十八岁的Person提取出来
 * 然后封装到一个新数组中并返回
 * 
 * arr
 *   形参：要提取信息的数组
 */
function getAdult(arr) { 
  // 创建一个新数组，
  var newArr = [];
  //遍历Arr获取Arr中的Person对象
  for (var i = 0; i < arr.length; i++){

    //判断Person对象中的age是否大于等于18

  //如果大于等于18则将对象添加到newArr中
  if(arr[i].age >= 18){
  newArr.push(arr[i]);
   console.log(arr[i]);
}
   
  }
  //将新的数组返回
  return newArr;
 }
 var result = getAdult(Perarr);
 console.log(result);