JavaScript 由浅至深（总结版）

最新推荐文章于 2024-07-30 10:56:44 发布

L?z ^f my

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量206

点赞数 4

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/Luzahngfeng/article/details/105457461

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript 基础

js 简介

JavaScript 是编译脚本语言，与 Java 没有任何关系。

js 作用

用户交互
表单验证
网页特效

体验js

window.alert() 弹框
console.log() 控制台输出
document.write() 页面输出
prompt(“请输入信息”) 输入框

JavaScript 组成

ECMA Script 基本语法
DOM 文档对象模型
Bom 浏览器对象模型

JavaScript 书写位置

写在行内
写在标 script 签内
写在外部，利用 script 的 src 属性引入

js 语法

变量用关键字：var 声明
变量命名规则：有字母、下划线、数字、$、组成，不能以数字开头，不能是关键字或保留字，区分大小写。
变量命名规范：变量名必须有意义，遵循驼峰命名法
数据类型
- 简单数据类型：Number、String、Boolean、Undefined、Null
- 数值判断：isNaN() is not a number
类型转换
- 转数字：Number()
- 转String：toString()、String()、隐式转换：字符串拼接的时候
- 转Boolean: Boolean()

操作符

算数运算符：+、 -、 *、 /、 %
一元运算符：++、–
关系运算符：>、<、>=、<=、=== 、 !==
逻辑运算符：&&、||、！
赋值运算符：=、+=、-=、*=、/=

语句

表达式：有操作符和操作数组成，一个表达式可以产生一个值，有可能是运算、函数调用、也可能是字面量。表达式可以放在任意需要值的地方。
语句：可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序可以有很多个语句组成。

流程控制

顺序结构：从上到下执行的代码就是顺序结构，程序默认就是从上到下执行。
分支结构：根据不同的情况，执行对应的代码
- if … else … 语句
- if … else if … else … 语句
- 三元表达式：表达式1 ？表达式2 ：表达式3
- switch 语句
```
switch(expression){
    case 常量1 : 语句; break;
    case 常量2 : 语句; break;
    default: 语句; break;
}
```

循环语句

while 语句

while (循环条件) {
    // 循环体
}

do … while 语句

do {
    // 循环体
} while(循环条件)
    
// do..while 循环和 while 循环非常像，二者经常可以相互替代，但是 do..while 的特点是不管条件成不成立，都会执行一次。

for 语句

for(var i=0; i<10; i++){  // 初始化；判断条件；自增表达式
    // 循环体
}

结束循环

break：结束整个循环
continue：结束本次循环

数组

数字的概念：将多个元素按照一定循序排列放到一个集合中，那么这个集合我们称之为数组。

数字的定义：数组是一个有序的列表，可以放任意类型数据，并且数组的长度可以动态调整。

字面量定义数组

var arr = [1, 2, 3]
// 字面量定义的数组可以是空数组

构造函数定义数组

var arr = new Array(1, 2, 3)
// 如果构造函数中只有一个数字，表示数组的长度

获取数组的元素

// 通过索引获取
arr[0]
// 获取数组的长度
arr.length

遍历数组
```
for(var i=0; i<arr.length; i++) {  }
```

函数

函数的定义：把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数。函数的作用就是封装一段代码，使其可以重复使用。
函数的声明
```
function fn() { }
```

函数的调用

// 语法：函数名()  特点：函数体只有在函数调用的时候才会执行
fn()

函数的参数
- 形参：无实际意义，占位置用的
- 实参：参与数据的运算
函数的返回值

函数通过 return 返回一个返回值

特点：如果函数没有 return ，那么返回 undefined；如果有 return 但后面没有任何内容，返回的也是 undefined，return 后面的所有代码都执行。
arguments 的使用
- 所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有的实参。arguments 是一个伪数组。
作用域
- 函数外部定义的或者函数内部不用 var 定义的变量都是全局变量
- 函数内部用 var 定义的变量是局部变量
预解析
- 解析过程
  - 把变量的声明提升大当前作用域的最前面，只会提升声明，不会提升赋值。
  - 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。

