JavaScript【三】JavaScript中的数组

简介: JavaScript【三】JavaScript中的数组

🌟前言

哈喽小伙伴们,本文将收录在JavaScript【前端童子功】这个专栏里;这个专栏里边会收录一些JavaScript的基础知识和项目实战;希望大家可以多多支持,你们的支持就是我创作的动力;让我们一起来看看吧🤘

🌟数组

用来存储一组或一系列相关数据的容器。

🌟声明:

🌟 隐式创建:

var arr=[];
arr[0]="a",arr[1]="b",arr[2]="c"
var arr=[a,b,c];

🌟 实例化构造函数:

var arr=new Array(3//指长度);
arr[0]=1;arr[1]=2;arr[2]=3;
var arr=new Array(1,2,3);

🌟 注意:一个值为数组的长度。

var arr=new Array(5);
//利用实例化构造函数的方式创建数组,只传一个值,表示数组长度。

🌟 访问:

  • 下标范围:0~数组长度减一 0-arr.length-1
  • 通过下标访问数组元素 arr[0]arr[arr.length-1]
  • 数组长度:arr.length
  • 数组中可以存储任意数据类型的数据
  • 数组可以允许越界访问(可以访问超出下标的数据,结果为undefined)

🌟 遍历:

循环访问数组中的每一个元素。

  • for循环
  for(var i=0;i=arr.length;i++){
      arr{i}
  }
  • for in
for(var i in arr){
    i;//下标
    arr[i];//元素
}
  • for of
for(var i of arr){
    i;//元素
}

🌟二维数组:

一维数组中的每一个元素都是一个数组,叫做二维数组。

🌟 声明:

var arr[[1,2],[2,3],[3,4,5]]

🌟访问:

  • 长度:按照一维数组的长度计算,arr.length
  • 通过双重下标访问:arr[i][j]

🌟遍历:

for(var i=0;i<arr.lenght;i++){
    for(var j=0;j<arr[i].length;j++)
        arr[i][j];
}

🌟数组的属性和方法:

🌟属性

  1. length: 数组中元素的个数
  2. constructor: 返回对创建此对象的数组函数的引用(可以用来判断变量是否为数组)

🌟方法

🌟arr.push(); 向数组的末尾追加元素

  • 会修改原数组
  • 返回值:修改后的length值
  • 可以追加多个
arr[1,2,3];
arr1[4,5,6];
arr2[...arr,...arr1];       //  ...扩展运算符,将数组展开

🌟arr.unshift(); 向数组的开头添加函数

  • 会修改原数组
  • 返回值:修改后的length值
  • 可以追加多个

🌟arr.pop(); 删除末尾的元素

  • 会修改原数组
  • 返回值:被删除的数据
  • 只能删除一个

🌟arr.shift(); 开头删除一个元素

  • 会修改原数组
  • 返回值:被删除的数据
  • 只能删除一个

🌟arr.splice (位置,删除元素的个数,要追加的元素); 任意位置添加删除

  • 添加或者删除包含对应下标
  • 添加数据时:删除元素的个数写0;
  • 可以同时删除和添加(先删除,后添加)
  • 修改原数组

🌟arr.join(“分隔符”) 使用分隔符将数组数据隔开变为字符串

  • 不修改原数组
  • 返回值是分隔好的字符串

🌟arr.slice(截取的起始下标,结束下标) 数组的截取

  • 截取时,包含起始下标,不包含结束下标
  • 不修改原数组
  • 返回值是截取到的数组
  • 参数可以是负数,负数表示倒数,只传一个参数表示从起始下标截取到最后

🌟arr.concat 多个数组的连接

  • 不修改原数组
  • 返回值是连接之后的新数组
var arr1=[1,2,3];
var arr2=[4,5,6];
console.log(arr1.concat(arr2,[7,8,9]));
// 控制台输出
// (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
Array.prototype.push.apply(a,b)   //b为push参数

🌟arr.indexOf(值); 查找某个值在数组中第一次出现的下标

  • 返回值是数据的下标,没有找到则返回-1
var arr=[1,5,6,99,52,663,22,66,552,123,6,622];
console.log(arr.indexOf(22));    //查找22在arr数组中的位置
// 控制台输出
// 6

🌟arr.lastIndexOf(值); 倒叙查找某个值在数组中第一次出现的位置

🌟arr.sort(回调函数) 数组的排序

  • 如果没有参数,则从字符的编码开始按顺序排
  • 如果有参数,这个参数必须是一个函数(回调函数)这个回调函数有两个参数,分别是a,b
  • 修改原数组
  • 返回值是排序之后的数组
      var arr3=[1,5,6,99,52,663,22,66,552,6,622];
      arr3.sort(function(a,b){
      //a-b 正序,
      //b-a 倒序,  
      return a-b;
      })
      console.log(arr3);
      // 控制台输出
      // (11) [1, 5, 6, 6, 22, 52, 66, 99, 552, 622, 663]
      //箭头函数
      arr.sort((a,b)=>a-b)     //正序,
      arr.sort((a,b)=>b-a)     //倒序,

🌟arr.forEach(回调函数) 遍历数组

  • 接收一个回调函数,回调函数第一个参数是 数组值
  • 第二个参数是 下标
      var arr3=[1,5,6,99,52,663,22,66,552,6,622];
      var num=0;
      arr3.forEach(function(value,index){
          num+=v;
        console.log(index,value)
      })
      // 箭头函数
      arr3.forEach((value,index)=>{console.log(index,value)})

🌟arr.filter(回调函数) 过滤(根据条件筛选数组元素)

  • 根据回调函数的返回值进行元素筛选
    - 返回值是true,该元素会保留
    - 返回值是false,该元素跳过
  • 不修改原数组
  • 返回值是筛选之后的数组
var arr=[1,5,6,99,52,663,22,66,552,123,6,622];
var newArr =arr.filter(function(value(值),index(下标)){
return value>100;       //筛选arr数组中值大于100的元素;
})
console.log(newArr);
// 控制台输出
// (4) [663, 552, 123, 622]
var person = [
{name: "张三",age:20,sex: "男"},
{name: "李四",age:19,sex: "女"},
{name: "王五",age:22,sex: "男"},
{name: "赵六",age:21,sex: "女"}
];
var x =person.filter(function(value,index){
return value.age>20;           // 筛选出年龄大于20岁的学生
// return value.sex=="男";     //筛选出男同学
})
console.log(x);
// 箭头函数
arr.filter((value,index)=>{return 判断条件})

arr.map(回调函数) 映射 将数组中的所有数据按照条件改变,形成新数组 {重点}

  • 将回调函数每次的返回值,组成一个新的数组
  • 返回值是映射改变之后的数组
  • 不修改原数组
      var arr=[1,5,6,99,52,663,22,66,552,123,6,622];
      // var end=arr3.map(function(value,index){
      //     return value*2;        //将数组中的所有元素都乘以2返回
      // });
      // 箭头函数
      var end = arr.map((value,index)=>value*2);
      console.log(end);

🌟arr.some(回调函数) 判断 根据回调函数的判断条件来选择真假

  • 只要有一个回调函数返回值是true,最终some结果是true;


     var arr3=[1,5,6,99,52,663,22,66,552,123,6,622];
     var end=arr3.some(function(value,index){
     return value<500;
     });
     console.log(end);     //true

🌟arr.every(回调函数) 判断 根据回调函数的判断条件来选择真假(与some比较记忆)

  • 只要有一个回调函数返回值是false,最终every结果是false;
      var arr3=[1,5,6,99,52,663,22,66,552,123,6,622];
      var end=arr3.every(function(value,index){
      return value<500;
      });
      console.log(end);     //false

🌟arr.reverse() 数组倒序

  • 返回修改后的数组
  • 改变原数组
      var arr=[1,5,8,6,9,4,2,3];
      console.log(arr.reverse());     // (8) [3, 2, 4, 9, 6, 8, 5, 1]
      console.log(arr);               // (8) [3, 2, 4, 9, 6, 8, 5, 1]

🌟Array.from

方法用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象(包括 ES6 新增的数据结构 Set 和 Map)

      var a={length:2,0:'aaa',1:'bbb'};  
      Array.from(a);        //['aaa','bbb']
      // 原理:Array.prototype.slice.call(a);
      var b={length:2};  
      Array.from(b);       //[undefined.undefined]

🌟Array.of

  • Array.of方法用于将一组值,转换为数组。
    总是返回参数值组成的数组。如果没有参数,就返回一个空数组。
     Array.of() // []
     Array.of(undefined) // [undefined]
     Array.of(1) // [1]
     Array.of(1, 2) // [1, 2]

🌟arr.includes()

  • 用于检查数组是否包含某元素,包含返回true,否则返回false
  • 无法检测对象是否存在
  • 假如只想知道某个值是否在数组中而并不关心它的索引位置,建议使用
includes()


如果想获取一个值在数组中的位置,那么你只能使用 indexOf 方法。并且 includes() 可以识别NaN

      var arr = [1,2,{name:"张三"}]
      arr.includes(2)     // true
      arr.includes(4)     // false
      arr.includes({name:"张三"})     // false
  • 可接收俩个参数:
    要搜索的值,搜索的开始索引
      ['a', 'b', 'c', 'd'].includes('b')         // true
      ['a', 'b', 'c', 'd'].includes('b', 1)      // true
      ['a', 'b', 'c', 'd'].includes('b', 2)      // false

🌟 数组乱序

将数组顺序打乱:例如不重复随机选取数组内容,可将数组打乱后按顺序取出

arr.sort(()=>Math.random()-0.5) 数组乱序排列

var arr=[1,2,3,4,5,6,7,8,9];
arr.sort(()=>Math.random()-0.5)
console.log(arr);


🌟写在最后

更多JavaScript知识以及API请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

目录
相关文章
|
1月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
24 2
|
1月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
20 3
|
1月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
35 4
|
1月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
31 1
|
1月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
23 5
|
1月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
17 3
|
1月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
37 1
|
1月前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
18 0
|
1月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
27 3
|
1月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
13 0