ECMAScript 对象

1. 数组

所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。

数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。

通过数组字面量创建数组

1
2
3
4
5
6
7
8
9
10
11
// 创建一个空数组
var arr1 = []; 
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c']; 

// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;

1.1 获取数组元素

数组的取值

1
2
3
4
5
6
// 格式：数组名[下标]	下标又称索引
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。
var arr = ['red', 'green', 'blue'];
arr[0];	// red
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined

1.2 遍历数组

对数组的每一个元素都访问一次就叫遍历。数组遍历的基本处理方式：

1
2
3
for(var i = 0; i < arr.length; i++) {
	// 数组遍历的固定结构
}

1.3 数组中新增元素

数组的赋值

1
2
3
4
5
6
7
// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";

2. 对象

在现实生活中万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征，比如：一部车，一个手机。在此要额外强调，车和手机对应的是一类事物，小区门口停的那辆车或者你手里拿的那部手机才是一个对象。

JavaScript的对象是无序属性的集合。其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。对象的行为就是属性和对象的特征就是方法。

  • 如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，属性一般是名词，用来描述事物的特征。
  • 如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法，方法是动词，描述事物的行为和功能。

2.1 new 关键字

对于面向对象的语言来说，在类中有一种特殊的函数叫做构造函数，构造函数的名字和类名相同，它的主要作用是在创建对象的时候初始化对象， 即为对象成员变量赋初始值，我们在执行new操作的时候，对应的构造函数会被自动调用。

JavaScript中的对象是由 new 运算符加上要实例化的类的名字创建的，实际对象就是引用值，指向存储对象的内存。

new在执行的会做四件事情：

  1. new会在内存中创建一个新的空对象
  2. new 会让内部的this指向这个新的对象
  3. 调用并执行构造函数，给这个新对象添加加属性和方法
  4. 返回这个新对象

2.2 对象的创建方式

  • 对象字面量

    1
    2
    3
    4
    5
    6
    7
    8
    var obj = {
        name: 'ace',
        age: 21,
        sex: true,
        sayHi: function () {
            console.log(this.name);
        }
    };

  • new Object()创建对象

    1
    2
    3
    4
    5
    6
    7
    var person = new Object();
    person.name = 'sabo';
    person.age = 21;
    person.job = '革命军二把手';
    person.sayHi = function(){
        console.log('Hello,everyBody');
    }

  • 工厂函数创建对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function createPerson(name, age, job) {
        var person = new Object();
        person.name = name;
        person.age = age;
        person.job = job;
        person.sayHi = function(){
            console.log('Hello,everyBody');
        }
        return person;
    }
    var p1 = createPerson('路飞', 22, '船长');

  • 自定义构造函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayHi = function(){
            console.log('Hello,everyBody');
        }
    }
    var p1 = new Person('张三', 22, 'actor');

2.3 基本包装类型

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

1
2
3
4
5
6
7
8
9
// 下面代码有问题吗？
// s1是基本类型，基本类型是没有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);

// 当调用s1.substring(5)的时候，先把s1包装成String类型的临时对象，再调用substring方法，最后销毁临时对象, 相当于：
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;
1
2
3
4
5
6
7
// 创建基本包装类型的对象
var num = 18;               //数值，基本类型
var num = Number('18');     //类型转换
var num = new Number(18);   //基本包装类型，对象
// Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义。例如：
var b1 = new Boolean(false);
var b2 = b1 && true;        // 结果是什么

3. 内置对象

对象只是带有属性和方法的特殊数据类型，JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象，JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean…

学习一个内置对象的使用，只要学会其常用的成员的使用（通过查文档学习），可以通过MDN/W3C来查询，内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。

3.1 MDN

Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。

1
https://developer.mozilla.org/zh-CN/

3.2 Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供，该对象中提供了数学相关的运算，比如：求绝对值，取整

1
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math
1
2
3
4
5
6
7
8
Math.PI                     // 圆周率
Math.random()               // 生成随机数
Math.floor()/Math.ceil()    // 向下取整/向上取整
Math.round()                // 取整，四舍五入
Math.abs()                  // 绝对值
Math.max()/Math.min()       // 求最大和最小值
Math.sin()/Math.cos()       // 正弦/余弦
Math.power()/Math.sqrt()    // 求指数次幂/求平方根

3.3 Date对象

创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

1
2
3
4
5
6
7
8
9
10
11
12
// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
var now = new Date();
// 获取距1970年1月1日（世界标准时间）起的毫秒数
console.log(now.valueOf());	

