js中基础知识大纲,了解记忆,总会有用到的地方
了解重要的历史节点
+ 重点掌握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]
+ 返回值首先是字符串,其次包含对应的类型 =>typeoftypeof[] ==="string"
+typeofnull==="object"
+ 数组、正则、普通对象的最后检测结果都是"object",所以基于此操作,无法细分对象
+instanceof
+constructor
+ Object.prototype.toString.call()
数字类型详解 **
+NaN和isNaN
+typeofNaN==="number"
+NaN!==NaN
+ 基于isNaN检测值是否为有效数字(检测的值不是数字类型,需要默认基于Number()把其转换为数字类型,然后再检测)
+ 把其它数据类型转换为数字类型
+Number([value])
+ 字符串转换为数字:空字符串是0,字符串中只要出现任意一个非有效数字字符,结果都是NaN
+ 布尔转换为数字:true是1false是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表达式运行的结果,拼接到模板字符串中
letn=10;
letstr=`N的值是:${n}`;
```
布尔类型详解 **
+ 把其它数据类型转换为布尔类型
+ 规律:只有“0、NaN、null、undefined、空字符串”五个值最后变为FALSE,其余都会转换为TRUE
+ Boolean([value])
+ ![value] 转换为布尔再取反
+ !![value] 转换为布尔
+----
+ 在条件判断中,最后的结果都是转换为布尔
+ ...
对象数据类型详解 **
+ 对象的组成:零到多组键值对组成的(key:value / 属性名:属性值),每一组之间用逗号分隔
+ 关于对象键值对的操作(增删改查)
+ 对象的属性名不能重复
+ 对象.属性名 => 这样操作属性名不能是数字
+ 对象[属性名] => obj['n']和obj[n]是不一样的,前者属性名就是n,候着是把n变量存储的值作为属性名拿过来操作的(假设n是100,此时相当于obj[100])
基本数据类型和引用数据类型的区别 *(很重要)
-数据检测内容
+ 堆内存(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、elseif、else
+ 三元运算符
+ 语法 条件?成立:不成立;
+ 基于null/undefined占位
+ 多个事情基于括号包起来,逗号分隔
+ 三元嵌套
+switchcase
+ 每一种case都是===判断
+ == 和 === 的区别
+ 循环语句
+for循环:指定循环次数或者遍历数组
+ 四步操作
+break
+continue
+forin循环:变量对象中的键值对的
+ 优先按照从小到大遍历数字属性
+ ...
JS中常用的输出方式
+ console
+.log
+.dir
+.table
+.time/.timeEnd
+.warn
+ ...
+ 浏览器弹出窗口(输出的结果都会变为字符串)
+ alert
+ confirm
+ prompt
+ 向页面中输出内容的(输出的结果都会变为字符串)
+ document.write
+ 元素.innerHTML
+ 元素.innerText
+ ...
函数(function)
一个处理事情的方法,例如:洗衣机就是一个函数
1.生产洗衣机
把洗衣服的操作的集成在一起
相当于一个函数:函数的目的就是把实现一个功能的代码进行封装,以后再想实现这个功能,我们只需要执行方法即可,无需再把代码写一遍 => “低耦合、高内聚”:减少页面中的冗余代码,提高代码的重复使用率
2.让洗衣机运行
执行函数
函数两部分:定义函数、执行函数(光定义函数是没有用的,只有把函数执行,才能起到对应的作用)
没有学不会的东西只要你肯努力
-----------------------------------------------------------------------------------努力成为:前端晨