一、对象
1.概念
什么是对象？
在JavaScript中，对象是一组无序的相关属性和方法集合，所有的事物都是对象，例如：字符串、数值、数组和函数等等。
对象是由属性和方法组成的。
- 属性：事物的特征，在对象中属性来表示（常用名词）
- 方法：事物的行为，在对象中用方法来表示（常用动词）
手机：
属性——大小、颜色、尺寸和厚度等等
方法——打电话、发短信、玩游戏
2.为什么需要对象
保存一个值的时候，可以使用变量、保存多个值可以使用数组。
如果要保存一个人的完整信息呢？
如：将“张三丰”的个人信息保存起来 var arr = [‘张三丰’,‘男’，100，100，…]
上述例子中用数组保存数据的缺点：数据只能通过索引来访问，开发者就需要非常清晰的记得所有数据的排行才能准确的获取数据，而当数据量庞大的时候，不可能做到记忆所有的数据的索引值。
为了让更好地存储一组数据，对象就应运而生：对象中的每项数据设置了属性名词，可以访问数据更加语义化，数据结构清晰，表意明显，方便开发者使用
var person = {
"name":"张三丰",
"sex":"男",
"age":100,
"height":100
}
JS中对象表达结构更加清晰，更强大。
3.创建对象的三种方式
3.1 利用newObject创建
语法
//语法1:创建一个空对象
var 对象名 = new Object();//创建了一个空的对象
// 语法2：给对象中添加属性和值
对象名.属性名 = 值;
// 语法3：给对象添加方法
对象名.方法名 = function(){
//...
}
// 语法4：如何获取对象中的属性
对象名.属性名
//语法5：如何调用对象中的方法
对象名.方法名();
案例
//利用new Object创建对象
var zsf = new Object(); //创建了一个空的对象
//给对象添加属性
zsf.name = '张三丰'; //给对象中添加属性和值
zsf.age = 100;
zsf.sex = '男';
//给对象添加方法
zsf.sayHi = function(){
console.log('张三丰说：你好!');
}
console.log(zsf.name);
console.log(zsf.sex);
//调用对象中的方法
zsf.sayHi();
3.2 利用字面量的方式创建
语法
//语法：
var 对象名 = {
属性1: '值1',
属性2: '值2,
...
方法名1:function(){
//..
},
方法名2:function(){ //..
}
}
案例
//通过字面量的方式创建对象
var ldh = {
name:'刘德华',
age:61,
sing:function(){
console.log('刘德华唱了：忘情水');
},
eat:function(){
console.log('我会吃饭');
}
}
//获取属性值
console.log(ldh.name);
//调用对象中的方法
ldh.sing();
ldh.eat();
3.3 利用构造函数创建
我们为什么需要构造函数：
因为我们前面两种创建对象的方式一次只能创建一个对象。因为我们一次创建了一个对象，里卖弄很多的属性和方法是大量相同的，我们只能复制。
我们可以利用函数方法，重复这些相同的代码，我们把这个函数称之为构造函数，因为这个函数不一样的，里卖弄封装的不是普通的代码，而是对象，
**构造函数：**就是把我们对象里面一些相同的属性和方法抽取（抽象）出来封装到函数里面
//构造函数
function Star(uname,uage){
this.name = uname;
this.age = uage;
this.sing = function(sang){
console.log('我在唱歌:' + sang);
};
this.eat = function(){
console.log('我爱吃饭');
}
}
//通过构造函数，构造出一个刘德华
var ldh = new Star('刘德华','55');
console.log(ldh.name);
console.log(ldh.age);
ldh.sing('冰雨');
ldh.eat();
var zxy = new Star('张学友',60);
console.log(zxy.name);
console.log(zxy.age);
zxy.sing('吻别');
4.new关键字执行过程
function Star(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.sing = function(sang){
console.log(sang);
}
}
/*
new执行过程：
1.new构造函数可以在内存中创建一个空对象
2.this 就会执行刚辞创建的空对象
3.执行构造函数里面的代码，给这个空对象添加属性和方法
4.返回这个对象
*/
//创建对象
var ldh = new Star('刘德华',20,'男');
5.遍历对象
var obj = {
name:'蔡徐坤', //key:value
age:19,
sex:'男',
fn:function(){
console.log('fn执行了');
}
}
//遍历对象
for(var k in obj){
//得到属性的值 对象[key]
console.log(k + ' ' + obj[k]);
}
二、JS内置对象
1 什么是JS内置对象
JavaScript中的对象分为3种：
- 自定义对象
- 内置对象
- 浏览器对象
前面的两种对象是JS基础内容，属于ECMAScript，第三个浏览器对象属于JS独有的。JS API讲解内置对象就是指JS语言自带的一些对象，这些对象提供给开发者使用，并提供了一些常用的或者是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发。
JavaScript种提供了多个内置对象：Math、Date、Array、String等等。
2 查文档
查找文档：学习一个内置对象的使用，只要学会了其常用成员和使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla开发网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括了HTML、css和万维网及HTML5应用的API
MDN:
https://developer.mozilla.org/zh-CN/
3 Math
Math 不是一个函数对象。Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。
| 属性、方法 | 功能 |
|---|---|
Math.PI | 圆周率，一个圆的周长和直径之比，约等于 3.14159。 |
Math.floor(x) | 返回小于一个数的最大整数，即一个数向下取整后的值。 |
Math.ceil(x) | 返回大于一个数的最小整数，即一个数向上取整后的值。 |
Math.abs(x) | 返回一个数的绝对值。 |
Math.max([x[, y[, …\]]]) | 返回零到多个数值中最大值。 |
Math.min([x[, y[, …\]]]) | 返回零到多个数值中最小值。 |
Math.random() | 返回一个 0 到 1 之间的伪随机数。 |
Math.round(x) | 返回四舍五入后的整数。 |
案例一
//Math数学对象，不是一个构造函数，所以我们不需要用new来调用,而是直接使用里面的属性和方法即可
console.log(Math.PI); //PI一个属性，圆周率
console.log(Math.max(1,99,3,100,20,6)); //100
console.log(Math.min(1,10,20,-1,9,7)); //-1
console.log(Math.max(1,99,10,'abc')); //NaN
console.log(Math.max()); //-Infinity
案例二
利用对象封装自己的数学对象，里面由PI和最大值和最小值
//利用对象封装自己的数学对象，里面由PI和最大值和最小值
var myMath = {
PI:3.141592653589793,
max:function(){ //求传入数据中的最大值
if(arguments.length == 0){
return -Infinity;
}
var max = arguments[0];
for(var i = 1; i < arguments.length; i++){
if(arguments[i] > max){
max = arguments[i];
}
}
return max; //记得返回
},
min:function(){ //求传入数据中的最小值
var min = arguments[0];
for(var i = 1; i < arguments.length; i++){
if(min > arguments[i]){
min = arguments[i]
}
}
return min; //记得返回
}
}
console.log(myMath.PI); //PI一个属性，圆周率
console.log(myMath.max(1,99,3,100,20,6)); //100
console.log(myMath.min(1,10,20,-1,9,7)); //-1
console.log(myMath.max(1,99,10,'abc')); //NaN
console.log(myMath.max()); //-Infinity
案例三
Math绝对和三个取整方法
//1.绝对值方法
console.log(Math.abs(1)); //1
console.log(Math.abs(-1)); //1
console.log(Math.abs('-1')); // 隐式转换，会把字符串-1转换成数字型
console.log(Math.abs('abc')); //NaN
//2.三个取整方法
//2.1 Math.floor(); floor:地板，向下取整，往最小的取
console.log(Math.floor(1.1)); //1
console.log(Math.floor(1.9)); //1
//2.2 Math.ceil(); ceil:天花板,向上取整，往最大的取
console.log(Math.ceil(1.1)); //2
console.log(Math.ceil(1.9)); //2
//3. Math.round() round:四舍五入
console.log(Math.round(1.1)); //1
console.log(Math.round(1.5)); //2
console.log(Math.round(1.9)); //2
console.log(Math.round(-1.1)); //-1
console.log(Math.round(-1.5)); //-1
案例四
Math对象随机数方法
//Math对象随机数方法 random:随机,返回的数范围： 0 <= x < 1
//这个方法里面不跟参数
console.log(Math.random());
//我们想要得到两个数之间的随机整数
// Math.floor(Math.random() * (max - min + 1) + min);
//每次随机数字是1 ~ 3 max = 3 min = 1
// var max = 3,min = 1;
// var r = Math.floor(Math.random()*(max - min + 1) + min);
// console.log(r);
//封装成一个函数，以后你传给我最大值和最小值，我就给你返回一个随机数
function getRandom(min,max){
return Math.floor(Math.random()*(max - min + 1) + min);
}
var r = getRandom(1,3);
console.log(r);
//随机点名
var arr = ['张三','李四','王五','柯震东','房祖名'];
var index = getRandom(0,arr.length - 1) //随机索引（0，数组长度-1）
console.log(arr[index]);
案例五
需求：随机生成1~100之间的一个数字，用户通过prompt输入一个数字，和随机生成的数字比较，如果猜大了就提示猜大了，然后用户重新输入，如果猜小了就提示用户猜小了然后用户重新输入，直到用户猜对了程序才结束
//封装成一个函数，以后你传给我最大值和最小值，我就给你返回一个随机数
function getRandom(min,max){
return Math.floor(Math.random()*(max - min + 1) + min);
}
//1.生成1~100的随机数
var r = getRandom(1,100);
//2.猜数字
while(true){
var num = parseInt(prompt('请输入数字：'));
if(num > r){
alert('猜大了');
} else if(num < r){
alert('猜小了');
} else {
alert('恭喜！猜对了');
break;//结束循环
}
}
4 日期对象
该实例呈现时间中的某个时刻。Date是一个构造函数，所以使用的时候需要实例化（new）之后才能使用其中具体的方法和属性
4.1 实例化Date
-
获取当前时间必须实例化：
-
获取当前时间
-
var now = new Date();
-
-
获取指定的时间
-
var mynow = new Date('2024/9/1');
-
-
//1.实例化
var date = new Date();
console.log(date); //Mon Oct 14 2024 11:26:00 GMT+0800 (GMT+08:00)
//2.带参数
var date2 = new Date(2024,9,1);
console.log(date2); //Tue Oct 01 2024 00:00:00 GMT+0800 (GMT+08:00)
//3.带参
var date3 = new Date('2022-10-10 08:08:08');
console.log(date3); //Mon Oct 10 2022 08:08:08 GMT+0800 (GMT+08:00)
**注意：**如果创建实例时没有传入参数，则得到的日期对象是当前时间对应的日期对象
4.2 Date常用的属性和方法
| 方法名 | 说明 |
|---|---|
getFullYear() | 获取年 |
getMonth() | 获取月（0 ~ 11） |
getDate() | 获取日 |
getDay() | 获取星期几（周日0， 其它周一1，周2…） |
getHours() | 获取小时 |
getMinutes() | 获取分钟 |
getSeconds() | 获取秒 |
//1.创建日期对象
var date = new Date();
var year = date.getFullYear(); //年
var month = date.getMonth() + 1; //月（从0 ~ 11）
var dates = date.getDate(); //日
var week = date.getDay(); //获取的是星期 (星期天是0)
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var hours = date.getHours(); //时
var minutes = date.getMinutes(); //分钟
var seconds = date.getSeconds();//秒
console.log(year + '-' + month + '-' + dates + ' ' + arr[week] + ' ' + hours + ':' + minutes + ':' + seconds);
4.3 毫秒数
通过Date获取总毫秒数
-
总毫秒数的含义
- 基于1970年1月1日起到你获取的这一刻所经历的毫秒
-
获取总毫秒数
-
//实例化对象 var now = new Date(); //1.用于获取对象的原始值（两个都是） console.log(now.valueOf()); console.log(now.getTime()); //2.简单写 //HTML5种提供的写法 var now2 = Date.now(); console.log(now2); var now3 = + new Date(); console.log(now3);
-
5 数组对象
5.1 数组创建方式
-
字面量
-
var arr = [1,'test',true];
-
-
new Array();
-
var arr = new Array(); -
创建的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组的时候传入参数，参数传递的规则如下：
- 如果只传入一个参数，则参数规定了数组的长度
- 如果传入了多个参数，则参数是数组种的元素
-
//通过构造函数创建数组
//var arr2 = new Array(5); //只传入一个参数，表示设置数组的长度
var arr2 = new Array(5,1); //传入的是多个参数，表示设置数组中的元素
5.2 检测是否为数组
5.2.1 instanceof
instanceof 运算符:可以判断一个对象是否是某个构造函数的实例
//instanceof 运算符:可以判断一个对象是否是某个构造函数的实例
var date = new Date();
var arr = new Array();
console.log(date instanceof(Array)); //false
console.log(date instanceof(Date)); //true
console.log(arr instanceof(Array)); //true
5.2.2 Array.isArray()
Array.isArray() 用于判断是否一个对象是数组
//instanceof 运算符:可以判断一个对象是否是某个构造函数的实例
var date = new Date();
var arr = new Array();
console.log(date instanceof(Array)); //false
console.log(date instanceof(Date)); //true
console.log(arr instanceof Array); //true
console.log(Array.isArray(arr)); //true
5.3 添加删除数组元素
数组中由进行增加、删除元素的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
push(参数1...) | 末尾添加一个或多个元素（注意：会修改原来的数组） | 返回新的长度 |
pop() | 删除数组最后一个元素，把数组的长度减少1，没有参数 （注意：会修改原来的数组） | 返回它删除的元素的值 |
shift() | 删除数组的第一个元素，数组的长度减少1，没有参数 （注意：会修改原来的数组） | 并返回第一个元素的值 |
unshift(参数1...) | 向数组的开头添加一个或多个元素（注意：会修改原来的数组） | 并返回新的长度 |
**总结：**push、unshift是添加元素的方法。pop和shift是删除元素的方法
/*
添加或删除数组中的元素
1.添加元素
push(元素1,元素2,...):往数组的末尾添加元素
unshift(元素1,元素2,...):往数组的开头添加元素
2.删除元素
pop():该方法没有参数，删除数组中的最后一个元素；返回的是删除的最后一个元素
shift():该方法没有参数，删除数组中的第一个元素；返回的是删除的第一个元素
*/
var arr = [1,2,3];
//1.添加元素
// arr.push(4); //往数组的末尾添加元素
var a1 = arr.push(4,5); //用push方法后，将返回新的数组的长度
console.log(a1);
//arr.unshift(0);
var a2 = arr.unshift(-1,0);
console.log(a2);
//2.删除元素
arr.pop();
// var a3 = arr.pop();
// console.log("被删除的数是：" + a3);
var a4 = arr.shift();
console.log('被删除的是：' + a4);
console.log(arr);
console.log(arr.length);
5.4 数组排序
数组中由对数组本身排序的方法
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组中元素的顺序，无参数 | 该方法会改变原来的数组，返回新的数组 |
| sort() | 对数组中的元素进行排序 | 该方法会改变原来的数组，返回新的数组 |
var arr1 = new Array(5,7,3,8,2);
//1.要求升序排序
arr1.sort();
//循环遍历输出
for(var i = 0; i < arr1.length; i++){
console.log(arr1[i]);
}
var arr2 = new Array('jack','admin','aben','back','rose','hello');
arr2.sort();
for(var i = 0; i < arr2.length; i++){
console.log(arr2[i]);
}
console.log("*************************************");
//2.翻转
arr2.reverse();
for(var i = 0; i < arr2.length; i++){
console.log(arr2[i]);
}
冒泡排序
- 如果传入
function (a,b) {return a - b;};则为升序排序 - 如果传入
function (a,b) {return b - a;};则为降序排序
var arr1 = new Array(5,7,3,8,10,11,2);
arr1.sort(function(a,b){
// return a - b; //升序
return b - a; //降序
});
console.log(arr1);
5.5 数组索引方法
数组中由获取数组指定元素索引的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号，如果不存在返回-1 |
lastIndexOf() | 在数组中的最后一个的索引 | 如果存在返回索引号，如果不存在返回-1 |
var arr = ['red','green','blue','pink','skyblue','blue']
//indexOf()数组中查找给定元素的第一个索引.如果存在返回索引号，如果不存在返回-1
var index1 = arr.indexOf('blue');
console.log(index1); //2
//lastIndexOf()在数组中的最后一个的索引,如果存在返回索引号，如果不存在返回-1
var index2 = arr.lastIndexOf('blue');
console.log(index2); //5
var index3 = arr.indexOf('abc');
console.log(index3); // -1
数组中元素去重复
//目标：把数组中重复的元素去掉
//核心算法：遍历数组，然后拿着旧数组元素取查询新的数组，如果该元素在新数组里面没有出现就添加，有不加
// var arr = ['blue','skyblue','pink','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 arr = ['c','a','b','d','a','c'];
var newArr = unique(arr);
console.log(newArr);
5.6 其它方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
concat() | 链接两个或多个数组，不影响原来的数组 | 返回一个新的数组 |
slice() | 数组截取 slice(begin，end) | 返回被截取项目的新的数组 |
splice() | 数组删除splice(第几个开始,要删除的个数) | 返回被删除项目的新的数组 **注意：**这个会影响原来的数组 |
//1.concat('字符串1','字符串2',...)
var str1 = 'red';
var str2 = 'hello',str3 = 'world';
console.log(str1.concat(str2));
console.log(str1.concat(str2,str3));
//2.substr('截取开始的位置','截取的字符个数')
var str = 'helloworld';
//要求，获取hello
var mystr = str.substr(0,5);
console.log(mystr);
//要求，获取world
var mystr2 = str.substr(5,5);
console.log(mystr2);
//将一个字符串中的字符替换成别的
//replace它不会改变原来的字符串
var str = 'helloWorld,世界你好!this is my first replace'
//将第一个的o，都替换成z
//str = str.replace('o','z'); //第一个参数是要调换的，第二个参数是替换为
//将素有的o都替换成z
str = str.replaceAll('o','z');
str = str.replace('世界你好','hahaha');
console.log(str);
5.7 数组转字符串
var arr1 = [1,2,3];
//1.toString() 可以将数组转换成字符串
var str1 = arr1.toString();
console.log(str1); //1,2,3
//2.join(连接符号)
var str2 = arr1.join();
console.log(str2); //1,2,3
var str3 = arr1.join('-');
console.log(str3); //1-2-3
var str4 = arr1.join('&');
console.log(str4); //1&2&3
5.8 字符串对象
5.8.1 基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number 和Boolean
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了复杂数据类型的属性和方法
var str = 'admin';
console.log(str.length);
按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型。
//上面的代码默认会经历下面的过程
//1.生成临时变量，把简单类型包装成为复杂类型
var temp = new String("admin");
//2.赋值给我们声明的变量
var str = temp;
//3.销毁临时变量
temp = null;
5.8.2 字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但实际上是内存中的地址发生了变化，内存中重新开辟了一个新的内存空间
5.9根据位置返回字符
字符串通过基本包装类型可以调用部分方法来实现操作字符串，以下是根据位置返回字符
| 方法名 | 说明 | 使用 |
|---|---|---|
charAt(index) | 返回指定位置（索引）的字符（index表示字符的索引号） | str.charAt(0) |
charCodeAt(index) | 获取指定位置处字符ASCⅡ码（index索引号） | str.charCodeAt(0); |
str[index] | 获取指定位置处字符 | HTML5中charAt()等效 |
在上述方法中，charCodeAt(index)方法返回的是指定位置上字符对应的ASCⅡ码
查找字符串中某个字符出现的次数
//需求：查找'aaodfosafoad23scx'找o出现的位置及次数
var str = 'aaodfosafoad23scx';
var index = str.indexOf('o');
var num = 0; //o出现的次数
while(index != -1){ //能找到o
//console.log(index);
num++; //加1
index = str.indexOf('o',index + 1);
}
console.log(num);
判断一个字符串’aaodfosafoad23scx’中出现次数最多的字符，并统计其次数
//判断一个字符串'aaodfosafoad23scx'中出现次数最多的字符，并统计其次数
//核心算法：利用charAt()
var str = 'aaodfosafboabdb2b3sbcx';
var o = []; //用来存储每个字符出现的次数
for(var i = 0; i < str.length; i++){
var chars = str.charAt(i); //chars是字符串中的一个字符
if(o[chars]){ //o[chars]得到是属性值
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
//遍历o数组
var max = 0;
var ch = '';//次数最多的字符
for(var k in o){
// console.log(k + '----->' + o[k]);
if(o[k] > max){
max = o[k]; //获取最大值
ch = k;//次数最多的字符
}
}
console.log('最多的字符：' + ch + ',出现了：' + max);
三、简单和复杂数据类型
1.简单数据类型
简单数据类型（基本数据类型、值类型）：在存储时变量中存储的时值本身
包括：string、number、boolean、undefined、null
2.复杂数据类型
复杂数据类型（引用类型）：在存储时变量中存储的是地址（引用），通过new关键字创建对象（系统对象、自定义对象）
如：Object、Array、Date等等
3.堆栈
-
栈（操作系统）
- 由操作系统自动分配释放函数的参数值，局部变量等，其操作方式类似于数据结构中的栈。
- 简单数据类型存储在栈里面
-
堆（操作系统）
- 存储复杂数据类型，一般由程序员分配释放，若程序员不释放，由垃圾机制回收
