JavaScript基础（四）对象、数组、对象与数组的常用API

2022-04-12 134

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript基础（四）对象、数组、对象与数组的常用API

一、对象

俗话说，万物皆对象。在真实生活中，汽车是一个对象。汽车有诸如车重和颜色等属性，也有诸如启动和停止的方法。在JavaScript中，对象是一组属性与方法的集合，属于引用类型数据。

1. 对象的创建

{ 属性名 : 属性值 , 属性名 : 属性值 ...... }

格式如下：

{ 属性名 : 属性值 , 属性名 : 属性值 ...... }

可以看出，用字面量创建对象很简单，就是直接在大括号里写属性名：属性值。属性名的引号可以省略，但属性名含有特殊字符时必须添加引号。例如：创建一个手机对象，带有颜色、品牌、大小、产地属性，同时因为made-in中间有特殊字符，所以该属性名需要加引号。

var phone = {
  color:'黑色',
  brand:'HUAWEI',
  size:6.5,
  'made-in':'北京'
};

第二种创建方式为通过内置的构造函数创建，格式如下：

new Object( )；

此语句表示创建一个空对象，它需要单独的添加每个属性，例如：

var car = new Object();//创建空对象car
car.color = '黑色';//添加属性
car.brand = '红旗';
car.width = '2.10米';
car.length = '3.5米';
console.log(car);

2. 对象属性的访问

格式为：对象.属性名；也可以使用对象[ ' 属性名 ' ]；以下代码使用了这两种方式：

var laptop = {
  lid:1,
  title:'手机',
  price:3600,
  'shelf-time':'2021-02-02'
}
//console.log(laptop);
//访问属性
console.log(laptop.lid);//1
console.log(laptop['shelf-time']);//2021-02-02
console.log(laptop['title']);//手机

此外，也可以对属性进行修改或者添加：

laptop.price = 5699;//将价格修改为5699
laptop.pic = 'huawei.jpg';//添加图片属性

3. 遍历对象属性

遍历属性是通过循环的方式（for-in循环）一次次的访问对象中的每个属性，格式为：

for ( var k in 对象 ) { }

其中，k 代表每个属性名，对象 [k] 代表属性名对应的属性值。看一道例题：

//创建对象，保存一组成绩，遍历对象的属性，获取每一个成绩，计算出总成绩和平均成绩
var score = new Object();
score.chi = 89;
score.eng = 80;
score.mat = 100;
score.che = 79;
score.his = 91;
var sum = 0,count = 0;//sum记录成绩之和，count记录科目数
for (var k in score){//开始遍历，获取各科成绩
  console.log('课程:' + k,'成绩:' + score[k]);
  sum = sum + score[k];
  count ++;
}
console.log('总成绩为:' + sum);
console.log('平均成绩为:' + sum / count);

4. 检测属性是否存在

（1）对象名.属性名 === undefined；存在返回false，不存在返回true

（2）对象名.hasOwnProperty('属性名')；存在返回true，不存在返回false

（3）'属性名' in 对象名；存在返回true，不存在返回false

var emp  = {
  eid:1,
  ename:'aaa',
  sex:'男'
};
console.log( emp.salary === undefined );//true 说明不存在
console.log( emp.hasOwnProperty('salary'));//false 说明不存在
console.log('salary' in emp);//false 不存在

5. 对象的方法

方法对应的是一个函数，如下代码：name是属性，而使用了函数的play就是方法。

var person = {
     name:'张三',//成员属性
     play:function( ){//成员方法
           this  //指代调用方法时的对象，跟所在的对象没有关系
     }
}；
person.play( ); //调用方法

方法的调用和属性基本相同，格式如下：

var js = {
  sum:function(a,b){
    return a + b;
  },
  ax:function(c,d){
    return c * d;
  }
};
console.log( js.sum(10,1) );
console.log( js.ax(3,5) );

二、数组对象

数组是数据的一组集合，每个数据称作元素，特点是便于操作数据。

1. 数组的创建

创建方式类似于对象，有字面量创建和内置函数创建，格式如下：

//数组字面量
var p = ['张三','李四',20,true];
var salary = [12000,4500,6500,12000,15000];
var emp = ['手机','冰箱','电脑','洗衣机','空调'];
var car = ['红旗','大众','本田','福特','吉利','别克',];
//内置函数创建
var arr = new Array('huawei','xiaomi','oppo','vivo');

2. 访问数组

格式：数组[下标]，下标是数组为每个元素自动添加的编号，从0开始。例如 car[1] 就为大众，emp[0] 就为手机。

3. 数组长度

格式：数组.length，用于获取数组元素的个数；需要在数组的末尾添加元素时，只需用到数组 [ 数组.length ] = 值即可。

4. 数组的遍历

for(var i = 0;i < 数组.length;i++){
     i  //下标
     数组[i]  //下标对应的元素
}

举例：创建salary数组，遍历数组获取各个工资后求和。

var salary = [15000,4500,5400,27000,12000];
for (i = 0,sum = 0;i < salary.length;i++){
  sum = sum + salary[i];
}
console.log('总工资为：' + sum);

5. 数组API

API 是 JavaScript 中预定的函数和方法。API 有很多，以下列出比较常用的几种：

用法示例：

var arr = ['a','b','c'];
console.log( arr.toString() );//数组转字符串
console.log( arr.join('-') );//将数组转为字符串，同时以“-”隔开
var arr1 = ['张三','李四','王五'];
var arr2 = ['李健','许巍','朴树'];
var arr3 = ['张惠妹','邓丽君','张靓颖'];
console.log( arr1.concat(arr2,arr3) );//拼接数组

三、各类对象常用API

Math对象

数值对象

布尔对象