本文主要是介绍js-对象，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

@

目录

• ① js对象的分类
• ② 创建自定义对象的两种方式
  • 1.字面量创建对象
  • 2. 构造函数创建对象
    • 构造函数
    • 对象实例化
• ③ 对象成员的调用、添加与删除
  • 1. 成员的调用
  • 2. 成员的添加
  • 3. 成员的删除
    • 1.) 通过delete命令删除对象成员
• ④ 遍历对象属性
  • 1.) for...in
• ⑤ js内置对象
  • 1. Math
  • 2. Date
  • 3. Array
    • 创建数组
    • 数组检测
      • instanceof
      • Array.isArray()
    • 3.) 数组元素的操作方法
    • 4. 数组排序
    • 5. 数组索引方法
    • 6. 数组转换为字符串
    • 7. ES5中新增的数组方法
      • forEach()
      • filter()
      • some()
    • 8.Array includes() 方法
  • 4.基本包装类型
  • 5. String
    • 字符串的不可变性
    • 根据字符返回位置
    • 根据位置返回字符
    • 字符串操作方法
    • ES5 中的新增字符串方法
    • String.prototype.indexOf()
    • String.prototype.padStart()
  • 6. Object
    • ES5新增的对象方法
      • Object.keys()
      • Object.defineProperty()

---

在 JavaScript 中，对象是一组无序的相关属性和方法的集合。 例如字符串、数值、数组、函数等都是对象。

① js对象的分类

• 自定义对象
• 内置对象
• 浏览器对象

前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于JS 独有的。

② 创建自定义对象的两种方式

1.字面量创建对象

对象字面量： 就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法，{ } 里面的成员采取键值对的形式表示。

• 键名：相当于属性名
• 键值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

//通过字面量的方式创建对象obj
var obj = {
    //键名与键值之间以`:`分割，成员之间以`,`分割。  
    name : 'gh',
    age : 18,
    sayHi : function () {
        console.log('hi~');
    }
};

2. 构造函数创建对象

构造函数

构造函数 是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面，它泛指某一大类（class），俗称“构造器”。

//自定义构造器封装格式如下：
function 构造函数名(形参,...,...){
    //函数内的公共属性和方法前面需要添加 this ，表示当前对象的属性和方法。
    this.属性名1 = 形参1;
    this.属性名2 = 形参2;
    this.属性名3 = 形参3;
    this.方法名 = function (){
        //...
    } 
    //return; 构造函数中不需要 return 返回结果。
}

//构造函数的调用格式
var obj = new 构造函数名(实参1，实参2，实参3);

注意：

1. 构造函数名约定首字母大写。
2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
3. 构造函数中不需要 return 返回结果。
4. 当我们创建对象的时候，必须用 new 来调用构造函数。

对象实例化

必须通过 new关键字调用构造器来创建对象，此过程被也称为对象实例化

//1.通过 “默认构造器” 创建对象
var obj = new Object();//创建了一个空对象obj
/*
通过字面量创建对象等同于调用默认构造器创建对象，如下
var obj = {};
*/

//2.通过 “自定义构造器” 创建对象
function 构造器名(形参,...,...){
	//...
}
var 对象名 = new 构造器名(实参,...,...);

• new关键字执行过程
  1. 在执行构造函数前，先在内存中创建一个新的空对象。
  2. 执行构造函数里面的代码， 修改this的指向，把this指向创建出来的空对象，
  3. 执行函数体，给这个新的空对象添加属性和方法并初始化
  4. 执行完函数体后，返回这个新对象(this)（所以构造函数里面不需要return） 。

③ 对象成员的调用、添加与删除

1. 成员的调用

//方式一：通过 “.”
对象名.属性名;

//方式二: 通过 “[' ']” ,注意方括号里面的属性必须加引号   
对象名['属性名'];

//当成员为方法，通过如下方式调用方法
对象名.方法名();

2. 成员的添加

//添加属性
对象名.属性名 = 值;
//添加方法
对象名.方法名 = function (){
    //...
}

3. 成员的删除

1.) 通过delete命令删除对象成员

delete 操作符 - JavaScript | MDN (mozilla.org)

delete obj.属性;//return true

④ 遍历对象属性

1.) for...in

for...in: 语句用于对象的属性进行循环操作

for (var 变量名 in 对象名){
    //...
}

