【干货分享|建议收藏】2w字爆肝详解 JavaScript对象

感激相遇 你好 我是阿ken

作者：请叫我阿ken
链接：请叫我阿ken主页链接
来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

JavaScript对象

5.1_初始对象

5.1.1_什么是对象

例如：在JavaScript中描述一个手机对象，则手机拥有的属性和方法如下：

• 手机的属性：颜色、重量、屏幕尺寸。
• 手机的方法：打电话、发短信、看视频、听音乐。
  在代码中，属性可以看成是对象中保存的一个变量，使用“对象.属性名”表示；方法可以看成是对象中保存的一个函数，使用“对象.方法名（）”进行访问。

// 假设现在有一个手机对象p1，通过代码创建出来
var p1 = {
color: '黑色',
weight: '188g',
screenSize: '6.5',

call: function (num) {
console.log('打电话给'+num);
},

sendMessage: function (num, message) {
console.log ('给'+ num + '发短信，内容为:' + message);
},

playVideo: function() {
console.log ('播放视频');
},

playMusic: functlon() {
console.log ('播放音乐');
}

};

//访向p1的属性
console.log (pl.color);     // 输出结果:"黑色"，表示手机的颜色为黑色
console.log (p1.weight);    // 输出结果: "188g"，表示手机的重量为188克
console.log (p1.screenSize);// 输出结果:"6.5",表示手机的屏幕尺寸为6.5英寸

//调用p1的方法
p1.call('123');           // 调用手机的拨打电话方法，拨打号码为123
p1.sendMessage('123', 'hello'); // 给电话号码123发短信，内容为hello
p1.playVideo();    // 调用手机的播放视频方法
p1.playMusic();    // 调用手机的播放音乐方法

从上述代码可以看出，对象的属性和变量的使用方法类似，对象的方法和函数的使用方法类似。
通过对象可以把一系列的属性和方法集合起来，用一个简单的变量名p1来表示。

5.1.2_利用字面量创建对象

在 JavaScript 中，对象的字面量就是用花括号“{"来包裹对象中的成员，每个成员使用"key：value"的形式来保存，key 表示属性名或方法名，value 表示对应的值。多个对象成员之间用“,"隔开。

案例：

// 创建一个空对象
var obj = {};
// 创建一个学生对象
var stul = {
name: '小明',  // name 属性
age: 18,       // age属性
sex: '男',     // sex属性

sayHello: function () {  // sayHello方法
console.log ('Hello');
}

};

在上述代码中，obj是一个空对象，该对象没有成员。stu1对象中包含4个成员，分别是name、age、sex和sayHello，其中name，age和sex是属性成员，sayHello是方法成员。

5.1.3_访问对象的属性和方法

在将对象创建好以后，就可以访问对象的属性和方法了。
示例代码如下：

//访同对象的属性(语法1)
console.log (stul.name);   // 输出结果:小明
//访同对象的属性(语法2)
console.log (stul['age']); // 输出结果:18

//调用对象的方法(语法1)
stul.sayHello();        // 输出结果: Hello
//调用对象的方法(语法2)
stul['sayHello']();     // 输出结果: Hello 

如果对象的成员名中包含特殊字符，则可以用字符串来表示，
示例代码如下:

var obj = {
'name-age': '小明-18'
};
console.log (obj['name-age']);  
// 输出结果:"小明-18"

JavaScript的对象具有动态特征。如果一个对象没有成员，用户可以手动赋值属性或方法来添加成员，
具体示例如下：

var stu2 = {}；      // 创建一个空对象
stu2.name = 'Jack';  // 为对象增加name属性
stu2.introduce = function() {     // 为对象增加introduce方法
alert ('My name is ' + this.name);// 在方法中使用this代表当前对象
};

alert (stu2.name);//访问name属性，输出结果: Jack
stu2.introduce();//调用introduce()方法，输出结果:My name is Jack

在上述代码中，在对象的方法中可以用 this 来表示对象自身，因此，使用 this.name 就可以访问对象的 name 属性。

如果访问对象中不存在的属性时，会返回undefined。
示例代码如下:

var stu3 = {};      //创建一个空对象
console.log(stu3.name); //输出结果: undefined

5.1.4_利用 new Object 创建对象

前面在学习数组时，我们知道可以使用 new Array 创建数组对象。而数组是一种特殊的对象，如果要创建一个普通的对象，则使用 new Object 进行创建。

示例代码如下：

var obj = new Object(); //创建了一个空对象
obj.name = '小明';  //创建对象后，为对象添加成员
obj.age = 18;
obj.sex = '男';
obj.sayHello = function(){
console.log('Hello');
};

5.1.5_利用构造函数创建对象

前面学习的字面量的方式只适合创建一个对象，而当需创建多个对象时，还要将对象的每个成员都写一遍，显的比较麻烦，因此，可以用构造函数来创建对象。使用构造函数来创建对象的语法为“new 构造函数名()”，在小括号中可以传递参数给构造函数，如果没有参数，小括号可以省略。

实际上，“new Object()”就是一种使用构造函数创建对象的方式，Object 就是构造函数的名称，但这种方式创建出来的是一个空对象。

其基本语法如下：

//编写构造函数
function 构造函数名() {
this.属性 = 属性;
this.方法 = function() {
//方法体
};
}

//使用构造函数创建对象
var obj = new 构造函数名();

在上述语法中，构造函数中的 this 表示新创建出来的对象，在构造函数中可以通过 this 来为新创建出来的对象添加成员。需要注意的是，构造函数的名称推荐首字母大写。

案例：

// 编写一个Student构造函数
function Student (name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log ('你好，我叫' + this.name);
};
}

