JavaScript笔记
馨er BOSS

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
2
<a href="javascript:" onclick="alert('百度一下')">百度一下</a>
<a href="javascript: alert('百度一下')">百度一下</a>

2、脚本块:写在<script>中;

1
2
3
4
5
6
7
<a class="baidu" href="javascript:">百度一下</a>
<script>
var baiduAEL = document.querySelector('.baidu')
baiduAEL.onclick = function () {
alert('百度一下')
}
</script>

3、引入外部独立的JS文件

① 引入外部独立的CSS文件,这个标签link中属性是href,JS则为src

② script元素不能写成单标签

③ 省略type属性

④ 加载顺序:自上而下

⑤ 区分大小写:HTML,CSS不区分大小写

1
2
<script type="text/javascript" src="js/1.js"></script>
<link rel="stylesheet" type="text/css" href=""/>

3 标识符

标识符命名规则

1、标识符只能由数字、字母、下划线、美元符号组成,不能含有其它特殊符号

2、标识符不能以数字开始

3、标识符严格区分大小写

4、关键字不能做标识符

标识符理论上没有长度限制,推荐驼峰命名法

4 变量

在JavaScript当中,如果一个变量声明的时候没有使用var关键字的话,这个变量不管是在哪里声明的,都是全局变量(即window下)。这种全局变量在声明的时候必须手动赋值,不能采用系统默认值。

交换两个变量的值

1
2
3
4
var a = 10, b = 20;
var temp = a;
a = b;
b = temp;
1
2
3
4
var a = 10, b = 20;
a = a + b;
b = a - b;
a = a - b;

5 数据类型

JavaScript(ES6之前)有8种基本的数据类型(7种原始类型和1种复杂类型

记忆方法:bouns

booleanbigint

object

undefined

nullnumber

stringsymbol

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
2
3
4
5
console.log(Boolean(NaN)); // false
console.log(Boolean(Infinity)); // true
console.log(Boolean(null)); // false
console.log(Boolean(new Object())); // true
console.log(Boolean(undefined)); // false

if(i)的含义可以理解为这里的代码实际上是这样的:if(Boolean(i))

5.5 String

表示形式

1
2
3
4
var name = "coderwhy"
var name1 = 'coderwhy'
var name2 = `coderwhy`
var s = new String("字符串");

转义字符

转义字符 表示符号
\' 单引号
\" 双引号
\\ 反斜杠
\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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var obj = new Object();
// 演示prototype属性
// 后期给Object类型的对象扩展一个doSome()方法
Object.prototype.doSome = function(){
console.log("测试prototype属性!~~~")
}

// 后期给Object类型的对象扩展一个username属性.
Object.prototype.username = "zhangsan"

// 调用doSome方法
obj.doSome()

// 访问对象的username属性
console.log(obj.username)

// 可以给String扩展一个方法吗?
// 给String类型的对象扩展一个mysubstr的方法.
String.prototype.mysubstr = function(startIndex, length){
// this表示当前的字符串对象
return this.substr(startIndex, length);
}

console.log("abcdef".mysubstr(2,3)) //cde
console.log("kingsoft".mysubstr(3,3)) //gso

6 事件

6.1 JS中的常用事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
JS的常用事件:
1)blur 失去焦点
5)focus 获得焦点

3)click 鼠标单击
4)dblclick 鼠标双击

6)keydown 键盘按下
7)keyup 键盘弹起

9mousedown 鼠标按下
10)mouseover 鼠标经过
11mousemove 鼠标移动
12)mouseout 鼠标离开
13mouseup 鼠标弹起

16)submit 表单提交
14)reset 表单重置

15select 文本被选定
2)change 下拉列表选中项改变,或文本框内容改变
8)load 页面加载完毕

提醒:任何一个事件都有对应的事件句柄。事件句柄是在事件名称前添加on就行。

6.2 注册事件

第一种方式

事件句柄

1
2
3
4
5
6
7
8
9
10
11
在标签中使用“事件句柄”,在事件句柄后面编写JS代码
当这个事件句柄对应的事件发生之后,“注册”在事件句柄当中的这个代码被监听器调用。

onclick 鼠标单击的事件句柄,只有当鼠标单击事件click发生之后,注册在onclick后面的代码会被执行。