for (var k in obj) {
	console.log(k); //k：对象的属性名或 数组的索引，都是字符串
	console.log(obj[k]); //obj[k]：对象obj属性值或数组obj的元素值
    //注意：不管obj是普通对象还是数组，都不需要引号 obj['k']
}

⑤ js内置对象

内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），开发者可以直接使用，以便快速开发。

JavaScript 提供了多个内置对象： Math、 Date 、 Array、 String等

1. Math

Math对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机值

//eg: 获取指定范围内的随机整数
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

2. Date

Date对象 和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间

• 使Date实例化日期对象

//获取当前时间
var data1 = new Date();
//获取指定时间
//new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
var data2 = new Date(2019, 10, 1);
//new Date(dateString);
var data3 = new Date('2019-10-1 8:8:8');

• 使用Date实例的方法和属性

方法名	功能
getFullYear()	获取当年
getMouth()	获取当月(0-11)
getDate()	获取当天日期
getDay()	获取星期几(周日0 ~ 周六6)
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒

• 获取日期的总的毫秒形式 (时间从1970年开始 )

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(now.valueOf())	
console.log(now.getTime())	
// 2. 简单写可以这么做
var now = +new Date();			
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

3. Array

Array对象

创建数组

//方式一：字面量
var arr = [1,"test",true];

//方式二：Array()构造函数
// Array (数组长度)；
var arr3 = new Array();//空数组
var arr1 = new Array(5);//元素长度为5，每个元素为空
// Array (元素1, 元素2,...)
var arr2 = new Array(1, 2, 3);

数组检测

instanceof

instanceof

//方式一：通过 instanceof运算符 进行类型判断
var arr = [];
console.log(arr instanceof Array);//true

Array.isArray()

Array.isArray())

//方式二: 通过 内置Array.isArray();
console.log(Array.isArray(arr));//true

3.) 数组元素的操作方法

方法	说明	返回值
push(参数1,...)	数组末尾添加一个或多个元素，注意修改原数组	返回数组新的长度
pop()	删除数组最后一个元素,无参数,修改原数组	返回所删除的元素
unshift(参数1,...)	向数组的开头添加一个多更多元素，修改原数组	返回数组新的长度
shift()	删除数组第一个元素，修改原数组	返回所删除的元素
concat()	链接两个或多个数组，不影响原数组	返回一个新的数组
slice()	数组截取slice(begin, end)	返回被截取项目的型数组
splice()	数组删除splice(第几个开始，要删除个数)	返回被删除项目的新数组，并影响原数组

4. 数组排序

方法名	说明	是否修改原数组
reverse()	反转数组元素，无参数	修改原数组并返回新数组
sort()	对数组元素进行排序	修改原数组并返回新数组

注意：sort方法需要传入参数来设置升序、降序排序

//升序
arr.sort(function(a, b){
    return a - b;
})
//降序
arr.sort(function(a, b){
    return b - a;
})

5. 数组索引方法

方法名	说明	返回值
indexOf()	查找数组中给定元素的第一个索引	如果存在返回索引号，如果时失败返回-1
lastIndexOf()	再数组中的最后一个索引	如果存在返回索引号，如果时失败返回-1

6. 数组转换为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join('分隔符')	把数组转换成字符串，‘分隔符’分隔每一项	返回一个字符串

注意：join方法如果不传入参数，则按照 “ , ”拼接元素

7. ES5中新增的数组方法

这里介绍新增的迭代(遍历)方法，分别如下：

forEach()

forEach()

array.forEach(function(currentValue, index, arr))
//eg
var arr = [1, 2, 3];
arr.forEach(function(value, index, array) {
    console.log('每个数组元素' + value);
    console.log('每个数组元素的索引号' + index);
    console.log('数组本身' + array);//输出：元素本身1,2,3
})

• currentValue： 数组当前项的值
• index： 数组当前项的索引
• arr： 数组对象本身

filter()

filter()

array.filter(function(currentValue, index, arr))
//eg
var arr = [12, 66, 4, 88, 3, 7];
//filter()返回一个新数组
var newArr = arr.filter(function(value, index) {
    //返回符合条件的所有元素值
    return value % 2 === 0;
});
console.log(newArr);//[12,66,4,88]

• filter() 方法创建并返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
• currentValue: 数组当前项的值
• index： 数组当前项的索引
• arr： 数组对象本身