事件的三要素

事件源：引发事件的元素
事件类型：onclick(鼠标点击事件)、onbdlclick(鼠标双击)、onkeydown(键盘按下)、onkeyup(键盘抬起)、

onfocus(获取焦点)、onblur(失去焦点)、onmouseover(鼠标悬停)、onmouseout(鼠标移出)、

onmouseenter(鼠标进入)、onmouseleave(鼠标离开)、oncontextmenu(鼠标右击)、

oninput(文本框内容改变事件)、onresize(浏览器窗口大小改变事件)
事件驱动程序：要执行的逻辑代码

操作元素内容

innerHTML 认识 HTML 标签
innerText 不认识 HTML 标签

数组常用 API

兼容性好的
- arr.pop() 删除数组的最后一个元素，返回值是被删除的元素
- arr.shift() 删除数组的第一个元素，返回值是被删除的元素
- arr.push() 在数组的最后插入一个元素，返回新数组的长度
- arr.unshift() 在数组的最前面插入一个元素，返回新数组的长度
- arr.splice(start, n, m1, m2) 从指定位置开始，删除 n 个元素，然后在该位置插入 m 元素
- arr.slice(start, end) 截取数组，从 start开始，到 end 结束，不包括 end
- arr.jion(“分隔符”) 转成字符串，默认用逗号分隔
- arr.reverse() 反转数组
- arr.sort(function(a, b) {return a-b}) 数组排序，升序 a-b ；降序 b-a ；不写按照字符编码顺序排序
兼容性差的
- arr.forEach(function(item, index) {}) 数组遍历
- for(var item in arr) {} 数组遍历
- arr.filter(function(item, index){}) 过滤数组
- arr.every(function(item, index) {}) 所有条件满足时返回 true，否则返回 false
- arr.some(function(item, index) {}) 有一个元素满足条件就返回 true，否则返回 false
- arr.reduce(function(上一次函数的返回值，当前元素) {}, 初始值) 最后一个参数是一个函数的实参，最后一次循环的返回值就是整个 reduce 函数的返回值
- arr.map(function(item, index) {}) 每一次循环函数的返回值集合构成 map 的返回值
- arr.indexOf(“要查找的元素”) 找到返回元素对应的索引，否则返回 -1
- arr.find(function(item, index) {}) 返回符合条件的那一项，没找到就返回空
- arr.findIndex(function(item, index) {}) 查找符合条件的那一项索引值

对象

对象的介绍

对象是无序键值对的集合，键名不允许重复

对象的定义

// 字面量定义
var obj = {name: "张三", age: 18}

// 构造函数定义
var obj = new Object()

操作对象的属性和方法

// 获取对象的属性
obj.属性名 = 属性值  ||   obj[属性名]     // [ ] 里面的可以按正常 js 语法解析

对象的遍历

// key 是变量名、是键，obj[key]是值
for(var key in obj) { }

json 格式数据：一种类似对象的数据存储格式，键名必须使用 “” 包裹，值为字符串时也必须使用 “” 包裹

字符串常用方法

字符串的长度： str.length
根据索引查找字符：str.charAt(index) 没有找到返回空字符
根据索引查字符编码：str.charCodeAt(index) 没有找到返回 NaN
根据字符查索引：str.indexOf(“要查找的字符”) 没有找到返回 -1
字符串的截取
- str.slice(start, end) 从 start 开始，到 end 结束，不包括 end
- str.substring(start, end) 从 start 开始，到 end 结束，不包括 end ，不能为负数
- str.substr(start, length) 从 start 开始，截取 length 个字符
根据编码转字符：String.formCharCode(“字符编码”) 得到的如果是字母，都是大写的
字符串转数组：str.split(“分隔符”) 默认分割成一个元素
转大写：str.toUpperCode()
转小写：str.toLowerCode()