以下button标签中的sayHello()函数,在页面打开的时候并不会执行,只是在页面打开的过程中完成事件的绑定,完成事件的注册,以后只有当该事件发生之后sayHello()函数才会执行,像这种函数又一种特殊的称谓:回调函数。英语单词叫做:callback function

这个回调函数的特点是:
监听器负责调用,程序员不负责调用。
当事件发生之后,监听器会负责调用该函数。
像这种函数被称为回调函数。callback。

第二种方式

DOM

1
通过document.getElementById()绑定赋给一个变量,然后给这个变量注册事件,绑定回调函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<input type="button" value="hello" id="hellobtn" />

<script type="text/javascript">

/* 定义一个函数 */
function sum(){
console.log("sum function invoke!")
}

/* 根据id获取button对象 */
var hellobtnElt = document.getElementById("hellobtn");

// 元素中有什么属性,就能"点"什么.
/* 这行代码在页面打开的时候会执行,这行代码执行的意义是:将sum这个回调函数绑定到hellobtn的click事件上 */
/* 这个回调函数sum在什么时候执行?click事件发生之后才会被监听器调用! */
//hellobtnElt.onclick = sum //不要这样写: hellobtnElt.onclick = sum()

// 回调函数可以是一个匿名函数
// 这行代码的执行只是完成事件click的注册,给click事件注册一个回调函数.
// 这行代码执行的时候,回调函数并不会被执行。
// 只有当这个按钮发生click事件之后,这个回调函数会自动被监听器来调用.
hellobtnElt.onclick = function(){
console.log("我是一个回调函数,同时我没有名字,叫做匿名函数!")
}

// hellobtnElt.onclick = myfun
// 当用此种方法绑定已经定义好的函数时,若函数无参,则不写括号

</script>

7 代码的执行顺序

自上而下执行

1
2
3
load事件:
1load事件不是在页面加载过程中触发的。
2load事件是在页面中所有的元素全部加载完毕之后才发生的。

8 void运算符

1
2
3
4
语法格式:
void(表达式)
执行表达式,但不返回任何结果。
即使表达式有执行结果,最终经过void运算之后就什么都没了。
1
2
<!--如果href中不写路径,则默认为当前界面,并刷新-->
<a href="javascript:void(0)" onclick="alert('执行JS代码了!')">要求:保留住超链接的样式,并且点击我执行一段JS代码,执行完JS代码之后保证页面不跳转!</a>

9 控制语句

9.1 分支语句

分支语句包括ifswitch

数字0,空字符串””,null,undefined和NaN都会被转换成false

9.2 循环语句

支持三种循环方式:while循环、do...while循环、for循环

9.3 转向语句

包括三种:breakcontinuereturn

9.4 特殊语句

for..in 语句

with 语句

1
2
3
4
5
6
7
var x = new Employee(7369, "SMITH");
// console.log(x.empno + "," + x.ename)
// with语句.
with(x) {
console.log(empno + "," + ename)
console.log(empno + "," + ename)
}

10 函数

函数默认的返回值为undefined

10.1 头等函数

函数可以在变量和变量之间相互进行赋值

1
2
3
4
5
6
function foo() {
console.log("foo函数执行")
}

var bar = foo
bar()

10.2 回调函数

1
2
3
4
5
6
7
8
function foo(fn) {
fn()
}

function bar() {
console.log("我是bar函数被调用")
}
foo(bar)

foo这种函数我们也可以称之为高阶函数(回调函数)

高阶函数至少满足两个条件之一:接受一个或多个函数作为输入;输出一个函数

10.3 立即执行函数

立即执行函数会创建一个独立的执行上下文环境,可以避免外界访问或修改内部的变量,也避免了对内部变量的修改

第一部分是定义了一个匿名函数,这个函数有自己独立的作用域;第二部分是后面的(),表示这个函数被执行了

1
2
3
4
5
6
7
8
9
var btns = document.querySelectorAll(".btn")

for (var i = 0; i < btns.length; i++) {
(function(m) {
btns.onclick = function() {
console.log(`第${m}个按钮被点击了`) // 模板字符串中间可以插值
}
})(i)
}

