JavaScript笔记
时间:2022-07-28
本文章向大家介绍JavaScript笔记,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
输出
- 使用 window.alert() 写入警告框
- 使用window.confirm() 确认框
- 使用window.prompt() 输入框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
常见的HTML事件
- onchange HTML 元素改变
- onclick 用户点击 HTML 元素
- onmouseover 用户在一个HTML元素上移动鼠标
- onmouseout 用户从一个HTML元素上移开鼠标
- onkeydown 用户按下键盘按键
- onload 浏览器已完成页面的加载
字符串方法
- length 属性返回字符串的长度:
- indexOf() 方法返回字符串中指定文本首次出现的索引(位置)
- lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
- search() 方法搜索特定值的字符串,并返回匹配的位置
- slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。 该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。
- substring() 类似于 slice()。 不同之处在于 substring() 无法接受负的索引。
- substr() 类似于 slice()。 不同之处在于第二个参数规定被提取部分的长度。
- substr() 类似于 slice()。 不同之处在于第二个参数规定被提取部分的长度。
- replace() 方法用另一个值替换在字符串中指定的值:
- 通过 toUpperCase() 把字符串转换为大写
- 通过 toLowerCase() 把字符串转换为小写
- concat() 连接两个或多个字符串
- concat() 方法可用于代替加运算符
- trim() 方法删除字符串两端的空白符
- charAt() 方法返回字符串中指定下标(位置)的字符串
- charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码
数值方法
- toString() 以字符串返回数值。
- isNaN() 函数用于检查其参数是否是非数字值。如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
- toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。
- toFixed() 返回字符串值,它包含了指定位数小数的数字
- toPrecision() 返回字符串值,它包含了指定长度的数字
- valueOf() 以数值返回数值
- Number() 可用于把 JavaScript 变量转换为数值
- Number() 还可以把日期转换为数字:
- parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字:
- parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字:
- MAX_VALUE 返回 JavaScript 中可能的最大数字。
- MIN_VALUE 返回 JavaScript 中可能的最小数字。
数组方法
- toString() 把数组转换为数组值(逗号分隔)的字符串。
- join() 方法也可将所有数组元素结合为一个字符串。
- pop() 方法从数组中删除最后一个元素:
- push() 方法(在数组结尾处)向数组添加一个新的元素:
- shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。
- unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素
- concat() 方法通过合并(连接)现有数组来创建一个新数组:
- slice() 方法用数组的某个片段切出新数组。
数组排序
- sort() 方法以字母顺序对数组进行排序:
- reverse() 方法反转数组中的元素。
- Math.max.apply 来查找数组中的最高值:
- Math.min.apply 来查找数组中的最低值
数组迭代
- Array.forEach() 方法为每个数组元素调用一次函数(回调函数)
- Array.map() var numbers1 = [45, 4, 9, 16, 25]; var numbers2 = numbers1.map(myFunction); document.getElementById("demo").innerHTML = numbers2; function myFunction(value, index, array) { return value; }
- Array.filter() var numbers = [45, 4, 9, 16, 25]; var over18 = numbers.filter(myFunction); document.getElementById("demo").innerHTML = over18; function myFunction(value, index, array) { return value > 18; }
- Array.reduce() var numbers = [45, 4, 9, 16, 25]; var sum = numbers.reduce(myFunction); document.getElementById("demo").innerHTML = "总和是:" + sum; function myFunction(total, value, index, array) { return total + value; }
- Array.every() 方法检查所有数组值是否通过测试
- Array.some() 方法检查某些数组值是否通过了测试
- Array.indexOf() 方法在数组中搜索元素值并返回其位置
- Array.lastIndexOf() 与 Array.indexOf() 类似,但是从数组结尾开始搜索
- Array.find() 方法返回通过测试函数的第一个数组元素的值
- Array.findIndex() 方法返回通过测试函数的第一个数组元素的索引
日期
- new Date() 用当前日期和时间创建新的日期对象
- new Date(year, month, day, hours, minutes, seconds, milliseconds) 用指定日期和时间创建新的日期对象。 7个数字分别指定年、月、日、小时、分钟、秒和毫秒(按此顺序) 6个数字指定年、月、日、小时、分钟、秒 5个数字指定年、月、日、小时和分钟 4个数字指定年、月、日和小时 3 个数字指定年、月和日 2个数字指定年份和月份
- new Date(milliseconds) 创建一个零时加毫秒的新日期对象
- new Date(date string) 从日期字符串创建一个新的日期对象
- toUTCString() 方法将日期转换为 UTC 字符串(一种日期显示标准)
- toDateString() 方法将日期转换为更易读的格式
获取日期方法
- getDate() 以数值返回天(1-31)
- getDay() 以数值获取周名(0-6)
- getFullYear() 获取四位的年(yyyy)
- getHours() 获取小时(0-23)
- getMilliseconds() 获取毫秒(0-999)
- getMinutes() 获取分(0-59)
- getMonth() 获取月(0-11)
- getSeconds() 获取秒(0-59)
- getTime() 获取时间(从 1970 年 1 月 1 日至今)
设置日期方法
- setDate() 以数值(1-31)设置日
- setFullYear()设置年(可选月和日)
- setHours() 设置小时(0-23)
- setMilliseconds() 设置毫秒(0-999)
- setMinutes() 设置分(0-59)
- setMonth() 设置月(0-11)
- setSeconds() 设置秒(0-59)
- setTime() 设置时间(从 1970 年 1 月 1 日至今的毫秒数)
数学Math
- Math.round(x) 的返回值是 x 四舍五入为最接近的整数:
- Math.pow(x, y) 的返回值是 x 的 y 次幂:
- Math.sqrt(x) 返回 x 的平方根:
- Math.abs(x) 返回 x 的绝对(正)值:
- Math.ceil(x) 的返回值是 x 上舍入最接近的整数:
- Math.floor(x) 的返回值是 x 下舍入最接近的整数
- Math.sin(x) 返回角 x(以弧度计)的正弦(介于 -1 与 1 之间的值)
- Math.cos(x) 返回角 x(以弧度计)的余弦(介于 -1 与 1 之间的值)
- Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值
- Math.random() 返回介于 0(包括) 与 1(不包括) 之间的随机数
Math.E // 返回欧拉指数(Euler's number)
Math.PI // 返回圆周率(PI)
Math.SQRT2 // 返回 2 的平方根
Math.SQRT1_2 // 返回 1/2 的平方根
Math.LN2 // 返回 2 的自然对数
Math.LN10 // 返回 10 的自然对数
Math.LOG2E // 返回以 2 为底的 e 的对数(约等于 1.414)
Math.LOG10E // 返回以 10 为底的 e 的对数(约等于0.434)
Math对象方法
- abs(x) 返回 x 的绝对值
- acos(x) 返回 x 的反余弦值,以弧度计
- asin(x) 返回 x 的反正弦值,以弧度计
- atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
- atan2(y,x) 返回从 x 轴到点 (x,y) 的角度
- ceil(x) 对 x 进行上舍入
- cos(x) 返回 x 的余弦
- exp(x) 返回 Ex 的值
- floor(x) 对 x 进行下舍入
- log(x) 返回 x 的自然对数(底为e)
- max(x,y,z,...,n) 返回最高值
- min(x,y,z,...,n) 返回最低值
- pow(x,y) 返回 x 的 y 次幂
- random() 返回 0 ~ 1 之间的随机数
- round(x) 把 x 四舍五入为最接近的整数
- sin(x) 返回 x(x 以角度计)的正弦
- sqrt(x) 返回 x 的平方根
- tan(x) 返回角的正切
随机
- Math.random() 返回 0(包括) 至 1(不包括) 之间的随机数
- Math.random() 与 Math.floor() 一起使用用于返回随机整数 Math.floor(Math.random() * 10); // 返回 0 至 9 之间的数
正则表达式
- 语法 /正则表达式主体/修饰符(可选) var patt = /runoob/i 实例解析: /runoob/i 是一个正则表达式。 runoob 是一个正则表达式主体 (用于检索)。 i 执行对大小写不敏感的匹配。 g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 m 执行多行匹配。
- 方括号用于查找某个范围内的字符: [abc] 查找方括号之间的任何字符。 [0-9] 查找任何从 0 至 9 的数字。 (x|y) 查找任何以 | 分隔的选项。
- 元字符是拥有特殊含义的字符: d 查找数字。 s 查找空白字符。 b 匹配单词边界。 w 匹配单个字符 uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
- 量词 n+ 匹配任何包含至少一个 n 的字符串。 n* 匹配任何包含零个或多个 n 的字符串。 n? 匹配任何包含零个或一个 n 的字符串。
RegExp对象
- test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
- exec() 方法用于检索字符串中的正则表达式的匹配。 该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
严格模式
- "use strict"; 定义 JavaScript 代码应该以“严格模式”执行
函数call()
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
var person2 = {
firstName:"Steve",
lastName: "Jobs"
}
var x = person.fullName.call(person1);
document.getElementById("demo").innerHTML = x;
HTML DOM
- 查找HTML元素 document.getElementById(id) 通过元素 id 来查找元素 document.getElementsByTagName(name) 通过标签名来查找元素 document.getElementsByClassName(name) 通过类名来查找元素
- 改变HTML元素 element.innerHTML = new html content 改变元素的 inner HTML element.attribute = new value 改变 HTML 元素的属性值 element.setAttribute(attribute, value) 改变 HTML 元素的属性值 element.style.property = new style 改变 HTML 元素的样式
- 添加和删除元素 document.createElement(element) 创建 HTML 元素 document.removeChild(element) 删除 HTML 元素 document.appendChild(element) 添加 HTML 元素 document.replaceChild(element) 替换 HTML 元素 document.write(text) 写入 HTML 输出流
- 添加事件处理程序 document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序
DOM事件
- onclick 点击
- onload 用户进入页面时被触发
- onunload 用户离开页面时被触发
- onchange 常结合对输入字段的验证来使用
- onmouseover 用户的鼠标移至元素上方时触发函数
- onmouseout 用户的鼠标移出元素时触发函数
- onmousedown 用户鼠标点击
- onmouseup 用户鼠标释放
DOM事件监听器
- addEventListener() 方法为指定元素指定事件处理程序,附加事件处理程序而不会覆盖已有的事件处理程序
- 语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型(比如 "click" 或 "mousedown")。 第二个参数是当事件发生时我们需要调用的函数。 第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。 注意:请勿对事件使用 "on" 前缀;请使用 "click" 代替 "onclick"。
- removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序
Timing事件
- setTimeout(function, milliseconds)
- 在等待指定的毫秒数后执行函数。
- clearTimeout() 方法停止执行 setTimeout() 中规定的函数
- setInterval(function, milliseconds)
- 等同于 setTimeout(),但持续重复执行该函数。
AJAX
1. 网页中发生一个事件(页面加载、按钮点击)
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作(比如更新页面)
- XMLHttpRequest对象方法
- XMLHttpRequest对象属性
JSON
- 在从 web 服务器接收数据时,数据永远是字符串
- JSON.parse() 通过 JSON.parse() 解析数据,这些数据会成为 JavaScript 对象
- 在向 web 服务器发送数据时,数据必须是字符串
- JSON.stringify() 把 JavaScript 对象转换为字符串
- Redis实现分布式锁相关注意事项
- React Native调用Android相机图库
- SpringMVC之请求参数的获取方式
- 糖大夫--测量流程性能监控自动化方案设计
- ReactNative调用Android原生模块
- jvm调优的工具介绍
- Python时间序列预测案例研究:巴尔的摩年度用水量
- [一对一课程] 之 设计并实现第一个JS模块?
- React Native 使用react-native-image-picker库实现图片上传功能
- 再谈Android动态链接库
- React Native之Permissions权限适配
- React Native项目实战之fetch请求并填充界面
- CocoaPods使用详解
- 2018年伊始,系统编程语言Rust为何令程序员感到兴奋?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用Seq搭建免费的日志服务
- html可伸缩侧边栏
- Dubbo 压测插件的实现——基于 Gatling
- html自定义checkbox样式
- 宝塔面板7.4.2及Windows面板6.8数据库鉴权漏洞 – 官方发布紧急安全更新
- ESP32刷入Ruff Lite固件
- Angularjs1.x ES6接入Chart图表
- 搭建Blynk开源物联网服务端(1)---基本搭建
- 搭建Blynk开源物联网服务端(2)---开始使用
- NPM安装模块报错:Error: sha1-W+8rAcUcgURBLVhzyvg+IvHsa4Q= integrity checksum failed when using sha1: wanted
- OPA Gatekeeper 策略入门
- 给Linux命令行加个问候语
- RaspberryPi接入HomeKit
- React Fetch请求
- React使用代理解决跨域问题