Math 对象

平方根：Math.sprt()
求 m 的 n 次方：Math.pow(m, n)
向上取整：Math.ceil()
向下取整：Math.floor()
0-1 之间的随机数：Math.random()
四舍五入：Math.round()
绝对值：Math.abs()
最大值：Math.max()
最小值：Math.min()
圆周率：Math.PI

Date 对象

定义日期对象

var date = new Date()
// 不加参数表示当前时间，参数可以是具体时间，也可以是距离 1970.1.1 的毫秒值
// 参数加引号和不加引号的区别：不加引号月份是 0-11 之间

Date 的常用方法

// 获取距离 1970.1.1 的毫秒值
Date.now()   ||  date.getTime()  ||  Date.parse("具体时间")

// 将毫秒值转成具体时间
date.setTime(毫秒值)

// 获取年份
date.getFullYear()

// 获取月份
date.getMounth()

// 获取日
date.getDate()

// 获取小时
date.getHours()

// 获取分钟
date.getMinutes()

// 获取秒
date.getSecends()

// 获取星期
date.getDay()

定时器

倒计时（一次性）

setTimeout(function() {}, 时间, 实参)
/*  第一个参数：时间到了要执行的函数，函数只执行一次
	第二个参数：倒计时的时间
	第三个参数：第一个参数函数的实参
*/

循环定时器

setInterval(function() {}, 间隔时间, 实参)
/*  第一个参数：每个一定时间要执行的函数，函数执行多次
	第二个参数：时间间隔
	第三个参数：第一个参数函数的实参
*/

清除定时器
- 通过 setInterval 定义的定时器，必须使用 clearInterval(定时器名称) 清除
- 通过 setTimeout 定义的定时器，必须使用 clearTimeout(定时器名称) 清除
- 注意：使用定时器之前最好先清除定时器

特殊标签的获取

body 标签： document.body
head 标签：document.head
title 标签：document.title 获取的是 title 标签里的内容
html 标签：document.documentElement

BOM 浏览器对象模型

location 对象

// 页面跳转  window 可以省略不写
window.location.href = "地址"

// 刷新页面
window。location.reload()

history 对象

// 后退
window.history.back()

// 前进
window.history.forward()

// num 为正数表示前进，负数表示后退
window.history.go(num)

关闭窗口
```
window.close()
```
打开新窗口
```
window.open("新窗口地址")
```

弹框

// 弹框
alert("abc")

// 输入框
prompt("请输入内容")

// 确认框
confirm("确定要删除吗？")

控制台 console

节点操作

查找节点
- document.getElementById(“id名”) 得到的单个元素
- document.getElementsByTagName(“标签名”) 得到的是一个伪数组
- document.getElementsByClassName(“类名”) 得到的是一个伪数组
- 父元素找子元素
  - 父元素.childNodes 获取子节点伪数组
  - 父元素.children 获取子元素节点伪数组
- 子元素找父元素
  - 子元素.parentNode 获取父节
- 查找兄弟节点（有兼容）
  - 查找前一个兄弟节点：dom.perviousElementSibling
  - 查找后一个兄弟节点：dom.nextElementSibling
- 查找第一个子元素（有兼容）
  - 父元素.firstElementChild
- 查找最后一个子元素（有兼容）
  - 父元素.lastElementChild
创建节点
- 创建元素节点
  - document.createElement(“标签名”)
- 创建文本节点
  - document.createTextNode(“文本内容”)
- 创建文档碎片节点
  - document.createDocumentFragment()
添加节点
- 往元素最后位置添加子元素
  - 父元素.appendChild(子元素)
- 往父元素的任意位置添加子元素
  - 父元素.insertBefore(要添加的子元素，参照节点) 如果参照节点有 null，默认在最后面添加
删除节点
- 父元素删除子元素
  - 父元素.removeChild(子元素)
