第一部分学习总结_第一部分总结。-CSDN博客

本文链接：https://blog.csdn.net/Teal__/article/details/108445679

学习第一部分总结

前端的发展史
- 了解重要的历史节点
- 重点掌握WEB1.0~WEB3.0的进化史
  - 动态页面
  - 前后端分离
  - WebApp(NativeApp)
  - 全栈开发
  - …
浏览器常用的内核
- Webkit
- Gecko
- Trident
- Blink
- …
js三部分
- ECMAscript
- DOM
- BOM
变量个变量定义
- 变量就是起了一个名字，用来存储(指向)或者代表某一个值得(他是一个虚拟的东西，值才是实在的东西)
- 命名规范
  - 严格区分大小写
  - 驼峰命名法
  - 基于"_、$、数字、字母"命名，但数字不能作为开头
  - 不能使用关键字及保留字
- 定义变量的几种方式
  - var
  - let
  - const =>定义的变量，变量指向不能随意被更改（理解为定义的是一个常量）
  - function
  - class
  - import
js中的数据类型**
- 基本数据类型（值类型 / 原始值）
  - number
  - string
  - boolean
  - null
  - undefined
  - symbol
  - bigint
- 引用数据类型
  - 对象数据类型
    - {} 普通对象
    - [] 数组对象
    - /^$/ 正则对象
    - 日期对象
    - Math数学对象
    - …
  - 函数数据类型
数据类型的检测**
- typeof
  - 语法 => typeof[value]
  - 返回值首先是字符串其次包含对应的类型 =>typeof typeof [] ===“string”
  - typeof null === “object”
  - 数组、正则、普通对象最后检测出的结果都是"object",所以基于此操作，无法细分对象
- instanceof
- constructor
- Object.prototype.toString.call()
数字类型详解**
- NaN 和 isNaN
  - typeof NaN===“number”
  - NaN !==NaN
  - 基于isNaN检测值是否为有效数字（检测的值不是数字类型，需要默认基于Number()把其转换为数字类型，然后在检测）
- 把其他类型的值转换为数字类型
  - Number([value])
    - 字符串转换为数字：字符串是0，字符串中只要出现任意一个非有效数字字符，结果都为NaN
    - 布尔转换为数字：true是1 false是0
    - undfined转换为数字：NaN
    - symbol不能转换为数字：否则会报错
    - 对象(或者函数)转换为数字，首先都是调用toString先转换为字符串，然后在转换为数字
      - 普通对象转换为字符串结果是："[object object]"
      - 数组转换为字符串结果是：用逗号分隔数组中的每一项
        [] =>" "
        [10] =>“10”
        [10,20] =>“10,20”
      - 正则或者函数转换为字符串和原始看的内容类似
  - parseInt([value])/parseFloat([value])
    - 首先把[value]值变为字符串，其次从字符串最左侧开始找，把找到的有效数字字符串转换为数字，遇到一个非有效数字的字符串则结束查找（不论左侧是否还有没有数字，都不在查找了）
    - Number(true) =>1
    - parseint(true) =>NaN
    - Number(‘12px’) =>NaN
    - parseInt(‘12px’) =>12
  - 一些常用的属性方法
    - 数字.toFixed(N) 保留小数点N位，返回的结果是一个字符串

Infinity 无穷大
- …

字符串类型详解**
- 把其他类型转换为字符串
  - string([value])
  - [value].toString()
- 加号在js中除了数学运算，还有字符串拼接
  - 减乘除和取余都一定是数学运算（不是数学类型要转换为数字类型，然后在运算）
  - 加号两边的任意一边出现字符串，则为字符串拼接（如果加的是一个对象，其实最后也是字符串拼接，因为对象转换为数字，是转换为字符串的）
    - 1+‘1’===‘11’
    - 1+[10]===‘101’
  - 基于ES6的模板字符串（反引号或者叫两个撇）可以方便字符串的拼接
```
//${}就是把一个变量的值或者一个js表达式运行的结果，拼接到模板字符串中
let n=10;
let str=`N的值是：${n}`;
console.log(str);// =>"N的值是：10"
```
布尔类型详解**
- 把其他数据类型转换为布尔类型
  - 规律：只有 "0、NaN、null、undefined、空字符串"五个值最后变为FALSE,其余都会转换为TRUE
  - Boolean([value])
  - ![value]转换为布尔再取反
  - !![value] 转换为布尔
  - 在条件判断中，最后的结果都是转换为布尔
  - …
对象数据类型详解**
- 对象的组成：零到多组键值对组成（key:value => 属性名：属性值），每一组之间用逗号分隔
- 关于对象键值对的操作（增删改查）
  - 对象的属性名不能重复
  - 对象.属性名 =>这样的操作属性名不能为数字
  - 对象[属性名] =>obj[‘n’]和obj[n]是不一样的，前者属性名就是n,后者是吧n变量存储的值作为属性名拿过来操作的
```
let n=13;
let obj={
	n:20;
};
obj['n']=30;
console.log(obj);// =>{n:30}
obj[n]=10;// 相当于obj[13]=10
console.log(obj);// =>{n:30,"13":10}
```
基本数据类型和引用数据类型的区别 ***
- 堆内存（HEAP）和栈内存（STACK）
- 栈内存
  
  ESCtack 执行环境栈
  
  EC(G) 全局执行上下文
  
  VO(G) 全局变量对象
  
  let a=12
  - 创建12这个值，存放到栈内存中（栈内存是用来执行代码和存储基本数据类型的）
  - 创建变量a存储到VO(G)
  - 最后让a指向12这个值（赋值的意思 =>值得指向）
- 堆内存
  - let obj ={xxx:“xxx”}
    - 创建对象值（引用数据类型不能直接存储到栈内存中）
      - 创建一个堆内存，有一个16进制地址（如：AAAFFF000）
      - 把对象中的键值对存储到堆中
      - 把堆内存得地址存放到栈内存中，供变量指向
    - 后期obj.xxx得所有操作，都是基于地址找到对内存，从而来操作堆内存中的内容
DOM的一些操作
- document.getElementById
- document.body
  - js中获取的元素都是对象数据类型的（有自己对应的堆内存，堆内存中存储者很对内置的属性和方法，这些属性方法就是操作DOM元素的）
    - id
    - className
    - tagName
    - innerHTML
    - innerText
    - style =对象操作当前的元素的”行内样式“
    - onclick
    - …
  - context.getElementsByTagName
    - 获取到的是一个伪数组(类数组)元素集合 HTMLCollection
    - 操作起来和数组类似（基于索引获取到某一项以及循环操作等）
js中常用的操作语句**
- 判断语句
  - if 、else、if、else
  - 三元运算符
    - 语法：条件？成立：不成立
    - 基于null/undefined占位
    - 多个事情基于括号包起来、逗号分隔
    - 三元嵌套
  - switch case
    - 每一种 case都是===判断
    - == 和===的区别
  - 循环语句
    - for循环：指定循环的次数或者遍历数组
      - 四部操作
      - break
      - continue
    - for in 循环：变量对象中的键值对的
      - 优先按照从小到大遍历数字属性
    - …
js中常用的输出方式
- console
  - .log
  - .dir
  - .table
  - .time / .timeEnd
  - .wran
  - …
- 浏览器弹出窗口（输出的结果都会变为字符串）
  - alert
  - confirm
  - prompt
- 向页面中输出内容（输出的结果都会变为字符串）
  - document.write
  - 元素.innerHTML
  - 元素.innerText
  - …