JavaScript 基础知识点整理

最新推荐文章于 2024-09-15 00:30:13 发布

^@Hu@^

最新推荐文章于 2024-09-15 00:30:13 发布

阅读量135

点赞数

分类专栏：前端 js 前端脚本文章标签： js 前端

本文链接：https://blog.csdn.net/qq_32530561/article/details/99974782

版权

前端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

前端脚本

1 篇文章 0 订阅

订阅专栏

JS基础

简介

JS能够改变HTML内容
JS能够改变HTML属性
JS能够改变HTML样式
JS能够隐藏显示HTML元素

Js同时接受双引号和单引号

使用

<script>标签
js函数和事件
- 函数是一种js代码块，在调用时执行
- 当发生事件时调用函数
head或body中的js
外部脚本
- 分离了html和代码
- 时html和js更易于阅读和维护
- 已缓存的js文件可加速页面加载

旧的js也许会使用type属性<script type="text/javascript">
type属性不是必需的。js是html的默认脚本语言
把脚本至于body元素的底部，可改善显示速度，因为脚本编译会拖慢显示
外部脚本不能包含script标签

输出

window.alert()写入警告框
document.write() 写入HTML输入
innerHTML 写入HTML元素
console.log() 写入浏览器控制台

document.write()仅用于测试

语句

JS程序
- 计算机程序时由计算机执行的一系列指令
- 在编程语言中，编程指令被称为语句
- js程序就是一系列的编程语句
JS语句
- 由值、运算符、表达式、关键字、注释构成
分号
- 分隔js语句
空白字符
- js会忽略多个空格
行长度和折行
- 为了到达最佳可读性，常常会把代码行控制在80个字符内
代码块
- js用花括号{…}组合在代码块中

在HTML中，js程序由web浏览器执行
js程序及js语句常被称为js代码
以分号结束语句不是必需的，强烈要求这么做

语法

js值
- 混合值-被称为字面量
- 变量-变量值，用于储存数据值
- 使用var关键字声明变量，=用于变量赋值
js运算符
- 算数运算符-计算值
- 赋值运算符-赋值
js表达式
- 值、变量、运算符的组合，计算结果是值
js关键字
- 用于标识被执行的动作
js注释
- 双斜杠//或/*与*/之间的代码被视为注释，被忽略，不执行
js标识符
- 标识符是名称
- 标识符用于命名变量及关键词、函数和标签
- 首字符必须是字母、下划线或美元符号
- 可以连接字母、数字、下划线或美元符号
- 数值不可以作为首字符
js对大小写敏感
js驼峰式写法
- js不能使用连字符-，它是为减法预留的
- 下划线写法，更倾向于驼峰式写法
字符集
- js使用Unicode字符集

注释

单行注释 //
多行注释 /*...*/
使用注释 阻止代码执行

注释常用于官方声明

变量

变量是储存数据的容器
类似代数
js标识符
- 变量必须以唯一的名称标识
- 唯一的名称称为标识符
- 通用规则
  - 可包含字母、数字、下划线、美元符号
  - 必须以字母开头
  - 也可以$和_开头
  - 名称对大小写敏感
  - 保留字无法用作变量名称
赋值运算符
- = 是赋值运算符，理解为把...赋值给变量
数据类型
- 文本值被称为字符串
声明变量
- 创建变量称为"声明"变量
- 变量默认无值，为undefined
- 用逗号隔开声明多个变量
- 再次声明变量，值不会丢失
算术

运算符

在运用于字符串时，+ 运算符被称为级联运算符
数字与字符串相加，结果将是字符串

算数

在算数运算符中，数被称为操作数

赋值

**=为ES7的实验部分，不建议使用

数据类型

数值、字符串值、数组、对象
js拥有动态类型
js只有一种数值类型
通过undefined清空变量
空值和undefined不一样
原始数据
- string
- number
- Boolean
- undefined
复杂数据
- function
- object

函数

函数名可包含字符、数字、下划线、美元符号
参数是局部变量
函数调用
- 事件发生
- js代码被调用
- 自动调用
为何使用函数：定义一次代码，可多次调用
局部变量在函数开始时创建，函数完成时被删除

对象

对象s是被命名值的容器
this引用该函数得"拥有者"
不使用()访问方法，返回函数定义
禁止将字符串、数值、布尔值声明为变量

事件