- 删除自己
  - 要删除的元素.remove()
- 清空节点内容
  - 元素.innerHTML = “”
克隆节点
- 要克隆的节点.cloneNode(是否深克隆)
  
  注意：不写参数，默认只克隆本身元素，不克隆里面的内容
节点类型（nodeType）
- 元素节点 1
- 属性节点 2
- 文本节点 3
- 注释节点 8
- 文档节点 9
- 文档类型节点 10
- 文档碎片节点 11
浏览器的宽高
- 宽度：window.innerWidth
- 高度：window.innerHeight
操作元素样式
- dom.style.属性名 = 属性值这个方法只能设置样式
- dom.currentStyle.属性名（ie 678 支持）获取属性值
- window.getComputedStyle(dom, null).属性名（低版本不支持）获取属性值
- dom.getAttribute(“属性名”) 获取属性值
- dom.getAttribute(“属性名”, “属性值”) 设置属性样式

事件对象（event）

兼容写法
```
var event = e || window.event
```

鼠标位置相关属性

// 鼠标距离屏幕的距离
event.creenX  /  event.creenY     // 水平距离和垂直距离

// 鼠标距离页面的距离 (有兼容问题，可以使用：可见的 + 卷曲出去 代替) 
event.pageX  /  event.pageY

// 鼠标距离页面可视窗口的距离
event.clientX  /  event.clientY

// 鼠标距离最近有定位元素的距离
event.offsetX || event.layerX
event.offsetY || event.layerY

键盘按键

// 获取单个键盘码 
event.keyCode || event.which  
// 通过 String.fromCharCode("编码") 转换，得到的如果是字母，都是大写

// 组合键盘
event.shiftKey / event.ctrlKey / event.altKey

真正触发事件的最小元素
```
event.target || event.srcElement
```

严格模式

语法：“use strict” （es 5）在代码中加上这句代码就是严格模式
特点
- 普通函数中的 this 在严格模式下是 undefined
- 变量先声明后使用
- 参数不允许同名

事件机制

事件的三个阶段
- 捕获
- 目标
- 冒泡

绑定事件的方式

dom.onclick = function () {}   // 这种写法同一类型的事件只能绑定一个事件处理函数

// 事件监听方式    事件类型 不带 on
dom.addEventListener(click, function(e) {}, 是否捕获)     // 低版本浏览器不支持

dom.attachEvent(onclick, function() {})  // ie 678 支持

阻止事件冒泡

event.stopPropagation()    // 低版本浏览器不支持

event.cancelBubble = true  // ie 678 支持

阻止事件默认行为

// 方法一
return false   // 简单好用

// 方法二
event.preventDefault()     // 低版本浏览器不支持
event.returnValue = false   // ie 678 支持

三大系列

offset 系列

// 获取元素自身的宽高（包括边框）
dom.offsetWidth / dom.offsetHeight

// 获取 距离元素最近有定位的父级元素的距离
dom.offsetLeft / dom.offsetTop

// 距离元素最近有定位的父级元素
dom.offsetParent

scroll 系列

不同浏览器，页面根元素不同，所以存在兼容问题

// 页面顶部卷曲出去的距离
document.documentElement.scrollTop || document.body.scrollTop

// 页面左侧卷曲出去的距离
document.documentElement.scrollLeft || document.body.scrollLeft

client 系列

// 浏览器的宽高 （不同浏览器，页面根元素不同）
document.documentElement.clientWidth || document.body.clientWidth    // 宽度
document.documentElement.clientHeigth || document.body.clientHeight   // 高度

// 元素内容的宽高, 不包括边框
dom.clientWidth / dom.clientHeight   // ie 67 中，内容的宽高可以小于元素的宽高

// 元素自身边框的宽度
dom.clientLeft / dom.clientTop

正则表达式

意义：定义字符规则

定义方式

// 字面量
var reg = /表达式/修饰符         //  var reg = /^abc$/g

