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
  });