Javascript-basic #

计算机语言 --> 人与计算机之间沟通交流的语言

编程语言 --> 定义计算机程序的形式语言

编程语言特点：

• 数据和数据结构
• 指令及流程控制
• 引用机制和重用机制
• 设计哲学

Js发展史 #

Js的组成 #

ES ------> 定义语言规范

DOM -----> 用于操作文档的API

BOM ------> 用于操作浏览器的API

js基础 (BOM、DOM)
js高级 底层、v8 、 浏览器底层、内存管理、手写源码

ECMAScript 1997 ---至今

浏览器内核 指的就是浏览器排版引擎 js代码由js引擎来执行

为什么需要js引擎

高级语言都需要转成最终的机器指令来执行 js无论是交给浏览器或者Node执行，最后都需要被CPU执行 但CPU只认识自己的指令集 因此需要js引擎来帮我们把js代码翻译成为CPU指令来执行

运行引擎 #

SpiderMonkey 第一款JS引擎，由Brendan Eich开发 (js作者) Chakra 微软开发用于IT浏览器 JavascriptCore webkit中的引擎 apple公司开发 V8

WebCore 负责HTML解析、布局、渲染等相关的工作 JavascriptCore 解析、执行js代码

Js编写方式 #

<noscript>元素 被用于给不支持Js的浏览器提供替代内容 js编写注意事项

• script元素不能写成但标签
• 省略tpye属性
• 加载顺序 自上而下的顺序

Js交互方式 #

• 1. alert函数 接受
• 2. console.log()
• 3. document.write('hello world')
• 4. prompt函数 var res = prompt() alert('内容是: ' + res)

Js语句和分号 #

----> js讲换行符理解成隐式的分号 (自动插入分号)

Js的注释 #

• 1. 单行注释
• 2. 多行注释
• 3. 文档注释

推荐插件 #

• ES7+ React/Redux/React-Native snippets

Js的变量 #

变量 --> 一个用于存放数值的容器 这个数组可以是数字、字符串或其他任意的数据 特点 ==> 存放的数值是可以改变的

变量命名规则

• 第一个字符必须为一个字母、下划线(_)、或一个美元符号($)
• 其他字符可以是字母、下划线、美元符号
• 不能使用关键字、保留字命名 参考MDN
• 变量严格区分大小写

命名规范

• 多个单词使用驼峰(小驼峰)标识
• 赋值 = 两边加上空格
• 语句结束加上分号
• 变量命名做到 见名知意

JS的基本数据类型 (7原始+1复杂类型) #

Number 、String 、 Boolean 、Undefined 、 Null(未知的值) 、 Object(复杂类型) 、BigInt Symbol (唯一的标识符)

console.log(null == undefined) true 因为在js中它们都表示一个未定义或空值 两者进行比较时 ==> 类型转化 js将两者视为同一类型的值(都是特殊的未定义值)

Number类型 #

• number代表整数、浮点数
• Infinity 代表 无穷大
• NaN(not a number) 代表一个计算错误

进制表示

 var num = 100 // 10进制
 var num2 = 0x100 // 16
 var num3 = 0o100 // 8
 var num4 = 0b100 // 2

数字表示范围

var max = Number.MAX_VALUE
var min = Number.MIN_VALUE

isNaN 用于判断是否不是一个数字

• 不是数字----> true
• 是数字----> false

String类型 #

引号使用 单引号、双引号、反引号、转义字符

var msg = 'you are the best \'\' is person'
console.log(msg)

Boolean 类型 #

一般用来表示真假

Undefined类型 #

只有一个值 undefined

Object类型 #

特殊的类型 通常称为引用类型和复杂类型 其他的数据我们通常称为原始类型 它们的值值只包含一个单独的内容(字符串、数字) Object 往往可以表示一组数据，是其他数据的一个集合

一个对象被初始化为空 在内存角度，在堆内存中创建一个真正的对象 如果不希望被创建 则可以赋值为null 在内存地址中为0x0 null ==> Boolean类型 为false

初始化为{}, ==> Boolean类型 , 为true

Null 类型 #

通常用来表示一个对象为空，所以通常在给对象进行初始化时，赋值为null

null与undefined的关系 undefined 通常只有在一个变量声明但未初始化时，默认值为undefined 一个变量准备保存为一个对象，但是这个对象不确定时，可以赋值为null

JS类型转换 #

显式类型转换优先级高于隐式类型转换

• Js中隐式转换的优先级原则
  1. 布尔值转数字
  2. 字符串转数字
  3. 对象转原始值 通过valueOf() toString()方法将对象转换为原始值

一个字符串和其他类型进行+操作 则自动转化为字符串类型进行拼接

var isAdmin = true 
var admin = isAdmin + ''  
console.log(typeof  admin) ;// string 