11 常见内置类

11.1 包装类型

原始类型是简单的值,默认并不能调用属性和方法,JavaScript为了可以使其可以获取属性和调用方法,对其封装了对应的包装类型

常见的包装类型有:String、Number、Boolean、Symbol、Bigint

1
2
3
4
5
var name1 = "why"
var name2 = new String("why")
console.log(typeof name1) // string
console.log(typeof name2) // object
console.log(name1 === name2) // false

11.2 数字类型Number

属性

1
2
console.log(Number.MAX_SAFE_INTEGER) // JavaScript中最大的安全整数2^53-1
console.log(Number.MIN_SAFE_INTEGER) // JavaScript中最小的安全整数-(2^53-1)

方法

实例方法

  • toString(base):将数字转成字符串,并且按照base进制进行转换。base的范围可以从2到36,默认情况下是10,如果需要对一个数字操作,需要使用...运算符
1
2
var test = 3
console.log(test.toString(2)) // 11,转换为2进制
  • toFixed(digits):格式化一个数字,保留digits位的小数,digits的范围是0到20(包含)之间
1
2
var test = 3
console.log(test.toFixed(3)) // 3.000

类方法

  • Number.parseInt(string[, radix]):将字符串解析成整数,也有对应的全局方法parseInt
  • Number.parseFloat(string):将字符串解析成浮点数,也有对应的全局方法parseFloat
1
2
3
4
var test = '3'

