JavaScript基础知识思维导图模板_ProcessOn思维导图、流程图

操作符

一元操作符

正负操作符

变量数值自增、自减（即 + 1、 -1）

var age = 29;
age ++ ;
alert(age); // 30

用在变量之前或者之后会有区别

如果用在前面，则变量会先 +1 再参与计算

如果用在后面，则变量会计算再 +1

例子：
var a = 39;
var b = ++a + 2; //42,先自增再运算
var c = a++ + 2 //42 先运行再自增

布尔操作符（！）

布尔值取反

但是对于任何其他类型的数值，会有显式的转换

对象,返回false

空字符串，返回true

非空字符串，返回false

0,返回true,其他返回false(包括Infinity)

null,返回true

NaN，返回true

undefined,返回true

二元操作符

位操作符

需要先了解

数值在计算机中的存储方式

二进制负数补码

按位非(~)

var num1 = 25 ;// 00000000000000000000000000011001
var num2 = ~num1;//11111111111111111111111111100110

按位与(&)

var result 25 & 3; // 1
0000 0000 0000 0000 0000 0000 0001 1101
0000 0000 0000 0000 0000 0000 0000 0011
AND
0000 0000 0000 0000 0000 0000 0000 0001 //1

同1为1

按位或(|)

var result 25 | 3; // 1
0000 0000 0000 0000 0000 0000 0001 1101
0000 0000 0000 0000 0000 0000 0000 0011
OR
0000 0000 0000 0000 0000 0000 0001 1111 //27

有1为1

按异或(^)

var result 25 ^ 3; // 1
0000 0000 0000 0000 0000 0000 0001 1101
0000 0000 0000 0000 0000 0000 0000 0011
XOR
0000 0000 0000 0000 0000 0000 0001 1110 //26

1、0 不同为1

有符号左移(<<)

var oldValue = 2
var newValue = oldValue << 5 //64
10 << 5 = 100000

左移几位相当于 * 2^n ，在进制层面理解更透彻

保留符号位

有符号右移(>>)

同左移操作，友移几位相当于 / 2^n

保留符号位

无符号左移（<<<）

与有符号左移类似，但是不再考虑符号位

无符号右移(>>>)

与有符号右移类似，但是不考虑符号位

逻辑与(&&)

var result = true && false // false

逻辑与操作可以应用于任何类型的操作数，而不仅仅是布尔值

如果有一个操作数不是布尔值，那么返回的不一定是布尔值

如果第一个为对象，则返回第二个操作数

逻辑短路

如果第一个值为false，则不执行后面的计算

逻辑或(||)

var result = true && false; // true

如果第一个操作数是对象，则返回第一个操作数

如果第一个操作数为false，则返回第二个操作数

如果两个操作数都为null,NaN,undefined则返回 null、NaN、undefined

逻辑短路

如果第一个操作数为true,则不进行后面的计算

乘性操作符

乘法

var result = 34 * 56

除法

var result = 66/11

求模

var result = 26 % 5 // 1

加性操作符

加法

var result = 1 + 2

减法

var result = 1 - 2

关系操作符

> 、 < 、 <= 、>=

用于比较两个数值的大小 5 > 6 // false

非数值比较时不做赘述，不推荐

相等、不相等（ == 、 !=）

5 == 5 // true

如果比较相等性之前先将其转换为数值，false为0，true为1

如果一个操作数是字符串，一个操作数是数值，那么会先键字符串转数字再比较

全等、不全等（=== 、!==）

5 === 5 //true
"5" === 5 //false
null == undefined // false

全等于不仅要数值一致，数据类型也要一致才能返回true

条件操作符

var = boolean_expression ? true_value : false_value

var result = 5 > 3 ? 1 : 2 // 返回1

赋值操作符（ = ）

将右侧的数值赋值给左侧变量

乘/赋值 ( *= )

var num = 1 ;
num *= 5 // 5
相当于
num = num * 5
其他操作类似

除/赋值(/=)

模/等于（%=）

加/赋值（+=）

减/赋值（-=）

左移/赋值（<<=）

右移/赋值（<<=）

逗号操作符

使用逗号操作符可以在一条语句中执行多个操作

