1、查阅文档
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN: https://developer.mozilla.org/zh-CN/
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过 demo 进行测试
2、内置对象
- JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
- 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
- 内置对象最大的优点就是帮助我们快速开发
- JavaScript 提供了多个内置对象：Math、 Date 、Array、String等
Math对象
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
Math.random() //随机返回一个小数，其取值范围是 [0，1)
日期对象
- Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
- Date 实例用来处理日期和时间
1. 获取当前时间必须实例化
var date = new Date();
console.log(date);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
//封装一个函数返回当前时分秒
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;
}
2. Date() 构造函数的参数
- 如果Date()不写参数，就返回系统当前时间
- 如果Date()里面写参数，就返回括号里面输入的时间
例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2022-3-22 17：35：16’) 或者 new Date(‘2019/5/1’)
日期格式化
获取日期的总的毫秒形式（时间戳）
Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数，经常利用总的毫秒数来计算时间，因为它更精确
// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();
案例：倒计时效果
① 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
② 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
③ 把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
转换公式如下：
- d = parseInt(总秒数/ 60/60 /24); // 计算天数
- h = parseInt(总秒数/ 60/60 %24) // 计算小时
- m = parseInt(总秒数 /60 %60 ); // 计算分数
- s = parseInt(总秒数%60); // 计算当前秒数
function countDown(time) {
var nowTime = +new Date(); //返回当前时间总的毫秒数
var inputTime = +new Date(time); //返回用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //time是剩余时间总的秒数，一秒等于一千毫秒
var d = parseInt(times / 60 / 60 / 24); // 计算天数
var d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24) // 计算小时
var h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); // 计算分数
var m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); // 计算当前秒数
var s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒'
}
console.log(countDown('2022-3-22 21:00:00'));
数组对象
检测是否为数组
- instanceof 运算符，可以判断一个对象是否属于某种类型
- Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
添加删除数组元素的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push（参数1…） | 数组末尾添加一个或多个元素，原数组发生变化 | 返回新数组长度 |
| unshift（参数1…） | 数组开头添加一个或更多元素，原数组发生变化 | 返回新数组长度 |
| pop（） | 删除数组最后一个元素，数组长度减一，无参数、修改原数组 | 返回删除的元素的值 |
| shift（） | 删除数组第一个元素，数组长度减一，无参数、修改原数组 | 返回第一个元素的值 |
数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组元素顺序，无参数 | 改变原来数组，返回新数组 |
| sort() | 数组元素进行排序 | 改变原来数字，返回新数组 |
数组索引
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号，不存在返回-1 |
| lastIndexOf() | 在数组中最后一个索引 | 如果存在返回索引号，不存在返回-1 |
案例
//数组['c', 'a', 'z', 'a', 'x', 'x', 'c', 'b'] 要求去除数组中重复的元素
/* 目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个。
核心算法：遍历旧数组，拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。
利用 新数组.indexOf(数组元素) 如果返回 -1 就说明 新数组里面没有该元素 */
//封装一个去重的函数
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(['c', 'a', 'z', 'a', 'x', 'x', 'c', 'b']);
console.log(demo);
数组转换为字符串
| 方法名 | 说明 | 返回值 |
|---|---|---|
| toString() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
| join(‘分隔符’) | 方法用于把数组中的所有元素转换成一个字符串 | 返回一个字符串 |
补充
| 方法名 | 说明 | 返回值 |
|---|---|---|
| concat() | 连接两个或多个数组 不影响原数组 | 返回一个新数组 |
| slice() | 数组截取slice(begin, end) | 返回被截取项目的新数组 |
| splice() | 数组删除splice(第几个开始，要删除的个数) | 返回被删除项目的新数组，注意：这个会影响原数组 |
字符串对象
JavaScript 提供了三个特殊的引用类型：String、Number和 Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
1、根据字符返回位置
| 方法名 | 说明 |
|---|---|
| indexOf (‘要查找的字符’，开始的位置) | 返回指定内容在元字符串中的位置，如果找不到就返回-1，开始的位置是index索引号 |
| lastIndexOf() | 从后往前找，只找第一个匹配的 |
案例：返回字符位置
//查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
/* 1、核心算法：先查找第一个o出现的位置，如果要检索的字符串值没有出现，则该方法返回 -1。
2、然后 只要indexOf 返回的结果不是 -1 就继续往后查找
3、因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找 */
var str = "abcoefoxyozzopp";
var index1 = str.indexOf('o');
var num = 0;
while (index1 !== -1) {
console.log(index1);
num++;
index1 = str.indexOf('o', index1 + 1);
}
console.log('o出现的次数是：' + num);
//['red', 'blue','red','green','pink','red'] 查找red出现的位置和次数
var arr = ['red', 'blue', 'red', 'green', 'pink', 'red'];
var index2 = arr.indexOf('red');
var sum = 0;
while (arr.indexOf !== 0) {
console.log(index2);
sum++;
index2 = arr.indexOf('red', index2+1);
}
console.log('red出现的次数是：' + sum);
2、根据位置返回字符（重点）
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt(index) | 返回指定位置的字符（index是字符串索引号 ） | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码（判断用户按了哪个键） | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5, IE8新增支持，和charAt()等效 |
案例：返回字符位置
//判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
/* ① 核心算法：利用 charAt(） 遍历这个字符串
② 把每个字符都存储给对象o{}， 如果对象没有该属性，就为1，如果存在了就 +1
③ 遍历对象，得到最大值和该字符 */
var str = 'abcoefoxyozzopp';
var most = {};
for (var i = 0; i < str.length; i++) {
//chars是字符串的每一个字符，第一次循环相当于把a寸给chars
var chars = str.charAt(i);
//把每个字符都存储给对象most{}， 如果对象没有该属性，就为1，如果存在了就 +1
if (most[chars]) { //动态为对象添加属性, most[chars]得到的是属性值
most[chars]++; //对象属性调用方式：-----> 对象[‘属性名’]
} else {
most[chars] = 1;
}
}
console.log(most);
var max=0;
var ch='';
// for...in 语句用于遍历对象属性
for (var k in most){
// k得到的属性名
// most[k]得到的是属性值
if(most[k]>max) {
max=most[k];
ch=k;
}
}
console.log(max);
console.log('最多的字符是：'+ ch);
3、字符串操作方法（重点）
| 方法名 | 说明 |
|---|---|
| concat(str1, str2,str3…) | concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，但+更常用 |
| substr(start, length) | 截取：从start位置开始（索引号），length取得字符个数 |
| slice(start,end) | 截取：从start位置开始，end截取到位置，end取不到（二者都是索引号） |
| substring(start, end) | 截取：从start位置开始，end截取到位置，end取不到，基本和slice相同，但是不接受负值 |
replace()方法
用于在字符串中用一些字符替换另一些字符
//只会替换第一个字符
replace(被替换的字符串， 要替换为的字符串)；
//有一个字符串'abgsgaszghasdjh' 要求把里面所有的a 替换成 *
var str = 'abgsgaszghasdjh';
while (str.indexOf('a') !== -1) {
str = str.replace('a', '*')
}
console.log(str);
split()方法
用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。 前面学过 join 把数组转换成字符串。
var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]
- toUpperCase() //转换大写
- toLowerCase() //转换小写
3、简单类型与复杂类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
- 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string ，number，boolean，undefined，null（空对象） - 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
堆和栈
注意：JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式。
栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈； 简单数据类型存放到栈里面堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。 复杂数据类型存放到堆里面
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
