JavaScript基础(四)对象、数组、对象与数组的常用API

简介: 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 有很多,以下列出比较常用的几种:

image.png

用法示例:

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对象

image.png

image.png

image.png

数值对象

image.png

布尔对象

image.png



相关文章
|
7月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
373 84
|
8月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
194 10
|
11月前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
258 12
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API