JavaScript学习笔记(主要为ECMAScript的笔记,ES5之前)
一些好的文档:
JavaScript 教程 - 网道 (wangdoc.com)
JavaScript基础 - 学习 Web 开发 | MDN (mozilla.org)
JavaScript 教程 (w3school.com.cn)
JavaScript教程 - 廖雪峰的官方网站 (liaoxuefeng.com)
ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言
1 交互方式
1.1 弹窗
alert(需要输出的内容)
confirm(需要输出的内容)
prompt(需要输出的内容) 获取用户输入的内容
如果需要输出的内容不是数字,那么就必须通过单引号或者双引号括起来
1.2 网页内容区域来输出
document.write(需要输出的内容)
1.3 通过开发者工具控制台的形式来输出
console.log(需要输出的内容)
console.warn(需要输出的内容)
console.error(需要输出的内容)
JavaScript将换行符理解为分号,故可不加分号
如果我们希望在控制台编写多行JavaScript代码,可以按下shift+enter来进行换行编写
2 HTML中嵌入JS代码的方式
1、行间事件;
1 | <a href="javascript:" onclick="alert('百度一下')">百度一下</a> |
2、脚本块:写在<script>中;
1 | <a class="baidu" href="javascript:">百度一下</a> |
3、引入外部独立的JS文件
① 引入外部独立的CSS文件,这个标签link中属性是href,JS则为src
② script元素不能写成单标签
③ 省略type属性
④ 加载顺序:自上而下
⑤ 区分大小写:HTML,CSS不区分大小写
1 | <script type="text/javascript" src="js/1.js"></script> |
3 标识符
标识符命名规则:
1、标识符只能由数字、字母、下划线、美元符号组成,不能含有其它特殊符号
2、标识符不能以数字开始
3、标识符严格区分大小写
4、关键字不能做标识符
标识符理论上没有长度限制,推荐驼峰命名法
4 变量
在JavaScript当中,如果一个变量声明的时候没有使用var关键字的话,这个变量不管是在哪里声明的,都是全局变量(即window下)。这种全局变量在声明的时候必须手动赋值,不能采用系统默认值。
交换两个变量的值
1 | var a = 10, b = 20; |
1 | var a = 10, b = 20; |
5 数据类型
JavaScript(ES6之前)有8种基本的数据类型(7种原始类型和1种复杂类型)
记忆方法:bouns
boolean 、bigint
object
undefined
null、 number
string、 symbol
typeof操作符
typeof操作符的运算结果是以下字符串之一:
- “undefined”表示值未定义
- “number”表示值为数值
- “string”表示值为字符串
- “boolean”表示值为布尔值
- “object”表示值为对象(而不是函数)或null
- “function”表示值为函数
- “Symbol”表示值为符号
- null属于Null类型,但是typeof运算符的运算结果是”object”,null是特殊的object类型
- typeof x与typeof(x)的作用相同
5.1 Undefined
只有一个值,它的值就是:undefined
当一个变量声明之后没有手动赋值,系统默认赋值undefined。
最好在变量定义的时候进行初始化,不要显示的将一个变量赋值为undefined。如果变量刚开始什么都没有,我们可以初始化为0、空字符串、null等
5.2 Null
Null类型只有1个值:null
注意:typeof null 运算结果是:”object”
5.3 Number
Number类型代表的值
- 3
- 3.14
- NaN:(Not a Number,表示不是一个数字。但NaN一个值。它属于Number类型。当一个数学表达式的运算结果本应该返回一个数字,但是最终无法返回一个数字的时候,结果是NaN。)
- Infinity(无穷大,当除数是0的时候,最终计算结果是无穷大。)
JavaScript当中的Number类型代表了java中的:byte、short、int、long、float、double
一些常用的函数:
- isNaN(数据):判断“数据”是否是一个数字
- Number()函数,这个函数的作用可以将不是数字类型的数据转换成数字类型的数据。例:Number(undefined)为NAN,Number(null)为0
- parseInt()函数,将字符串数字转换成数字,并且取整。向下取整。
- Math.ceil(),这是一个Math工具类中的一个函数,向上取整。
5.4 Boolean
Boolean类型只有两个值:true,false,没有其他值。
Boolean():有数据返回结果就是true,否则为false
1 | console.log(Boolean(NaN)); // false |
if(i)的含义可以理解为这里的代码实际上是这样的:if(Boolean(i))
5.5 String
表示形式
1 | var name = "coderwhy" |
转义字符
| 转义字符 | 表示符号 |
|---|---|
\' |
单引号 |
\" |
双引号 |
\\ |
反斜杠 |
\n |
换行符 |
\r |
回车符 |
\t |
制表符 |
\b |
退格符 |
常用属性
length:获取字符串长度
常用方法
charAt()获取指定下标位置的字符concat()连接字符串indexOf()获取某个字符串在当前字符串中第一次出现处的索引lastIndexOf()获取某个字符串在当前字符串中最后一次出现处的索引replace()替换split()拆分字符串substr()截取字符串substring()截取字符串toLowerCase()转小写toUpperCase()转大写
5.6 Object
复杂数据类型(也称为引用数据类型),在JS当中内置了一个类型Object,可以将Object类型看做是所有对象的超类/基类。在JS当中默认定义的类型,没有特殊说明的话,默认继承Object
属性
prototype:给对象动态扩展属性和方法
constructor
方法
toLocaleString()
toString()
valueOf()
JS函数不能重载,只要出现同名函数,之前的函数就消失了
1 | var obj = new Object(); |
6 事件
6.1 JS中的常用事件
1 | JS的常用事件: |
6.2 注册事件
第一种方式
事件句柄
1 | 在标签中使用“事件句柄”,在事件句柄后面编写JS代码 |
第二种方式
DOM
1 | 通过document.getElementById()绑定赋给一个变量,然后给这个变量注册事件,绑定回调函数 |
1 | <input type="button" value="hello" id="hellobtn" /> |
7 代码的执行顺序
自上而下执行
1 | load事件: |
8 void运算符
1 | 语法格式: |
1 | <!--如果href中不写路径,则默认为当前界面,并刷新--> |
9 控制语句
9.1 分支语句
分支语句包括if和switch
数字0,空字符串””,null,undefined和NaN都会被转换成false
9.2 循环语句
支持三种循环方式:while循环、do...while循环、for循环
9.3 转向语句
包括三种:break、continue、return
9.4 特殊语句
for..in 语句
with 语句
1 | var x = new Employee(7369, "SMITH"); |
10 函数
函数默认的返回值为undefined
10.1 头等函数
函数可以在变量和变量之间相互进行赋值
1 | function foo() { |
10.2 回调函数
1 | function foo(fn) { |
foo这种函数我们也可以称之为高阶函数(回调函数)
高阶函数至少满足两个条件之一:接受一个或多个函数作为输入;输出一个函数
10.3 立即执行函数
立即执行函数会创建一个独立的执行上下文环境,可以避免外界访问或修改内部的变量,也避免了对内部变量的修改
第一部分是定义了一个匿名函数,这个函数有自己独立的作用域;第二部分是后面的(),表示这个函数被执行了
1 | var btns = document.querySelectorAll(".btn") |
11 常见内置类
11.1 包装类型
原始类型是简单的值,默认并不能调用属性和方法,JavaScript为了可以使其可以获取属性和调用方法,对其封装了对应的包装类型
常见的包装类型有:String、Number、Boolean、Symbol、Bigint
1 | var name1 = "why" |
11.2 数字类型Number
属性
1 | console.log(Number.MAX_SAFE_INTEGER) // JavaScript中最大的安全整数2^53-1 |
方法
实例方法
- toString(base):将数字转成字符串,并且按照base进制进行转换。base的范围可以从2到36,默认情况下是10,如果需要对一个数字操作,需要使用
...运算符
1 | var test = 3 |
- toFixed(digits):格式化一个数字,保留digits位的小数,digits的范围是0到20(包含)之间
1 | var test = 3 |
类方法
- Number.parseInt(string[, radix]):将字符串解析成整数,也有对应的全局方法parseInt
- Number.parseFloat(string):将字符串解析成浮点数,也有对应的全局方法parseFloat
1 | var test = '3' |
11.3 数学对象Math
Math是一个内置对象(不是一个构造函数),它拥有一些数学常数属性和数学函数方法
属性
Math.PI:圆周率,约等于3.14159
方法
- Math.floor():向下舍入取整
- Math.ceil():向上舍入取整
- Math.round():四舍五入取整
- Math.random():生成0~1的随机数(包含0,不包含1)
- Math.pow(x, y):返回x的y次幂
11.4 字符串类型String
- length:获取字符串的长度
1、访问字符串的字符
- 通过字符串的索引
str[0] - 通过str.charAt(pos)方法
区别:索引的方式没有找到会返回undefined,而charAt没有找到会返回空字符串
2、修改字符串
字符串在定义后是不可以修改的。
1 | var message = "Hello World" |
所以,在很多改变字符串的操作中,都是生成了一个新的字符串
1 | var message = "Hello World" |
3、查找字符串
查找字符串位置
1 | // 从第18个位置开始,在message中查找是否有"name",没有返回-1,有则返回位置 |
是否包含字符串
1 | // 从第3个位置开始,在message中查找是否有"why",没有返回false,有则返回true |
4、开头和结尾
1 | console.log(str.startWith("Hello")) |
5、替换字符串
1 | console.log(str.replace("coderwhy", "kobe")) |
6、获取子字符串
1 | var message = "Hello World" |
7、拼接字符串
1 | console.log("Hello".concat("world")) |
8、删除首位空格
1 | console.log("123" + " coderwhy ".trim() + "123") // 123coderwhy123 |
9、字符串分割
1 | var message = "my name is coderwhy" |
10、格式化输出
1 | var str = "4" |
11.5 数组Array使用详解
1、创建数组
1 | // 两种方法 |
2、数组的基本操作
访问数组中的元素
1 | console.log(arr[0]) // 索引不能为负数 |
修改数组中的元素
1 | arr[0] = "coderwhy" |
数组的添加和删除
在数组的尾端添加或删除元素
1 | arr.push("abc", "cba") // 在末端添加元素 |
在数组的首端添加或删除元素
1 | arr.unshift("curry") // 在首端添加元素 |
shift/unshift比push/pop方法运行的慢
在数组中间的某个位置添加或者删除元素
1 | // arr.splice(start[, deleteCount[, item1[, item2[, ...]]]]) |
清空数组
1 | // 清空数组 |
3、数组的遍历
普通for循环遍历
1 | for (var i = 0; i < arr.length; i++) { |
for…in遍历,获取到索引值
1 | for (var index in arr) { |
for…of遍历,获取到每一个元素
1 | for (var item of arr) { |
4、数组的方法
arr.slice:用于对数组进行截取(类似于字符串的slice方法)
1 | console.log(arr.slice(2, 3)) |
arr.concat:创建一个新数组,其中包含来自于其他数组和其他项的值
1 | var newArr = arr.concat(["abc", "cba"], "nba") |
arr.join:将一个数组的所有元素连接成一个字符串并返回这个字符串
1 | console.log(arr.join("-")) |
5、查找元素
arr.indexOf方法:查找某个元素的索引
arr.indexOf(searchElemment[, fromIndex])
找到返回对应的索引,没有找到返回-1
arr.includes方法:判断数组是否包含某个元素
arr.includes(valueToFind[, fromIndex])
6、数组的排序
sort()
arr.sort([compareFunction])
1 | var newStus = students.sort(function(item1, item2) { |
reverse()
将数组中元素的位置颠倒,并返回该数组
7、数组的其他高阶方法
arr.forEach
遍历数组,并且让数组中每一个元素都执行一次对应的方法
1 | // forEach方法对数组进行遍历循环,这个方法没有返回值 |
arr.map
map()方法创建一个新数组。这个新数组由原数组中的每个元素都调用一次提供函数后的返回值组成
1 | // map方法实现数组中每个数求平方 |
arr.filter
filter()方法创建一个新数组。新数组中只包含每个元素调用函数返回为true的元素
1 | var arr = [1, 4, 6, 8, 10] |
arr.reduce
用于计算数组中所有元素的总和。对数组中的每个元素按序执行一个由您提供的reducer函数,每一次运行reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值
1 | var products = [ |
11.6 内置对象Date
1、时间的表示方式
GMT:英国伦敦的皇家格林威治天文台的标准时间。其他时区根据此时间加减
UTC:原子钟计算的标准时间。减少了GMT的误差
2、创建Date对象
1 | var date1 = new Date() // 当前时间Fri May 13 2022 15:22:53 GMT+0800(伊尔库茨克标准时间) |
3、dateString时间的表示方式
日期的表示方式有两种:RFC 2822标准或者ISO 8601标准
1 | var time = new Date() // 默认为RFC 2822标准 |
- YYYY年份
- MM:月份
- DD:日
- T:分隔日期和是按,没有特殊含义,可以省略
- HH:小时
- mm:分钟
- ss:秒
- .sss:毫秒
- Z:时区
4、Date获取信息的方法
- getYear():获取年份(2位数),过时,不建议用
- getFullYear():获取年份(4位数)
- getDate():获取当月的具体日期
- getHours():获取小时
- getMinutes():获取分钟
- getSeconds():获取秒钟
- getMilliseconds():获取毫秒
- getDay():获取一周中的第几天,0~6
5、Date设置信息的方法
- setFullYear(year[, month[, date]])
- setMonth(month[, date])
- setDate(date)
- setHours(hour[, min[, sec[, ms]]])
- setMinutes(min[, sec[, ms]])
- setSeconds(sec[, ms])
- setMilliseconds(ms)
- setTime(milliseconds)
6、Date获取Unix时间戳
Unix时间戳:表示自1970年1月1日00:00:00UTC以来的毫秒数
- new Date().getTime()
- new Date().valueOf()
- +new Date()
- Date.now()
1 | // 测试代码的性能 |
- Date.parse(str):可以从一个字符串中读取日期
1 | var time1 = Date.parse('2022-05-13T15:14:52.507Z') |
1 | var startTime = Date.now() |
1 | var time = new Date(); // 获取系统当前时间 |
12 面向对象
对象类型是一种存储键值对的更复杂的数据类型。key可以是字符串和Symbol类型,value可以是任意类型(基本数据类型、函数类型、对象类型等)
12.1 创建对象
创建对象的三种方法:
{}- new Object+动态添加属性
- new其他类
12.2 对象的常见操作
1、访问对象的属性
1 | console.log(info.name) |
2、修改对象的属性
1 | info.name = 'sjx' |
3、添加对象的属性
1 | info.height = 1.98 |
4、删除对象的属性
delete操作符
1 | delete info.age |
12.3 方括号和引用的使用
方括号运行在我们定义或者操作属性时更加的灵活
1 | var message = "Hello world" |
12.4 对象的遍历
表示获取对象中所有的属性和方法
Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组
1、普通for循环
1 | var infoKeys = Object.keys(info) |
2、for in遍历方法
1 | for (var key in info) { |
12.5 栈内存和堆内存
原始类型占据的空间是在栈内存中分配的
对象类型占据的空间是在堆内存中分配的
12.6 值类型和引用类型
原始类型的保存方式:在变量中保存的是值本身,所有原始类型也被称为值类型
对象类型的保存方式:在变量中保存的是对象的“引用”,所以对象类型也被称为引用类型
1 | // 对象传值参数为引用,则函数内部可以改变对象的属性,普通的变量则不行,为值传递 |
12.7 this的指向
- 在全局环境下面,this指向window
- 通过对象调用,this指向调用的对象
1 | var obj = { |
12.8 创建对象的方案——构造函数
1 | function Person(name, age, height, address) { |
13 补充
13.1 注释
单行注释
多行注释
文档注释
1 | /** |
CSS只有一种注释
/* */
13.2 noscript
浏览器不支持脚本或者浏览器对脚本的支持被关闭时显示<noscript>标签中的元素
1 | <noscript> |
13.3 debugger
debugger相当于在代码中打断点
13.4 JS代码风格

- 本文标题:JavaScript笔记
- 本文作者:馨er
- 创建时间:2021-11-26 12:49:11
- 本文链接:https://sjxbbd.vercel.app/2021/11/26/c2d162c7514a/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!