var num=1.num2=2,num3=3;

流控制语句

if 语句

do-while语句

do {
//执行的代码
} while (循环条件)

while语句

与do-while语句不同的是，do-while先执行一次再判断，而while是先判断再执行

while(循环条件){
//执行代码
}

for语句

for (语句 1; 语句 2; 语句 3)
{
//被执行的代码块
}
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

for(;;) 等同于while(true) 无限循环

for-in 语句

是一种精确的迭代语句，可以用来枚举对象的属性

for(perpertyName in expression) {
//执行的代码块
}

通过for-in 循环输出的属性名的顺序是不可预测的

label语句

不推荐

break 和 continue 语句

break立刻退出当前循环

continue跳过此次循环，继续下次循环

with语句

将代码的作用于设置到一个特定的对象中

with(expression) {
//语句块
}

var qs = location.search.substring(1);
var hostname = location.hostname;
与
with(location){
var qs = search.substring(1);
var hostname = hostname;
}
等价

严格模式下不允许使用with,不推荐使用

switch语句

switch(n)
{
case 1:
//执行代码块 1
break; //break必须要有，否则他会执行到下面的代码
case 2:
//执行代码块 2
break;
case 3:
case 4 : //合并两种情况
break;
default:
//与 case 1 和 case 2 不同时执行的代码
}

js的switch可以在语句中使用任何数据类型

函数

函数可以封装任意多条语句，可以在任何地方，任何时候被调用

函数声明

function 函数名称(arg0,arg1,...argN){
//函数语句块
}

函数可以有返回值，也可以没有返回值

return 语句之后停止并立刻退出，return语句后的代码永远不会执行

如果没有返回值，直接 return 即可,函数执行到最后也会自动退出

参数

ECMAScript不介意传递多个参数，如果你定义了两个形参，你可以传一个或者不传，没有传的参数将会自动设为undefined,也可以传多于两个参数，在函数体内可以通过arguments获取多余的参数，参数只是提供便利，不是必需的

arguments

arguments与数组类似，可以通过对应的下标来获取相应的参数

arguments.length查看代码传入参数的个数

修改arguments中的值，会同步修改形参的值，但是修改形参的值，arguments中的值不会被修改

callee属性

指向拥有这个arguments对象的函数

使用arguments.callee()就能调用函数本身

函数不能重载

this

对象方法中建议使用this,而在普通函数中则不建议使用

与其他语言的this特征基本类似

this引用的是函数执行的环境对象，即在什么执行环境下，该this就指向哪个执行环境的对象

面向对象

ECMAScript中没有类的概念，因此与其他语言有所不同

对象是无序属性的集合，其属性可以包含基本值、对象或者函数

属性（property）

属性指的是与 JavaScript 对象相关的值

var cat = {
color:'yellow' //color 就是 cat 的一个属性
}
alert(cat.color); //在这里获取属性使用 . 符号

新增属性

var cat = {
color:'yellow'
}
cat .weight = 600 //新增属性

JavaScript 对象是无序属性的集合

属性在创建时都带有一些内部特征值，通过这些特征值来定义他们的行为（比如：控制一个属性是否能被读写等）

属性分类

属性被分为两种类型，一种为数据属性，另一种为访问器属性，两种属性的内部特征不相同

数据属性

数据属性有4个描述其行为的特征

示例
var pserson = {
name:"zhuo"
}

[[Configurable]]

表示是否能通过delete属性删除以及能否被配置特征值

[[Enumerable]]

表示能否通过for-in循环返回属性，默认为true

[[Writable]]

表示能否修改属性值，默认为true

[[Value]]

包含这个属性的数据值，读和写都从这个位置读写，这个特征的默认值为undefined

persion的name被设置为zhuo,那么这个属性的[[Value]]特征被设置为 "zhuo"

修改属性默认特征

使用Object.defineProperty()方法

如果执行了不符合特征值的操作，非严格模式下会自动忽略，而严格模式下则会报错

一旦将configurable配置为false，就不能再次修改为true了，而且修改除writable之外的特征，都会导致错误

访问器属性

[[Configurable]]

该属性是否可配置，可删除,默认为false

[[Enumerable]]

该属性是否可枚举,默认为false

