当前位置：首页 > article >正文

JavaScript数组和对象

article 2025/3/26 0:53:05

数组介绍

是一组数据（或元素）的集合。

var arr=['小张','小王','小李','小明'];
console.log(arr)

var arr1=[1,2,3,4];
console.log(arr1)

var arr2=['小张',2,true,['小王','小李']，{name:'Cherry'}];
console.log(arr2)

在这里插入图片描述
注：数组元素可以是任意类型，同一个数组中的不同元素可以是对象或数组。

数组的特点

每个数组都有个length属性表示元素的个数。arr.length
每个元素在数组中都有个位置，从0开始计数，称为索引or下标。
数组中最大的索引永远比他的length小1
数组本质是一个对象，是加了数字索引和length的特殊对象。

 console.log(typeof arr2)  //object
 //注意typeof arr2是一个语句，而非一个函数

数组创建方式

隐式创建（最常见的方式）

 var arr=['小张','小王','小李','小明'];
 console.log(arr)

实例化创建

 // 数组的创建2，实例化创建
 var arr3 = new Array("小张","Cherry",3,true);
 console.log(arr3)

 var arr4 = new Array();
 arr4[0] = "雁回时";
 arr4[1] = "庄寒雁";
 arr4[2] = "傅云夕";
 console.log(arr4)

 // 规定数组的初始长度，但是超出的扔可以正常显示
 // 可随时动态调整元素个数
 var arr5 = new Array(3);
 arr5[0] = "雁回时";
 arr5[1] = "庄寒雁";
 arr5[2] = "傅云夕";
 arr5[3] = "柴静";
 console.log(arr5)

数组的增加和修改

直接对数组的目标位置的数据进行操作修改即可

 //数组的增加和修改
 // 修改
 arr5[1] = "陈都灵";
 console.log(arr5[1]);

 // 增加
 arr5[4] = "阿芝";
 arr5[5] = "阮惜文";
 arr5[arr5.length] = "周如因";
 console.log(arr5)

数组的遍历

普通方法

 // 遍历数组
 for(var i = 0; i < arr5.length; i++){
     document.write(arr5[i] + "<br>")
 }

for - in 遍历，效率最低

// for - in 遍历,用的人最多，但是效率最低
  for (i in arr5){
      document.write(arr5[i] + "<br>")
  }

for - of遍历，效率比for - in高，但是比普通的遍历效率低

// for - of 遍历,效率比for - in高，但比普通的for循环效率低
 for (value of arr5){
      document.write(value + "<br>")
 }

获取数组中的最大、最小值

 // 获取数组中的最大值
 var zd = [23,45,687,12,4,0,2];
 function bdx(arr){
     var a = zd[0];
     for(var i = 0; i < zd.length; i++){
         if (a < zd[i]){
             a = zd[i]
          }
    }
    return a;
 }
 console.log(bdx(zd))

在这里插入图片描述

对象

 // 对象
 var dx1 = new String("雁回时");
 console.log(typeof dx1)  //object

 var dx2 = new Number(123);
 console.log(typeof dx2)  //object

对象的创建

JS对象包含很多属性的变量
属性指的是与对象相关的值，js对象是无序属性的集合
例如： var 人 = 姓名：“小明”，身高：“1.8米”，年龄：18

json创建对象，创建时用{ }，是最主要的方式

// 创建对象
// 1. json创建对象，创建时用{}，是最主要的方式
var ren = {name:"小明",sex:"男",age:18,height:"1.8米"}
console.log(typeof(ren));
console.log(ren);

实例化创建

 // 2. 直接实例化，通过构造函数object()创建
 var ren2 = new Object();
 ren2.name = "陈都灵";
 ren2.sex = "女";
 console.log(ren2)

在这里插入图片描述

对象属性的访问以及添加

对象名[“属性名”]

 console.log(ren["name"]);

对象名.属性名

console.log(ren2.name)

在这里插入图片描述

//修改对象值
ren.age = 40;
ren2["name"] = "傅云夕"

console.log(ren["age"]);
console.log(ren2.name)
  
//删除对象值
delete ren.height;
delete ren2['sex']

对象易变性，变量不易变

var a = "雁回时";
var b = a;  //创建了一个副本
b = 123;
console.log(a); //雁回时
console.log(b); //123

var a = {name:"雁回时",actor:"陈都灵",sex:"女"};
var b = a;  //直接在原对象上进行修改的
b.actor = "傅云夕";
b.sex = "男";
console.log(a); //{name: '雁回时', actor: '傅云夕', sex: '男'}
console.log(b); //{name: '雁回时', actor: '傅云夕', sex: '男'}

对象的遍历

for 属性名 in 对象名

 // 遍历对象
 for(i in a){
     document.writeln(i + ": " + a[i] + "<br>")
 }

构造函数

主要用来初始化对象，是一套模板或是一套方案

 // 构造函数
 function ren(){
 //this用在表现还不知道，没有具体的名称的时候
     this.name = "";
     this.age = 30;
     this.sex = "女";
 }
//通过new创建一个名为。。的实例
 var Cherry = new ren();
 console.log(Cherry)

实例化对象

通过new方法创建具体的对象时，this才有具体的名称，比如这里指的就是Cherry。

  var Cherry = new ren();
  Cherry.name = "Cherry" ;
  Cherry["age"] = 18;
  Cherry["graduated"] = true;
  console.log(Cherry)

构造函数添加对象的属性和方法

 // 构造函数添加属性和方法
 function ren(){
     this.name = "";
     this.age = 30;
     this.sex = "女";
     this.benLing = function(){
         console.log('本领是看书');
     }
 }
 var Cherry = new ren();
 Cherry.benLing = function(){
     console.log('会玩电脑');
 }
 Cherry.hobby = function(){
     console.log('玩耍');
 }
 console.log(Cherry);
 Cherry.benLing();
 Cherry.hobby();