沉梦手记
  • 前端学习
  • 前端基础
  • JavaScript知识点整理
沉梦听雨
2023-07-06
目录

对象类型

# 对象类型

# 1) Function(函数)⭐️⭐️

# 定义函数
function 函数名(参数) {
    // 函数体
    return 结果;
}
1
2
3
4

例

function add(a, b) {
    return a + b;
}
1
2
3
# 调用函数
函数名(实参);
1

例

add(1, 2);     // 返回 3
1

js 中的函数调用特点：对参数的类型和个数都没有限制，例如

// 对类型没限制
add('a', 'b');  // 返回 ab
add(4, 5, 6);   // 返回 9, 第三个参数没有被用到, 不会报错
// 对参数个数没限制
add(1);			// 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN（1 + undefined）
1
2
3
4
5
# 默认参数
  • java 中（spring）要实现默认参数的效果得这么做：

用 @RequestParam(defaultValue="1") 指定参数默认值

@RestController 
public class MyController {
    
    @RequestMapping("/page")
    @ResponseBody
    public void page(
        @RequestParam(defaultValue="1") int page, 
        @RequestParam(defaultValue="10") int size
    ){
        // ...
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
  • 在 js 中，直接用 参数 = 值 的形式就可以赋默认值：
function pagination(page = 1, size = 10) {
    console.log(page, size);
}
1
2
3
# 匿名函数

语法，小括号包含整个函数内容

(function (参数) {
    // 函数体
    return 结果;
})
1
2
3
4

例

(function(a,b){
    return a + b;
})
1
2
3

第一种场景：定义完毕后立刻调用

(function(a,b){
    return a + b;
})(1,2)
1
2
3

第二种场景：作为其它对象的方法，例如

页面有元素

<p id="p1">点我啊</p>
1

此元素有一个 onclick 方法，会在鼠标单击这个元素后被执行，onclick 方法刚开始是 null，需要赋值后才能使用。

document.getElementById("p1").onclick = (function(){
    console.log("鼠标单击了...");
});
1
2
3
# 箭头函数
(参数) => {
    // 函数体
    return 结果;
}
1
2
3
4

语法规则，有点像 java 中的 Lambda 表达式：

  • 如果没有参数，() 还是要保留

    const sayHello = () => {
  console.log("Hello!");
};

sayHello();
    1
    2
    3
    4
    5

  • 如果只有一个参数，() 可以省略

    const double = number => {
  return number * 2;
};

console.log(double(5));
    1
    2
    3
    4
    5

  • 如果函数体内只有一行代码，{} 可以省略

    const sayHi = () => console.log("Hi!");

sayHi();

document.getElementById("p1").onclick = () =>  console.log("aa");
    1
    2
    3
    4
    5

  • 如果这一行代码就是结果，return 可以省略

    const multiply = (a, b) => a * b;

console.log(multiply(2, 3));
    1
    2
    3
# 函数是对象

以下形式在 js 中非常常见！

  1. 可以参与赋值，例，具名函数也能参与赋值
function abc() {
    console.log("bb");
}
// 将函数赋值到 onclick 方法中
document.getElementById("p1").onclick = abc;
1
2
3
4
5
  1. 有属性、有方法，执行 console.dir(abc)，输出结果如下
ƒ abc()
    arguments: null
    caller: null
    length: 0
    name: 沉梦听雨
    ➡prototype: {constructor: ƒ}
    [[FunctionLocation]]: VM1962:1
    ➡[[Prototype]]: ƒ ()
    ➡[[Scopes]]: Scopes[1]
1
2
3
4
5
6
7
8
9

  • 其中带有 f 标记的是方法，不带的是属性

  • 带有 ➡ 符号的可以继续展开，限于篇幅省略了

  • 带有 [[ ]] 的是内置属性，不能访问，只能查看

  • 相对重要的是 [[Prototype]] 和 [[Scopes]] 会在后面继承和作用域时讲到

  1. 可以作为方法参数
function a() {
    console.log('a')
}

function b(fn) {          // fn 将来可以是一个函数对象
    console.log('b')
    fn();                 // 调用函数对象
}

b(a)
1
2
3
4
5
6
7
8
9
10
  1. 可以作为方法返回值
function c() {
    console.log("c");
    function d() {
        console.log("d");
    }
    return d;
}

c()()
1
2
3
4
5
6
7
8
9
# 函数作用域

函数可以嵌套（js 代码中很常见，只是嵌套的形式更多是匿名函数，箭头函数）

function a() {
    function b() {        
    }
}
1
2
3
4

看下面的例子

function c() {
    var z = 30;
}

var x = 10; // 全局作用域
function a() {
    var y = 20; // 局部作用域，只能在 a() 和 b() 中访问
    function b() {
        // 看这里
        console.log(x, y);
    }
    b(); // 输出 10 20
}

a(); // 10 20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • 以函数为分界线划定作用域，所有函数之外是全局作用域
  • 查找变量时，由内向外查找
    • 在内层作用域找到变量，就会停止查找，不会再找外层
    • 所有作用域都找不到变量，报错
  • 作用域本质上是函数对象的属性，可以通过 console.dir 来查看调试
# 闭包
  • 函数定义时，它的作用域已经确定好了，因此无论函数将来去了哪，都能从它的作用域中找到当时那些变量
  • 别被概念忽悠了，闭包就是指函数能够访问自己的作用域中变量
var x = 10;
function a() {
    var y = 20;
    function b() {
        console.log(x,y);
    }
    return b;
}
// 在外面执行了 b，通过调用a()()，首先执行a()函数，然后再 调用返回的函数b
a()(); // 最终的输出结果还是 10 20
1
2
3
4
5
6
7
8
9
10
11
# let、var 与作用域

如果函数外层引用的是 let 变量，那么外层普通的 {} 也会作为作用域边界，最外层的 let 也占一个 script 作用域

let x = 10; 
if(true) {
    let y = 20;
    function b() {
        console.log(x,y);
    }
    console.dir(b);
}
1
2
3
4
5
6
7
8

如果函数外层引用的是 var 变量，外层普通的 {} 不会视为边界

var x = 10; 
if(true) {
    var y = 20; // 注意，是在 b 函数外定义的
    function b() {
        console.log(x,y);
    }
    console.dir(b);
}
1
2
3
4
5
6
7
8

如果 var 变量出现了重名，则他俩会被视为同一作用域中的同一个变量

var e = 10; 
if(true) {
    var e = 20;
    console.log(e);	// 打印 20
}
console.log(e);		// 因为是同一个变量，还是打印 20
1
2
3
4
5
6

如果是 let，则视为两个作用域中的两个变量，一个全局范围，一个块局范围

let e = 10; 
if(true) {
    let e = 20;	
    console.log(e);	// 打印 20
}
console.log(e);		// 打印 10
1
2
3
4
5
6

要想里面的 e 和外面的 e 能区分开来，最简单的办法是改成 let，或者用函数来界定作用域范围

var e = 10; 
if(true) {
    function b() {
        var e = 20;
    	console.log(e);
    }
    b(); // 20
}
console.log(e); // 10
1
2
3
4
5
6
7
8
9

函数 b() 的作用域与外部作用域是分离的，因此在函数 b() 内部声明的变量 e 不会影响外部作用域中的变量 e。因此，函数 b() 内部的 console.log(e) 会打印 20，而外部的 console.log(e) 会打印最初的值 10。

# 2) Array ⭐️

语法

// 创建数组
let arr = [1,2,3]; 

// 获取数组元素
console.log(arr[0]); // 输出 1

// 修改数组元素
array[0] = 5;		 // 数组元素变成了 [5,2,3]

// 遍历数组元素，其中 length 是数组属性，代表数组长度
for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

API

  • push 【尾部】添加、shift 【头部】移除、splice 删除【参数1】索引位置开始的【参数2】个元素
let arr = [1,2,3]; 

arr.push(4);    	// 向数组尾部(右侧)添加元素, 结果 [1,2,3,4]
arr.shift();		// 从数组头部(左侧)移除元素, 结果 [2,3,4]
arr.splice(1,1);	// 删除【参数1】索引位置的【参数2】个元素，结果 [2,4]
1
2
3
4
5
  • join

用于将数组中的所有元素连接成一个字符串。

语法：array.join(separator)

separator：可选参数，表示在连接数组元素时使用的分隔符字符串。如果省略该参数，则默认使用逗号 , 作为分隔符。

let arr = ['a','b','c'];

arr.join(); 		// 默认使用【,】作为连接符，结果 'a,b,c'
arr.join('');		// 结果 'abc'
arr.join('-');		// 结果 'a-b-c'
1
2
3
4
5
  • map、filter、forEach

map 例子 -- 处理元素，返回新数组

  • map 方法用于遍历数组的每个元素，并对每个元素执行指定的回调函数，然后将返回的值组成一个新数组。
  • 它返回一个新数组，其中包含每个元素经过回调函数处理后的结果。
  • 回调函数接受三个参数：当前元素的值、当前索引和数组本身。
let arr = [1,2,3,6];

function a(i) {   // 代表的新旧元素之间的变换规则
    return i * 10
}

// arr.map(a) // 具名函数，结果 [10,20,30,60]

// arr.map( (i) => {return i * 10} ); // 箭头函数
arr.map( i => i * 10 ); // 箭头函数
1
2
3
4
5
6
7
8
9
10
  • 传给 map 的函数，参数代表旧元素，返回值代表新元素

map 的内部实现（伪代码）

function map(a) { // 参数是一个函数
    let narr = [];
    for(let i = 0; i < arr.length; i++) {
        let o = arr[i]; // 旧元素
        let n = a(o);   // 新元素
        narr.push(n);
    }
    return narr;
}
1
2
3
4
5
6
7
8
9

filter 例子 -- 筛选元数，返回新数组

  • filter 方法用于遍历数组的每个元素，并对每个元素执行指定的回调函数，然后根据回调函数的返回值来筛选出符合条件的元素组成一个新数组。
  • 它返回一个新数组，其中包含满足回调函数条件的元素。
  • 回调函数接受三个参数：当前元素的值、当前索引和数组本身。
let arr = [1,2,3,6];
arr.filter( (i)=> i % 2 == 1 ); // 结果 [1,3]
1
2
  • 传给 filter 的函数，参数代表旧元素，返回 true 表示要留下的元素

forEach 例子 -- 遍历数组，没有返回值

  • forEach 方法用于遍历数组的每个元素，并对每个元素执行指定的回调函数。
  • 它没有返回值，只是依次对数组的每个元素执行回调函数。
  • 回调函数接受三个参数：当前元素的值、当前索引和数组本身。
let arr = [1,2,3,6];

/*for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}*/

arr.forEach( (i) => console.log(i) );
1
2
3
4
5
6
7

两个称呼

  • 高阶函数，map，filter，forEach
  • 回调函数，例如作为参数传入的函数

# 3) Object ⭐️⭐️

# 语法
let obj = {
    属性名: 值,
    方法名: 函数,
    get 属性名() {},
    set 属性名(新值) {}
}
1
2
3
4
5
6

例1

let stu1 = {
    name: 沉梦听雨
    age: 18,
    study: function(){
        console.log(this.name + "爱学习");
    }    
}
1
2
3
4
5
6
7

例2

let name = "小黑";
let age = 20;
let study = function(){
    console.log(this.name + "爱学习");
}

let stu2 = { name, age, study }
1
2
3
4
5
6
7

例3（重点）

let stu3 = {
    name: 沉梦听雨
    age: 18,
    study(){
        console.log(this.name + "爱学习");
    }    
}
1
2
3
4
5
6
7
  • 注意：对象方法这么写，仅限于对象内部

例4

let stu4 = {
    _name: null, /*类似于java中私有成员变量*/
    get name() {
        console.log("进入了get");
        return this._name;
    },
    set name(name) {
        console.log("进入了set");
        this._name = name;
    }
}
1
2
3
4
5
6
7
8
9
10
11

调用 get，set

stu4.name = "小白"

console.log(stu4.name)
1
2
3
# 特色：属性增删

对比一下 Java 中的 Object

  • Java 的 Object 是以类作为模板来创建，对象不能脱离类模板的范围，一个对象的属性、能用的方法都是确定好的
  • js 的对象，不需要什么模板，它的属性和方法可以随时加减
let stu = {name:'张三'};
stu.age = 18;					// 添加属性
delete stu.age;					// 删除属性

stu.study = function() {		// 添加方法
    console.log(this.name + "在学习");
}
1
2
3
4
5
6
7

添加 get，set，需要借助 Object.definePropery

let stu = {_name:null};

Object.defineProperty(stu, "name", {
    get(){
        return this._name;
    },
    set(name){
        this._name = name;
    }
});
1
2
3
4
5
6
7
8
9
10
  • 参数1：目标对象
  • 参数2：属性名
  • 参数3：get，set 的定义
# 特色：this
  1. 先来对 Java 中的 this 有个理解
public class TestMethod {

    static class Student {
        private String name;

        public Student(String name) {
            this.name = name;
        }

        public void study(Student this, String subject) {
            System.out.println(this.name + "在学习 " + subject);
        }
    }

    public static void main(String[] args) {
        Student stu = new Student("小明");
        
        // 下面的代码，本质上是执行 study(stu, "java")，因此 this 就是 stu
        stu.study("java"); 
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • Java 中的 this 是个隐式参数
  • Java 中，我们说 this 代表的就是调用方法的那个对象
  1. js 中的 this 也是隐式参数，但它与函数运行时上下文相关

例如，一个“落单”的函数

function study(subject) {
    console.log(this.name + "在学习 " + subject)
}
1
2
3

测试一下

study("js");  // 输出 在学习 js
1

这是因为此时函数执行，全局对象 window 被当作了 this，window 对象的 name 属性是空串

同样的函数，如果作为对象的方法

let stu = {
    name: 沉梦听雨
    study
}
1
2
3
4

这种情况下，会将当前对象作为 this

stu.study('js'); 	// 输出 小白在学习 js
1

还可以动态改变 this

let stu = {name:"小黑"};
study.call(stu, "js");	// 输出 小黑在学习 js
1
2

使用了 call 方法来调用 study 函数，这回 study 执行时，就把 call 的第一个参数 stu 作为 this

一个例外是，在箭头函数内出现的 this，以外层 this 理解

  1. 用匿名函数
let stu = {
    name: 沉梦听雨
    friends: ["小白","小黑","小明"],
    play() {
        this.friends.forEach(function(e){
            console.log(this.name + "与" + e + "在玩耍");
        });
    }
}
stu.play()
1
2
3
4
5
6
7
8
9
10
  • this.name 所在的函数是【落单】的函数，因此 this 代表 window

输出结果为

与小白在玩耍
与小黑在玩耍
与小明在玩耍
1
2
3
  1. 用箭头函数
let stu = {
    name: 沉梦听雨
    friends: ["小白","小黑","小明"],
    play() {
        this.friends.forEach(e => {
            console.log(this.name + "与" + e + "在玩耍");
        })
    }    
}
1
2
3
4
5
6
7
8
9
  • this.name 所在的函数是箭头函数，因此 this 要看它外层的 play 函数，play 又是属于 stu 的方法，因此 this 代表 stu 对象

输出结果为

小花与小白在玩耍
小花与小黑在玩耍
小花与小明在玩耍
1
2
3
  1. 不用箭头函数的做法
let stu = {
    name: 沉梦听雨
    friends: ["小白","小黑","小明"],
    play() {
        let me = this; // 指定this
        this.friends.forEach(function(e){
            console.log(me.name + "与" + e + "在玩耍");
        });
    }
}
1
2
3
4
5
6
7
8
9
10
# 特色：原型继承
let father = {
    f1: '父属性',
    m1: function() {
        console.log("父方法");
    }
}

let son = Object.create(father);

console.log(son.f1);  // 打印 父属性
son.m1();			  // 打印 父方法
1
2
3
4
5
6
7
8
9
10
11
  • father 是父对象，son 去调用 .m1 或 .f1 时，自身对象没有，就到父对象找
  • son 自己可以添加自己的属性和方法
  • son 里有特殊属性 __proto__ 代表它的父对象，js 术语： son 的原型对象
  • 不同浏览器对打印 son 的 __proto__ 属性时显示不同
    • Edge 打印 console.dir(son) 显示 [[Prototype]]
    • Firefox 打印 console.dir(son) 显示 <prototype>
# 特色：基于函数的原型继承

出于方便的原因，js 又提供了一种基于函数的原型继承

函数职责

  1. 负责创建子对象，给子对象提供属性、方法，功能上相当于构造方法

  2. 函数有个特殊的属性 prototype，它就是函数创建的子对象的父对象

    **注意！**名字有差异，这个属性的作用就是为新对象提供原型

function cons(f2) {
    // 创建子对象(this), 给子对象提供属性和方法
    this.f2 = f2;
    this.m2 = function () {
        console.log("子方法");
    }
}
// cons.prototype 就是父对象
cons.prototype.f1 = "父属性";
cons.prototype.m1 = function() {
    console.log("父方法");
}
1
2
3
4
5
6
7
8
9
10
11
12

配合 new 关键字，创建子对象

let son = new cons("子属性")
1

子对象的 __proto__ 就是函数的 prototype 属性

# JSON

之前我们讲 http 请求格式时，讲过 json 这种数据格式，它的语法看起来与 js 对象非常相似，例如：

一个 json 对象可以长这样：

{
    "name":"张三",
    "age":18
}
1
2
3
4

一个 js 对象长这样：

{
    name: 沉梦听雨
    age:18
}
1
2
3
4

那么他们的区别在哪儿呢？我总结了这么几点

  1. 本质不同
    • json 对象本质上是个字符串，它的职责是作为客户端和服务器之间传递数据的一种格式，它的属性只是样子货
    • js 对象是切切实实的对象，可以有属性方法
  2. 语法细节不同
    • json 中只能有 null、true|false、数字、字符串（只有双引号）、对象、数组
    • json 中不能有除以上的其它 js 对象的特性，如方法等
    • json 中的属性必须用双引号引起来

json 字符串与 js 对象的转换

JSON.parse(json字符串);  // 返回js对象
JSON.stringify(js对象);  // 返回json字符串
1
2
上次更新: 2026/11/5 11:56:09
基本类型
类型

← 类型→

Theme by Vdoing | Copyright © 2023-2026 沉梦听雨 | MIT License