some()

some()

array.some(function(currentValue, index, arr))
//eg
var arr1 = ['red', 'pink', 'blue'];
//some()返回一个布尔值
var flag1 = arr1.some(function(value) {
    //返回第一个符合条件的元素，some()遍历就此结束
    return value == 'pink';
});
console.log(flag1);//true

• some() 方法用于查找数组中是否有满足条件的元素，它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false.

• 如果找到第一个满足条件的元素,则终止循环. 不在继续查找.

• currentValue: 数组当前项的值

• index： 数组当前项的索引

• arr： 数组对象本身

• 有关forEach、filter、some回调函数return问题

  • forEach和filter里的回调函数若是有return语句，不管return什么，都不会打断数组遍历的继续
  • some里的回调函数的return语句会结束数组的遍历，如果return null，可能不会结束数组遍历

8.Array includes() 方法

JavaScript Array includes() 方法-菜鸟
JavaScript-info

4.基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

基本包装类型就是把简单数据类型包装成为复杂数据类型， 这样基本数据类型就有了属性和方法。

var str = 'andy';
//自动包装?
console.log(str.length);
console.log(str typeof String);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下

//上述代码的执行过程
var str;
// 1. 生成临时变量， 把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

5. String

String对象

字符串通过基本包装类型可以调用部分内置方法来操作字符串

字符串的不可变性

​ 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

​ 当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
​ 由于字符串的不可变，在大量拼接字符串的时候会有效率问题（程序会大量的开辟内存空间）

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候， 常量'abc'不会被修改， 依然在内存中
// 重新给字符串赋值， 会重新在内存中开辟空间， 这个特点就是字符串的不可变
// 由于字符串的不可变， 在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {
	str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示， 因为需要不断的开辟新的空间

根据字符返回位置

方法名	说明
indexOf('要查找的字符' , '开始的位置')	返回指定内容再字符串中的位置，如果找不到返回-1，开始位置是index索引号
lastIndexOf()	从后往前找，只找第一个匹配的

根据位置返回字符

方法名	说明
charAt(index)	返回指定位置的字符(index字符串的索引号)
charCodeAt(index)	返回指定位置处字符的ASCII码(index字符串的索引号)
str[index]	返回指定位置的字符；HTML5，IE8+支持

在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：

字符串操作方法

方法名	说明
concat(str1, str2, str3...)	concat()方法用于链接两个或多个字符串。
substr(start, length)	从start位置开始(索引号), length取的个数
slice(start, end)	从start位置开始， 截取到end位置，end取不到
substring(start, end)	从start位置开始， 截取到end位置，end取不到, 基本和slice相同, 但是不接受负值
replace(被替换的字符串， 要替换为的字符串)	用于在字符串中用一些字符替换另一些字符
split("分割字符")	用于切分字符串，它可以将字符串切分为数组,返回的是一个新数组。
toUpperCase()
toLowerCase()

ES5 中的新增字符串方法

trim() 方法会从一个字符串的两端删除空白字符。

str.trim();

trim() 方法并不影响原字符串本身，它返回的是一个新的字符串。

String.prototype.indexOf()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

String.prototype.padStart()

String.prototype.padStart() - JavaScript | MDN (mozilla.org)

6. Object

Object对象

ES5新增的对象方法

Object.keys()

Object.keys()

作用： 获取对象的所有成员名，Object.keys() 方法返回对象中所有元素名为字符串组成新字符串数组。

Object.keys(obj);

Object.defineProperty()

Object.defineProperty()

作用: 定义新属性或修改原有的属性。

Object.defineProperty(obj, prop, descriptor);

参数说明

• obj: 目标对象

• prop: 需定义或修改的属性的名字

• descriptor : 目标属性所拥有的特性

  descriptor 说明： 该参数为一个对象，以下对象相关属性说明

  • value: 设置属性的值
  • writable: 值是否可以重写， true | false，默认值为false
  • enumerable: 目标属性是否可以被枚举。 true | false，默认值为false
  • configurable: 目标属性是否可以被删除或是否可以再次修改特性。 true | false，默认值为false

  var obj={};
  Object.defineProperty(obj, "name", {
      value: "jk",
      writable: false,
      enemerable: false,
      configurable: f
  });
  

这篇关于js-对象的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！