JS从零开始

JS的构成

• ECMAScript：语言的核心（语法）
• DOM（文档对象模型）：Document Object Model，提供了一系列的应用程序接口（api），供我们开发者对DOM的添加删除修改等（说白了就是操作标签的）（网址栏上边的）
• BOM（浏览器对象模型）：Browser Object Model，客户端和浏览器端窗口操作的基础（操作浏览器窗口的），可以使用BOM对浏览器窗口进行访问和操作，比如移动窗口位置、返回历史记录等等，但是BOM没有一个成型的规范，但是所有的浏览器都支持。（操作大片窗口的）

    客户端渲染与服务器渲染的优缺点：

服务器渲染：1.服务器压力过大2.不能局部更新3.不利于团队合作

客户端渲染：1.服务器压力小2.可以局部更新3.有利于团队合作

html引入js的方法：

1.行内

2.内嵌script （可在任意位置，最好不在body外）

3.外部导入（外链）

声明变量

var、const、let的异同

var 声明（）关键词 声明变量

1.var 变量名=变量值；=是赋值操作，先有变量值再有变量名。

2.可以是任何类型

3. var可以重复声明变量名

let声明

1.let 变量名=变量值；=是赋值操作，先有变量值再有变量名。

2.可以是任何类型

3.变量名不能重复，不能重复声明

声明常量const

1.常量不可以被修改

2.常量必须赋值

3.不能重复声明

JS命名规范

1.变量名 区分大小写

2.字母、数字、下划线、$，不能以数字开头

3.不能使用关键词与保留。如let var=10;

4.语义化--汉译英

大驼峰BigApple  小驼峰bigApple  下划线命名法big_apple

注释

1.//单行注释

2./* */ 多行注释

JS的数据类型：

1.原始类型--7

number 数字，整数、小数、NaN(Not a number)

