-
一、基本介绍
-
语言类型介绍
-
编译型语言
- 代码编写完毕立刻进行编译转换为机器码
然后将机器码交给计算机执行
- 特点：
1.运行速度快
2.兼容性差
- 例子：
C、C++ … -
解释型语言
- 代码编写完毕不会转换为机器码，
而是由计算机一边执行一边编译
- 特点：
1.运行速度慢
2.兼容性好
- 例子：
Java、Python、Ruby、JavaScript …
-
-
编写位置
-
\1. 可以直接将js代码编写在script标签中
-
\2. 可以将js代码编写在外部的js文件中
-
\3. 还可以将js代码编写在标签的指定属性中
-
\4. 可以将js代码编写在href属性后边的，以javascript: 开头
-
-
主要结构
ES标准
- 基本语法
DOM
- 文档对象模型，用来操作网页
BOM
- 浏览器对象模型，用来操作浏览器 -
JS的输出语句
警告框：
alert(‘xxx’);
在控制台输出日志 ***** ：
console.log(‘xxx’);
在网页中打印内容：
document.write(‘xxxx’); -
变量的使用
- 声明变量：
let 变量名;
var 变量名;（老版本）
- 为变量赋值
变量名 = 值;
- 声明和赋值同时进行
let 变量名 = 值;
var 变量名 = 值;
- 声明常量
const 常量名 = 值;
- 常量只能进行一次赋值
-
-
二、数据类型(模板字符串很重要)
在JS中所有的基本类型都是不可变类型，值一旦创建，就不可修改！
-
基本数据类型（不可变类型）
-
字符串（string）
- JS中的字符串使用引号引起来，单双都行，但是不要混合
- 同类型的引号不要发生嵌套
- 转义字符串，js中使用 \ 作为转义字符
’ --> ’
" --> "
\t --> 制表符
\n --> 换行
\ -->
- 模板字符串（新增的）
- 使用（反单引号）来表示模板字符串 \- 模板字符串可以跨行使用，并且在模板中可以直接嵌入变量 \- 例子： let str =xxxx ${变量}`;
- 使用 typeof 检查一个字符串时，它会返回 ‘string’ -
数值（number）
- 在js中所有的整数和浮点数（小数）都是number类型
- 特殊的数字：
Infinity （无穷）
NaN （非法数字）
- 其他进制的数字
二进制：0b开头
八进制：0o开头
十六进制：0x开头
- 在js中可以确保大部分的整数运算取得一个精确的结果（别太大）
小数运算可能会得到一个近似值，所以不要直接在js中进行精度要求高的运算
- 使用typeof检查数字时，会返回 ‘number’-
Infinity 表示正无穷
-
NaN也是一个特殊数字，表示 Not a Number 非法数字
-
-
布尔值（boolean）
- 布尔值用来进行逻辑判断，布尔值只有两个：
true 表示真
false 表示假
- 使用typeof检查boolean时会返回 ‘boolean’ -
空值（null）
- 空值用来表示一个空的对象，只有一个值
null
- 使用typeof检查空值时，返回’object’ -
未定义（undefined）
- 未定义用来表示声明但没有赋值的变量，只有一个值
undefined
- 使用typeof检查未定义时，会返回 ‘undefined’
- 一般我们不会主动使用undefined -
大整数(bigint)
- ES2020中新推出的数值类型，大整数需要以n结尾。
- 使用typeof检查大整数时，会返回 ‘bigint’
-
-
引用数据类型
-
1.对象（Object）
-
向对象中添加属性
语法：
对象.属性名 = 属性值;
对象[‘属性名’] = 属性值; -
删除对象中的属性
- 删除对象中的属性 语法： delete 对象.属性名 delete 对象[‘属性名’] -
in运算符
- in用来检查对象中是否含有某个属性
- 语法：
‘属性名’ in 对象 -
for-in
- 枚举对象中的属性
- 语法：
for(let 变量 in 对象){
语句…
}
-
-
2.函数（function）
-
立即执行函数（IIFE）
建议写法：
😭)();
-
实参（实际参数）
- 在调用函数时，可以在函数中传递实参，
实参将会赋值给对应的形参
- JS不会检查实参的类型和数量
- 可以传递任意类型的值作为参数
- 可以传递任意数量的值作为参数
等于形参数量 --> 一一对应
小于形参数量 --> 没有的就是undefined
大于形参数量 --> 多了的不用 -
arguments
- arguments是函数中一个隐含的参数，它是一个类数组对象
函数执行时，所有的实参都会存储到arguments中
通过它，即使不定义形参也可以直接使用实参 -
返回值
1.任何值都可以成为函数的返回值
2.return后不跟值或不写return，相当于return undefined;
3.return一旦执行，函数直接结束 -
call() 和 apply()
- 它们都是函数的方法，它们可以用来指定函数的this
它们的第一个参数会成为函数中的this
- 不同点在于：
call()的实参是一个一个传递的
apply()的实参是通过数组来传递
-
-
3.数组（Array）
-
属性和方法：
length
- 获取数组的长度，元素的数量
- 实际值是数组的最大索引+1
- length的值可以修改
push()
- 向数组的末尾添加一个或多个元素，并返回新的长度
pop()
- 删除并返回数组的最后一个元素
unshift()
- 向数组的开头添加一个或多个元素，并返回新的长度
shift()
- 删除并返回数组的第一个元素
slice()
- 用来截取数组，不会影响到原数组
- 参数：
1.截取的起始索引（包含起始位置）
2.截取的结束索引（不包含结束位置）
- 索引可以是负值，负值是从后往前计算
- 第二个参数可以省略不写，它会直接截取到最后一个元素
- 也可以通过slice(0)来完成对数组的浅复制
splice()
- 用来删除，替换，插入数组中的元素
- 参数：
1.删除的起始索引
2.删除的数量
3.要插入的元素
- 返回值：
返回被删除的元素
- forEach()
- 用来遍历数组
- 用法：
需要一个回调函数作为参数，回调函数会反复调用多次
每次调用时，将遍历到的信息以参数的形式传递
- 参数：
1.element 当前遍历到的元素
2.index 当前元素的索引
3.array 当前遍历的数组对象
- concat()
- 用来连接两个或多个数组
- join()
- 用来将数组中的所有的元素连接为一个字符串
- 参数：
需要一个连接符作为参数，默认为","
- indexOf()
- lastIndexOf()
- 用来查询元素在数组中出现的位置
- 参数：
1.要查询的元素
2.查询的起始位置
- 返回值：
indexOf() 返回元素第一次出现的位置
lastIndexOf() 返回元素最后一次出现的位置
如果没有找到，返回-1
- reverse()
- 用来反转数组，会影响到原数组
- sort()
- 用来对数组进行排序，默认按照Unicode编码进行排序
- 可以通过回调函数来指定排序规则：
- 升序：
function(a, b){
return a - b;
}
- 降序：
function(a, b){
return b - a;
}
- 乱序：
function (a, b) {
return Math.random() - Math.random();
}
-
使用typeof检查一个数组时，会返回’object’
-
可以使用类方法（静态方法） Array.isArray(对象) 检查一个对象是否是数组
-
-
-
特殊：模板字符串（老版本的浏览器不支持）
- 使用反单引号
来创建模板字符串 \* - 特点： \* 1.可以换行，并保留字符串中的格式 \* 2.在模板字符串中可以直接嵌入变量 \* 变量的语法 ${变量} str =我好喜欢${name}, 因为他好帅！`;-
function getPersonInfo(one, two, three) {}
getPersonInfo${person} is ${age} years old如果使用标记模板字面量，第一个参数的值总是包含字符串的数组。其余的参数获取的是传递的表达式的值！
-
-
-
三、常用API
-
Math
Math.PI 获取圆周率
Math.abs()
- 获取一个数的绝对值
Math.ceil()
- 对一个数向上取整
Math.floor()
- 对一个数向下取整
Math.round()
- 对一个数进行四舍五入取整
Math.random()
- 生成一个0-1之间的随机数
Math.pow(x, y)
- 求x的y次幂
Math.sqrt()
- 求一个数的平方根（开方）
Math.max()
- 取多个值中的较大值
Math.min()
- 取多个值中的较小值 -
Date
- Date是表示日期的对象，在JS中所有的时间相关的都使用Date来表示
- 创建对象：
1.创建一个表示当前日期的对象
let d = new Date();
2.创建一个指定日期的对象
let d = new Date(‘月/日/四位年 时:分:秒’);
- 对象的方法：
d.getDay()
- 获取当前是周几
- 返回值 0-6
d.getDate()
- 获取当前是几日
d.getMonth()
- 获取当前是几月
- 返回值 0-11
0 1月
1 2月
…
d.getFullYear()
- 获取当前的年份
…
d.getTime()
- 获取当前日期的时间戳
Date.now()
- 获取当前的时间戳（代码执行这一刻） -
String
- 字符串的方法
- 字符串本质上就是一个字符数组
- ‘abc’ —> [‘a’, 'b, ‘c’]
- 字符串的方法：
str.length
- 获取字符串的长度
str.charAt()
- 根据索引获取指定位置的字符
str.charCodeAt()
- 根据索引获取指定位置的字符编码
String.fromCharCode()
- 根据字符编码返回字符
str.indexOf()
- 查询子串在字符串中第一次出现的位置
str.lastIndexOf()
- 查询子串在字符串中最后一次出现的位置
str.slice()
- 截取字符串
str.trim()
- 去除前后空格
str.trimEnd()
- 去除结束的空格
str.trimStart()
- 去除开始的空格
str.startsWith()
- 检查字符串是否以指定内容开头
str.endsWith()
- 检查字符串是否以指定内容结尾
str.toUpperCase()
- 将字符串转换为大写
str.toLowerCase()
- 将字符串转换为小写
str.split()
- 将一个字符串拆分为一个数组
-
-
四、类型转换
-
将其他的类型转换为字符串
-
显式类型转换
1.调用toString()方法
- 例子：
let a = 10;
a = a.toString()
- 问题：
不适用于 null 和 undefined
2.调用String()函数
- 例子：
let a = 10;
a = String(a);
- 原理：
对于有toString()值，也是调用toString()
对于没有toString()的null和undefined，直接转换为 ‘null’和’undefined’ -
隐式类型转换
1.为任意值加上一个空串，即可将其转换为字符串
- 例子：
let a = 10;
a = a + ‘’;
- 原理：
原理同String()函数
-
-
将其他的类型转换为数值
-
显式类型转换
\1. 使用Number()函数
- 例子：
let a = ‘10’;
a = Number(a);
- 不同的情况：
字符串
- 如果一个字符串是合法的数字，则直接转换为对应的数字
如果不合法则转换为NaN
如果是空串或空格串，则转换为0
布尔值：
true --> 1
false --> 0
null --> 0
undefined --> NaN
\2. 专门用来转换字符串的两个函数：
parseInt()
- 将一个字符串解析为一个整数
parseFloat()
- 将一个字符串解析为小数 -
隐式类型转换
\1. 使用一元的+来将一个任意值转换为数字
- 例子：
let a = ‘10’;
a = +a;
- 原理：
同Number()函数
-
-
将其他的类型转换为boolean
-
显式类型转换
\1. 使用Boolean()函数来进行转换
例子：
let a = 123;
a = Boolean(a);
情况：
会转换为false的情况：
0、NaN、null、undefined、false、’’ -
隐式类型转换
\2. 为任意值取两次反，来将其转换为布尔值
例子：
let a = 123;
a = !!a;
原理：
同Boolean()函数
-
-
-
五、运算符（操作符）
-
连等号 a = b = xxx（左边两个赋值同时进行）
-
算术运算
+ 加法运算符
- 减法运算符
* 乘法运算符
/ 除法运算符
** 幂运算符 （新增的）
% 模运算符
注意：
除了字符串的加法，其余类型的值进行算术运算时，
都会转换为数值然后再运算 -
一元运算符
+ 正号
- 负号
注意：
使用±号，会发生类型转换（数值） -
自增自减运算符
自增
a++(后++)
- a++会使变量立即自增1，并返回变量自增前的值（原值）
++a(前++)
- ++a会使变量立即自增1，并返回变量自增后的值（新值）
自减：
a–(后–)
- a–会使变量立即自减1，并返回变量自减前的值（原值）
–a(前–)
- --a会使变量立即自减1，并返回变量自减后的值（新值） -
字符串加法
* 任何值和字符串做加法时都会转换为字符串
* 然后再和字符串进行拼串
*
* 利用这个特点，可以通过为一个任意值 加上一个空串(’’)的形式
* 来将其转换为字符串，它的原理和String()函数是一样的
* 但是这种方式要简单一些 -
非布尔值的逻辑运算符
* 与运算：
* - 如果对非布尔值进行与运算，
* 会首先将其转换为布尔值，然后运算，最终返回原值
* - 如果第一个值是true，则返回第二个值
* 如果第一个值是false，则返回第一个值
*
* 或运算
* - 如果第一个值是true，则直接返回第一个，否则返回第二个
*
* 与找false，或找true
let result = ‘hello’ && 1; // 1
result = 1 && ‘hello’; // ‘hello’
// true && false
result = 1 && NaN; //NaN -
赋值运算符
=
将符号右侧的值赋值给左侧变量
+=
a += x 等价于 a = a + x
-=
*=
/=
**=
%= -
逻辑运算符
!（逻辑非）
- 逻辑非用来对一个值进行取反，true变false，false变true
- 非布尔值会转换为布尔值然后取反
&&（逻辑与）
- 与运算是找false的，只要有false就会返回false
- 与运算是短路的与，如果第一个值是false，则不看第二个值
- 非布尔值运算时，会返回原值
- 如果第一个值是false，则直接返回第一个值，
如果第一个值为true，则返回第二个值
||（逻辑或）
- 或运算是找true的，有true就返回true，没有返回false
- 或运算是短路的或，如果第一个值是true，则不看第二个值
- 非布尔值运算时，会返回原值
- 如果第一个值是true，则返回第一个值
如果第一个值是false，则返回第二个值 -
相等运算符
* ==
* - 相等运算符用来比较两个值是否相等
* - 相等运算符会对值进行自动的类型转换，
* 如果比较的两个值的类型不同，会将其转换为相同的类型然后再比较
* 通常情况下，不同类型都会转换为Number然后再比较
* null 和 undefined 做相等比较时，会返回true
*
* === （全等）
* - 全等用来检查两个值是否全等
* - 全等运算不会发生自动的类型转换，
* 如果两个值的类型不同，直接返回false
* - null和undefined做全等比较时，返回false
*
* != (不相等)
* - 比较两个值是否不相等
* - 如果不相等返回true，相等返回false
* - 会做自动类型转换，将两个值转换为相同的类型然后再比较
*
*
* !== (不全等)
* - 比较两个值是否不全等
* - 如果不全等返回true，全等返回false
* - 不会做自动的类型转换，如果两个值的类型不同，直接返回true -
关系运算符
>、>=、<、<=
- 如果比较两个字符串的大小关系，它不会将字符串转换为数值去比较
而是逐位的比较字符的Unicode编码，所以利用这个特性可以通过比较字符串大小
来将字符串按照字母顺序排序。 -
流程控制
* 条件判断语句
* 条件分支语句
* 循环语句
-
-
六、作用域
-
全局作用域（global）
- 全局作用域在页面加载时创建，在页面关闭时销毁
- 所有的直接写在script标签内部的变量（函数）都属于全局作用域
- 全局作用域中的变量是全局变量，函数是全局函数
可以在页面的任意位置被访问。
（开发时很少在全局作用域中编写代码！）
- 全局作用域中有一个全局对象（global object） window
window对象代表浏览器的窗口
- 在全局中使用var声明的变量都会作为window对象的属性保存
函数都会作为window对象的方法保存
- 如果声明一个变量不使用var关键字，相当于向window中添加属性 -
函数作用域
如果声明变量不使用var或let，则变量会成为全局变量
-
-
七、new与constructor
- 实际上new就是在调用constructor
① 构造函数执行时，会先创建一个新的对象
② 将this设置为新的对象
③ 执行函数中的代码
④ 将新建的对象作为返回值返回
- 实际上new就是在调用constructor
-
八、文档的加载
出现获取不到DOM对象的情况。
- 解决方式：
1.将script标签放在body的最后
2.可以将代码写在window.onload的回调函数中
window.onload = function(){
…
};
3.引入外部js文件时，在script标签上添加defer属性
- 解决方式：
-
九、dom操作
-
DOM查询
-
通过document对象查询
- document.getElementById()
- 根据id获取一个元素节点对象
- document.getElementsByClassName()
- 根据class属性值获取一组元素节点对象
- document.getElementsByTagName()
- 根据标签名获取一组元素节点对象
- document.getElementsByTagName(’*’)
- 获取页面中的所有元素
- document.getElementsByName()
- 根据元素的name属性获取一组元素节点对象（主要用于表单项）
- document.querySelector()
- 根据选择器字符串获取符合条件的第一个元素
- document.querySelectorAll()
- 根据选择器字符串获取符合条件的所有元素
- document.documentElement
- 获取页面的根元素 （html）
- document.body
- 获取页面的body元素 -
通过element进行查询
- element.getElementsByTagName()
- 根据标签名获取元素中的指定的后代元素
- element.childNodes
- 获取当前元素的所有子节点
- element.children
- 获取当前元素的所有子元素
- element.firstChild
- 获取第一个子节点
- element.firstElementChild
- 获取第一个子元素
- element.lastChild
- 获取最后一个子节点
- element.lastElementChild
- 获取最后一个子元素
- element.parentNode
- 获取当前元素的父元素
- element.previousSibling
- 获取前一个兄弟节点
- element.previousElementSibling
- 获取前一个兄弟元素
- element.nextSibling
- 获取后一个兄弟节点
- element.nextElementSibling
- 获取后一个兄弟元素
-
-
DOM修改（创建、删除、修改）
- 创建元素
- document.createElement(标签名)
- 创建一个新的元素
- document.createTextNode(文本内容)
- 创建一个新的文本节点
- 插入元素
- 父节点.appendChild(子节点)
- 向父节点中插入一个子节点
- 元素.insertAdjacentElement(‘位置’, 元素);
- 向元素的指定位置插入子元素
- 元素.insertAdjacentHTML(‘位置’, ‘HTML代码’);
- 向元素的指定位置插入HTML代码
- 元素.insertAdjacentText(‘位置’, ‘文本内容’);
- 向元素的指定位置插入文本内容
- 位置需要传递一个字符串作为参数：
‘beforebegin’ 开始标签前，成为当前元素的前一个兄弟元素
‘afterbegin’ 开始标签后，成为当前元素的第一个子元素
‘beforeend’ 结束标签前，成为当前元素的最后一个子元素
‘afterend’ 结束标签后，成为当前元素的后一个兄弟元素
- 父节点.replaceChild(新节点, 旧节点)
- 使用新节点替换旧节点
- 父节点.insertBefore(新节点, 旧节点)
- 将新节点插入到旧节点的前边
- 复制节点
- 节点.cloneNode()
- 对节点进行浅复制（只复制节点本身）
- 节点.cloneNode(true)
- 对节点进行深复制（复制节点本身及所有的后代节点）
- 删除元素
- 子节点.parentNode.removeChild(子节点)
- 子节点.remove()
-
-
十、this
- - 根据函数的调用方式不同，this的值也不同：
1.以函数形式调用，this是window
2.以方法的形式调用，this是调用方法的对象
3.以构造函数的形式调用，this是新建的对象
4.以call和apply的形式调用，this是它们的第一个参数
5.箭头函数中的this由它外层作用域决定
6.事件的回调函数中，this是绑定事件的对象
- - 根据函数的调用方式不同，this的值也不同：
-
十一、事件（Event）
-
事件对象：
- 当事件的回调函数被调用时，浏览器每次都会传递一个对象作为参数
这个对象就是事件对象。
- 事件对象中存储了事件相关的一切信息：
事件触发时，哪个鼠标按键被按下、
哪个键盘上的按键被按下、
鼠标滚轮滚动的方向…
- 要获取事件对象，只需在事件的回调函数中定义一个形参即可 -
事件的冒泡（bubble）
- 冒泡指事件的向上传导，
子元素上事件触发时，会同时导致其祖先元素上的同类事件也被触发
- 冒泡的存在简化了代码的编写
- 但是有时我们不希望冒泡的存在，可以通过事件对象来取消冒泡：
1.通过cancelBubble属性来取消冒泡
event.cancelBubble = true;
2.通过stopPropagation()方法来取消冒泡
event.stopPropagation(); -
事件的传播
-
事件的传播分成了三个阶段：
1.事件的捕获
- 指事件从最外层元素开始向内部元素进行事件的捕获
- 默认情况下，捕获阶段不会触发事件
- 如果希望在捕获时触发事件，可以将addEventListener()的第三个参数设置为true
2.目标元素（触发事件的元素）
- 捕获到达目标元素停止
3.事件的冒泡
- 从目标元素开始向外层元素进行事件的冒泡
- 默认情况下，冒泡时事件会被触发 -
addEventListener()
- 为元素添加事件的响应函数
- 参数：
1.要绑定的事件的字符串（不要on）
2.事件的回调函数
3.是否在捕获阶段触发事件，默认为false
// https://developer.mozilla.org/en-US/docs/Web/Events -
removeEventListener()
- 移除元素上的指定的事件
-
-
事件的委派（事件的委托）：
需要为多个元素绑定相同的响应函数时，可以统一将事件绑定给它们共同的祖先元素
// 在事件对象中有一个属性叫做target，它表示的是触发事件的对象
// alert(event.target.tagName);
-
-
十二、事件默认行为
-
取消默认行为
- 默认行为指当事件触发时元素默认会做的事情
比如：点击超链接后页面会发生跳转，点击表单的提交按钮后页面发生跳转 …
- 有时默认行为会影响到正常功能，需要将其取消，只需要在事件的响应函数中return false即可取消
- 例子：
link.onclick = function(){
…
return false;
}; -
event.preventDefault()
-
-
十三、通过js操作css
-
操作内联样式
- 属性：style
- 读取样式：
元素.style.样式名
- 设置样式：
元素.style.样式名 = 样式值
- 注意：
1.通过style属性所读取和设置的样式都是内联样式
2.所以通过它所设置的样式通常会立即生效
3.如果样式名不符合标识符的规范，需要对样式名就行修改：
去掉-，-后的字母大写
background-color ==> backgroundColor
border-left-width ==> borderLeftWidth -
获取当前的生效的样式（只读）
- 参数：
1.要获取样式的元素
2.要获取的伪类（没有可以不写）
- 返回值：
一个对象，对象中包含了当前元素所有生效的样式
- 注意：
该方法获取的样式全都是只读的，无法修改 -
其他的样式相关的属性：
clientWidth
clientHeight
- 获取的是内容区和内边距的总大小
offsetWidth
offsetHeight
- 获取的是内容区、内边距和边框的总大小
offsetParent
- 获取当前元素的定位父元素
- 离当前元素最近的开启了定位的祖先元素，如果所有的祖先都没有开启定位
则返回body
offsetLeft
offsetTop
- 当前元素距离其定位父元素的距离
scrollHeight
scrollWidth
- 获取元素滚动区域的大小
注意：
1.以上属性都是只读属性，无法修改
2.以上属性所获取的值都是不带单位的值，可以直接参与运算
scrollTop
scrollLeft
- 获取（设置）垂直和水平滚动条滚动的距离
- 判断滚动条滚动到底：
- 垂直：
scrollHeight - scrollTop === clientHeight
- 水平：
scrollWidht - scrollLeft === clientWidth
-
-
十四、拖拽
-
十五、修改元素的class
// classList 可以用来返回当前元素的所有的类
/*
* classList 中给我们提供了一些方法使我们可以很方便的去操作元素类
* 它的类型是 DOMTokenList，提供了如下的方法：
* add() 用来向元素添加一个或多个类
* remove() 用两个移除元素中的一个类
* replace() 用来使用一个新的class替换原有class
* toggle() 切换一个元素的class
* 如果元素拥有该类，则删除
* 如果元素没有该类，则添加
* contains() 检查一个元素是否含有某个class
* 如果包含，返回true，否则返回false -
十六、定时器
* setTimeout()（延时调用）
* - 它可以用来在指定时间后调用函数
* - 参数：
* 1. 回调函数，要调用的函数
* 2. 时间（毫秒）
* clearTimeout()
* - 关闭定时器（延时调用）
*
* setInterval() （定时调用）
* - 参数：
* 1. 回调函数，要调用的函数
* 2. 时间（毫秒）
* - 返回值：
* 返回一个定时器的id
* clearInterval();
* - 用来关闭定时器
* - 参数：
* 定时器的id
*
*
* setTimeout() 和 setInterval() 本质上是一样的，是互相代替的 -
十七、BOM（浏览器对象模型）
* BOM（浏览器对象模型）
* - BOM中为我们提供了一组对象，用来完成对浏览器的各种操作
* - BOM对象：
* Window
* - 代表的是浏览器窗口
* History
* - 代表的是浏览器的历史记录
* Location
* - 代表的是浏览器的地址栏
* Navigator
* - 代表浏览器的信息
* Screen
* - 代表的是设备屏幕信息
*
* - BOM对象都是window对象的属性，所以可以直接访问-
History
* History 表示浏览器的历史记录
* - 由于隐私的原因，History无法访问具体的历史记录
* - 只能用来控制浏览器向前向后翻页
* history.length
* - 当前访问的页面的数量
* history.forward();
* - 切换到前边访问的网址
* history.back();
* - 相当于浏览器的回退按钮
* history.go()
* - 跳转到指定的历史记录 -
location
- location表示浏览器地址栏信息
- 如果直接读取location，则可以获取到地址栏的信息
- 如果修改location的值，则浏览器会自动跳转到新的地址
- 通过这种方式跳转页面，会留下历史记录，可以通过回退按钮回退
- assign()
- 用来跳转地址，和直接修改location是一样的
- replace()
- 用来跳转地址，它不会产生历史记录，无法通过回退按钮回退
- reload()
- 用来重新加载网页，相当于网页的刷新按钮
location.port -
Navigator
* - 代表浏览器的信息，通过Navigator来识别出不同的浏览器
* - 在 Navigator 中大部分属性都没有什么使用价值
* - userAgent 返回的是一个字符串，
* 用来表示浏览器的信息
*
* - Chrome
* Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36
* - Firefox
* Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0
*
* - IE
* Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
* Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
*
* - IE11
* Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
-
-
十八、正则表达式对象
-
创建一个正则表达式对象
new RegExp(‘正则表达式’, ‘匹配模式’);let re = new RegExp(‘a’);
// 字面量 语法：/正则/匹配模式
let re2 = /a/;
// console.log(typeof re);
// console.log(typeof re2);
-
test() 用来检查一个字符串是否符合正则表达式
// test() 用来检查一个字符串是否符合正则表达式
// alert(/a/.test(‘a’));
// alert(/a/.test(‘abc’));
// alert(/a/.test(‘bbabc’));
// alert(/ab/.test(‘aabccc’)); -
设置严格区分大小写（i）
* - 匹配模式：
* i 忽略大小写
* g 全局匹配// 正则表达式，严格区分大小写
// new RegExp(‘ab’, ‘i’);
alert(/ab/i.test(‘Abc’)); -
量词
* {m} 正好出现m次
* {m,n} 出现m到n次
* {m,} 至少出现m次
* + 至少1次，等价于 {1,}
* ? 0-1次，等价于 {0,1}
* * 0-多次，等价于 {0,} -
其它
* | 表示或
* [] 中的内容都表示或
* [a-z] 表示任意的小写字母
* [A-Z] 表示任意的大写字母
* [a-zA-Z] 任意字母
* [0-9] 任意数字
* [^ ] 表示除了 -
. 和 /
* 在正则表达式中使用 \ 作为转义字符
* . 表示任意字符
* . 表示 .
* \w 任意单词字符，相当于[A-Za-z0-9_]
* \W 除了单词字符，相当于[^A-Za-z0-9_]
* \d 任意数字，相当于[0-9]
* \D 除了数字，相当于[^0-9]
* \s 空格
* \S 除了空格 -
如果一个正则表达式以^ 开头 以$结尾，则要求字符串和正则表达式要完全匹配
-
-
JavaScript总结
-
js介绍
-
动态
-
弱类型：变量的类型是不确定的
-
解释型：不需要编译，直接一行一行解释执行
-
脚本：只要是脚本语言都可以嵌套在其他语言中进行执行
-
js的组成部分
-
ECMAscript
-
DOM
-
BOM
-
-
书写位置
-
内嵌式
-
外链式
-
行内式
-
-
-
变量
-
定义变量使用var和不使用var的区别
-
使用var：可以先定义后赋值
-
不使用var：必须赋值，不然会报错
-
-
-
数据类型
-
基本数据类型
-
number
-
string
-
boolean
-
null
-
undefined：定义未赋值
-
-
对象数据类型
-
object
-
function
-
-
数据类型的判断
- typeof
- typeof null（结果是object）
- typeof
-
-
运算符和表达式
-
=== 和 !== 只有在相同类型下,才会比较其值
-
==， 两边值类型不同的时候，要先进行类型转换，再比较。
-
逻辑运算符
-
&&（一假则假） 放在两个值 && 前面为真 整个表达式的值是后面的值 前面如果是假，整个表达式的值是前面的值（a = 0&&100;）
-
||（一真则真） 放在两个值 || 前面为真 整个表达式的值是前面的值 前面如果是假，整个表达式的值是后面的值
-
-
基本数据运算
-
1/0 0/1 0/0（NaN）
-
特殊情况
-
空串和null不相等
-
false和null不相等
-
0和null不相等
-
undefined 和 null 相等（重点）
-
-
其它情况
-
如果是+ 看有没有字符串，如果有 就是拼接字符串
-
如果是比较 看是不是两边都是字符串 如果是 比较的是字符串的Unicode码
-
否者全部转数字
-
-
-
-
数据类型转换
-
数据类型强制转换
-
Number（）：转换不了就是NaN
-
String（）
-
Boolean（）
-
转化字符串的时候，除了空字符串是false,其余都是true
-
转化undefined和null都是false;
-
-
-
数据类型隐式转换
-
数据类型手动转换
-
parseInt（）
-
parseFloat（）
-
-
-
break和continue关键字
-
continue：结束本次循环
-
break：跳出这个循环体
-
-
函数
- 没有写return，并不是代表这个函数没有返回值，而是省略了return，实际上返回值是undefined
-
预解析
- 不加var的变量不会变量提升
-
-
面试复习
-
call || apply || bind
-
第一个参数是指定this指向
-
前者从第二个开始都是参数
-
后者第二个是数组，可以将参数写在一起
-
bind不会执行，返回函数的副本
-
-
函数
-
IIFE（立即执行函数）
-
原型链
-
instanceof（沿着原型链查找）
-
变量提升和函数提升的区别
- c is not function
- c is not function
-
执行上下文
-
global
-
local
-
执行上下文创建规则
- 函数即将执行时创建，每执行一次创建一个
-
-
in运算符
- 判断左侧是不是右侧的属性
-
作用域和作用域链
-
作用域：代码定义时创建（虚拟的假东西罢了）
-
作用域链：创建时就决定了
-
-
-
数据类型强制转换
-
Number（）：转换不了就是NaN
-
String（）
-
Boolean（）
-
转化字符串的时候，除了空字符串是false,其余都是true
-
转化undefined和null都是false;
-
-
-
数据类型隐式转换
-
数据类型手动转换
-
parseInt（）
-
parseFloat（）
-
-
break和continue关键字
-
continue：结束本次循环
-
break：跳出这个循环体
-
-
函数
- 没有写return，并不是代表这个函数没有返回值，而是省略了return，实际上返回值是undefined
-
预解析
- 不加var的变量不会变量提升
-
-
面试复习
-
call || apply || bind
-
第一个参数是指定this指向
-
前者从第二个开始都是参数
-
后者第二个是数组，可以将参数写在一起
-
bind不会执行，返回函数的副本
-
-
函数
-
IIFE（立即执行函数）
-
原型链[外链图片转存中…(img-hAitCWV7-1626716802986)][外链图片转存中…(img-BYd4Pi5N-1626716802989)][外链图片转存中…(img-f9OcpA9M-1626716802990)][外链图片转存中…(img-Kt4ayqot-1626716802992)]
-
instanceof（沿着原型链查找）
-
变量提升和函数提升的区别
- c is not function[外链图片转存中…(img-fU64kCdl-1626716802993)]
-
执行上下文
-
global
-
local
-
执行上下文创建规则
- 函数即将执行时创建，每执行一次创建一个
-
-
in运算符
- 判断左侧是不是右侧的属性
-
作用域和作用域链
-
作用域：代码定义时创建（虚拟的假东西罢了）
-
作用域链：创建时就决定了[外链图片转存中…(img-pfbrZTyM-1626716802994)]
-
-
-
03-28
242
242
04-13
1061
1061
09-17
162
162
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