//使用Student构造函数创建对象
var stul = new Student('小明', 18);
console.log(stul.name);         // 输出结果:小明
console.log(stu1.sayHello());   // 输出结果:你好，我叫小明
var stu2 = new Student('小红', 17);
console.log(stu2.name);         // 输出结果:小红
console.log(stu2.sayHello());   // 输出结果:你好，我叫小红

JavaScript 中的构造函数类似于传统面向对象语言(如Java)中的类(class)，所以 JavaScript 中也可以使用面向对象编程中的一些术语。

• 抽象: 将一类对象的共同特征提取出来，编写成一个构造函教(类)的过程，称为抽象。

• 实例化: 利用构造函数(类)创建对象的过程，称为实例化。

• 实例: 如果 stu1对象是由Student构造函数创建出来的，则stu1对象称为Student构造函数的实例(或称为实例对象)。

小提示:
在一些文档中，经常把对象中的方法也称为函数，或者把构造函教称为构造器或构造方法，我们只需明白这些称呼所指的是同一个事物即可。

多学一 招: 静态成员

在面向对象编程中有静态( static )的概念，JavaScript也不例外。JavaScript 中的静态成员，是指构造函数本身就有的属性和方法，不需要创建实例对象就能使用。

下面我们通过代码演示静态成员的创建与使用：

function Student(){
}

Student.school = 'x大学';       // 添加静态属性school
Student.sayHello = function() { // 添加静态方法sayHello
console.log('Hello');
};

console.log(Student.school);    //输出结果:x大学
Student.sayHello();             //输出结果:Hello

5.1.6_遍历对象的属性和方法

使用 for.in 语法可以遍历对象中的所有属性和方法，
示例代码如下：

// 准备一个待遍历的对象
var obj = {name:'小明', age:18, sex:'男'};

// 遍历obj对象
for(var k in obj){
// 通过k可以获取遍历过程中的属性名或方法名
console.log(k);        // 依次输出:name、age、sex
console.log (obj[k]);  // 依次输出:小明、18、男
}

在上述代码中，k 是一个变量名，可以自定义，习惯上命名为 k 或者 key，表示键名。当遍历到每个成员时，使用 k 来获取当前成员的名称，使用 obj[k] 获取对应的值。另外，如果对象中包含方法，则可以通过“ obj[k]() " 进行调用。

多学一招: 判断对象成员是否存在

当需要判断一个对象中的某个成员是否存在时，可以使用 in 运算符，
案例：

var obj = (name:'Tom', age: 16);
console.log('age' in obj);   // 输出结果: true
console.log('gender' in obj);// 输出结果: false

从上述代码可以看出，当对象的成员存在时返回 true ，不存在时返回 false。

5.2_内置对象

为了方便程序开发，JavaScript 提供了很多常用的内置对象， 包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。掌握常用内置对象的使用方法会给程序开发带来极大的便利。

5.2.1_通过查阅文档熟悉内置对象

前面讲解的对象都是开发人员自己编写的对象。为了方便程序开发，JavaScript 还提供了很多内置对象，使用内置对象可以完成很多常见的开发需求，例如，数学计算、日期处理，数组操作等。对于大部分开发者来说，不必花费时间研究这些内置对象的实现原理是什么，重要的是快速掌握内置对象的使用，从而快速地投入到开发工作中。

由于JavaScript提供的内置对象非常多，还存在着版本更新、浏览器兼容性等各方面的原因，因此学习内置对象最好的方法是查阅网络上的最新文档。

接下来我们以Mozilla开发者网络(MDN )为例，演示如何查阅JavaScript 中内置对象的使用：

• 打开MDN网站，在网站的导航栏中找到“技术” —— "JavaScript，

• 将页面向下滚动，可以在左侧边栏中找到“内置对象”项，将该项展开后，可以看到所有内置对象的目录链接，

• 另外，如果不知道对象的名称，也可以在页面的搜索框中输入关键字进行搜索，找到某个关键字相关的对象或者方法。

在通过文档学习某个方法的使用时，基本上可以分为4个步骤，
例如查阅Math.max()，具体如下：

1. 查阅方法的功能。页面上方有一 段文字:“Math max0函数返回一组数中的最大值。”。这段文字就是介绍方法的功能。

2. 查看参数 的意义和类型。通过文档可知，max() 方法的参数是一组数值， 数量不限。在文档的语法中，使用“[ ]” 包裹的参数表示可选参数，可以省略。

3. 查看返回值 的意义和类型。在文档中可以看到具体的说明。

4. 通过示例代码进行测试。在文档中的大部分常用方法的页面中都提供了示例代码，通过示例代码可以学习如何使用这个方法。

5.2.2_[案例] 封装自己的数学对象

当内置对象不能满足需求的时候，我们还可以自己封装一个对象，来完成具体操作。接下来我们封装一个数学对象myMath，实现求出数组中的最大值，

具体代码如下：

