五、一周综合复习 2022-06-29 2022-09-13new

JS的组成

ECMAscript 定义了整个js的语法
老语法规范：ES3-ES5
新语法规范：ES6-
DOM
提供一些方法和属性让JS操作页面中元素
getElementById
BOM
提供一些方法操作浏览器

JS常用的数据类型

基本数据类型/值类型
- number：数字、NaN
- string：单引号双引号反引号
- boolean
- null
- undefined
引用类型
- object：
  {} 普通对象
  [] 数组对象
  / / 正则对象
  math数学函数对象
  日期对象
  类数组对象：通过getElementsByTagName得到一个集合类数组对象
- function

浏览器常用内核

webkit
谷歌chrome、safari、欧鹏v14+、手机端浏览器、PC大部分国产浏览器
gecko
火狐
presto
欧鹏v14-
trident
IE
blank?

数据类型之间的区别

基本数据类型按值操作
引用类型操作的是堆内存的空间地址

常用的关键字和保留字

关键字
- break
- continue 当前本轮循环结束下轮循环继续
- if
- else
- for
- var / let(es6新语法规范中已经由保留字变为关键字) / const(es6 保留字-> 关键字) / function / class(es6 保留字-> 关键字) / import(es6 保留字-> 关键字) / export(es6 保留字-> 关键字)
- instanceof
- typeof
- this
- return
- switch
- case
- do
- while
- delete
- new
  ...
保留字（后台里经常用，未来有一天可能会成为关键字）
- boolean
- float
- int
- double
- long
- char（后台里定义字符）
- debugger
  ...

JS中创建变量的几种常用方式

var / let：创建变量
const：创建常量
function：创建函数
class：创建类
import：模块导入

symbol不是创建变量的方式，而是数据类型，创建一个变量等于Symbol()：var symbol2 = Symbol()

浏览器中常用的输出方式

1、console 在控制台输出

console.log
console.dir
dir输出一个对象的详细键值对信息
console.table
把一个多维json数组在控制台按照表格方式输出

console是什么

首先，console是个对象，log、dir、table、debug、time、timeEnd等方法都是它的一个属性名
对象.属性名
“.”前为对象， “.“后为属性名
同时，函数执行时才会加()，所以log、dir、table等也是方法
console.log相当于：找到console这个对象log这个属性对应的属性值，是个方法，把这个方法执行，实现想干的活

typeof console
=> "object"

在控制台console.dir(console)可以查看console的所有属性名，可以在MDN查各个属性名的作用，最接近官方文档的参考手册https://developer.mozilla.org/zh-CN/

2、浏览器窗口弹窗 alert/confirm/prompt

（内置，不好看，在项目中不常用）
三种结果输出方式必先经过toString转换为字符串；
三种方式都会阻断当前JS代码的执行，只有当窗口关掉，JS才会继续运行。

alert(弹出框)

alert(1) // => '1'
alert({name: 'xxx'}) // => [object Object]   toString转换为字符串

弹出窗口不关，后面js代码不会执行

confirm(确定和取消：选择型弹框)

confirm('确定要删除吗？')

prompt(在confirm基础上多了一个输入框)

prompt('确定要删除吗？请写出删除原因')

3、document.write 在页面中写入信息

和alert一样，输出的结果都是字符串，经过toString

document.write({name:'xxx'}) // =>[object Object]

多维数组

[10,12] // 一维数组
[10,{name:“xxx”}]  // 二维数组 =>多维数组
[12,[{xxx:“xxx”}]] // 三维数组 =>多维数组
{name: 'xxx'} // 一维对象
{name: [12,13]} // 二维对象
{ // 五级对象
  name: {
    xxx: {
      xxx: {
        xxx: {

             }
           }
         }
       }
}
// 以后：数组 多维对象的深度克隆和浅度克隆 一般最多三四级

// function也是一种数据类型，对象中属性名的属性值可以是任何一种数据类型，如果还是一个函数或者对象这种引用类型，就变成了多维对象或多维数组
{
  fn: function() {
  }
}]

js放在head和body尾部区别

Js经常放到BODY最后面，是为了保证页面结构加载完成才去做这些事情。
Js放到头部，如果Js中代码需要获取元素来操作元素，则会获取不到。

如果非要放在头部可以使用window.οnlοad=function(){}，当页面中的结构和内容都加载完成才会执行{}里面的代码，只能用一次；
JQ中也有一个类似的方法 $(document).ready(function(){})。

注：$(document).ready和window.οnlοad区别
1、
$(document).ready(function(){})：当DOM结构加载完成就会执行，监听的是DOMCententLoaded事件（DOM结构加载完成就会触发执行）
window.οnlοad=function(){}：所有DOM结构以及内容都加载完成才会执行
所以$(document).ready一定会比window.οnlοad早先触发
2、
$(document).ready在页面当中可以用多次，window.οnlοad只能用一次
$(document).ready()实现的原理是DOM的二级事件绑定（可以执行多次）
window.οnlοad使用的是DOM零级事件绑定，在同一个页面中只能使用一次

<head>
<=script>
window.onload=function(){
  JS代码
}
</=script>
</head>

数据类型的区别（堆栈底层机制）

浏览器在内存中分配一块内存 => 栈内存（还有一种概念，叫作用域）
1、用来执行JS代码
2、用来存储变量和基本数据类型的值

对象的进一步理解

var name=10;
var obj ={
name:“小王”
};
console.log(obj.name);//输出小王
console.log(obj[“name”]);//输出小王
console.log(obj[name]);//相当于obj[10] => 输出undefined

var name =“小王”
var obj={
name:name,
name,//es6中的简化,相当于name:name
}

for in 来遍历对象中的属性名
var obj={
name:“小王”,
age:“18”,
1:10,
2:20,
3:30
}
for(var key in obj){
console.log(“属性名:”+key+“属性值:”+obj[key])
}key是用来输出当前obj中的所有属性名,并且从属性名为最小的数字开始,而obj[key]是输出所有的属性值

自定义属性的深层理解

前期把一些值存储到自定义的属性上,后期需要用到的时候,直接从属性上获取这些值即可

Number() ParseInt()

isNaN() 遇到值不是数字，调用Number()转换为数字

continue break

continue：结束本轮循环
break：结束所有循环
但无论是continue还是break，位于其后面的代码都不执行了