@

• ① 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 中的成员。

//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实例的方法和属性

• 获取日期的总的毫秒形式 (时间从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.) 数组元素的操作方法

4. 数组排序

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

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

5. 数组索引方法

6. 数组转换为字符串

注意：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); // 这个结果需要花费大量时间来显示， 因为需要不断的开辟新的空间

根据字符返回位置

根据位置返回字符

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

字符串操作方法

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