[[Get]]

在读取属性时调用的函数，默认值为undefined

[[Set]]

写入属性时调用的函数,默认值为undefined

示例

内部特征主要控制属性是否可配置、可删除、可枚举、可读写

定义多个属性

Object.defineProperties()

获取属性特征

Object.getOwnPropertyDescriptor()

内存

堆与栈

与c++类似,javaScipt中的内存也分为栈区和堆区,它们存储数据的机制不同,导致存储数据的类型也不同,栈区主要存储简单数据类型,堆区主要存储引用数据类型.

内存的回收（垃圾收集）

JavaScript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存

常用垃圾收集方式

标记清除

当变量进入某个作用域时，就将他标记为进入环境，离开时则将其标记为离开环境

将系统中每个变量都存储起来，每过一个时间间隔去清除这些无用的内存

引用计数

当一个对象创建并被变量引用时则为其引用次数 +1 , 如果多n个变量引用这个值，那引用计数为n,当引用次数变为0时，说明系统中没有地方引用该值，说明该值无用了，则将其占用的内存回收

引用计数存在相互引用的问题

参考资料和书籍

JavaScript高级程序设计

在线运行地址

https://www.sojson.com/runjs.html

语法

标识符

第一个字符必须是字符、下划线或者$符号，其他字符可以是字母、下划线、数字或者$符号

使用驼峰大小写格式

标识符语义明确，不要随便命名，方便阅读代码

区分大小写

注释

//单行注释

/*
* 多行注释
*
*/

严格模式

使用 "use strict" 来告诉编译器下面代码使用严格模式

语句

每个语句结束以分号结尾

虽然可以省略分号，但是建议加分号，增加代码可读性、压缩、提高性能等

语句块

使用{}包裹

建议单行代码也使用语句块包裹，方便阅读

关键字和保留字

摘自：https://www.runoob.com/js/js-reserved.html

变量

声明变量

变量是弱类型的，一个变量可以存储任何类型的值

变量必须被声明后才能使用，否则会报错

var message;

声明

var message = "hi";

声明并赋值

可以在修改变量值的同时修改值的类型

let 与 var区别

变量提升

所有变量的声明语句都会被提升到代码头部，这就是变量提升。

暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var

函数作用域，不管声明在哪个代码块中，整个函数中都能随意使用

存在变量提升，所有Var声明的变量会提升到作用域开头声明

捕获变量奇怪

一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时i的值：

可重复定义

使用var声明时，它不在乎你声明多少次；你只会得到1个。

let

块级作用域，作用域仅在当前代码块中

不存在变量提升，let语句声明的变量仅在当前语句块中

有暂时性死区

function f(input: boolean) {
let a = 100;
if (input) {
// Still okay to reference 'a'
let b = a + 1;
return b;
}
// Error: 'b' doesn't exist here
return b;
}

无法重复定义

const声明变量

它们与let声明相似，但是就像它的名字所表达的，它们被赋值后不能再改变。

换句话说，它们拥有与 let相同的作用域规则，但是不能对它们重新赋值。

使用最小特权原则，所有变量除了你计划去修改的都应该使用const

解构赋值

对象解构

不仅声明时可以，声明变量后也可以解构赋值

嵌套的对象也可以解构

属性重命名

数组解构

除了花括号变成中括号，其他与对象解构一致

交换值

// swap variables
[first, second] = [second, first];

对象解构与数组解构可以嵌套使用

使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined

解构同样可以放置于函数参数内

function foo({ secure, path, domain, expires })

值的类型

基本类型

基本类型指的是简单的数据段，比如Number、Boolean、String类型

String类型属于基本类型

变量地址中存储的就是当前的数据段

摘自：https://www.cnblogs.com/embrace-ly/p/10659970.html

引用类型

引用类型指那些可能由多个值构成的对象

属性和方法

引用对象由属性和方法两部分组成，其中存储数据的称为属性，而提供操作的函数称为方法，方法也是属性的一种

var o = {
p1:1, //属性
p2:"zhuo", //属性
method1:function(){
//代码片段
}
}

变量地址中存储的是对象的引用地址，即指针

JavaScript不允许直接操作对象的内存空间，在操作对象时，实际上是在操作对象的引用