• 显式类型转换优先级规则
  1. Number()函数: 可以将任何类型的值转换为数字
  2. String()函数: 可将任何类型的值转换为字符串
  3. Boolean()函数:可将任何类型的值转换为布尔值

Number()中的规则

Boolean()中的规则

typeof 操作符 #

ECMAScript的类型系统是松散的 需要一种手段来确定任意变量的数据类型 typeof

对于一个值 typeof会返回下列字符串之一: undefined 表示值未定义 、Boolean 值为布尔值 string 值为字符串 、function 值为函数 object 值为对象或null、symbol 值为符号 、number 值为数字

运算符 #

算术运算符、赋值运算符、关系运算符、逻辑运算符

运算元 ---运算符应用的对象

一元运算符 + -

三运运算符 a>0 ? 1:0

算术运算符 #

1. 加法（+）：使用加法运算符可以将两个数相加。
2. 减法（-）：使用减法运算符可以从第一个数中减去第二个数。
3. 乘法（*）：使用乘法运算符可以将两个数相乘。
4. 除法（/）：使用除法运算符可以将第一个数除以第二个数。
5. 取模（%）：使用取模运算符可以计算两个数的余数。
6. 自增（++）：使用自增运算符可以将一个数的值增加 1。
7. 自减（--）：使用自减运算符可以将一个数的值减少 1。

++i-->它在先加 1 再返回该值。 i++-->它先返回该值，再加 1。

var i = 10;
console.log(++i); // 11

var i = 10;
console.log(i++); // 10

赋值运算符 #

1. 简单赋值（=）：使用简单赋值运算符可以将值赋给变量。

var a = 10;

2. 复合赋值（+=、-=、*=、/=、%=）：复合赋值运算符可以简化复杂的赋值运算。

Copy code
var a = 10;
a += 5; // a 的值现在是 15

下面是 JavaScript 中运算符的优先级列表，从高到低排列：

• 圆括号（()）
• 单目运算符（++、--、!、typeof）
• 乘法（*）、除法（/）和取模（%）
• 加法（+）和减法（-）
• 关系运算符（>, >=, <, <=, ==, !=）
• 逻辑运算符（&&、||）
• 赋值运算符（=、+=、-=、*=、/=、%=）

在运算时，如果有多个运算符，那么具有较高优先级的运算符会先被处理，再进行具有较低优先级的运算。可以使用圆括号来强制规定特定的运算顺序。

比较运算符 #

=== 和 ==的区别 #

== 在不相同类型下，会将运算元进行类型转换，然后再比较它们的值

=== 则不进行类型转换，只会在两个操作数类型和值都相等的情况下返回true

逻辑运算符 #

• &&（逻辑与）：返回两个操作数的逻辑与，如果两个操作数都为真，则返回真，否则返回假。
• ||（逻辑或）：返回两个操作数的逻辑或，如果两个操作数至少有一个为真，则返回真，否则返回假。
• !（逻辑非）：返回一个操作数的逻辑非，如果操作数为真，则返回假，否则返回真。

逻辑或的本质 #

脱离分支语句 单独使用逻辑或

1. 先将运算元转化为Boolean类型

2. 对转成的Boolean类型进行判断 如果为true就直接返回 (运算元的原类型)

3. 如果所有的操作数都被计算过(转化结果都为false),则返回最后一个操作数

顺序 左--> 右

逻辑与的本质 #

1. 拿到第一个运算元，将运算元转换成Boolean类型

2. 对运算元的Boolean类型进行判断
   如果为false 返回运算元(原始值) true, 查找下一个继续运算

分支语句 #

程序中分为三种不同的执行方式

• 顺序 ==> 上到下，顺序的执行代码
• 分支 ==> 根据条件判断，决定代码的分支
• 循环 ==> 让特定的代码重复执行

Js中常见的分支结构 #

• 1. if分支结构

if分支结构 单分支结构 if 多分枝结构 if...else.. if...elseif ...else..

• 2. switch分支结构

var btnIndex = 0;
switch (btnIndex){
  case 0:
  console.log(`111`)
  case 1:
    console.log(`222`)
  case 3:
    console.log(`333`)
    break;
  default:
    console.log(`final`)
}
// 若不加 break ，这个case的过程叫做  case穿透

循环语句 #

• 1. while循环

条件成立 ==> 执行代码块

不成立 ==> 跳出代码块

若条件一直为true，则产生死循环 尽量避免

• 2. do while循环

特点： 无论条件是否成立，do循环体都会先执行一次

var count = 0;
do {
 console.log('count: ' + count);
 count++;
}while (count<10);

• 3. for循环

var names =['a','b','c','d','e','f'];
for(var i = 0; i < names.length; i++){
 if(names[i] === 'd'){
   return i;
 }
}

循环控制 通常为2种

• break 中断 直接跳出去
• continue 跳过当前的条件 去执行后续的操作