// Date构造函数的参数
// 1. 毫秒数 1498099000356		
new Date(1498099000356)
// 2. 日期格式字符串 '2023-5-1'	 
new Date('2023-5-1')
// 3. 年、月（月份从0开始）、日…		  
new Date(2015, 4, 1)

  • 获取日期的毫秒形式

    1
    2
    3
    var now = new Date();
    // valueOf用于获取对象的原始值
    console.log(date.valueOf())

  • 日期格式化方法

    1
    2
    3
    4
    5
    6
    7
    toString()		// 转换成字符串
    valueOf()		// 获取毫秒值
    // 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
    toDateString()
    toTimeString()
    toLocaleDateString()
    toLocaleTimeString()

  • 获取日期指定部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 返回毫秒数和valueOf()结果一样，valueOf()内部调用的就是getTime()
    getTime()  	  
    getMilliseconds() 
    getSeconds()  // 返回0-59
    getMinutes()  // 返回0-59
    getHours()    // 返回0-23
    getDay()      // 返回星期几 0周日   6周6
    getDate()     // 返回当前月的第几天
    getMonth()    // 返回月份，***从0开始***
    getFullYear() //返回4位的年份  如 2016

3.4 Array对象

创建数组对象有两种方式：字面量方式和new Array()

  1. 使用构造函数创建数组对象

    1
    2
    3
    4
    5
    6
    // 创建了一个空数组
    var arr = new Array();
    // 创建了一个数组，里面存放了3个字符串
    var arr = new Array('zs', 'ls', 'ww');
    // 创建了一个数组，里面存放了4个数字
    var arr = new Array(1, 2, 3, 4);

  2. 使用字面量创建数组对象

    1
    2
    3
    var arr = [1, 2, 3];
    // 获取数组中元素的个数
    console.log(arr.length);

  • 检测一个对象是否是数组：instanceof

    1
    2
    3
    var arr = new Array;   
    // arr引用的类型是Array, 所以打印true
    console.log(arr instanceof Array)

  • toString()/valueOf()

    • toString()：把数组转换成字符串，逗号分隔每一项
    • valueOf()：返回数组对象本身

  • 数组常用方法：

    push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 1 栈操作(先进后出)
    push()
    pop() 		//取出数组中的最后一项，修改length属性
    // 2 队列操作(先进先出)
    push()
    shift()		//取出数组中的第一个元素，修改length属性
    unshift() 	//在数组最前面插入项，返回数组的长度
    // 3 排序方法
    reverse()	//翻转数组
    sort(); 	//即使是数组sort也是根据字符，从小到大排序
    // 带参数的sort是如何实现的？
    // 4 操作方法
    concat()  	//把参数拼接到当前数组
    slice() 	//从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
    splice()	//删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
    // 5 位置方法
    indexOf()、lastIndexOf()   //如果没找到返回-1
    // 6 迭代方法 不会修改原数组(可选)
    every()、filter()、forEach()、map()、some()
    // 7 方法将数组的所有元素连接到一个字符串中。
    join()

  • 清空数组

    1
    2
    3
    4
    5
    6
    // 方式1 推荐 
    arr = [];
    // 方式2 
    arr.length = 0;
    // 方式3
    arr.splice(0, arr.length);

3.5 String对象

  • 字符串的不可变

    1
    2
    var str = 'abc';
    str = 'hello';
    1. 当重新给str赋值的时候，常量abc不会被修改，依然在内存中
    2. 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
    3. 由于字符串的不可变，在大量拼接字符串的时候会有效率问题

  • 创建字符串对象

    1
    2
    3
    4
    var str = new String('Hello World');

    // 获取字符串中字符的个数
    console.log(str.length);

  • 字符串对象的常用方法

    字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 1 字符方法
    charAt()        // 获取指定位置处字符
    charCodeAt()    // 获取指定位置处字符的ASCII码
    str[0]          // HTML5，IE8+支持 和charAt()等效
    // 2 字符串操作方法
    concat()        // 拼接字符串，等效于+，+更常用
    slice()         // 从start位置开始，截取到end位置，end取不到
    substring()     // 从start位置开始，截取到end位置，end取不到
    substr()        // 从start位置开始，截取length个字符
    // 3 位置方法
    indexOf()       // 返回指定内容在元字符串中的位置
    lastIndexOf()   // 从后往前找，只找第一个匹配的
    // 4 去除空白   
    trim()          // 只能去除字符串前后的空白
    // 5 大小写转换方法
    toUpperCase()   // 转换大写
    toLowerCase()   // 转换小写
    // 6 其它
    search()
    replace()
    split()
    fromCharCode()