标签：Web console log 对象 JavaScript 数组 var 前端开发 属性
俗话说，万物皆对象。在真实生活中，汽车是一个对象。汽车有诸如车重和颜色等属性，也有诸如启动和停止的方法。
在JavaScript中，对象就是一组属性与方法的集合，属于引用类型 数据。
一、对象的属性和方法
1.对象的创建
在JavaScript中，程序员自己创建的对象就叫做自定义对象，常用 的创建方式为字面量方式，格式如下：
{ 属性名 : 属性值 , 属性名 : 属性值 ...... }可以看出，用字面量创建对象很简单，就是直接在大括号里写属性名：属性值。属性名的引号可以省略，但属性名含有特殊字符时必须添加引号。例如：创建一个手机对象，带有颜色、品牌、大小、产地属性，同时因为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有很多，以下列出比较常用的几种：
| API | 用途 |
| toString( ) | 将数组转为字符串 |
| indexOf( ) | 检测数组中是否含有某个元素，返回的是元素的下标，如果找不到则返回-1 |
| join( ) | 将数组转为字符串，同时指定分割的符号 eg：join('-') |
| concat | 拼接多个数组，返回一个大的数组 eg：arr1.concat(arr2) |
| reverse( ) | 翻转数组元素 |
| slice( ) | 截取数组中的元素slice(start,end) ;start是开始的下标，end是结束的下标 |
| splice( ) | 删除数组中的元素 |
| push( ) | 往数组的末尾添加一个或者多个元素，返回的是数组的元素，原数组会发生变化 |
| pop( ) | 删除数组末尾的一个元素，返回的是删除的那个元素，原数组会发生变化 |
| unshift( ) | 往数组的开头添加一个或者多个元素，返回的是数组的元素，原数组会发生变化 |
| shift( ) | 删除数组开头的一个元素，返回的是删除的那个元素，原数组会发生变化 |
用法示例：
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对象
| API | 用途 |
| ceil( ) | 向上取整 eg：console.log( Math.ceil(3.1) );//4 |
| floor( ) | 向下取整 |
| round( ) | 四舍五入取整 |
| random( ) | 取随机，0~1之间 (>=0 <1) |
| Math.PI | 获取圆周率 |
| max( ) | 获取一组数字的最大值 |
| min( ) | 获取一组数字的最小值 |
| pop(x,y) | 计算x的y次幂 |
| abs( ) | 取绝对值 |
Data对象：用于对日期、时间的存储和计算
| API | 用途 |
| new Date('2021/7/16 10.52.30') new Date(2021,6,16,10,52,30)，第二个参数月份的范围是0~11代表1~12月 new Date( )，存储的是当前操作系统的时间 new Date(1000)，存储的是距离计算机元年的毫秒数 | 创建 |
| getFullYear( ) getMonth( )，月份0~11代表1~12月 getDate( ) getHours( ) getMinutes( ) getSeconds( ) getDay( )，获取星期(0~6) getTime( )，获取距离计算机元年的毫秒数 | 获取存储的日期时间 |
| toLocaleString( ) toLocaleDateString( ) toLocaleTimeString( ) | 转为本地字符串（存在兼容性问题，用于开发阶段） |
| setFullYear( ) setMonth( ) setDate( ) setHours( ) setMinutes( ) setSeconds( ) setMilliseconds( ) setTime( )，修改距离计算机元年毫秒数 ，会产生具体的日期日期 | 修改日期时间 |
数值对象
| API | 用途 |
| new Number( ) | 将数据强制转换为数值，返回对象 |
| Number( ) | 将数据强制转换为数值，返回数值 |
| toFixed(n) | 强制保留小数点后n位 |
| toString(n) | 转为字符串，设置为n进制 |
布尔对象
| new Boolean( ) | 将数据强制转换为布尔型，返回对象 |
| Boolean( ) | 将数据强制转换为布尔型，返回布尔型 |
| !!数据 | 隐式将数据转换为布尔型 |
下期：JavaScript基础_补充_错误处理、es6
标签：Web,console,log,对象,JavaScript,数组,var,前端开发,属性 来源： https://blog.csdn.net/weixin_53072519/article/details/119052955
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。