var myMath = {

pI: 3.141592653589793,

max: function() (

var max = arguments[0];uments. length; 1++){

for (var 1- 1; i < arguments

if (arguments[i] > max)

max = arguments[i];

return max;

}

console.log (myMath.PI);

/输出结果:3.141592653589793

console. log (myMath.max(10，20，30));

//输出结果: 30

上述代码中，第1行代码定义了一个myMah对象。第2行代码设置了PI的值。第3~ 11行代码定义了一个max方法，并利用arguments来接收输人的参数，返回数组的最大值。第13行代码调用myMahPI得出定义好的值。第14行代码调用myMath.max()方法得出数组中的最大值。

5.3_Math 对象

5.3.1_Math 对象的使用

Math 对象用来对数字进行与数学相关的运算，该对象不是构造函数，不需要实例化对象，可以直接使用其静态属性和静态方法。

Math 对象的常用属性和方法

成员	作用
PI	获取圆周率，结果为3.141592653589793
abs(x)	获取x的绝对值，可传入普通数值或是用字符串表示的数值
max([value1[,value2,…]])	获取所有参数中的最大值
min([value1[,value2,…]])	获取所有参数中的最小值
pow(base, exponent)	获取基数(base)的指数(exponent)次幂，即base^exponent
sqrt(x)	获取x的平方根
ceil(x)	获取大于或等于x的最小整数，即向上取整
floor(x)	获取小于或等于x的最大感数，即向下取整
round(x)	获取x的四舍五入后的整数值
random()	获取大于或等于0.0且小于1.0的随机值

案例：

Math.PI;// 获取圆周率
Math.abs(-25);// 获取绝对值，返回结果:25
Math.abs('-25');// 获取绝对值，自动转换为数字，返回结果:25
Math.max(5, 7, 9, 8);// 获取最大值，返回结果:9
Math.min(6, 2, 5, 3);// 获取最小值，返回结果:2
Math.pow(2, 4);// 获取2的4次幂，返回结果:16
Math.sqrt(9);//获取9的平方根，返回结果为:3
Math.ceil(1.1);// 向上取整，返回结果: 2
Math.ceil(1.9);// 向上取整，返回结果:2
Math.floor(1.1);// 向下取整，返回结果:1
Math.floor(1.9);// 向下取整，返回结果:1
Math.round(1.1);// 四舍五入，返回结果: 1
Math.round(1.5);// 四舍五入，返回结果:2
Math.round(1.9);// 四舍五入，返回结果:2
Math.round(-1.5);// 四舍五入，返回结果:-1(取较大值)
Math.round(-1.6);// 四舍五入，返回结果:-2

5.3.2_生成指定范围的随机数

Math.random() 用来获取随机数，每次调用该方法返回的结果都不同。该方法返回的结果是一个很长的浮点数，如“0.925045617789475其范围是0~1(不包括1)。

由于 Math.random() 返回的这个随机数不太常用，我们可以借助一些数学公式来转换成任意范围内的随机数，公式为“Math.random() * (max - min) + min",表示生成大于或等于 min 且小于 max 的随机值。

示例代码如下:

Math.random() * (3 - 1) + 1;  // 1 ≤ 返回结果 < 3
Math.random() * (20 - 10) + 10; // 10 ≤ 返回结果 < 20
Math.random() * (99 - 88) + 88; // 88 ≤ 返回结果 < 99

上述代码的返回结果是浮点数，当需要获取整数结果时，可以搭配Math.floor()来实现。

案例：演示如何获取1 ~ 3范围内的随机整数，返回结果可能是1、2或3:

function getRandom (min, max) {
return Math.floor(Math.random()*(max - min + 1) + min);
}
console.log(getRandom(1, 3)); // 最小值1,最大值3

上述代码中，第2行用来生成min到max之间的随机整数，包含min和max。另外，还可以使用Math.floor (Math.random() * (max + 1)) 表示生成0到max之间的随机整数，使用Math.floor (Math.random() * (max + 1)+ 1)表示生成1到max之间的随机整数。

利用随机数，可以实现在数组中随机获取个元素， 示例代码如下:

var arr = ['apple', 'banana', 'orange', 'pear'];
//调用前面编写的getRandom()函数获取随机数
console.log( arr[getRandom(0, arr.length-1)] );

5.3.3_[案例] 猜数字游戏

案例: 演示 Math 对象的使用。使程序随机生成个 1 ~ 10 之间的数字、并让用户输人一个数字户输人的数字，判断这两个数的大小，如果用户输入的数字大于随机数，那么提示“你猜大了”，如果用户输入的数字小于随机数，则提示“你猜小了”，如果两个数字相等，就提示“恭喜你，猜对了”，结束程序。

案例：

function getRandom(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
} //定义了getRandom()函数，利用Math.random()方法求随机数。

var random = getRandom(1, 10);  //设置了随机数大小为1~10之间的数
while(true){  //死循环,利用第13行的break来跳出循环
var num = prompt('猜数字，范围在1~10之间。');
if(num > random){
alert('你猜大了');
}else if(num < random){
alert('你猜小了');
}else{
alert('恭喜你，猜对了');
break;//利用while循环语句中利用if...else if多分支语句来判断大于、小于、等于
}
}

5.4_日期对象

JavaScript 中的日期对象用来处理日期和时间。例如，秒杀活动中日期的实时显示、时钟效果、在线日历等。

5.4.1_日期对象的使用

JavaScript 中的日期对象需要使用 new Date() 实例化对象才能使用，Date() 是日期对象的构造函数。在创建日期对象时，可以为 Date() 构造函数传人一些参数，来表示具体的日期，其创建方式如下。

// 方式1: 没有参数，使用当前系统的当前时间作为对象保存的时间
var datel = new Date();
// 输出结果: Wed 0ct 16 2019 10:57:56 GMT+0800 (中国标准时间)
console.log (datel);

// 方式2: 传人年，月，日、时、分、秒(月的范围是0 ~ 11,即真实月份-1)
var date2 = new Date(2019, 10, 16, 10, 57, 56);
// 输出结果: Sat Nov 16 2019 10:57:56 GMT+0800 (中国标准时间)
console.log(date2);

// 方式3: 用字符串表示日期和时间
var date3 = new Date('2019-10-16-10:57:56');
// 输出结果: Wed Oct 16 2019 10:57:56 GMT+0800(中国标准时间)
console.log(date3);

在使用方式1时，其返回的 date1 对象保存的是对象创建时的时间；
在使用方式2时，最少需要指定年、月两个参数，后面的参数在省略时会自动使用默认值；
在使用方式3时，最少需要指定年份。另外，当传入的数值大于合理范围时，会自动转换成相邻数值(如方式2将月份设为-1表示去年12月，设为12表示明年1月)。

在获取到日期对象后，直接输出对象得到的是一个字符串表示的日期和时间。如果想要用其他格式来表示这个日期和时间，可以通过调用日期对象的相关方法来实现。日期对象的常用方法分为 get 和 set 两大类。

Date 对象的常用 get 方法：

方法	作用
getFullYear()	获取表示年份的4位数字，如2020
getMonth()	获取月份，范围为0 ~ 11(0表示一月，1表示二月，依次类推)
getDate()	获取月份中的某一天，范围1 ~ 31
getDay()	获取星期，范围为0 ~ 6(0表示星期日，1表示星期一，依次类推)
getHours()	获取小时数，范围为0 ~ 23
getMinutes()	获取分钟数，范围为0 ~ 59
getSeconds()	获取秒数，范围为0 ~ 59
getMilliseconds()	获取毫秒数，范围为0 ~ 999
getTime()	获取从1970-01-01 00:00:00距离 Date 对象所代表时间的毫秒数

Date 对象的常用 set 方法：

方法	作用
setFullYear(value)	设置年份
setMonth(value)	设置月份
setDate(value)	设置月份中的某一天
setHours(value)	设置小时数
setMinutes(value)	设置分钟数
setSeconds(value)	设置秒数
setMillseconds(value)	设置亳秒数
setTime(value)	通过从1970-01-01 00:00:00 计时的毫秒数来设置时间

案例：在控制台中输出当前日期。

var date = new Date();//基于当前日期时间创建Date对象
var year = date.getFullYear();//获取年
var month = date.getMonth();// 获取月
var day = date.getDate();//获取日
//通过数组将星期值转换为字符串
var week =['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//输出date对象保存的时间， 示例:今天是2019年9月16日星期三，
console.log('今天是'+ year + '年' + month + '月' + day + '日' + week[date.getDay()]);

在上述代码中，week[ date.getDay() ] 用来从 date 对象中获取星期值，然后作为数值的索引到 week 数组中取出对应的星期字符串。

案例：将日期对象中的时间转换成指定的格式，

//返回当前时间，格式为:时:分:秒,用两位数字表示
function getTime(){

var time = new Date();
var h = time.getHours();
h = h < 10 ? '0'+ h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s<10?'0'+s:s;

return h + ':' + m + ':'+s;
}
console.log( getTime() ); // 输出结果示例: 10:07:56

在上述代码中，第 5、7、 9 行代码用来判断给定数字是否为一位数， 如果是一位数则在前面加上 “0”。

5.4.2_[案例] 统计代码执行时间

通过日期对象可以获取从1970年1月1日0时0分0秒开始一直到当前 UTC 时间所经过的毫秒数，这个值可以作为时间戳来使用。通过时间戳，可以计算两个时间之间的时间差，还可以用于加密、数字签名等技术中。

获取时间戳常见的方式如下：

//方式1:通过日期对象的valueof()或getTime()方法
var datel = new Date();
console.log( datel.valueOf() );
// 示例结果: 1571196996188
console.log( datel.getTime() );
// 示例结果: 1571196996188

//方式2:使用"+"运算符转换为数值型
var date2 = +new Date();
console.log(date2);
// 示例结果: 1571196996190

// 方式3:使用HIMLS新增的 Date.now()方法
console.log( Date.now() );
// 示例结果: 1571196996190

在掌握如何获取到时间戳后，下面我们来完成案例的代码编写，具体代码如下。

var timestamp1 = +new Date();

for(var i = 1, str = ''; i <= 90000; i++){
str += i;
}

var timestamp2 = +new Date();
// 示例结果:代码执行时间: 37毫秒
console.log('代码执行时间:' + (timestamp2 - timestamp1) + '毫秒');

从上述代码和输出结果示例可以看出，JavaScript 对字符串变量 str 进行了90000次拼接操作，共花费了37毫秒的执行时间。该时间会根据不同计算机的运算速度而不同。

5.4.3_[案例] 倒计时

在一些电商网站的活动页上会经常出现折扣商品的倒计时标记，显示离活动结束还剩X天X小时X分X秒，像这样的倒计时教果就可以利用日期对象来实现。

倒计时的核心算法是输人的时间减去现在的时间，得出的剩余时间就是要显示的倒计时间。这需要把时间都转化成时间戳(毫秒数)来进行计算，把得到的毫秒数转换为天数、小时、分数、秒数。

具体示例代码如下：

function countDown(time){
var nowTime = +new Date();
//+new Date() 是new Date().getTime() 代码的简写，返回当前时间戳，单位是毫秒。
var inputTime = +new Date(time);
//设置活动的结束时间戳。
var times  = (inputTime - nowTime) / 1000;
//计算剩余毫秒数，需要转换为秒数，转换规则为1秒/1000毫秒。
var d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
var h = parseInt (times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
// 第5 ~ 13 行代码计算天数d、小时h、分时m、秒数s, 并使用returm返回。
}
// 示例结果: 05天23时06分10秒
console.log(countDown('2019-10-22 10:56:57'));
// 输出距离指定结束日期2019-10-22 10:56.57还剩多少时间。

5.5_数组对象

JavaScript 中的数组对象可以使用 new Array 或字面量“[ ]” 来创建。

5.5.1_数组类型检测

在开发中，有时候需要检测变量的类型是否为数组。例如， 在两数中。要求华人的参数必须是一一个数组，不能传入其他类型的值，否则会出错，所以这时候可以在函数中检测参数的类型是否为数组。 数组类型检测有两种常用的方式，分别是使用 instanceof 运算符和使用Array.isArray() 方法。

示例代码如下：

var arr = [];
var obj = { };
// 第1种方式
console.log ( arr instanceof Array );
// 输出结果:true
console.log ( obj instanceof Array );
// 输出结果:false
//第2种方式
console.log ( Array.isArray(arr) );
// 输出结果:true
console.log ( Array.isArray(obj) );
// 输出结果:false

上述代码中，如果检测结果为true，表示给定的变量是一个数组， 如果检测结果为false，则表示给定的变量不是数组。

5.5.2_添加或删除数组元素

JavaScript 数组对象提供了添加或删除元素的方法，可以实现在在数组的末尾或开头添加新的数组元素，或在数组的末尾或开头移出数组元素。

添加或删除数组元素：

方法名	功能描述	返回值
push( 参数1… )	数组末尾添加一个或多个元素， 会修改原数组	返回数组的新长度
unshift( 参数1… )	数组开头添加一个或多个元素， 会修改原数组	返回数组的新长度
pop()	删除数组的最后一个元素，若是空数组则返回 undefined，会修改原数组	返回删除的元素的值
shift()	删除数组的第一个元素，若是空数组则返回undefined，会修改原数组	返回第一个元素的值

需要注意的是，push() 和 unshift() 方法的返回值是新数组的长度，而 pop()和 shift()方法返回的是移出的数组元素。

案例： 演示

<script>
var arr = ['Rose', 'Lily'];
console.log('原数组:'+ arr);
var last = arr.pop();
console.log('在末尾移出元素:'+ last + '- 移出后数组:' + arr);
var len = arr.push('Tulip', 'Jasmine');
console.log('在末尾添加元素后长度变为:'+ len + '- 添加后数组:'+ arr);
var first = arr.shift();
console.log('在开头移出元素:'+ first + ' - 移出后数组:' + arr);
len = arr.unshift('Balsam', 'sunflower');
console.log('在开头添加元素后长度变为:' + len + '- 添加后数组:' + arr);
</script>

从上述代码可以看出，push() 和 unshift() 方法可以为指定数组在末尾或开头添加一个或多个元素，而 pop() 和 shift() 方法则只能移出并返回指定数组在未尾或开头的一个元素。

5.5.3_[案例] 筛选数组

案例：要求在包含工资的数组中，剔除工资达到2000或以上的数据，把小于2000的数重新放到创新的数组里面。 其中数组为[1500，1200，2000， 2100， 1800]。

var arr = (1500, 1200, 2000, 2100, 1800];
var newArr = [];

for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[1);
// 相当于: newArr (newArr.length] = arr[i];
}
}

console.log(newArr);
// 输出结果: (3) [1500, 1200, 1800]

上述代码中，第 1 行代码为原数组 arr。第 2 行代码定义了新数组 newArr，存放工资低于 2000 的数据。第 3 行代码在 for 循环语句中通过 if 语句进行判断，如果符合要求则使用 push() 方法，存储到新数组 newArr 中。

5.5.4_数组排序

数组排序可以实现数组元素排序或者颠倒数组元素的顺序等。

排序方法：

方法名	功能描述
reverse()	颠倒数组中元素的位置，该方法会改变原数组，返回新数组
sort()	对数组的元素进行排序，该方法会改变原数组，返回新数组

需要注意的是，reverse() 和 sort() 方法的返回值是新数组的长度。

//反转数组
var arr = ['red', 'green', 'blue'];
arr.reverse();
console.log(arr);//输出结果:(3) ["blue", "green","red"]
//上述演示了 reverse() 方法的使用，实现数组元素的反转。
//数组排序
var arr1 = [13, 4, 77, 1, 7];
arrl.sort(function(a, b) 
return b - a;//按降序的顺序排列
});
console.log(arr1);//输出结果: (5) [77,13,7,4,1]
//上述演示了 sort() 方法的使用，实现数组元素从大到小进行排序。

return a - b;// 按升序的顺序排列

5.5.5_数组索引

在开发中，若要查找指定的元素在数组中的位置，则可以利用 Array 对象提供的检索方法。

检索方法：

方法名	功能描述
indexOf()	返回在数组中可以找到到给定值的第一个索引，如果不存在，则返回-1
lastIndexOf()	返回指定元素在数组中的最后一个的索引，如果不存在则返回-1

上述方法中，默认都是从指定数组索引的位置开始检索，并且检索方式与运算符 " === " 相同，即只有全等时才会返回比较成功的结果。

案例：演示，

var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log( arr.indexOf('blue') );    //输出结果:2
console.log( arr.lastIndexOf('blue') );//输出结果:4

上述代码中，lastIndexOf() 方法用于在数组中从指定下标位置检索到最后一个给定值的下标。与 indexOf() 检索方式不同的是，lastIndexOf() 方法默认逆向检索，即从数组的末尾向数组的开头检索。

5.5.6_[案例] 数组去除重复元素

接下来我们通过一个案例来演示数组索引的使用。 要求在一组数据中，去除重复的元素。其中数组为 [‘blue’, ‘green’, ‘blue’] 。示例代码如下。

function unique(arr) {
var newArr = [];
// 用来存放数组中不重复的元素

// 遍历一遍数组，如果数组内某一元素重复出现则放入新数组中
for(var i = 0; i < arr.length; i++) {
if(newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}

return newArr;
}

var demo = unique(['blue', 'green', 'blue']);
console.log(demo);
// 输出结果: (4) ["blue","green"]

出现过，那么就添加到新数组中，否则不添加。其中第4行代码如果该元素判断如果返回值为-1就说明新数组里面没有该元素。

3利用新数组的在新数组中没有

5.5.7_数组转换为字符串

若需要将数组转换为字符串，可以利用数组对象的 join() 和 toString() 方法实现。

数组转换为字符串：

方法名称	功能描述
toString()	把数组转换为字符串，逗号分隔每一项
join (’ 分隔符 ')	将数组的所有元素连接到一个字符串中

案例：演示，

// 使用toString()
var arr = ['a', 'b', 'c'];
console.log ( arr.toString() );
// 输出结果:a,b,c

// 使用join()
console.log ( arr.join() );
// 输出结果:a,b,c
console.log ( arr.join('') );
// 输出结果:abc
console.log ( arr.join('-') );
// 输出结果:a-b-c

从上述代码可知，join() 和 toString() 方法可将多维数组转为字符串，默认情况下使用逗号连接。不同的是，join() 方法可以指定连接数组元素的符号。另外，当数组元素为 undefined、null 或空数组时，对应的元素会被转换为空字符串。

5.5.8_其他方法

JavaScript 还提供了很多其他也比较常用的数组方法。例如，填充数组、连接数组、截取数组元素等。

其他方法：

方法名	功能描述
fill()	用一个固定值填充数组中指定下标范围内的全部元素
splice()	数组删除，参数为 splice(第几个开始，要删除个数)，返回被删除项目的新数组
slice()	数组截取，参数为 slice(begin, end)，返回被截取项目的新数组
concat()	连接两个或多个数组，不影响原数组，返回一个新数组

slice() 和 concat() 方法在执行后返回一个新的数组，不会对原数组产生影响，剩余的方法在执行后皆会对原数组产生影响。

案例：splice() 方法在指定位置添加或删除数组元素，

var arr = ['sky', 'wind', 'snow', 'sun'];
// 从索引为2的位置开始，删除2个元索
arr.splice(2, 2);
console.log (arr); 
// 输出结果: (2) ["sky", "wind"]

// 从索引为1的位置开始，删除1个元素后，再添加 snow 元素
arr.splice(1, 1, 'snow');
// 输出结果: (2) ["sky", "snow"]
console.log(arr);

// 从索引为1的位置开始，添加数组元素
arr.splice(1.0, 'hail', 'sun');
console.log(arr);
// 输出结果: (4) ["sky", "hail", "sun", "snow"]

在上述代码中，splice() 方法的第 1 个参数用于指定添加或删除的下标位置；第 2 个参数用于从指定下标位置开始，删除数组元素的个数，将其设置为0，则表示该方法只添加元素；剩余的参数表示要添加的数组元素，若省略则表示删除元素。

5.6_字符串对象

在 JavaScript 中，字符串对象提供了些用于对字符串进行处理的属性和方法，可以很方便地实现字符串的查找、截取、替换、大小写转换等操作。

5.6.1_字符串对象的使用

字符串对象使用 new String() 来创建，在String 构造函数中传入字符串， 就会在返回的字符串对象中保存这个字符串。

案例：演示，

//创建字符串对象
var str = new string('apple');
// 创建字符串对象
console.log (str);
// 输出结果: string{"apple"}

// 获取字符串长度，输出结果:5
console.log(str.length);

细心的读者会发现，在前面的学习中，可以使用 “ 字符串变量.length " 的方式进行获取，这种方式很像是在访问一个对象的 length 属性。

案例：演示，

var str = 'apple';
console.log (str.length);
// 输出结果: 5

实际上，字符串在 JavaScript 中是一种基本包装类型。JavaScript 中的基本包装类型包括String、Number 和 Boolean ，用来把基本数据类型包装成为复杂数据类型，从而使基本数据类型也有了属性和方法。

需要注意的是，虽然 Javascript 基本包装类型的机制可以使普通变量也能像对象一样访问属性和方法，但它们并不属于对象类型。

案例：演示，

var obj = new String('Hello');
console.log (typeof obj); 
// 输出结果: object

console.log (obj instanceof String); 
//输出结果: true

var str = 'Hello';
console.log (typeof str); 
// 输出结果: string

console.log (str instanceof String); 
// 输出结果: false

从上述代码可以看出，使用 new String() 返回的 obj 是一个对象，但是普通的字符串变量并不是一个对象，它只是一个字符串类型的数据。

5.6.2_根据字符返回位置

字符串对象提供了用于检索元素的属性和方法

字符串对象用于检索元素的属性和方法：

成员	作用
indexOf( search Value )	获取 search Value 在字符串中首次出现的位置
lastIndexOf( search Value )	获取 search Value 在字符串中最后出现的位置

案例：演示 indexOf() 和 lastIndexOf() 方法的使用，

var str = 'HelloWorld' ;

console.log( str.indexOf('o') );
// 获取"o"在字符串中首次出现的位置，返回结果:4
console.log( str.lastIndexOf('o')  );
// 获取"o"在字符串中最后出现的位置，返回结果:6

通过返回结果可以看出，位置从 0 开始计算，字符串第一个字符的位置是 0 ， 第2个字符为1，以此类推，最后一个字符的位置是字符串的长度减1。

案例：在一组字符串中，找到所有指定元素出现的位置以及次数。字符串为 ’ Hello World, Hello JavaScript ’ 。

var str = 'Hello World,Hello Javascript';
var index = str.indexOf('o'); // 先找到第一个 o 出现的位置。
var num = 0; // 设置 o 出现的次数初始值为0。
while(index != -1){  // 通过 while 语句判断 indexOf 返回值的结果
//如果不是-1就继续往后进行查找，这是因为 indexOf 只能查找到第1个，
//所以后面的查找需要利用第2个参数来实现，给当前的索引 index 加1，
//从而实现继续查找。
console.log (index);// 依次输出:4、7、17
index = str.indexOf('o', index + 1);
num++;
}
console.log ('o出现的次数是:' + num);// o 出现的次数是:3

需要注意的是，字符串中的空格也会被当作一个字符来处理。

5.6.3_根据位置返回字符

在JavaScript中，字符串对象提供了用于获取字符串中的某一个字符的方法。

字符串对象用于获取某一个字符的方法

成员	作用
charAt(index)	获取 index 位置的字符，位置从 0 开始计算
charCodeAt(index)	获取 index 位置的字符的 ASCII 码
str [ index ]	获取指定位置处的字符( HTML5新增 )

案例：了解 charAt()、charCodeAt()、str[ 下标 ]的使用，

var str = 'Apple';
console.log (str.charAt(3));// 输出结果:1
console.log (str.charCodeAt(0));// 输出结果: 65(字符A的 ASCII 码为65)
console.log(str[0]);// 输出结果:A

5.6.4_[案例]统计出现最最多的字符和次数

案例：演示 charAt() 方法的使用。通过程序来统计字符串中出现最多的字符和次数

var str = 'Apple';
//第1步 统计每个字符的出现次数
var o = { };

for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); 
// 利用 chars 保存字符串中的每一个字符
if( o[chars] ) {   
// 利用对象的属性来方便查找元素
o[chars]++;
}else{
o[chars] = 1;
}
}

console.log(o); // 输出结果:{A: 1, p: 2, 1:1,e:1}

var max = 0;    // 保存出现次数最大值
var ch = '';    // 保存出现次数最多的字符

for(var k in o){
if (o[k] > max){
max = o[k];
ch = k;
}
}

// 输出结果:"出现最多的字符是:p,共出现了2次"
console.log('出现最多的字符是:' + ch + ',共出现了' + max + '次');

5.6.5_字符串操作方法

字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法

字符串对象用于截取、连接和替换字符串的方法：

成员	作用
concat(strl, str2, str3…)	连接多个字符串
slice(start,[ end ])	截取从 start 位置到 end 位置之间的一个子字符串
substring(start [,end] )	截取从 start 位置到 end 位置之间的一个子字符串，基本和 slice 相同，但是不接收负值
substr(start [, length] )	截取从 start 位置开始到 length 长度的子字符串
toLowerCase()	获取字符串的小写形式
toUpperfCase()	获取字符串的大写形式
split( [ sparator [, limit] )	使用 separator 分隔符将字符串分隔成数组，limit 用于限制数量
replace(str1, str2)	使用 str2 替换字符串中的 str1 ，返回替换结果，只会替换第一个字符

在使用上表中的方法对字符串进行操作时，处理结果是通过方法的返回值直接返回的，并不会改变字符串本身。

案例：演示，

var str = 'HelloWorld';
str.concat('!');     // 在字符串末尾拼接字符，结果:HelloWorld!
str.slice(1, 3);     // 截取从位置1 开始到位置3 范围内的内容，结果：el
str.substring (5);  // 截取从位置5 开始到最后的内容，结果: World
str.substring(5, 7);  // 截取从位置5 开始到位置7 范围内的内容，结果：Wo
str.substr(5);      // 截取从位置5 开始到字符串结尾的内容，结果: World
str.substring(5, 7);// 截取从位置5 开始到位置7 范围内的内容，结果：Wo
str.toLowerCase();  // 将字符串转换为小写，结果：helloworld
str.toUpperCase();  // 将字符串转换为大写，结果：HELLOWORLD
str.split('1');    // 使用"1"切割字符串，结果：["He","","oWor","d"]
str.split('1', 3);  // 限制最多切割3次，结果：["He","","oWor"]
str.replace('World','!');// 替换字符串，结果："Hello!"

5.6.6_[案例]判断用户名是否合法

案例：要求用户名长度在 3 ~ 10 范围内，不允许出现敏感词 admin 的任何大小写形式。

var name = prompt('请输人用户名');
if (name.length < 3 || name.length > 10){
alert('用户名长度必须在3 ~ 10之间。');
} else if (name.toLowerCase().indexOf('admin') !== -1){
alert('用户名中不能包含敏感词: admin。');
}else{
alert('恭喜您，该用户名可以使用');
}

上述代码通过判断 length 属性来验证用户名长度 ; 通过将用户名转换为小写后查找里面是否包含敏感词 admin 。实现时 name 先转换为小写后再进行查找，可以使用户名无论使用哪种大小写组合，都能检查出来。indexOf() 方法在查找失败时会返回 -1，因此判断该方法的返回值即可知道用户名中是否包含敏感词。

5.7_值类型和引用类型

在 JavaScript 中，基本数据类型 ( 如字符串型、数字型、布尔型、undefined、null )又称为值类型，复杂数据类型(对象)又称为引用类型。引用类型的特点是，变量中保存的仅是一个引用的地址，当对变量进行赋值时，并不是将对象复制了一份，而是将两个变量指向同一个对象的引用。

案例： 例如，下列代码中的 obj1 和 obj2 指向了同一个对象。

//创建一个对象，并通过变量 obj1 保存对象的引用
var obj1 = {name:'小明', age:18};
// 此时并没有复制对象，而是 obj2 和 obj1 两个变量引用了同一个对象

var obj2 = objl;
// 比较两个变量是否引用同一个对象
console.log (obj2 == obj1); // 输出结果:true
// 通过 obj2 修改对象的属性
obj2.name = '小红';
// 通过 obj1 访向对象的 name 属性
console.log (obj1.name) // 输出结果:小红

上述代码执行后，obj1 和 obj2 两个变量引用了同一个对象，此时，无论是使用 obj1 操作对象还是使用 obj2 操作对象，实际操作的都是同一个对象。

当 obj1 和 obj2 两个变量指向了同一个对象后，如果给其中一个变量( 如 obj1 ) 重新赋值为其他对象，或者重新赋值为其他值，则 obj1 将不再引用原来的对象，但 obj2 仍然在引用原来的对象。

案例：演示上述概述：

var objl = name:'小明', age: 18 };
var obj2 = objl;
// obj1 指向了一个新创建的对象
obj1 = { name: '小红', age: 17 };
// obj2 仍然指向原来的对象
console.log (obj2.name); //输出结果:小明

在上述代码中，第1行代码创建的 name 为小明的对象，最开始只有 obj1 引用，在执行第2行代码后，obj1 和 obj2 都引用该对象，执行第4行代码后，只有 obj2 引用该对象。当一个对象只被一个变量引用的时候，如果这个变量又被重新赋值，则该对象就会变成没有任何变量引用的情况，这时候就会由 JavaScript 的垃圾回收机制自动释放。

当引用类型的变量作为函数的参数来传递时，其效果和变量之间的赋值类似。如果在函数的参数中修改对象的属性或方法，则在函数外面通过引用这个对象的变量访问到的结果也是修改后的。

案例：演示上述概述，

function change(obj){
obj.name = '小红'; // 在函数内修改了对象的属性
}
var stu = { name:'小明', age: 18 };
change(stu);
console.log (stu.name); // 输出结果:小红

在上述代码中，当调用 change() 函数后，在 chang() 函数中修改了 obj.name 的值。修改后，在函数外面超过 stu 变量访问到的结果是修改后的值，说明变量 stu 和参数 obj 引用的是同一个对象。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾：

JavaScript学习：
挑战最短时间内带你入门 JavaScript（一）
挑战最短时间内带你入门 JavaScript（二）
挑战最短时间内带你入门 JavaScript（三）
挑战最短时间内带你入门 JavaScript（四）
HTML学习：
阿ken的HTML、CSS的学习笔记_HTML基础（笔记一）
阿ken的HTML、CSS的学习笔记_HTML 页面元素和属性（笔记二）
阿ken的HTML、CSS的学习笔记_文本样式属性（笔记三）
阿ken的HTML、CSS的学习笔记_CSS3选择器（笔记四）
阿ken的HTML、CSS的学习笔记_CSS盒子模型（笔记五）
阿ken的HTML、CSS的学习笔记_浮动与定位（笔记六）
阿ken的HTML、CSS的学习笔记_表单的应用（笔记七）
阿ken的HTML、CSS的学习笔记_多媒体技术（笔记八）
阿ken的HTML、CSS的学习笔记_CSS3高级应用（笔记九）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易，「点赞」+「关注」+「收藏」 谢谢支持❤