console.log(Number.parseInt(test, 10)) // 3,表示test是十进制
console.log(Number.parseFloat(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
2
3
var message = "Hello World"
message[1] = 'A'
console.log(message); // Hello World

所以,在很多改变字符串的操作中,都是生成了一个新的字符串

1
2
3
var message = "Hello World"
console.log(message.toLowerCase()); // hello world
console.log(message.toUpperCase()); // HELLO WORLD

3、查找字符串

查找字符串位置

1
2
3
// 从第18个位置开始,在message中查找是否有"name",没有返回-1,有则返回位置
console.log(message.indexOf("name", 18))
// 有一个相似的方法,lastIndexOf

是否包含字符串

1
2
// 从第3个位置开始,在message中查找是否有"why",没有返回false,有则返回true
console.log(message.includes("why"3))

4、开头和结尾

1
2
console.log(str.startWith("Hello"))
console.log(str.endWith("coderwhy"))

5、替换字符串

1
console.log(str.replace("coderwhy", "kobe"))

6、获取子字符串

1
2
3
4
5
6
var message = "Hello World"
console.log(message.slice(0, 5)) // Hello
console.log(message.slice(-8)) // lo World

console.log(message.substring(0, 4)) // Hell
console.log(message.substr(0, 5)) // Hello

7、拼接字符串

1
console.log("Hello".concat("world"))

8、删除首位空格

1
console.log("123" + "   coderwhy   ".trim() + "123") // 123coderwhy123

9、字符串分割

1
2
3
var message = "my name is coderwhy"
console.log(message.split(" ", 3)) // 以空格进行分割,也可以是一个正则表达式,限制3个
// ['my', 'name', 'is']

10、格式化输出

1
2
3
var str = "4"
console.log(str.padStart(4, "0")) // 0004
console.log(str.padEnd(4, "0")) // 4000

11.5 数组Array使用详解

1、创建数组

1
2
3
// 两种方法
var arr1 = []
var arr2 = new Array()

2、数组的基本操作

访问数组中的元素

1
2
console.log(arr[0]) // 索引不能为负数
console.log(arr.at(-1)) // 从数组尾部向前数

修改数组中的元素

1
arr[0] = "coderwhy"

数组的添加和删除

在数组的尾端添加或删除元素

1
2
arr.push("abc", "cba") // 在末端添加元素
arr.pop()

在数组的首端添加或删除元素

1
2
arr.unshift("curry") // 在首端添加元素
arr.shift()

shift/unshift比push/pop方法运行的慢

在数组中间的某个位置添加或者删除元素

1
2
3
4
5
6
7
8
// arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])
// start:从start位置开始,处理数组中的元素
// deleteCount:要删除元素的个数,如果为0或者负数表示不删除
// item1, item2, ...:在添加元素时,需要添加的元素

arr.splice(1, 1) // 删除一个元素
arr.splice(1, 0, "abc", "cba") // 新增两个元素
arr.splice(1, 2, "kobe", "curry") // 替换两个元素

清空数组

1
2
// 清空数组
arr.length = 0

3、数组的遍历

普通for循环遍历

1
2
3
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}

for…in遍历,获取到索引值

1
2
3
for (var index in arr) {
console.log(arr[index])
}

for…of遍历,获取到每一个元素

1
2
3
for (var item of arr) {
console.log(item)
}

4、数组的方法

arr.slice:用于对数组进行截取(类似于字符串的slice方法)

1
console.log(arr.slice(2, 3))

arr.concat:创建一个新数组,其中包含来自于其他数组和其他项的值

1
2
var newArr = arr.concat(["abc", "cba"], "nba")
console.log(newArr)

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
2
3
4
var newStus = students.sort(function(item1, item2) {
return item2.age - item1.age
})
console.log(newStus)

reverse()

将数组中元素的位置颠倒,并返回该数组

7、数组的其他高阶方法

arr.forEach

遍历数组,并且让数组中每一个元素都执行一次对应的方法

1
2
3
4
5
6
7
8
9
// forEach方法对数组进行遍历循环,这个方法没有返回值
var Arr = [1, 4, 7, 10]
Arr.forEach(function(currentValue, index, arr) {
console.log(index + "--" + currentValue + "--" + (arr === Arr))
// 0--1--true
// 1--4--true
// 2--7--true
// 3--10--true
})

arr.map

map()方法创建一个新数组。这个新数组由原数组中的每个元素都调用一次提供函数后的返回值组成

1
2
3
4
5
6
7
// map方法实现数组中每个数求平方
var arr = [1, 4, 8, 10]
var arr2 = arr.map(function(currentValue) {
return currentValue * currentValue
})

console.log(arr2)

arr.filter

filter()方法创建一个新数组。新数组中只包含每个元素调用函数返回为true的元素

1
2
3
4
5
var arr = [1, 4, 6, 8, 10]
var result1 = arr.filter(function(currentValue) {
return currentValue > 5
})
console.log(result1) // [6, 8, 10]

arr.reduce

用于计算数组中所有元素的总和。对数组中的每个元素按序执行一个由您提供的reducer函数,每一次运行reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值

1
2
3
4
5
6
7
8
var products = [
{ name: "鼠标", price: 88, count: 3 },
{ name: "键盘", price: 200, count: 2 },
{ name: "耳机", price: 9.9, count: 10 },
]
var totalPrice = products.reduce(function(preValue, item) {
return preValue + item.price * item.count
}, 0) // 0为第一次执行reduce函数时preValue的值(初始化)

11.6 内置对象Date

1、时间的表示方式

GMT:英国伦敦的皇家格林威治天文台的标准时间。其他时区根据此时间加减

UTC:原子钟计算的标准时间。减少了GMT的误差

2、创建Date对象

1
2
3
4
var date1 = new Date() // 当前时间Fri May 13 2022 15:22:53 GMT+0800(伊尔库茨克标准时间)
var date2 = new Date(1000) // 传入的是毫秒数,表示从1970-01-01 00:00:00 UTC经过的毫秒数
var date3 = new Date("2022-08-08") // 传入的是dateString,日期的字符串值
var date4 = new Date(2022, 08, 08, 08, 08, 08, 08) // new Date(year, monthIndex[, day[, hours[, minutes[, seconds[, milliseconds]]]]])

3、dateString时间的表示方式

日期的表示方式有两种:RFC 2822标准或者ISO 8601标准

1
2
3
4
5
var time = new Date() // 默认为RFC 2822标准
console.log(time) // Fri May 13 2022 17:14:52 GMT+0800

var time2 = new Date().toISOString() // 可以将其转换为ISO 8601标准
console.log(time2) // '2022-05-13T15:14:52.507Z'
  • 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
2
3
4
5
6
7
// 测试代码的性能
var startTime = Date.now()
for (var i = 0; i < 1000; i++) {
console.log(i)
}
var endTime = Date.now()
console.log(endTime - startTime)
  • Date.parse(str):可以从一个字符串中读取日期
1
2
var time1 = Date.parse('2022-05-13T15:14:52.507Z')
console.log(time1)
1
2
3
4
5
6
var startTime = Date.now()
for (var i = 0; i < 10000; i++) {
console.log(i)
}
var endATime = Date.now()
console.log(endTime - startTime)
1
2
3
4
5
6
7
8
9
10
11
12
var time = new Date(); // 获取系统当前时间
time.getMilliseconds() */

//在JS中提供了一个函数toLocaleString(),其实这个函数是Object中的.
// 转换成具有本地语言环境的日期格式
var strTime = time.toLocaleString();
console.log(strTime) //2021/3/26 下午5:59:55

// 怎么获取自"1970年1月1日 00:00:00 000"到系统当前时间的总毫秒数.
var now = new Date();
var timeMillis = now.getTime(); //这个getTime()方法是一个重点方法.
console.log(timeMillis)

12 面向对象

对象类型是一种存储键值对的更复杂的数据类型。key可以是字符串和Symbol类型,value可以是任意类型(基本数据类型、函数类型、对象类型等)

12.1 创建对象

创建对象的三种方法:

  • {}
  • new Object+动态添加属性
  • new其他类

12.2 对象的常见操作

1、访问对象的属性

1
2
console.log(info.name)
var age = info.age

2、修改对象的属性

1
2
info.name = 'sjx'
info.age = 30

3、添加对象的属性

1
2
info.height = 1.98
info.address = "洛杉矶"

4、删除对象的属性

delete操作符

1
delete info.age

12.3 方括号和引用的使用

方括号运行在我们定义或者操作属性时更加的灵活

1
2
3
4
5
6
7
8
var message = "Hello world"
var obj ={
"good friend": "why",
[message]: "你好,世界"
}

console.log(obj["good friend"])
console.log(obj[message])

12.4 对象的遍历

表示获取对象中所有的属性和方法

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组

1、普通for循环

1
2
3
4
5
6
var infoKeys = Object.keys(info)
for (var i = 0; i < infoKeys.length; i++) {
var key = infoKeys[i]
var value = info[key]
console.log(`key:$(key), value:$(value)`)
}

2、for in遍历方法

1
2
3
4
for (var key in info) {
var value = info[key]
console.log(`key:$(key), value:$(value)`)
}

12.5 栈内存和堆内存

原始类型占据的空间是在栈内存中分配的

对象类型占据的空间是在堆内存中分配的

12.6 值类型和引用类型

原始类型的保存方式:在变量中保存的是值本身,所有原始类型也被称为值类型

对象类型的保存方式:在变量中保存的是对象的“引用”,所以对象类型也被称为引用类型

1
2
3
4
5
6
7
8
9
// 对象传值参数为引用,则函数内部可以改变对象的属性,普通的变量则不行,为值传递
var test = {
message: 'hello'
}
function change(func) {
func.message = 'yes'
}
change(test)
console.log(test.message) // yes

12.7 this的指向

  • 在全局环境下面,this指向window
  • 通过对象调用,this指向调用的对象
1
2
3
4
5
6
var obj = {
bar: function() {
console.log(this) // obj
}
}
obj.bar()

12.8 创建对象的方案——构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name, age, height, address) {
this.name = name
this.age = age
this.height = height
this.address = address

this.eating = function() {
console.log(this.name + "在吃东西")
}
this.running = function() {
console.log(this.name + "在跑步")
}
}

13 补充

13.1 注释

  • 单行注释

  • 多行注释

  • 文档注释

1
2
3
4
5
6
7
8
9
10
/**
* 和某人打招呼的函数
* @param {string} name 姓名
* @param {number} age 年龄
*/
function sayHello(name, age) {

}

sayHello("why", 18)

CSS只有一种注释/* */

13.2 noscript

浏览器不支持脚本或者浏览器对脚本的支持被关闭时显示<noscript>标签中的元素

1
2
3
4
5
<noscript>
<p>
您的浏览器不支持或者关闭运行JavaScript
</p>
</noscript>

13.3 debugger

debugger相当于在代码中打断点

13.4 JS代码风格

image-20221027235400657

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