例子
- 页面加载完成
- 输入字段被修改
- 按钮被点击
js能够做什么
- 处理操作
  - 每当页面加载时应该做的事情
  - 当页面关闭时应该做的事情
  - 当用户点击按钮时应该被执行得操作
  - 当用户输入数据时应该被验证得内容
- 处理事件
  - html事件属性可执行js代码
  - html事件属性调用js函数
  - 向html元素分配自己得事件处理函数
  - 阻止事件被发送或被处理

字符串

.length返回字符串长度
\' \" \\ 单引号双引号反斜杠
字符串换行安全做法使用连接符+
字符串创建为对象会影响加载速度
=== 需要类型和值都相等
js对象无法进行比较

字符串方法

length 长度
indexof 查找
lastIndexOf 返回最后一次出现得索引未找到返回-1
search 无法设置第二个参数，indexof无法设置更大得索引值
slice 提取字符串
substring 和slice类似，不接受赋值索引
substr 类似于slice 第二个参数规定截取部分得长度
replace 替换字符串，返回新字符串，默认替换第一个匹配元素 /i 大小写不敏感 /g 全局替换
toUpperCase 大小写转换
concat 连接字符串
String.trim()删除两端空白符，ie8及以前不支持
charat 返回指定下标的字符串
charCodeAt 返回指定下标得unicode编码
split 字符串转为数组

js 数值

始终是64位浮点数
整数会被精确到15位
js字符串可以拥有数字内容，会尝试将字符串转为数值
NaN指示某个数字不合法，非数值，属于number类型
isNaN 判断是否合法
infinity 超出最大可能数范围返回，number类型

数值方法

toString 以字符串返回数值
toExponential 返回字符串值，四舍五入并使用指数计数法
toFixed 返回字符串值，指定位数小数
toPrecision 返回字符串值，包含指定数字
valueOf 以数值返回数值
变量转换为数字，js全局方法
- Number 可用于时间
- parseInt 只返回收个数字
- parseFloat 只返回首个数字
数字属性不可用于变量，如Number.MAX_VALUE

数组

数组是一种特殊的js对象
属性和方法
- length属性返回数组长度
- Array.foreach 返利数组
- push 添加新元素
数组和对象区别
- 数组使用数字索引
- 对象使用命名索引
使用规则
- js不支持关联数组
- 元素名为字符串应使用对象
- 元素名为数字应使用数组
避免new Array()
识别数组
- Array.isArray()
- x.constructor.toString().indexOf(“Array”) > - instanceOf Array

数组方法

toString 数组转换为逗号分隔得字符串
join 数组元素结合为一个字符串
pop 删除最后一个元素
push 结尾处添加新元素
shift 删除首个数组元素，并把其他元素位移至更低的索引
unshift 开头添加新元素，反向位移旧元素
delete 运算符删除元素
splice 删除元素、拼接新元素
concat 合并数组
slice 裁剪数组
自动 tostring

数组排序

sort 排序
reverse 反转数组
Math.max.apply 查询最大值
Math.min.apply 查询最小值

数组迭代方法

Array.forEach 为每个元素调用一次函数
Array.map
- 通过对每个数组元素执行函数来创建新数组
- 不会对没有值得数组元素执行函数
- 不会更改原始数组
Array.filter 创建包含通过测试得数组元素得新数组
Array.reduce
- 在每个数组元素上运行，以生成或减少单个值
- 在数组中从左到右工作
- 不会减少原始数组
Array.reduceRight
- 在每个数组元素上运行函数，以生成减少单个值
- 从左到右工作
- 不会减少原始数组
Array.every 检查数组值是否通过测试
Array.some 检查某些数组值是否通过了测试
Array.indexOf 搜索元素值并返回器位置
Array.lastIndexOf 从数组结尾开始搜索
Array.find 通过测试函数得第一个数组元素得值
Array.findIndex 返回通过测试函数得第一个数组元素得索引

日期

只有一个参数指定为毫秒
时间存储为毫秒
tostring 自动转换为字符串
toUTCString 转换为UTC字符串
toDateString 更易读时间字符串

日期格式化

日期格式
- ISO日期 2018-01-01 国际标准
- 短日期 01/01/2018或2019/01/01
- 长日期 Feb 19 2018或 19 feb 2019
- 完整日期 Mondy February 25 2015

UTC 称世界同一时间、世界标准时间、国际协调时间
在某些浏览器中，不带前导零得月和日会产生错误