摘自：https://www.cnblogs.com/embrace-ly/p/10659970.html

复制变量值

如果从一个变量向另一个变量复制基本类型的值，会新分配一个地址存储该值，两个变量存储地址相互独立，相互没有影响，修改其中一个变量的值不会影响另一个的值

如果从一个变量向另一个变量复制引用类型的值，也会新分配一个地址存储该值，但是这个值是一个指针，指向实际的存储在堆中的对象，两个变量会同时引用一个对象，改变其中一个变量，会影响另一个变量

函数形参

函数知识参考函数

函数会把函数外部的值复制给函数内部的形参

基本类型的变量从函数外部传到函数内部改变值后外部不受影响，但是引用类型在函数内部改变对象内的属性值，外部变量也会受影响，因为外部变量和内部变量引用的是同一个堆中的对象

作用域链

当代码执行时，会创建变量对象的一个作用域链，作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问

作用域链的末端始终是当前执行的代码所在环境的变量对象

标识符解析是沿着作用域链一级一级地搜索标识符的过程，搜索过程从作用域链的末端开始，然后逐级回溯，直到找到标识符为止

直观表现为当执行函数时，外部变量与局部变量命名相同是，总是先从函数内部找寻局部变量

var n = 4; //全局变量
function func(){
let n = 6 //局部变量
console.log(n) // 6
}

延长作用域链

使用with，try...catch等会延长作用域链

无块级作用域

例子：
if(true){
var color = "blue"
}
alert(color) //blue

在C等语言中，这样做肯定报错，但在javaScript中并不会，javascript作用域以函数级为单位，只要在同一个函数中（即在一个函数环境中），那么该变量都可以用

定义变量时如果不加 var ，而是直接使用，那么他会加入到全局变量中

执行环境

全局执行环境

函数执行环境

进入某个函数后的环境

变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部,当前作用域的所有变量的声明提升到程序的顶部
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
不建议

数据类型

Undefined类型

如果变量声明但未初始化，那么这个值为undefined，他的类型也为undefinded

Null类型

表示一个空对象指针

如果一个变量想用于存储引用变量，那么使用null赋值，如果是基本变量，那么undefined比较好

undefined == null // true

undefined 派生自null值

Boolean类型

只有两个字面值 : true|false

Number类型

Number类型可以用来表示整数和浮点

进制

十进制表示

55

八进制表示

067

以0开头，数字从0-7

十六进制表示

0x1f

以0x开头，数字从0 - f

二进制表示

0b1110

以0b开头，数字从0-1

特殊值

Infinity

超出 1.7976931348623157E+103088 的数值即为Infinity，小于 -1.7976931348623157E+103088 的数值为无穷小。

NaN

任何数值与NaN计算都会返回NaN值

NaN == NaN //false NaN与NaN本身也不相等

isNaN()函数能判断这个值是不是NaN

最大最小表示数

Number.MAX_VALUE

1.7976931348623157E+103088

Number.MIN_VALUE

-1.7976931348623157E+103088

超出这个范围数值会自动转为 Infinity 或者 -Infinity，这个值不能参与下一次运算了

其他

科学计数法

1.1123e7

表示 1.1123 * 10 ^7

默认情况下，ECMAScript会将小数点后面带6个0以上的浮点数转换为e表示法

浮点数可以省略 0.1 中的 0,简写为 .1 ,但是不推荐

浮点数计算会存在舍入误差问题，其他语言也有相同的毛病，切记此点

例子：0.1 + 0.2 = 0.30000000004

String类型

用于表示零或者多个16位Unicode字符组成的字符序列

var firstName="Zhuo"

使用单引号、双引号都行，但是必须配对

字符串中存在单双引号则需要使用转义符\'、\"表示

通过 .length获得字符串长度

字符串拼接，使用 + 拼接即可

模板字符串
let name = 'zzz';
let say= `My name is ${name}`;

& 即可以使用变量，也可以使用计算值比如： ${age + 2 )

引用类型

Object类型

Object其实就是一组数据和功能的集合

创建方式

var o = new Object()
o.name = "Zhuo"；
o.age = 25

var o = {
name:"Zhuo",
age:25
}