string 字符串 ''   ""   ``(es6新增---字符串模版）

boolean 布尔 false true

undefined 空 未定义

null 无 空

Symbol 唯一值

BigInt  大数

2.引用类型---11

1.number 数字

2.String 字符串

3.Array 数组

4.Object 对象

1

Symbol 唯一值

number

注意：小数相加的时候会出现精度问题，原因是运算的时候先将十进制转化为二进制计算再转化为十进制

NaN不能等于任何内容，包括自己

任何数字与NaN的计算结果都是NaN

相关运算

isNaN():判断是不是有效数字，是有效数字---false 不是有效数字---true

比较特殊的几个

Number():将其他类型转化为数字类型

1.遇到符号、字母....只要不是数字的转化为NaN

2.特殊 null---0 undefined---NaN true----1 false----0  " "---0 []----0

3.Symble会报错

4.遇见对象的的时候，先转化为字符串再转化为数字类型

装箱：原始类型---引用类型---原始类型

拆箱：引用类型---原始类型---引用类型

ParseInt() 与 ParseFloat()

1. ParseInt() 其他类型转化为number，整数部分

2. ParseFloat() 整数部分+小数部分

注：从左往右找，遇到不是数字的时候停止，如果找不出来就是NaN

toFixed() 保留几位小数，遵循四舍五入

JS能有效识别的最大最小整数，超过后计算失误，可用BigInt解决。

String（）将其他类型转化为字符串

无任何特殊情况，均在两侧加“”

Boolean()将其他类型转化为布尔类型

1.特殊：“”空引号，0，undefined,null,NaN----false

其余都为true

!!XXX----Boolean(XXX);

null和undefined区别；

undefined   1.声明变量未赋值。

                    2.获取没有的属性值

                    3.定义了形参，没有传实参，显示 undefine

                    4）函数没有写返回值，即没有写return，拿到的是 undefined。

                    5）写了return，但没有赋值，拿到的是 undefined。

null: 1.未来要存放引用类型的值，释放内存

        2.获取 DOM 获取不到的时候。

引用数据类型

Object{} 键值对 key:value,

var obj={

      属性名1：属性值，

      属性名2：属性值

       ......

}

属性值的获取：1.对象.属性名  2.对象["属性名"]

基本操作：增删改查

新增：新增一项，一般情况下key是String类型

也可为Symbol(),但symbol有唯一性，直接查询会为undefined，需进行

const Sym=Symbol("a") 还有数字

var obj={[Sym]:200,}

console.log(obj[Sym])//200

数字不能用点来访问

删除：1.删除值：obj.name=null;

2.彻底删除：delete obj.name;

修改

详细输出：console.dir();

弹窗：alert（）

带输入的提示框：prompt();

确定：confirm（）

typeof检测数据类型

//可检测number string boolean undefined bigInt symbol object

//特殊：null--object  function(){}--function

//两个及以上的typeof类型都是string

js运行机制

堆栈：栈内存（stack）放原始类型，给代码提供可执行的环境

堆内存（heap）放引用类型的值

条件语句和循环语句

if 语句

1.单向分支

if (表达式) {     

  code...

}

2.双向分支

if (表达式) {     

  code...

} else {     

  code...

}

3.多向分支if (表达式) {                                                                

  code...

} else if (表达式) {     

  code...

} else if (表达式) {     

  code...

} else {     

  code...

}

三元运算

表达式1？表达式2：表达式3

表达式1---判断语句  真----表达式1  假----表达式2

示例：

switch语句

switch (值) {

    case 可能的值: code....; break;

    //=>每一种情况结束都要设置break（以供当此条件成立并处理完事情后，通知代码不在向下执行）

    case 可能的值: code....; break;

    //每一种case情况都是基于 === 进行比较的（严格比较，需要保证数据类型的一致）

    case 可能的值: code....; break;

    case 可能的值: code....; break;

    default: code....; //=>等价于else，而且最后一个判断结束无需设置break

}

• 如果忘记写break，无论你是否满足case的要求，都会往下执行一直到遇到breake或者default结束；
• break 语句 结束整个循环
• continue 语句 结束当前循环
• return 语句 返回函数值（后面看）

//===  值相同且类型相同

//==值相同， 将字符串转化为数字，再进行判断

num--：先赋值，后减，最终num一定减1

num++：先赋值，后加，最后num一定加1

--num：先减，后赋值，最后num一定减1

++num：先加，后赋值，最后num一定加1

循环

for     while    do......while

for(表达式1（设置一个初始值）；表达式2（终止一个判断条件，满足继续循环，不满足停止循环）；表达式3（i差值）){

循环体（执行的语句）

}

示例：

while先判断后执行

while（判断条件）{

循环体

i++ i--等累加累减操作

}

do......while先执行后判断，最少执行一次

break  continue

//break 中断，结束循环，不再继续

//continue  跳过本次循环，进入下一次循环

===与==

===值和类型相同

== 先将不同的类型转化为相同的类型再比较，值相同

！= 不等于 （==相反值）！==（===相反值）

==***1.对象和字符串比较的时候，对象先转化为字符串再进行比较

2.对象和对象比较的时候，看引用地址

3.null==undefined，除此之外，null和undefined不等于任何数

和其余的比较都转化为数字进行比较

事件：  onclick  点击

            onmouseover 滑过

            onmouseout  滑出

！ && || 非与或

！ 非 取反

&& 与 都满足才为真

|| 或 只要有一个满足即为真

逻辑短路  判断出结果  后边不再执行

如

两种获取元素的方法

1.通过id获取一个元素 document.getElementById

2.通过标签名获取元素---集合（）类似数组，有下标和长度，没数组的方法

[可变].getElementBy TagName(xxx);

两种居中方法：

text-align:center:

margin: 0 auto;(常用)

XXX.innerHTML 查找中间内容

js实现奇偶行变色

css实现隔行变色

a.x的优先级高于a，所以先给a.x赋值，再给a进行赋值；

运算符优先级 - JavaScript | MDN

函数function

函数---代码块---优化操作

functiion 函数名（）{}

函数调用 在函数名后边加（）

如果fn()中没有传递实参，默认形参为undefined

return

1） 函数名() 被称之为 函数调用表达式 ， 表表达式的值就是函数的 返回值 。

2）在函数体内， return 右边的表达式（或变量、直接量）便是函数的返回值。

3）函数体内没写 return 或者 return 的右边是空的，默认默认会返回 undefined 。

4） return 除了设置返回值外，还可以结束函数的执行，return 之后的代码不会执行。

定义函数的三种方式

1.关键字 字面量function fn(){}

2.表达式---匿名函数----匿名函数具名化  var fn =function(){}

3.构造函数

var 函数名= new Function("函数体")；

var 函数名 = new Function('参数'，'函数体')

例如：

自调函数--自己调用自己--后边一定加分号

自调函数，只能自己调用自己

回调函数 一个函数当另一个函数的参数 callback

函数里边可以套函数

arguments

示例：求参数的最大 最小值 和 平均值

箭头函数

es6新增

var fn=function(){}----去掉function，变成箭头、小括号、大括号中间

//只有一个形参可以省略小括号

//只有一条语句可以省略大括号

//如果只有一条语句且语句为return，则可以省略return

//箭头函数不能使用arguments

//...展开运算，剩余运算

//剩余运算 将单个数变为数组

//展开运算 将数组变为单个

//箭头函数不能new，没有constructor

//箭头函数没有this，他的this指向作用域

函数的宿主环境----函数在哪里被调用  .caller .callee