获取日期方法

getDate 以数值返回天 1-31
getDay 以数值返回周名 0-6 0周日
getFullYear 获取四位得年 yyyy
getHours 获取小时 0-23
getMilliseconds 获取毫秒
getMinutes 过去分 0-59
getMonth 获取月 0-11 0是1月
getSeconds 获取秒
getTime 获取时间从1970年1月1日至今
getUTCXXX 返回UTC格式

设置日期方法

setDate 以数值1-31设置
setFullYear 设置年可选月和日
setHours 设置小时 0-23
setMilliSeconds 设置毫秒 0-999
setMinutes 设置分 0-59
setMonth 设置月 0-11
setSeconds 设置秒 0-59
setTime 设置事件从1970年1月1日至今得毫秒数

Math对象

round 四舍五入最接近得整数
pow 求幂
sqrt 平方根
abs 绝对值或正值
ceil 上舍入最接近得整数
floor 下舍入最接近得整数
sin 返回角得正弦
cos 返回角得余弦
acos 反余弦值
asin 反正弦值
atan 以介于-PI/2与PI/2弧度之间得数值来返回x得反正切值
atan2 返回从X轴到点xy得角度
tan 正切
min/max 最小值最大值
random 0-1之间得随机数
常量
- E 欧拉指数
- PI 圆周率
- SQRT2 2得平方根
- SQRT1_2 1/2得平方根
- LN2 2得自然对数
- LN10 10得自然对数
- LOG2E 以2为底e得对数，约等于1.414
- LOG10E 返回以10为底e得对数，约等于0.434

随机

Math.random 返回0到1(不包含)之间得随机数
Math.floor 返回随机数

布尔值

不具有“真实”值得即为false
- 0 false
- -0 false
- “” false
- undefined false
- null false
- false false
- NaN false

判断

if/else
switch

循环

for 多次循环遍历代码块
- 第一个语句在开始之前执行
- 第二个语句定义循环得条件
- 第三个语句代码执行后执行
for/in 遍历对象属性
while 当指定条件为true时循环代码块
do/while 指定条件为true时循环代码块
- 代码会先执行一次，然后判断条件
break 跳出循环
continue 中断此次循环，开始下一个循环

类型转换

5种包含值数据类型
- 字符串 string
- 数字 number
- 布尔 Boolean
- 对象 object
- 函数 function
3种对象类型
- 对象 object
- 日期 date
- 数组 array
2种不能包含值得数据类型
- null
- undefined
constructor属性
- 返回构造器函数
转换
- String/toString 转为字符串
- Number 转为数值

NaN得数据类型是数值
数组得数据类型是对象
日期得数据类型是对象
null得数据类型是对象
未定义的变量得数据类型是undefined
尚未赋值得变量得数据类型是undefined
typeOf是运算符

正则表达式

构成搜索模式(search pattern)得字符序列
/pattern/modifiers 搜索词/修饰符
搜索方法
- search
- replace
test 搜索字符串，返回true或false
exec 搜索字符串，返回字符串

作用域

局部未用 var声明，会自动变为全局变量
除非有意为之，否则请勿创建全局变量
全局变量或函数能够覆盖window变量或函数
任何函数，包括window对象，能够覆盖个人得全局变量和函数
变量的有效期始于被创建时
局部变量再函数完成时被删除
全局变量在页面关闭时被删除

声明提升

可以在变量声明之前使用它
Hosting(提升)是js将所有声明提升到当前作用域顶部得默认行为
let const 声明得变量和常量不会被提升
只有声明会被提升，初始化不会被提升
严格模式下，必须在顶部声明

Use Strict

js1.8.5 中的新指令
在严格模式中，无法使用未声明的变量
浏览器支持
- IE10以后
- Firefox 4以后
- Chrome 13以后
- Safari 5.1以后
- Opera 12以后
在脚本或者函数开头添加"Use Strict",全局作用域
在函数中，拥有局部作用域
只会对理解其含义的编译器产生影响
为什么要使用严格模式
- 更容易编写“安全“的js
- 把可接受的”坏语法”转变为真实的错误
- 普通JS中，错打变量名会创建新的全局变量。严格模式下，将抛出错误，防止意外创建全局变量
- 在普通Js中，向不可写属性赋值，不会返回错误，在严格模式下，向不可写的、只能读取的、不存在的属性赋值或者向不存在的变量或对象赋值，将抛出错误
严格模式下不允许事项
- 不声明变量下使用变量
- 不声明对象情况下使用对象
- 删除变量
- 删除函数
- 重复参数名
- 八进制数值文本
- 转义字符
- 写入只读属性
- 写入只能获取的属性
- 删除不可删除的属性
- 字符串 eval 不可用作变量
- 字符串 arguments 不可用做变量
- with 语句不被允许
- 不允许 eval()在其被调用的作用域中创建变量
在函数调用中，this是全局变量，在严格模式下，为undefined
对未来保障，不允许使用未来预留的关键字
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield

Use Strict指令只能在脚本或函数的开头被识别

this 关键字

this 指的是所属的对象
- 在方法中，指所有者对象
- 单独情况下，指全局对象
- 函数中，指全局对象
- 函数中，严格模式下，this是undefined
- 事件中，this指接收事件的元素
显示函数绑定
- call apply方法
- 将另一个对象作为参数调用对象方法

关键字let

ES2015引入了两个关键字 let、const
let 块作用域变量、const 常量
浏览器支持
- 浏览器年数
chrome 49 2016/3
IE/Edge12 2015/7
Firefox44 2015/1
Safari 11 2017/9
Opera36 2016/3

- 浏览器	年数
chrome 49	2016/3
IE/Edge12	2015/7
Firefox44	2015/1
Safari 11	2017/9
Opera36	2016/3

let有块作用域，var没有块作用域
let和var都有函数作用域
let和var都有全局作用域
let不允许重新声明var
相同作用域或者相同块中，不允许重新声明let变量
var 不允许重新声明let变量
let 可以重新声明变量
var 可以提升到顶端，let声明不会提升到顶端
在let变量声明之前只用会报错。

关键字const

块作用域下，const和let相似
const在声明时必须赋值
赋值原始值，原始值不允许更改
常量对象可以更改属性，但不能重新赋值
常量数组可以更改，但不能重新赋值
浏览器支持
- 浏览器年数
chrome 49 2016/3
IE/Edge11 2013/10
Firefox36 2015/2
Safari 10 2016/9
Opera36 2016/3

- 浏览器	年数
chrome 49	2016/3
IE/Edge11	2013/10
Firefox36	2015/2
Safari 10	2016/9
Opera36	2016/3

在同一作用域或块中，不允许将let和var变量重新声明或赋值给const
在同一作用域或块中，不允许为已有的const变量重新声明或赋值
不同的作用域中，const允许被重新声明
const声明不会被提升到顶端，必须在使用前声明

调试

浏览器调试器
设置断点
- 在浏览器调试器中设置断点
- 在调试器打开的情况下，使用代码debugger关键字

样式指南与代码约定

代码约定
- 指编程的样式指导方针，原则：
  - 变量和函数的命名和生命规则
  - 使用空格、缩进和注释的规则
  - 编程习惯和准则
- 确保质量
  - 改善代码可读性
  - 提升代码可维护性
变量名
- 使用驼峰式大小写
- 名称以字母开头
运算符
- 始终在运算符周围及逗号之后添加空格
代码缩进
- 始终对代码块缩进使用4个空格
- 缩进不要使用制表符，不同编译器对tab的解释也不相同
语句规则
- 始终以分号结束单条语句
- 针对复杂语句
  - 在第一行的结尾处写开括号
  - 在开始号前使用一个空格
  - 在新行上写闭括号，不带前导括号
  - 不要以分号来结束复杂语句
对象规则
- 把开括号与对象名放在同一行
- 把每个属性与其值之间使用冒号加一个空格
- 不要在最后一个属性值后面写逗号
- 在新行上写闭括好，不带前导空格
- 始终以分号结束对象定义
行长度小于80
命名约定
- 变量和函数名以驼峰大小写命名
- 全局变量是用大写
- 常量使用大写
- html5中属性以data-开头
- CSS 在property-names使用连接符
- Hyphens被视为减法运算符，js命名不允许连接符
- 下划线连接
- 帕斯卡命名
- 驼峰式命名
html加载外部文件，type不是必须
访问html元素大小写敏感
html扩展名 .html
css .css
js .js
使用小写文件名
性能
- 大部分规则对程序影响很小
- 缩进和额外的空格对小段脚本不重要
- 优先考虑可读性，缩小更大型的生产脚本

