【思维导图】前端开发-巩固你的JavaScript知识体系
JavaScript基础语法
var a = [1, 2, 5];
for(var k in a){
console.log(k); // k 为当前元素的下标
}
for(var m of a){
console.log(m); // m 为当前元素的值
}
VM215:3 0
VM215:3 1
VM215:3 2
VM215:6 1
VM215:6 2
VM215:6 5
变量声明
var
声明一个变量,可赋一个初始值。let
声明一个块作用域的局部变量,可赋一个初始值。const
声明一个块作用域的只读命名的常量。- 变量的名字又叫做“标识符”,
必须以字母、下划线(_)或者美元符号($)开头,并且区分大小写
。 - 若没有为变量赋初始值,则值默认为
undefined
- 若没有声明变量而直接使用,抛出
ReferenceError
错误 - 当变量值为
undefined
时,布尔值环境当做false
- 当变量值为
null
时,布尔值环境当做false
数据类型
- Boolean布尔值,true和false
- null对大小写敏感
- undefined空类型,变量未定义时候的值
- Number数值类型
- String字符串类型
- Symbol(ES6新增)表示一种唯一且不可变的数据
字面量
- 字面量是用来表示如何表达这个值
- 变量赋值时右边的都是字面量
- 数组字面量
- 布尔字面量
- 浮点数字面量
- 对象字面量
- 整数字面量
- 正则字面量
- 字符串字面量
全局变量
代码:
// ES5
var a = 'web';
window.a; //'web'
// ES6
let b = 'web';
window.b; //undefined
注释
代码:
// 单行注释
/*
多行注释
*/
变量作用域
- 全局变量:即声明在函数之外,当前文档所有地方都可以访问
- 局部遍历:即声明在函数内部,仅在当前函数内可以访问
代码:
// ES5及之前
console.log(a); // undefined
var a = 1;
console.log(a); //1
// ES6开始
console.log(b); // Uncaught ReferenceError: b1 isnot defined
let b = 2;
console.log(b); //2
函数声明有两种方式
代码:
// 函数声明
f(); // 'web'
function(){
console.log('web');
};
// 函数表达式
g(); // Uncaught TypeError: g is not a function
var g = function(){ // 换成 let 声明也一样
console.log('web');
}
常量
- 使用const来声明一个只读的常量
- const声明的变量不能直接修改值,但是对于对象和数组,却是不受保护可以修改的
- 一个完整的
javascript
实现由3个部分组成:核心ECMAScript
,文档对象模型DOM
,浏览器对象模型BOM
。 JavaScript
是一种直译式脚本语言,是一种动态类型,弱类型,基于原型的语言,内置支持类型。JavaScript
具有特点:一种解释性脚本语言,主要用于向HTML页面添加交互行为,可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离,- 跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行。
JavaScript
语法区别:区分大小写,变量是弱类型,结尾的分号可有可无,解释与java,c和php
语言中的注解是相同的,大括号表示代码块。
示例
{}
包含的内容表示一个代码块
代码:
if(test1=="red") {
test1 = "blue";
alert(test1);
}
JavaScript
关键字:
break,else,new,var
case,finally,return,void
catch,for,switch,while
continue,function,this,with
default,if,throw
delete,in,try
do,instanceof,typeof
JavaScript
的变量
在javascript
中,变量是存储信息的容器,变量存在两种类型的值,即为原始值和引用值。
JavaScript
的原始类型,即Undefined
,Null
,Boolean
,Number
和String
型。- 字符串
String
是JavaScript
的基本数据类型。 - 数据类型表示数据的类型,
JavaScript
语言的每个值都属于某一种数据类型。 JavaScript
的数据类型分两类:值类型(原始值),引用数据类型(引用值)。- 值类型:字符串string,数字number,布尔boolean,对空null,未定义undefined,symbol为es6引入的一钟新的原始数据类型,表示独一无二的值。
- 引用数据类型:对象object,数组array,函数function。
JavaScript
提供typeof
运算符用于判断一个值是否在某种类型的范围内。Undefined
类型只有一个值,即为undefined
。- 当声明的变量未初始化时,该变量的默认值是
undefined
。 Null
类型只有一个值为null
,值undefined
实际上是从值null
派生来的,所以JavaScript
将他们定义为相等的。null
与undefined
表示这两个值相等,但含义不同。undefined
是声明了变量但未对其初始化时赋予该变量的值,null
表示尚未存在的对象。
代码:
console.log( null == undefined); //true
复制代码
Boolean
类型的两个值是true
和false
。Number
类型,所有数学运算返回的都是十进制的结果。Number.MAX_VVALUE
和Number.MIN_VALUE
,它们定义了Number
值集合的外边界。- 如果生成的数值结果大于
Number.MAX_VALUE
时,将被赋予值Number.POSITIVE_INFINITY
,表示不再有Number
值。生成的数值小于Number.MIN_VALUE
,会被赋予值Number.NEGATIVE_INFINITY
,表示不再有Number
值。 - 有表示无穷大的值为
Infinity
。 Number.POSITIVE_INFINITY
的值为Infinity
,Number.NEGATIVE_INFINITY
的值为-Infinity
。
使用
isFinite()
方法判断参数值是否是有穷的。
- 特殊的
NaN
,表示非数。与无穷大一样,NaN
也不能用于算术计算。注意,NaN
与自身不相等。
示例:
console.log(NaN == NaN) // false
console.log(isNaN("66")); // false
String
类型,是唯一没有固定大小的原始类型,字符串字面量是用双引号或者单引号声明。
类型判断
typeof
操作符,用于获取一个变量或者表达式的类型。
返回值:
undefined,变量是Undefined类型
boolean,变量是Boolean类型的
number,变量是Number类型的
string,变量是String类型的
object,变量是一种引用类型或者Null类型
复制代码
示例:
console.log(typeof12); // number
复制代码
typeof
运算符对null
的值返回Object
。
instanceof
操作符,用于判断一个引用类型属于哪种类型。
示例:
<script>
var a = new Array();
if(a instanceof Array) {
console.log('a是一个数组类型');
}else{
console.log('a不是一个数组类型');
}
</script>
复制代码
类型转换
Number
变量,将变量转化为数字类型。String
变量,将变量转化为字符串类型。Boolean
变量,将变量转化为布尔值类型。parseFloat
变量,将变量转化为浮点类型。parseInt
变量,将变量转化为整数类型。
运算符
- 运算符:赋值运算符,算数运算符,比较运算符,逻辑运算符,一元运算符,二元运算符,三元运算符。
名称 | 操作符 | 含义 |
---|---|---|
赋值 | x = y | x = y |
加法赋值 | x += y |
x = x + y |
减法赋值 | x -= y |
x = x - y |
乘法赋值 | x *= y |
x = x * y |
除法赋值 | x /= y |
x = x / y |
求余赋值 | x %= y |
x = x % y |
求幂赋值 | x **= y |
x = x ** y |
左移位赋值 | x <<= y |
x = x << y |
右移位赋值 | x >>= y |
x = x >> y |
无符号右移位赋值 | x >>>= y |
x = x >>> y |
按位与赋值 | x &= y |
x = x & y |
按位异或赋值 | x ^= y |
x = x ^ y |
示例:
赋值运算符的符号为=
算数运算符:+,-,*,/,%
比较运算符:>,>=,<,<=,!=,==,===,!==
逻辑运算符:
&&,逻辑与,表示表达式前后全为true才能返回true
||,逻辑或,表示表达式前后只要有一个true就返回true
!,逻辑取反,表示表达式后若为true,则返回false,否则反之。
复制代码
++
自增长,每执行一次自身加1,--
自减,每执行一次自身减1.i++
,值先参与外部表达式的运算,然后再将自身的值加1。++i
,i先自身的值加1,再参与外部表达式的运算。+=
,a+=3
等于a=a+3
。同理类似。- 三元运算符的表达式格式为:条件?正:假
- 运算符优先级:算数运算符>比较运算符>逻辑运算符>赋值运算符。
- 算数运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
分支循环
if-else
条件判断语句switch-case
选择语句for
循环语句for-in
遍历语句while
循环语句do-while
循环语句
示例:
if(条件 1) {
当条件1为true时执行的代码
}elseif(条件 2){
当条件2为true时执行的代码
}else{
当条件1和条件2都不为true时执行的代码
}
复制代码
示例:
switch(n){
case1:
执行代码块1
break;
case2:
执行代码块2
break;
default:
...
}
复制代码
示例:
for(语句1;语句2;语句3){
被执行的代码块
}
复制代码
continue
表示为越过本次循环,继续下一次循环break
表示跳出整个循环,循环结束
遍历
for in
语句循环遍历对象的属性,多用于对象,数组等复合类型,以遍历其中的属性和方法。
示例:
for(键 in 对象) {
代码块
}
复制代码
while
,只有表达式为真,就可以进入循环。
示例:
while(表达式){
代码块
}
复制代码
do-while
示例:
do {
代码
}while(表达式)
复制代码
数组
数组的属性和方法:
方法 | 说明 |
---|---|
concat() |
连接两个或者更多的数组,并返回结果 |
join() |
把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分隔 |
pop() |
删除并返回数组的最后一个元素 |
push() |
向数组的末尾添加一个或者多个元素,并返回新的长度 |
reverse() |
颠倒数组中元素的顺序 |
shift() |
删除并返回数组的第一个元素 |
slice() |
从某个已有的数组返回选定的元素 |
sort() |
对数组的元素进行排序 |
splice() |
删除元素,并向数组添加新元素 |
toSource() |
返回该对象的源代码 |
toString() |
将数组转换为字符串,并返回结果 |
toLocalString() |
将数组转换为本地数组,并返回结果 |
unshift() |
向数组的开头添加一个或者更多元素,并返回新的长度 |
valueOf() |
返回数组对象的原始值 |
indexOf() |
在数组中搜索指定元素并返回第一个匹配的索引 |
lastIndexOf() |
在数组中搜索指定元素并返回最后一个匹配的索引 |
concat()
连接两个或更多的数组,并返回一个新数组。
语法:
arr.concat(a1, a2, ..., an)
复制代码
参数:
arr
:目标数组a1,a2,...,an
:需要合并的元素
join()
使用指定分隔符,连接两个或多个数组的元素,返回一个字符串。
数组定义
- 使用
new
关键字创建一个array
对象,可以在内存中创建一个数组空间,添加元素。 - 使用
new
关键字创建一个array
对象的同时为数组赋予n个初始值。 - 不用
new
,直接用[]
声明一个数组,可以直接赋予初始值。
数组操作
- 添加元素
- 删除元素,pop方法,shift方法,splice方法。
- 遍历数组
- 插入元素,unshift方法,splice方法插入。
- 合并数组
- 数组转字符串
- 数组元素倒序
pop
方法,从尾部删除,删除后元素从数组上剥离并返回。shift
方法,从头部删除元素,并返回。splice
方法,从指定位置删除指定的元素。unshift
方法,从头部插入。splice
方法,从指定位置插入指定个数的元素。concat
方法将多个数组连接成一个数组。join
方法将数组中的元素合并成一个用指定分隔符合并起来的字符串。reverse
方法可以将数组中的元素倒序排列,而且直接改变原来的数组,不会创建新的数组。sort
方法可以将数组中的元素按照一定的规则自动排序(默认的是按照字符的ASCII码顺序排序)。
pop()和push()
- pop(): 删除并返回数组最后一个元素,改变原数组。
- push(item): 向数组末尾添加一个或多个元素,改变原数组,返回新的数组长度。
shift()和unshift()
- shift(): 删除并返回数组第一个元素,改变原数组。
- unshift(item): 向数组头部添加一个或多个元素,改变原数组,返回新的数组长度。
示例:
let arr = [1, 2, 3, 5, 6];
let a1 = arr.slice(2); // [3, 5, 6]
let a2 = arr.slice(2,3); // [3]
let arr = [1, 2, 3, 4];
let a = arr.splice(1, 2, "web", "a");
// a => [2, 3]
// arr => [1, "web", "a", 4]
复制代码
forEach()
代码:
let a = [1,3,5,7];
a.forEach(function(val, index, arr){
arr[index] = val * 2
})
a ; // [2, 6, 10, 14]
复制代码
代码:
arr.every(callback)
测试数组的所有元素是否都通过了指定函数的测试。
some()
测试数组中的某些元素是否通过由提供的函数实现的测试。
复制代码
filter()
示例:
let a = [1, "", "aa", 2, 6];
let res = a.filter(function(val, index, arr){
returntypeof val == "number";
})
res;//[1, 2, 6]
复制代码
map()
对每个元素执行此方法,并返回一个执行后的数组。
示例:
let a = [1, 3, 5];
let b = a.map(function(val, index, arr){
return val + 1;
})
b; //[2, 4, 6]
复制代码
拓展运算符
拓展运算符使用(...)
示例:
console.log(...[1, 2, 3]); // 1 2 3
console.log(1, ...[2,3], 4); // 1 2 3 4
复制代码
// 通常情况 浅拷贝
let a1 = [1, 2];
let a2 = a1;
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]
// 拓展运算符 深拷贝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 作用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]
复制代码
let [a, ...b] = [1, 2, 3, 4];
// a => 1 b => [2,3,4]
let [a, ...b] = [];
// a => undefined b => []
let [a, ...b] = ["abc"];
// a => "abc" b => []
复制代码
fill()
- 用于用指定值填充一个数组
- 用来初始化空数组,并抹去数组中已有的元素
- fill()的第二个和第三个参数指定填充的起始位置和结束位置
new Array(3).fill('a'); // ['a','a','a']
[1,2,3].fill('a'); // ['a','a','a']
[1,2,3].fill('a',1,2);// [1, "a", 3]
复制代码
entries(),keys(),values()
entries()
对键值对遍历keys()
对键名遍历values()
对键值遍历。
includes()
includes()
用于表示数组是否包含给定的值- 第二个参数为起始位置,默认为0,如果负数,则表示倒数的位置,如果大于数组长度,则重置为0开始。
代码:
[1,2,3].includes(3,3); //false
[1,2,3].includes(3,4); //false
[1,2,3].includes(3,-1); //true
[1,2,3].includes(3,-4); //true
复制代码
flat(),flatMap()
示例:
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
复制代码
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
复制代码
语法
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])
复制代码
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
复制代码
let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
复制代码
Array.prototype.reduce()
reduce()
方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
var sum = [, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, );
// 和为 6
var total = [ 0, 1, 2, 3 ].reduce(
( acc, cur ) => acc + cur,
0
);
复制代码
语法
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
复制代码
字符串对象属性
字符串对象属性
属性 | 说明 |
---|---|
constructor |
对创建该对象的函数的引用 |
length |
字符串的长度 |
prototype |
允许向对象添加属性和方法 |
字符串对象方法
字符串对象方法
属性 | 说明 |
---|---|
anchor() |
创建HTML锚 |
big() |
用大号字体显示字符串 |
blink() |
显示闪动字符串 |
bold() |
使用粗体显示字符串 |
charAt() |
返回在指定位置的字符 |
charCodeAt() |
返回在指定位置的字符的Unicode编码 |
concat() |
连接字符串 |
fixed() |
以打字机文本显示字符串 |
fontcolor() |
使用指定的颜色显示字符串 |
fontsize() |
使用指定的尺寸显示字符串 |
fromCharCode() |
从字符编码创建一个字符串 |
indexOf() |
检查字符串 |
italics() |
使用斜体显示字符串 |
lastIndexOf() |
从后向前搜索字符串 |
link() |
将字符串显示为链接 |
localeCompare() |
用本地特定的顺序比较两个字符串 |
match() |
找到一个或者多个正则表达式的匹配 |
replace() |
替换与正则表达式匹配的子串 |
search() |
检索与正则表达式匹配的值 |
slice() |
提取字符串的片段,并在新的字符串中返回被提取的部分 |
small() |
使用小字号显示字符串 |
split() |
将字符串分割为字符串数组 |
strike() |
使用删除线显示字符串 |
sub() |
将字符串显示为下标 |
substr() |
从起始索引号提取字符串中指定数目的字符 |
substring() |
提取字符串中两个指定的索引号之间的字符 |
sup() |
将字符串显示为上标 |
toLocaleLowerCase() |
将字符串转换为小写 |
toLocaleUpperCase() |
将字符串转换为大写 |
toLowerCase() |
将字符串转换为小写 |
toUpperCase() |
将字符串转换为大写 |
toString() |
返回字符串 |
valueOf() |
返回某个字符串对象的原始值 |
toSource() |
代表对象的源代码 |
字符串搜索
indexOf()
,lastIndexOf()
,search()
和match()
。
indexOf()
,indexOf(搜索词,起始索引位置)
,第2个参数不写则默认从0开始搜索。indexOf()
用于检索指定的字符串值在字符串中首次出现的位置。lastIndexOf()
,lastIndexOf(搜索词,起始索引位置)
,从后向前检索,返回的是一个指定的子字符串值最后出现的位置。search()
,语法为字符串,search(搜索词)
或者字符串search(正则表达式)
。match()
,语法为字符串。match()
可在字符串内检索指定的值,或者找到一个或者多个正则表达式的匹配。没有匹配到结果,就返回null
。有匹配到,会返回一个数组,数组的第0个元素存放的是匹配文本。
字符串截取
3种字符串截取方法:substring()
,slice()
,substr()
substring()
,语法为字符串,substring(截取开始位置,截取结束位置)
,substring()
是常用的字符串截取方法,接收两个参数,不能为负值,将返回一个新的字符串。slice()
,语法为字符串,slice(截取开始位置,截取结束位置)
,slice()
中的参数可以为负值,如果参数是负值,则该参数从字符串的尾部开始算起的位置。-1
是指字符串的最后一个字符。substr()
,substr(截取开始位置,length)
,在字符串中抽取从截取开始位置下标开始的指定数目的字符。返回一个二手手机靓号交易平台地图字符串如果截取的开始位置为负数,则表示从字符串尾部开始算起。
字符串替换
replace()
,replace(正则表达式/要被替换的字符串,要替换成为的子字符串)
。
字符串切割
split()
用于将一个字符串分割成字符串数组,语法为字符串。split(用于分割的子字符串,返回数组的最大长度)
,返回数组的最大长度一般情况下不设置。
JS事件三个阶段
事件流:
- 事件冒泡流
- 事件捕获流
事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段 事件流包含三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。
- 捕获,事件由页面元素接收,逐级向下,到具体的元素
- 目标,具体的元素本身
- 冒泡,元素本身,逐级向上,到页面元素
- 事件捕获,当使用事件捕获时,父级元素先触发,子元素后触发。
- 事件冒泡,当使用事件冒泡时,子级元素先触发,父元素后触发。
事件冒泡和事件捕获
- 事件发生会产生事件流
DOM
事件流:DOM
结构是一个树形结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件。- 事件流顺序有两种类型:事件冒泡和事件捕获。
事件触发方式
代码:
addEventListener("click","doSomething","true")
复制代码
第三个参数为true,表示采用事件捕获,若false,表示采用事件冒泡。
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){
d1 = document.getElementById("d1");
d2 = document.getElementById("d2");
d3 = document.getElementById("d3");
// true 表示在捕获阶段响应
// false 表示在冒泡阶段响应
d1.addEventListener("click",function(event){
console.log("d1")
},"true");
d2.addEventListener("click",function(event){
console.log("d2")
},"true")
d3.addEventListener("click",function(event){
console.log("d3")
},"true")
}
</script>
</head>
<body>
<div id="d1" style="background: #0000ff; width: 500px; height: 500px">
<div id="d2" style="background: #00ff00; width: 400px; height: 400px">
<div id="d3" style="background: #ff0000; width: 200px; height: 200px">