- 对于普通变量，使用蛇形命名法，比如 max_value
- 对于常量，采用全大写字母，使用下划线连接，比如 MAX_VALUE
- 如果变量标记为“仅内部使用”，为其增加下划线前缀，比如 _local_var
- 当名字与 Python 关键字冲突时，在变量末尾追加下划线，比如 class_
- 类名应该使用驼峰风格（FooClass）
- 函数应该使用蛇形风格（bar_function）

## 安装autopep8

autopep8是一种自动格式化Python代码以符合PEP 8编码规范的插件。

    pip install autopep8 -i https://mirrors.aliyun.com/pypi/simple/


PEP 8-Python官方编码风格指南

## NDM

Neat Download Manager，一款与IDM极度相似的下载软件，支持32线程，与IDM最大的区别是NDM完全免费，并且支持Mac平台。

Neat Download Manager 是一个简单而轻量级的 GUI，安装包大小不到2MB，和IDM一样需要配合浏览器扩展来使用，该扩展将Neat Download Manager与浏览器集成，可以捕获下载链接并检测网站上的所有视频/音频链接，也是一款不错的视频下载软件。

## 下载地址

官网：[https://www.neatdownloadmanager.com/](https://www.neatdownloadmanager.com/)


Neat Download Manager-免费跨平台多线程下载工具

## 构造函数和原型

ES6之前没有提供extends继承，可以通过构造函数+原型对象模拟实现继承，被称为组合继承。

### call()

调用这个函数并且修改函数运行时的this指向。 function fn() { console.log(this) } const obj = { name: "佩奇", } fn() //Window fn.call(obj) //Object继承父类属性： function Father(name, age) { this.name = name this.age = age } function Son(name, age, score) { //把父构造函数的this改为子构造函数的this Father.call(this, name, age, score) this.score = score } const son = new Son("佩奇", 10, 99) console.log(son) //Son {name: '佩奇', age: 10, score: 99}继承父类方法： function Father(name, age) { this.name = name this.age = age } Father.prototype.money = function () { console.log(10000) } function Son(name, age, score) { //把父构造函数的this改为子构造函数的this Father.call(this, name, age, score) this.score = score } Son.prototype = new Father() Son.prototype.constructor = Son //利用constructor指回用来的构造函数 Son.prototype.exam = function () { console.log("儿子要考试！") } const son = new Son("佩奇", 10, 99) console.log(Son.prototype.constructor) //Son

## 类

类是对象模板，可以将对象中的属性和方法直接定义在类中。定义后，就可以直接通过类来创建对象。通过同一个类创建的对象，称为同类对象。可以使用instanceof来检查一个对象是否是由某个类创建，如果是则称该对象是这个类的实例。 class Person {} const p = new Person() // 调用构造函数，创建实例对象 console.log(p instanceof Person) // true类中的所有代码都会在严格模式下执行。严格模式下其中一个特点就是，函数的this不在是window，而是undefined。

注意：

- 在类中方法的this不是固定的：以方法形式调用时，this就是当前的实例；以函数形式调用，this是undefined
- 在有些场景下，希望方法中的this是固定的，不会因调用方式不同而改变。可以使用箭头函数来定义类中的方法，则方法中的this恒为当前实例，不会改变。

### 属性与方法

class Person { name = 'Tom' // 实例属性 age = 25 // 实例方法 sayHi() { console.log(`Hi, my name is ${this.name}`) }

static sex = 'male' // 静态属性（类属性）
// 静态方法（类方法）
static sayHi() {
console.log('Hi, I am a person')
}
}

const p = new Person()
console.log(p.name) // Tom
p.sayHi() // Hi, my name is Tom

console.log(Person.sex) // male
Person.sayHi() // Hi, I am a person

### 构造函数

class Person { // 构造函数在调用类创建对象时执行 constructor(name, age) { this.name = name this.age = age } }

const p = new Person('Tom', 25)
console.log(p.name, p.age) // Tom 25

### 封装（安全性）

封装主要用来保证数据的安全，实现封装的方式:

- 属性私有化：加#
- 通过getter和setter方法来操作属性

对象是一个用来存储不同属性的容器，不仅存储属性，还要负责数据的安全。直接添加到对象中的属性，并不安全，因为它们可以被任意的修改。

如何确保数据的安全：

- 私有化数据：将需要保护的数据设为私有，只能在类内部使用
- 提供setter和getter方法来开放对数据的操作，好处是可以控制属性的读写权限，可以在方法中对属性值进行验证

class Person { #age // 加上#表示私有属性，只能在类的内部访问 constructor(name, age) { this.name = name this.#age = age }

get age() {
return this.#age
}

set age(value) {
if (value < 0) {
throw new Error('Age cannot be negative')
}
this.#age = value
}
}

const p = new Person('Tom', 25)
console.log(p) // Person { name: 'Tom', #age: 25 }
p.age = 100
console.log(p) // Person { name: 'Tom', #age: 100 }

### 多态（灵活性）

在JS中不会检查参数类型，这就意味着任何数据都可以作为参数传递。要调用某个函数，无需指定类型，只要对象满足某些条件即可。如果一个东西走路像鸭子，叫起来像鸭子，那么它就是鸭子。多态为我们提供了灵活性。 class Dog { constructor(name) { this.name = name } }

class Cat {
constructor(name) {
this.name = name
}
}

const dog = new Dog('旺财')
const cat = new Cat('小白')

function sayHello(animal) {
console.log(`你好，${animal.name}`)
}

sayHello(dog) // 你好，旺财
sayHello(cat) // 你好，小白

### 继承（扩展性）

class Animal { constructor(name) { this.name = name } sayHi() { console.log(`动物叫。。。`) } }

class Dog extends Animal {
// 重写父类构造函数
constructor(name, age) {
super(name) // 调用父类构造函数
this.age = age
}
sayHi() {
console.log(`狗叫。。。`)
super.sayHi() // 调用父类方法
}
}

const dog = new Dog('旺财', 2)
console.log(dog.name, dog.age) // 旺财 2
dog.sayHi() // 狗叫。。。


JavaScript面向对象编程笔记

## 函数

### 动态参数

arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。 function sum() { let s = 0 for (let i = 0; i < arguments.length; i++) { s += arguments[i] } console.log(s) } sum(1, 3, 5)

### 剩余参数

...是语法符号，用于获取多余的实参，是个真数组。实际开发中，推荐使用剩余参数。 function sum(a, b, ...other) { let s = a + b for (let i = 0; i < other.length; i++) { s += other[i] } console.log(s) } sum(1, 3, 5, 7)

### 箭头函数this

箭头函数没有自己的this，它的this由外层作用域决定，只会从自己作用域链上一层沿用this。所以说，箭头函数的this和它的调用方式无关。

如果直接在箭头后设置对象字面量为返回值时，对象字面量必须使用()括起来。

const fn = () => ({ name: '李小龙' }) console.log(fn())

根据函数调用方式的不同，this值也不同:

- 以函数形式调用，this是window
- 以方法形式调用，this是调用方法的对象
- 构造函数中，this是新建对象
- 箭头函数没有自己的this，由外层作用域决定
- 通过call和apply调用的函数，它们的第一个参数就是函数的this
- 通过bind返回的函数，this由bind第一个参数决定(无法修改)

箭头函数没有自己的this，所以无法通过call、apply和bind修改它的this，箭头函数中也没有arguments。

## 内置构造函数

### Object

const obj = { name: "佩奇", age: 12 } console.log(Object.keys(obj)) //['name', 'age'] console.log(Object.values(obj)) //['佩奇', 12]

Object.assign(obj, { sex: "女" }) //拷贝对象
console.log(obj) //{name: '佩奇', age: 12, sex: '女'}

### Array

**filter**，筛选数组 const arr = [1, 4, 7, 9] const newArr = arr.filter(function (value, index) { return value > 5 }) console.log(newArr) //[7, 9]**reduce**const arr = [1, 3, 5] const total = arr.reduce(function (prev, current) { return prev + current }) console.log(total) //9

//有初始值
const total2 = arr.reduce(function (prev, current) {
return prev + current
}, 10)
console.log(total2) //19

//箭头函数写法
const total3 = arr.reduce((prev, current) => prev + current, 10)
console.log(total3) //19

**find**，找到就返回。const arr = [ { name: "佩奇", age: 18 }, { name: "乔治", age: 16 }, ] const p = arr.find(function (item) { return item.name === "佩奇" }) console.log(p) //{name: '佩奇', age: 18}

findIndex()用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。

**some**，有一个符合条件就返回true，否则返回false。

const arr = [1, 4, 7, 9] const flag = arr.some(function (value, index) { return value > 5 }) console.log(flag) //true

注意：在some里面遇到return true会终止遍历，迭代效率更高。

**every**，每一个是否都符合条件，都符合返回true，否则返回false。

const arr = [1, 5, 8] const flag = arr.every((item) => item >= 1) console.log(flag) //true

**from**，把伪数组转换为真数组。

const lst = document.querySelectorAll("ul li") const lst2 = Array.from(lst) console.log(lst2)

### String

const str = "佩奇,乔治" const arr = str.split(",") console.log(arr) //['佩奇', '乔治']

console.log(str.substring(2)) //,乔治
console.log(str.substring(3, 5)) //乔治

console.log(str.startsWith("佩奇")) //true

console.log(str.includes("佩奇")) //true

## 深浅拷贝

### 浅拷贝

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址（简单理解，如果是单层对象，没问题，如果有多层就有问题）。 const obj = { name: "佩奇", age: 10, } //方法一 const obj2 = { ...obj } obj2.age = 12 console.log(obj.age) //10 console.log(obj2.age) //12 //方法二 const obj3 = {} Object.assign(obj3, obj) obj3.age = 14 console.log(obj.age) //10 console.log(obj3.age) //14

const arr = [{ age: 18 }, { age: 20 }]
const arr2 = arr.slice() //浅拷贝
const arr3 = structuredClone(arr) //深拷贝
console.log(arr2[0] === arr[0]) //true
console.log(arr3[0] === arr[0]) //false

### 深拷贝

方法一，递归实现： const obj = { name: "佩奇", age: 10, hobby: ["唱歌", "跳舞"], } function deepCopy(newObj, oldObj) { for (let k in oldObj) { if (oldObj[k] instanceof Array) { newObj[k] = [] deepCopy(newObj[k], oldObj[k]) } else if (oldObj[k] instanceof Object) { newObj[k] = {} deepCopy(newObj[k], oldObj[k]) } else { newObj[k] = oldObj[k] } } } const obj2 = {} deepCopy(obj2, obj) obj2.hobby[0] = "睡觉" console.log(obj.hobby[0]) //唱歌方法二，使用js库lodash里面的cloneDeep实现： <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <script> const obj = { name: "佩奇", age: 10, hobby: ["唱歌", "跳舞"], } const obj2 = _.cloneDeep(obj) obj2.hobby[0] = "睡觉" console.log(obj.hobby[0]) //唱歌 </script>方法三，使用JSON字符串转换实现： const obj = { name: "佩奇", age: 10, hobby: ["唱歌", "跳舞"], } const obj2 = JSON.parse(JSON.stringify(obj)) obj2.hobby[0] = "睡觉" console.log(obj.hobby[0]) //唱歌

## Map

Map用来存储键值对结构的数据 (key-value)。

Map和Object的主要区别:

- Object中的属性名只能是字符串。如果传递了一个其他类型的属性名，JS解释器会自动将其转换为字符串
- Map中任何类型值都可作为key

属性和方法:

- map.size()获取map中键值对的数量
- map.set(key，value)向map中添加键值对
- map.get(key)根据key获取值
- map.delete(key)删除指定数据
- map.has(key)检查map中是否包含指定键
- map.clear()删除全部的键值对

const map = new Map() // 空Map map.set('name', '李小龙') // 添加key-value console.log(map.has('name')) // true 是否存在key map.set(NaN, '呵呵') console.log(map.get(NaN)) // 呵呵 获取value map.delete(NaN) // 删除key console.log(map) // Map(1) { 'name' => '李小龙' }

// Map转数组
const arr = Array.from(map) //方法一
const arr2 = [...map] //方法二

// 数组转Map
const map2 = new Map([
['name', '猪八戒'],
['age', 18],
])
console.log(map2) //{'name' => '猪八戒', 'age' => 18}

## Set

用来创建一个集合，功能和数组类似，不同点在于Set中不能存储重复数据。

方法：

- size获取数量
- add()添加元素
- has()检查元素
- delete()删除元素

const set = new Set() set.add(1) set.add('李小龙') console.log(set) //{1, '李小龙'}


JavaScript进阶编程笔记

JavaScript正则表达式

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。