目录
一、JavaScript 内置对象
1. 内置对象
- JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
- 前面两种对象是JS基础内容，属于 ECMJavaScript ；第三个浏览器对象属于我们JS独有的，我们JS API 讲解
- 内置对象就是指JS语言 自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
- 内置对象最大的优点就是帮助我们快速开发
- JavaScript 提供了多个内置对象：Math、Date、Array、String等
2. 查文档
2.1 MDN
2.2 如何学习对象中的方法
3. Math 对象
3.1 案例：封装自己的数学对象
利用对象封装自己的数学对象，里面有PI、最大值和最小值。
var myMath = {
PI: 3.141592653,
max: function () {
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 (arguments[i] < min) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));
3.2 Math 概述
Math 对象不是构造函数，它具有数学常数和函数的属性和方法，跟数学相关的运算（求绝对值，取整、最大值等）可以使用Math中的成员。
// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型 1
console.log(Math.abs('pink')); // NaN
// 2.三个取整方法
// (1) Math.floor() 地板 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil() ceil 天花板 向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
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 ! ! !
3.3 随机数方法 random( )
// 1.Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1
// 2. 这个方法里面不跟参数
// 3. 代码验证
console.log(Math.random());
// 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
// 5. 随机点名
var arr = ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师'];
// console.log(arr[0]);
console.log(arr[getRandom(0, arr.length - 1)]);
案例：猜数字游戏
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);
do {
var num = prompt('请输入1~10之间的一个数字');
if (num > random) {
alert(' 你猜大了');
}
else if (num < random) {
alert(' 你猜小了');
}
else {
alert('恭喜你，猜对啦！');
}
} while (num != random);
案例拓展
// 要求用户猜 1~50 之间的一个数字 但是只有5次猜的机会function getRandom(min, max) {
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 50);
var i = 1;
for (i = 1; i <= 5; i++) {
var num = prompt('请输入1~50之间的一个数字');
if (num > random) {
alert(' 你猜大了');
}
else if (num < random) {
alert(' 你猜小了');
}
else {
alert('恭喜你，猜对啦！');
break;
}
}
if (i > 5) {
alert('5次猜数字的机会已用完，下次再继续加油哦！');
}
4. 日期对象
4.1 Date 概述
- Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
- Date 实例用来处理日期和时间
4.2 Date( ) 方法的使用
1. 获取当前时间必须实例化
var now = new Date( );
console.log(now);
2.Date( )构造函数的参数
如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为’2019-5-1’，可以写成 new Date(‘2019-5-1’)或者 new Date(‘2019/5/1’)
// Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
var arr = new Array(); // 创建一个数组对象
var obj = new Object(); // 创建了一个对象实例
// 1. 使用Date 如果没有参数 返回当前系统的当前时间
var date = new Date();
console.log(date);
// 2. 参数常用的写法 数字型 2019, 10, 01 或者是 字符串型 '2019-10-1 8:8:8'
var date1 = new Date(2019, 10, 1);
console.log(date1); // 返回的是 11月 不是 10月 (从0开始计算，想得到10月就要 -1 即 输入9)
date1 = new Date(2019, 9, 1);
console.log(date1);
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);
4.3 日期格式化
我们想要 2019-8-8 8:8:8 格式的日期，要怎么办？
需要获取日期指定的部分，所以我们要手动的得到这种格式。
// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2019
console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦
console.log(date.getDate()); // 返回的是 几号
console.log(date.getDay()); // 3 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
// 格式化日期 时分秒
var date = new Date();
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
// 要求封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h; // 当数字为个位数前面将补个0
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(getTimer());
4.4 获取日期的总的毫秒形式
Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数
为什么计算机起始时间从1970年开始？
我们经常利用总的毫秒数来计算时间，因为它更精确
// 获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
// 1. 通过 valueOf() getTime()
var date = new Date();
console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
// 2. 简单的写法 (最常用的写法)
var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
console.log(date1);
// 3. H5 新增的 获得总的毫秒数
console.log(Date.now());
4.5 案例：倒计时效果
function countDown(time) {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var days = parseInt(times / 60 / 60 / 24); // 天
days = days < 9 ? '0' + days : days;
var hours = parseInt(times / 60 / 60 % 24);// 时
hours = hours < 9 ? '0' + hours : hours;
var minutes = parseInt(times / 60 % 60); // 分
minutes = minutes < 9 ? '0' + minutes : minutes;
var seconds = parseInt(times % 60); // 秒
seconds = seconds < 9 ? '0' + seconds : seconds;
return days + '天' + hours + '时' + minutes + '分' + seconds + '秒';
}
console.log(countDown('2022-2-28 00:00:00'));
var date = new Date();
console.log(date);
5. 数组对象
5.1 数组对象的创建
创建数组对象的两种方式
- 字面量方式
- new Array()
// 创建数组的两种方式
// 1. 利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);
// 2. 利用new Array()
// var arr1 = new Array(); // 创建了一个空的数组
// var arr1 = new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素
var arr1 = new Array(2, 3); // 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);
5.2 检测是否为数组
之前学的定义翻转数组函数，当传入的实参不是数组，函数功能将无法实现。所以函数需完善一下，传入的实参必须是数组。
// 翻转数组
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3)); // 实参不是数组，reverse函数无法处理
检测是否为数组有两种方法：
- instanceof 运算符
变量名 instanceof Array
- Array.isArray(参数)
// 翻转数组
function reverse(arr) {
// if (arr instanceof Array) {
if (Array.isArray(arr)) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
return 'error 这个参数要求必须是数组格式,例如:[1,2,3]'
}
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3));
// 检测是否为数组
// (1) instanceof 运算符 它可以用来检测是否为数组
var arr = []; // 数组
var obj = {}; // 对象
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
// (2) Array.isArray(参数); H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
5.3 添加、删除数组元素的方法
添加数组元素的方式
1. push() 在我们数组的末尾添加一个或者多个数组元素
2. unshift() 在我们数组的开头添加一个或者多个数组元素
(1) push()和unshift() 参数直接写 数组元素就可以了
(2) push或unshift完毕之后，返回的结果是 新数组的长度
(3) 原数组也会发生变化
删除数组元素的方式
1. pop() 它可以删除数组的最后一个元素
2. shift() 它可以删除数组的第一个元素
(1) pop和shift 都只能删除一个元素
(2) pop() shift() 没有参数
(3) pop或shift 完毕之后，返回的结果是 删除的那个元素
(4) 原数组也会发生变化
// 1. push() 在我们数组的末尾 添加一个或者多个数组元素
var arr = [1, 2, 3];
console.log(arr.push(4, 'pink')); // 5
console.log(arr);
// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
console.log(arr.unshift('red', 'purple'));
console.log(arr);
// 3. pop() 它可以删除数组的最后一个元素
console.log(arr.pop());
console.log(arr);
// 4. shift() 它可以删除数组的第一个元素
console.log(arr.shift());
console.log(arr);
案例：筛选数组
有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面。
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(newArr);
5.4 数组排序
// 数组排序
// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
// 2. 数组排序（冒泡排序）
// sort方法 只能正确实现 个位数 升序的排序
var arr1 = [13, 4, 77, 1, 7];
var arr2 = [13, 4, 77, 1, 7];
arr1.sort(function (a, b) {
return a - b; // 升序的顺序排列
});
arr2.sort(function (a, b) {
return b - a; // 降序的顺序排列
});
console.log(arr1);
console.log(arr2);
5.5 数组索引方法
// 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找
// 它只返回第一个满足条件的索引号
// 它如果在该数组里面找不到元素，则返回的是 -1
var arr1 = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr1.indexOf('blue')); // 2
var arr2 = ['red', 'green', 'pink'];
console.log(arr2.indexOf('blue')); // -1
// 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
console.log(arr1.lastIndexOf('blue')); // 4
案例：数组去重（重点案例）
有一个数组 [‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’] ，要求去除数组中重复的元素。
// 封装一个 去重的函数 unique 独一无二的
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 demo1 = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
var demo2 = unique(['blue', 'green', 'blue'])
console.log(demo1);
console.log(demo2);
5.6 数组转换为字符串
// 数组转换为字符串
// 1. toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2. join(分隔符) 默认','作为分割符
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&')); // green&blue&pink
5.7 其他
6. 字符串对象
6.1 基本包装类型
为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和Boolean。
基本包装类型 就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
6.2 字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
6.3 根据字符串返回位置
字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。
// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符', [起始的位置])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找
案例：返回字符位置
查找字符串"oabcoefoxyozzopp"中所有o出现的位置以及次数
var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
while (index != -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);
6.4 根据位置返回字符（重点）
// 根据位置返回字符
// 1. charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3)); // y
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
// 2. charCodeAt(index) 返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键
console.log(str.charCodeAt(0)); // 97
// 3. str[index] H5 新增的
console.log(str[0]); // a
案例：返回字符位置
判断一个字符串 ‘abcoefoxyozzopp’ 中出现次数最多的字符，并统计其次数。
// 有一个对象 来判断是否有该属性 对象['属性名']
var o = {
age: 0
}
if ('age' in o) {
console.log('里面有该属性');
} else {
console.log('没有该属性');
}
if ('sex' in o) {
console.log('里面有该属性');
} else {
console.log('没有该属性');
}
// 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (chars in o) {
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
// 2. 遍历对象
var max = 0;
var ch = '';
for (var k in o) {
// k 得到是 属性名
// o[k] 得到的是属性值
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log('该字符串出现次数最多的字符是' + ch + ',出现的次数为' + max);
6.5 字符串操作方法（重点）
// 1. concat('字符串1','字符串2'....)
var str = 'andy';
console.log(str.concat('red'));
// 2. substr('截取的起始位置', '截取几个字符');
var str1 = '改革春风吹满地';
console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符
6.6 替换字符串以及转换数组
- 替换字符 replace(‘被替换的字符’, ‘替换为的字符’) 它只会替换第一个字符
- 字符转换为数组 split(‘分隔符’)
// 1. 替换字符 replace('被替换的字符', '替换为的字符')
var str = 'andyandy';
console.log(str.replace('a', 'b'));
// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
str1 = str1.replace('o', '*');
}
console.log(str1);
// 2. 字符转换为数组 split('分隔符') 前面我们学过 join 把数组转换为字符串
var str2 = 'red, pink, blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
6.7 其他
- toUpperCase() //转换大写
- toLowerCase() //转换小写
课后作业
var str = "abaasdffggghhjjkkgfddsssss3444343";
// 1. 字符串长度
console.log(str.length);
// 2.取出指定位置的字符
console.log(str.charAt(0));
console.log(str.charAt(3));
console.log(str.charAt(5));
console.log(str.charAt(9));
// 3.查找指定字符是否在以上字符串中存在
if (str.indexOf('i') != -1) {
console.log(true);
} else {
console.log(false);
}
if (str.indexOf('c') != -1) {
console.log(true);
} else {
console.log(false);
}
if (str.indexOf('b') != -1) {
console.log(true);
} else {
console.log(false);
}
// 4. 替换指定的字符
var newStr = str;
while (newStr.indexOf('g') != -1) {
newStr = newStr.replace('g', '22');
}
console.log(newStr);
while (newStr.indexOf('ss') != -1) {
newStr = newStr.replace('ss', 'b');
}
console.log(newStr);
// 5. 截取指定开始位置到结束位置的字符串
console.log(str.substr(0, 4));
// 6. 找出以上字符串中出现次数最多的字符和出现的次数
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (chars in o) {
o[chars]++;
} else {
o[chars] = 1;
}
}
// console.log(o);
var max = 0;
var ch = '';
for (var k in o) {
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log('该字符串出现次数最多的字符是' + ch + ',出现的次数为' + max);
二、简单数据类型和复杂数据类型
1. 简单数据类型和复杂数据类型
简单类型又叫做基本数据类型或者值类型 ，复杂类型又叫做引用类型。
- 值类型： 简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string , number, boolean , undefined , null
// 简单数据类型 null 返回的是一个空的对象 object
var timer = null;
console.log(typeof timer);
// 如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null
• 引用类型： 复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
通过new 关键字创建的对象（系统对象、自定义对象），如Obiect.、Array、Date等
2. 堆和栈
堆栈空间分配区别:
- 栈(操作系统)： 由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面 - 堆(操作系统)： 存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
复杂数据类型存放到堆里面
注意： JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言。
3. 简单类型的内存分配
4. 复杂类型的内存分配
5. 简单类型传参
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
6. 复杂类型传参
函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
