js基础经典大纲

敲可爱的小cc
261 阅读6分钟

前端发展史 浏览器内核分类 JS三部分 变量和变量定义 JS中的数据类型 ** 数据类型的检测 typeof 数字类型详解 ** 字符串类型详解 ** 布尔类型详解 ** 对象数据类型详解 ** 基本数据类型和引用数据类型的区别 *(很重要) DOM的一些操作 ** JS中常用的操作语句 ** JS中常用的输出方式 函数（function） 前端发展史

  • 了解重要的历史节点
  • 重点掌握WEB1.0~WEB3.0的进化史
    • 动态页面
    • 前后端分离
    • WebApp（NativeApp）
    • 全栈开发
    • ...
  • 前端需要掌握的技术栈
  • ECMAScript3 / ECMAScript5 / ECMAScript6（每年6月份在版本6的基础上继续完善一版ES7~9） 浏览器内核分类
  • 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
      • null变为数字0
      • undefined变为数字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] ===110'
  • 基于ES6中的模板字符串（反引号 或者叫 两个撇）可以方便字符串拼接
    //=> ${} 就是把一个变量的值或者一个JS表达式运行的结果，拼接到模板字符串中
    let n=10;
    let str=`N的值是：${n}`;

布尔类型详解 **

  • 把其它数据类型转换为布尔类型
    • 规律：只有“0、NaN、null、undefined、空字符串”五个值最后变为FALSE，其余都会转换为TRUE
    • Boolean([value])
    • ![value] 转换为布尔再取反
    • !![value] 转换为布尔
    • 在条件判断中，最后的结果都是转换为布尔
    • ... 对象数据类型详解 **
  • 对象的组成：零到多组键值对组成的（key:value / 属性名:属性值），每一组之间用逗号分隔
  • 关于对象键值对的操作（增删改查）
    • 对象的属性名不能重复
    • 对象.属性名 => 这样操作属性名不能是数字
    • 对象[属性名] => obj['n']和obj[n]是不一样的，前者属性名就是n，候着是把n变量存储的值作为属性名拿过来操作的（假设n是100，此时相当于obj[100]） 基本数据类型和引用数据类型的区别 *(很重要) -数据检测内容 Alt text 堆栈练习题讲解

Alt text

Alt text

  • 堆内存（HEAP）和栈内存（STACK）
  • 栈内存
    • ECStack 执行环境栈
    • EC(G) 全局执行上下文
    • VO(G) 全局变量对象
    • let a = 12
      • 创建12这个值，存放到栈内存中（栈内存是用来执行代码和存储基本类型值的）
      • 创建变量a存储到 VO(G)
      • 最后让a指向12这个值 （=赋值的意思就是值的指向）
  • 堆内存
    • let obj = {xxx:'xxx'}
      • 创建对象值（引用数据类型不能直接存储到栈内存中）
        • 创建一个堆内存，有一个16进制地址（AAAFFF000）
        • 把对象中的键值对存储到堆中
        • 把堆内存的地址存放到栈内存中，供变量指向
      • 创建变量obj，存储到VO(G)
      • 让obj指向堆内存的地址 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
    • .warn
    • ...
  • 浏览器弹出窗口（输出的结果都会变为字符串）
    • alert
    • confirm
    • prompt
  • 向页面中输出内容的（输出的结果都会变为字符串）
    • document.write
    • 元素.innerHTML
    • 元素.innerText
    • ... 函数（function） 一个处理事情的方法，例如：洗衣机就是一个函数

1.生产洗衣机

把洗衣服的操作的集成在一起

相当于一个函数：函数的目的就是把实现一个功能的代码进行封装，以后再想实现这个功能，我们只需要执行方法即可，无需再把代码写一遍 => “低耦合、高内聚”：减少页面中的冗余代码，提高代码的重复使用率

2.让洗衣机运行

执行函数

函数两部分：定义函数、执行函数（光定义函数是没有用的，只有把函数执行，才能起到对应的作用）

avatar
文章
阅读
粉丝