最佳实践

避免全局变量
- 全局变量和函数可被其他脚本覆盖
- 使用局部变量替代，使用闭包
始终声明局部变量
- 变量应被声明为局部变量
- 局部变量必须通过var声明，否则变为全局变量
- 严格模式下不允许使用变量
在顶部声明
- 所有声明放在脚本或者函数顶部声明
  - 更整洁的代码
  - 提供查找局部变量的好位置
  - 更容易避免不需要的全局变量
  - 减少不需要的重新声明的可能性
初始化变量
- 更整洁的代码
- 在单独的位置初始化变量
- 避免未定义值
不要声明数值、字符串或布尔对象，会影响执行速度
请勿使用 new Object()
- 使用{}代替new Object()
- 使用“”代替new String()
- 使用 0 代替 new Number()
- 使用false代替new Boolean()
- 使用[]代替new Array()
- 使用 /()/代替 new RegExp()
- 使用function(){}代替 new Function()
自动类型转换
使用Parameter Defaults
- 调用时缺少参数，默认为undefined，最好是设置默认值
default 结束 switch
避免使用eval()
- 用于将文本作为代码运行

`常见错误`

意外使用赋值运算符
期望松散的比较
加法和级联
- 加法用于加数值
- 级联用于加字符串
js中数字均保存为64位的浮点数
字符串换行 反斜杠
错位分号
return语句进行换行
- 返回undefined，会被认为单独一句，所以不要换行
通过命名索引访问数组
- 不支持通过命名索引，使用数字索引
用逗号结束定义
Undefined不是null
期望块级范围

性能

减少循环中的活动
减少DOM访问
缩减DOM规模
避免不必要的变量
延迟js加载
避免使用with

ECMAScript

特性
- “Use Strict”指令严格模式执行
- String.trim() 删除字符串两端空格
- Array.isArray() 检查对象是否为数组
- Array.forEach() 为每个数组元素调用一次函数
- Array.map() 为每个元素调用函数
- Array.filter()为每个元素调用函数，返回新数组
- Array.reduce() 确定数组中所有数的总和
- Array.reduceRight() 确认数组中所有数的总和
- Array.every() 检查是否所有值搜超过18
- Array.some() 检查某些值是否超过18
- Array.indexOf() 查找某个元素值并返回其位置
- Array.lastIndexOf() 从数组结尾处开始检索
- JSON.parse() 将文本转化为js对象
- JSON.stringify() js对象转换为文本
- Date.now() 返回毫秒数
- 属性Getter和Setter 定义对象方法
- 新的对象属性和方法
  - Object.defineProperty() 定义对象属性或更改属性的值和或元数据
语法更改
- 对字符串的属性访问[]
- 数组和对象字面量中的尾随逗号
- 多行字符串字面量
- 作为属性名称的保留字
对字符串的属性访问
- charAt 返回字符串指定索引
  -不允许尾随逗号
多行字符串
- \ 方法没有普遍支持
- 用 + 连接符
允许保留字作为属性名称

ECMAScript

let 允许使用块作用域声明变量
const 允许声明变量
指数运算符 取幂运算符将第一个操作数提升到第二个操作数的幂
默认参数值 允许参数有默认值
Array.find() 返回通过测试的第一个元素的值
Array.findIndex() 返回通测试的第一个元素的索引
新的数字属性
- EPSILON
- MIN_SAFE_INTEGER
- MAX_SAFE_INTEGER
新的数字方法
- Number.isInteger() 检查是否是整数
- Number.isSafeInteger() 检查是否是双精度数的整数
新的全局方法
- isFinite() 参数为Infinity或NaN，返回false
- isNaN() 参数为NaN，返回true
箭头函数
- 用简短的语法编写函数表达式
- 箭头功能没有this，不适合定义对象方法
- 必须在使用前定义
- 使用const比var更安全，函数表达式始终是常量值

JSON

JSON是储存和传输数据的格式
JSON在数据从服务器发送数据到网页时使用
什么是JSON
- JSON指JavaScript Object Notation
- JSON是轻量级的数据交换格式
- JSON独立于语言*
- JSON是“自描述的”且易于理解
JSOn语法来自JS对象符号语法，但JSON格式是纯文本
语法规则
- 数据是名称/值对
- 数据由逗号分割
- 花括号保存对象
- 方括号保存数组