// 构造函数
var reg = new regExp("表达式", 修饰符)

元字符
- \d：表示数字， \D：表示非数字
- \s：表示空格， \S：表示非空格
- \w：表示单词字符，\W：表示非单词字符单词字符：数字字母下划线
- . ：表示除 \n\r 以外的任意字符
- \ ：表示转义
量词
- 出现 n 次： {n}
- 出现 n 次以上：{n, }
- 出现 m 到 n 次：{m, n}
- 出现 0 次或一次：？
- 出现一次或多次：+
- 出现 0 次或多次：*
- 以 n 开始：^n
- 以 n 结束：n$
- 精确匹配：^n$
方括号
- [abc] : abc 中的任意一个
- [^abc] : 取反，除 abc 以外的任意字符
修饰符
- i：不区分大小写
- g：全局匹配
正则对象方法
- reg.test(str) 判断 str 是否符合正则规则，符合返回 true
与正则相关的字符串方法
- str.match(reg) 查找 str 中符合正则的一个或多个子串，返回查找到的数组集合
- str.repalce(reg, newStr) 查找 str 中符合正则的字符并替换成 newStr，默认不全局匹配
- str.search(reg) 查找第一个符合正则的字符串的索引，没找到返回一个 -1，不进行全局不匹配

es 6 常见语法

es 6 关键字
- let ：定义变量，没有预解析，不可重复声明，有块级作用域
- const ：定义变量（常量），没有预解析，定义的同时必须初始化，有块级作用域
json 方法
- json 转成字符串
```
JSON.stringity(json对象)
```
- 像 json 格式字符串转 json 对象
```
JSON.parse(str)
```

获取元素节点

// 选择单个元素
document.querySelector("选择器")

// 选择多个元素
document.querySelectorAll("选择器")

es 6 中的函数

可以设置默认值
```
function(a=默认值) {}
```

箭头函数

() => {}
/* 特点
	如果函数体只有一句代码，可以省略 {} ，如果这一句是 return，则 return 也要省略
	如果形参只有一个， （） 也可以省略
	箭头函数不会改变 this 指向
	没有 arguments 对象
*/

参数打包
- 解决了没有 arguments 的问题
- 语法：function (arr…) { }
- 把实参打包成一个数组

扩展运算符（…）

例子

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr = [...arr1, ...arr2]     // arr = [1, 2, 3, 4, 5, 6]

解构赋值
- 对象中如果键名与值名相同，可以省略键名
模板字符串
- 语法：用反引号包裹，变量用 ${} 包裹

Array.form 把类数组转换成真正的数组

Array.form({length}, function() {return})
// 返回每一次参数二 返回的值，放在一个数组里，长度为 length

set 类型

类数组，但每一个元素都是唯一的（会自动去除重复元素）

let set = new Set([1, 2, 2, 3])  // 会自动去重

set.add(4)  // 添加数据
set.delete(1)  // 删除数据
set.has(2)    // 判断是否有这个数据
set.clear()   // 清空数据
set.size   // 数据长度
set.forEach(() => {})  // 遍历

symbol 类型：用于保护对象的属性

map 类型

类对象，map 数据结构里面的 key 可以是复杂数据类型，但不能重复

//  语法
let m = new Map([{key1, value1}, {key2, value2}])

// API
m.size   // 数据结构的长度
m.set(key, value)  // 添加成员
m.get(key)   // 获取成员
m.delete(key)  // 删除成员
m.has(key)   // 判断是否有这个成员
m.forEach(() => {})  // 遍历

L?z ^f my

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 由浅至深（总结版）

JavaScript 基础js 简介JavaScript 是编译脚本语言，与 Java 没有任何关系。js 作用用户交互表单验证网页特效体验jswindow.alert() 弹框console.log() 控制台输出document.write() 页面输出prompt(“请输入信息”) 输入框JavaScript 组成...
复制链接

扫一扫