一次就好吧
前端
获得徽章 0
面向对象:
面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、继承、多态。
封装:
封装的本质是将具有关联的代码组合在一起，其优势是能够保证代码复用且易于维护，函数是最典型也是最基础的代码封装形式，面向对象思想中的封装仍以函数为基础，但提供了更高级的封装形式
命名空间:
// 普通对象（命名空间）形式的封装
let beats = {
name: '狼',
setName: function (name) {
this.name = this.name;
},
getName() {
console.log(this.name);
}
}
beats.setName('熊');
beats.getName();
以往以普通对象（命名空间）形式封装的代码只是单纯把一系列的变量或函数组合到一起，所有的数据变量都被用来共享（使用 this 访问）
function Person() {
this.name = '佚名';
// 设置名字
this.setName = function (name) {
this.name = name;
}
// 读取名字
this.getName = () => {
console.log(this.name);
}
}
// 实例对像，获得了构造函数中封装的所有逻辑
let p1 = new Person();
p1.setName('小明');
console.log(p1.name);
// 实例对象
let p2 = new Person();
console.log(p2.name);
同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。
1. 构造函数体现了面向对象的封装特性
2. 构造函数实例创建的对象彼此独立、互不影响
3. 命名空间式的封装无法保证数据的独立性
面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、继承、多态。
封装:
封装的本质是将具有关联的代码组合在一起，其优势是能够保证代码复用且易于维护，函数是最典型也是最基础的代码封装形式，面向对象思想中的封装仍以函数为基础，但提供了更高级的封装形式
命名空间:
// 普通对象（命名空间）形式的封装
let beats = {
name: '狼',
setName: function (name) {
this.name = this.name;
},
getName() {
console.log(this.name);
}
}
beats.setName('熊');
beats.getName();
以往以普通对象（命名空间）形式封装的代码只是单纯把一系列的变量或函数组合到一起，所有的数据变量都被用来共享（使用 this 访问）
function Person() {
this.name = '佚名';
// 设置名字
this.setName = function (name) {
this.name = name;
}
// 读取名字
this.getName = () => {
console.log(this.name);
}
}
// 实例对像，获得了构造函数中封装的所有逻辑
let p1 = new Person();
p1.setName('小明');
console.log(p1.name);
// 实例对象
let p2 = new Person();
console.log(p2.name);
同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。
1. 构造函数体现了面向对象的封装特性
2. 构造函数实例创建的对象彼此独立、互不影响
3. 命名空间式的封装无法保证数据的独立性
展开
1
2
1. 实例属性 `length` 用来获取字符串的度长(重点)
2. 实例方法 `split('分隔符')` 用来将字符串拆分成数组(重点)
3. 实例方法 `substring（需要截取的第一个字符的索引[,结束的索引号]）` 用于字符串截取(重点)
4. 实例方法 `startsWith(检测字符串[, 检测位置索引号])` 检测是否以某字符开头(重点)
5. 实例方法 `includes(搜索的字符串[, 检测位置索引号])` 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点)
6. 实例方法 `toUpperCase` 用于将字母转换成大写
7. 实例方法 `toLowerCase` 用于将就转换成小写
8. 实例方法 `indexOf` 检测是否包含某字符
9. 实例方法 `endsWith` 检测是否以某字符结尾
10. 实例方法 `replace` 用于替换字符串，支持正则匹配
11. 实例方法 `match` 用于查找字符串，支持正则匹配
String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。
Number` 是内置的构造函数，用于创建数值
// 使用构造函数创建数值
let x = new Number('10')
let y = new Number(5)
// 字面量创建数值
let z = 20
1. 推荐使用字面量方式声明数值，而不是 `Number` 构造函数
2. 实例方法 `toFixed` 用于设置保留小数位的长度
2. 实例方法 `split('分隔符')` 用来将字符串拆分成数组(重点)
3. 实例方法 `substring（需要截取的第一个字符的索引[,结束的索引号]）` 用于字符串截取(重点)
4. 实例方法 `startsWith(检测字符串[, 检测位置索引号])` 检测是否以某字符开头(重点)
5. 实例方法 `includes(搜索的字符串[, 检测位置索引号])` 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点)
6. 实例方法 `toUpperCase` 用于将字母转换成大写
7. 实例方法 `toLowerCase` 用于将就转换成小写
8. 实例方法 `indexOf` 检测是否包含某字符
9. 实例方法 `endsWith` 检测是否以某字符结尾
10. 实例方法 `replace` 用于替换字符串，支持正则匹配
11. 实例方法 `match` 用于查找字符串，支持正则匹配
String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。
Number` 是内置的构造函数，用于创建数值
// 使用构造函数创建数值
let x = new Number('10')
let y = new Number(5)
// 字面量创建数值
let z = 20
1. 推荐使用字面量方式声明数值，而不是 `Number` 构造函数
2. 实例方法 `toFixed` 用于设置保留小数位的长度
展开
评论
2
包装类型:
在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法，如下代码举例
// 字符串类型
const str = 'hello world!'
// 统计字符的长度（字符数量）
console.log(str.length)
// 数值类型
const price = 12.345
// 保留两位小数
price.toFixed(2) // 12.34
之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。
String` 是内置的构造函数，用于创建字符串
// 使用构造函数创建字符串
let str = new String('hello world!');
// 字面量创建字符串
let str2 = '你好，世界！';
// 检测是否属于同一个构造函数
console.log(str.constructor === str2.constructor); // true
console.log(str instanceof String); // false
在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法，如下代码举例
// 字符串类型
const str = 'hello world!'
// 统计字符的长度（字符数量）
console.log(str.length)
// 数值类型
const price = 12.345
// 保留两位小数
price.toFixed(2) // 12.34
之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。
String` 是内置的构造函数，用于创建字符串
// 使用构造函数创建字符串
let str = new String('hello world!');
// 字面量创建字符串
let str2 = '你好，世界！';
// 检测是否属于同一个构造函数
console.log(str.constructor === str2.constructor); // true
console.log(str instanceof String); // false
展开
评论
2
1. 推荐使用字面量方式声明数组，而不是 `Array` 构造函数
2. 实例方法 `forEach` 用于遍历数组，替代 `for` 循环 (重点)
3. 实例方法 `filter` 过滤数组单元值，生成新数组(重点)
4. 实例方法 `map` 迭代原数组，生成新数组(重点)
5. 实例方法 `join` 数组元素拼接为字符串，返回字符串(重点)
6. 实例方法 `find` 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点)
7. 实例方法`every` 检测数组所有元素是否都符合指定条件，如果**所有元素**都通过检测返回 true，否则返回 false(重点)
8. 实例方法`some` 检测数组中的元素是否满足指定条件 **如果数组中有**元素满足条件返回 true，否则返回 false
9. 实例方法 `concat` 合并两个数组，返回生成新数组
10. 实例方法 `sort` 对原数组单元值排序
11. 实例方法 `splice` 删除或替换原数组单元
12. 实例方法 `reverse` 反转数组
13. 实例方法 `findIndex` 查找元素的索引值
2. 实例方法 `forEach` 用于遍历数组，替代 `for` 循环 (重点)
3. 实例方法 `filter` 过滤数组单元值，生成新数组(重点)
4. 实例方法 `map` 迭代原数组，生成新数组(重点)
5. 实例方法 `join` 数组元素拼接为字符串，返回字符串(重点)
6. 实例方法 `find` 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点)
7. 实例方法`every` 检测数组所有元素是否都符合指定条件，如果**所有元素**都通过检测返回 true，否则返回 false(重点)
8. 实例方法`some` 检测数组中的元素是否满足指定条件 **如果数组中有**元素满足条件返回 true，否则返回 false
9. 实例方法 `concat` 合并两个数组，返回生成新数组
10. 实例方法 `sort` 对原数组单元值排序
11. 实例方法 `splice` 删除或替换原数组单元
12. 实例方法 `reverse` 反转数组
13. 实例方法 `findIndex` 查找元素的索引值
展开
评论
2
引用类型:
Object` 是内置的构造函数，用于创建普通对象
// 通过构造函数创建普通对象
const user = new Object({name: '小明', age: 15})
// 这种方式声明的变量称为【字面量】
let student = {name: '杜子腾', age: 21}
// 对象语法简写
let name = '小红';
let people = {
// 相当于 name: name
name,
// 相当于 walk: function () {}
walk () {
console.log('人都要走路...');
}
}
console.log(student.constructor);
console.log(user.constructor);
console.log(student instanceof Object);
1. 推荐使用字面量方式声明对象，而不是 `Object` 构造函数
2. `Object.assign` 静态方法创建新的对象
3. `Object.keys` 静态方法获取对象中所有属性
4. `Object.values` 表态方法获取对象中所有属性值
Array` 是内置的构造函数，用于创建数组
// 构造函数创建数组
let arr = new Array(5, 7, 8);
// 字面量方式创建数组
let list = ['html', 'css', 'javascript']
数组赋值后，无论修改哪个变量另一个对象的数据值也会相当发生改变。
Object` 是内置的构造函数，用于创建普通对象
// 通过构造函数创建普通对象
const user = new Object({name: '小明', age: 15})
// 这种方式声明的变量称为【字面量】
let student = {name: '杜子腾', age: 21}
// 对象语法简写
let name = '小红';
let people = {
// 相当于 name: name
name,
// 相当于 walk: function () {}
walk () {
console.log('人都要走路...');
}
}
console.log(student.constructor);
console.log(user.constructor);
console.log(student instanceof Object);
1. 推荐使用字面量方式声明对象，而不是 `Object` 构造函数
2. `Object.assign` 静态方法创建新的对象
3. `Object.keys` 静态方法获取对象中所有属性
4. `Object.values` 表态方法获取对象中所有属性值
Array` 是内置的构造函数，用于创建数组
// 构造函数创建数组
let arr = new Array(5, 7, 8);
// 字面量方式创建数组
let list = ['html', 'css', 'javascript']
数组赋值后，无论修改哪个变量另一个对象的数据值也会相当发生改变。
展开
评论
2
静态成员:
在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。
// 构造函数
function Person(name, age) {
// 省略实例成员
}
// 静态属性
Person.eyes = 2
Person.arms = 2
// 静态方法
Person.walk = function () {
console.log('^_^人都会走路...')
// this 指向 Person
console.log(this.eyes)
}
1. 静态成员指的是添加到构造函数本身的属性和方法
2. 一般公共特征的属性或方法静态成员设置为静态成员
3. 静态成员方法中的 `this` 指向构造函数本身
内置构造函数:
在 JavaScript 中**最主要**的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型，对象也被称为引用类型。
在 JavaScript 内置了一些构造函数，绝大部的数据处理都是基于这些构造函数实现的，JavaScript 基础阶段学习的 `Date` 就是内置的构造函数。
// 实例化
let date = new Date();
// date 即为实例对象
console.log(date);
甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。
在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。
// 构造函数
function Person(name, age) {
// 省略实例成员
}
// 静态属性
Person.eyes = 2
Person.arms = 2
// 静态方法
Person.walk = function () {
console.log('^_^人都会走路...')
// this 指向 Person
console.log(this.eyes)
}
1. 静态成员指的是添加到构造函数本身的属性和方法
2. 一般公共特征的属性或方法静态成员设置为静态成员
3. 静态成员方法中的 `this` 指向构造函数本身
内置构造函数:
在 JavaScript 中**最主要**的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型，对象也被称为引用类型。
在 JavaScript 内置了一些构造函数，绝大部的数据处理都是基于这些构造函数实现的，JavaScript 基础阶段学习的 `Date` 就是内置的构造函数。
// 实例化
let date = new Date();
// date 即为实例对象
console.log(date);
甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。
展开
评论
2
1. 构造函数:
构造函数是专门用于创建对象的函数，如果一个函数使用 `new` 关键字调用，那么这个函数就是构造函数。
// 定义函数
function foo() {
console.log('通过 new 也能调用函数...');
}
// 调用函数
new foo;
使用 `new` 关键字调用函数的行为被称为实例化
实例化构造函数时没有参数时可以省略 `()`
构造函数的返回值即为新创建的对象
构造函数内部的 `return` 返回的值无效！
2. 实例成员:
通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员
// 构造函数
function Person() {
// 构造函数内部的 this 就是实例对象
// 实例对象中动态添加属性
this.name = '小明'
// 实例对象动态添加方法
this.sayHi = function () {
console.log('大家好~')
}
}
// 实例化，p1 是实例对象
// p1 实际就是 构造函数内部的 this
const p1 = new Person()
console.log(p1)
console.log(p1.name) // 访问实例属性
p1.sayHi() //
构造函数内部 `this` 实际上就是实例对象，为其动态添加的属性和方法即为实例成员
为构造函数传入参数，动态创建结构相同但值不同的对象
构造函数是专门用于创建对象的函数，如果一个函数使用 `new` 关键字调用，那么这个函数就是构造函数。
// 定义函数
function foo() {
console.log('通过 new 也能调用函数...');
}
// 调用函数
new foo;
使用 `new` 关键字调用函数的行为被称为实例化
实例化构造函数时没有参数时可以省略 `()`
构造函数的返回值即为新创建的对象
构造函数内部的 `return` 返回的值无效！
2. 实例成员:
通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员
// 构造函数
function Person() {
// 构造函数内部的 this 就是实例对象
// 实例对象中动态添加属性
this.name = '小明'
// 实例对象动态添加方法
this.sayHi = function () {
console.log('大家好~')
}
}
// 实例化，p1 是实例对象
// p1 实际就是 构造函数内部的 this
const p1 = new Person()
console.log(p1)
console.log(p1.name) // 访问实例属性
p1.sayHi() //
构造函数内部 `this` 实际上就是实例对象，为其动态添加的属性和方法即为实例成员
为构造函数传入参数，动态创建结构相同但值不同的对象
展开
评论
2
对象解构:
对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
// 普通对象
const user = {
name: '小明',
age: 18
};
// 批量声明变量 name age
// 同时将数组单元值 小明 18 依次赋值给变量 name age
const {name, age} = user
console.log(name) // 小明
console.log(age) // 18
1. 赋值运算符 `=` 左侧的 `{}` 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名相同的变量
3. 对象中找不到与变量名一致的属性时变量值为 `undefined`
4. 允许初始化变量的默认值，属性不存在或单元值为 `undefined` 时默认值才会生效
对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
// 普通对象
const user = {
name: '小明',
age: 18
};
// 批量声明变量 name age
// 同时将数组单元值 小明 18 依次赋值给变量 name age
const {name, age} = user
console.log(name) // 小明
console.log(age) // 18
1. 赋值运算符 `=` 左侧的 `{}` 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名相同的变量
3. 对象中找不到与变量名一致的属性时变量值为 `undefined`
4. 允许初始化变量的默认值，属性不存在或单元值为 `undefined` 时默认值才会生效
展开
评论
2
箭头函数:
箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。
// 箭头函数
const foo = () => {
console.log('^_^ 长相奇怪的函数...');
}
// 调用函数
foo()
// 更简洁的语法
const form = document.querySelector('form')
form.addEventListener('click', ev => ev.preventDefault())
1. 箭头函数属于表达式函数，因此不存在函数提升
2. 箭头函数只有一个参数时可以省略圆括号 `()`
3. 箭头函数函数体只有一行代码时可以省略花括号 `{}`，并自动做为返回值被返回
4. 箭头函数中没有 `arguments`，只能使用 `...` 动态获取实参
解构赋值:
解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型
数组解构:
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法
// 普通的数组
let arr = [1, 2, 3];
// 批量声明变量 a b c
// 同时将数组单元值 1 2 3 依次赋值给变量 a b c
let [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
1. 赋值运算符 `=` 左侧的 `[]` 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作
3. 变量的数量大于单元值数量时，多余的变量将被赋值为 `undefined`
4. 变量的数量小于单元值数量时，可以通过 `...` 获取剩余单元值，但只能置于最末位
5. 允许初始化变量的默认值，且只有单元值为 `undefined` 时默认值才会生效
箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。
// 箭头函数
const foo = () => {
console.log('^_^ 长相奇怪的函数...');
}
// 调用函数
foo()
// 更简洁的语法
const form = document.querySelector('form')
form.addEventListener('click', ev => ev.preventDefault())
1. 箭头函数属于表达式函数，因此不存在函数提升
2. 箭头函数只有一个参数时可以省略圆括号 `()`
3. 箭头函数函数体只有一行代码时可以省略花括号 `{}`，并自动做为返回值被返回
4. 箭头函数中没有 `arguments`，只能使用 `...` 动态获取实参
解构赋值:
解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型
数组解构:
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法
// 普通的数组
let arr = [1, 2, 3];
// 批量声明变量 a b c
// 同时将数组单元值 1 2 3 依次赋值给变量 a b c
let [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
1. 赋值运算符 `=` 左侧的 `[]` 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作
3. 变量的数量大于单元值数量时，多余的变量将被赋值为 `undefined`
4. 变量的数量小于单元值数量时，可以通过 `...` 获取剩余单元值，但只能置于最末位
5. 允许初始化变量的默认值，且只有单元值为 `undefined` 时默认值才会生效
展开
评论
2
动态参数:
arguments` 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。
1. arguments` 是一个伪数组
2. `arguments` 的作用是动态获取函数的实参
// 求生函数，计算所有参数的和
function sum() {
// console.log(arguments)
let s = 0
for(let i = 0; i < arguments.length; i++) {
s += arguments[i]
}
console.log(s)
}
// 调用求和函数
sum(5, 10)// 两个参数
sum(1, 2, 4) // 两个参数
剩余参数:
function config(baseURL, ...other) {
console.log(baseURL) // 得到 '
baidu.com'
console.log(other) // other 得到 ['get', 'json']
}
// 调用函数
config('baidu.com', 'get', 'json');
1. ...` 是语法符号，置于最末函数形参之前，用于获取多余的实参
2. 借助 `...` 获取的剩余实参，是个真数组
arguments` 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。
1. arguments` 是一个伪数组
2. `arguments` 的作用是动态获取函数的实参
// 求生函数，计算所有参数的和
function sum() {
// console.log(arguments)
let s = 0
for(let i = 0; i < arguments.length; i++) {
s += arguments[i]
}
console.log(s)
}
// 调用求和函数
sum(5, 10)// 两个参数
sum(1, 2, 4) // 两个参数
剩余参数:
function config(baseURL, ...other) {
console.log(baseURL) // 得到 '
baidu.com'console.log(other) // other 得到 ['get', 'json']
}
// 调用函数
config('
baidu.com', 'get', 'json');1. ...` 是语法符号，置于最末函数形参之前，用于获取多余的实参
2. 借助 `...` 获取的剩余实参，是个真数组
展开
评论
2
变量提升
变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问
// 访问变量 str
console.log(str + 'world!');
// 声明变量 str
var str = 'hello ';
1. 变量在未声明即被访问时会报语法错误
2. 变量在声明之前即被访问，变量的值为 `undefined`
3. `let` 声明的变量不存在变量提升，推荐使用 `let`
4. 变量提升出现在相同作用域当中
函数提升:
函数提升与变量提升比较类似，是指函数在声明之前即可被调用
// 调用函数
foo()
// 声明函数
function foo() {
console.log('声明之前即被调用...')
}
// 不存在提升现象
bar() // 错误
var bar = function () {
console.log('函数表达式不存在提升现象...')
}
1. 函数提升能够使函数的声明调用更灵活
2. 函数表达式不存在提升的现象
3. 函数提升出现在相同作用域当中
参数:
函数参数的使用细节，能够提升函数应用的灵活度
// 设置参数默认值
function sayHi(name="小明", age=18) {
document.write(`<p>大家好，我叫${name}，我今年${age}岁了。</p>`);
}
// 调用函数
sayHi();
sayHi('小红');
sayHi('小刚', 21);
1. 声明函数时为形参赋值即为参数的默认值
2. 如果参数未自定义默认值时，参数的默认值为 `undefined`
3. 调用函数时没有传入对应实参时，参数的默认值被当做实参传入
变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问
// 访问变量 str
console.log(str + 'world!');
// 声明变量 str
var str = 'hello ';
1. 变量在未声明即被访问时会报语法错误
2. 变量在声明之前即被访问，变量的值为 `undefined`
3. `let` 声明的变量不存在变量提升，推荐使用 `let`
4. 变量提升出现在相同作用域当中
函数提升:
函数提升与变量提升比较类似，是指函数在声明之前即可被调用
// 调用函数
foo()
// 声明函数
function foo() {
console.log('声明之前即被调用...')
}
// 不存在提升现象
bar() // 错误
var bar = function () {
console.log('函数表达式不存在提升现象...')
}
1. 函数提升能够使函数的声明调用更灵活
2. 函数表达式不存在提升的现象
3. 函数提升出现在相同作用域当中
参数:
函数参数的使用细节，能够提升函数应用的灵活度
// 设置参数默认值
function sayHi(name="小明", age=18) {
document.write(`<p>大家好，我叫${name}，我今年${age}岁了。</p>`);
}
// 调用函数
sayHi();
sayHi('小红');
sayHi('小刚', 21);
1. 声明函数时为形参赋值即为参数的默认值
2. 如果参数未自定义默认值时，参数的默认值为 `undefined`
3. 调用函数时没有传入对应实参时，参数的默认值被当做实参传入
展开
评论
3
闭包：
闭包是一种比较特殊和函数，使用闭包能够访问函数作用域中的变量。从代码形式上看闭包是一个做为返回值的函数
1. 一个函数中访问另一个函数内部的变量
2. 闭包能够创建外部可访问的隔离作用域，避免全局变量污染
3. 过度使用闭包可能造成内存泄漏
4.闭包的形成有两个条件： 函数 + 访问其他函数的内部变量
注：回调函数也能访问函数内部的局部变量。
function foo() {
let i = 0;
// 函数内部分函数
function bar() {
console.log(++i);
}
// 将函数做为返回值
return bar;
}
// fn 即为闭包函数
let fn = foo();
fn(); // 1
闭包是一种比较特殊和函数，使用闭包能够访问函数作用域中的变量。从代码形式上看闭包是一个做为返回值的函数
1. 一个函数中访问另一个函数内部的变量
2. 闭包能够创建外部可访问的隔离作用域，避免全局变量污染
3. 过度使用闭包可能造成内存泄漏
4.闭包的形成有两个条件： 函数 + 访问其他函数的内部变量
注：回调函数也能访问函数内部的局部变量。
function foo() {
let i = 0;
// 函数内部分函数
function bar() {
console.log(++i);
}
// 将函数做为返回值
return bar;
}
// fn 即为闭包函数
let fn = foo();
fn(); // 1
展开
评论
2
作用域：
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。
局部作用域：
局部作用域分为函数作用域和块作用域。
函数作用域：
在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。
1. 函数内部声明的变量，在函数外部无法被访问
2. 函数的参数也是函数内部的局部变量
3. 不同函数内部声明的变量无法互相访问
4. 函数执行完毕后，函数内部的变量实际被清空了
块作用域：
在 JavaScript 中使用 `{}` 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。
1. `let` 声明的变量会产生块作用域，`var` 不会产生块作用域
2. `const` 声明的常量也会产生块作用域
3. 不同代码块之间的变量无法互相访问
4. 推荐使用 `let` 或 `const`
注：开发中 `let` 和 `const` 经常不加区分的使用，如果担心某个值会不小被修改时，则只能使用 `const` 声明成常量。
全局作用域：
<script>` 标签和 `.js` 文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。
全局作用域中声明的变量，任何其它作用域都可以被访问
1. 为 `window` 对象动态添加的属性默认也是全局的，不推荐！
2. 函数中未使用任何关键字声明的变量为全局变量，不推荐！！！
3. 尽可能少的声明全局变量，防止全局变量被污染
JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。
作用域链：
函数内部允许创建新的函数，`f` 函数内部创建的新函数 `g`，会产生新的函数作用域，由此可知作用域产生了嵌套的关系。
如下图所示，父子关系的作用域关联在一起形成了链状的结构，作用域链的名字也由此而来。
作用域链本质上是底层的变量查找机制，在函数被执行时，会优先查找当前函数作用域中查找变量，如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域
1. 嵌套关系的作用域串联起来形成了作用域链
2. 相同作用域链中按着从小到大的规则查找变量
3. 子作用域能够访问父作用域，父级作用域无法访问子级作用域
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。
局部作用域：
局部作用域分为函数作用域和块作用域。
函数作用域：
在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。
1. 函数内部声明的变量，在函数外部无法被访问
2. 函数的参数也是函数内部的局部变量
3. 不同函数内部声明的变量无法互相访问
4. 函数执行完毕后，函数内部的变量实际被清空了
块作用域：
在 JavaScript 中使用 `{}` 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。
1. `let` 声明的变量会产生块作用域，`var` 不会产生块作用域
2. `const` 声明的常量也会产生块作用域
3. 不同代码块之间的变量无法互相访问
4. 推荐使用 `let` 或 `const`
注：开发中 `let` 和 `const` 经常不加区分的使用，如果担心某个值会不小被修改时，则只能使用 `const` 声明成常量。
全局作用域：
<script>` 标签和 `.js` 文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。
全局作用域中声明的变量，任何其它作用域都可以被访问
1. 为 `window` 对象动态添加的属性默认也是全局的，不推荐！
2. 函数中未使用任何关键字声明的变量为全局变量，不推荐！！！
3. 尽可能少的声明全局变量，防止全局变量被污染
JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。
作用域链：
函数内部允许创建新的函数，`f` 函数内部创建的新函数 `g`，会产生新的函数作用域，由此可知作用域产生了嵌套的关系。
如下图所示，父子关系的作用域关联在一起形成了链状的结构，作用域链的名字也由此而来。
作用域链本质上是底层的变量查找机制，在函数被执行时，会优先查找当前函数作用域中查找变量，如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域
1. 嵌套关系的作用域串联起来形成了作用域链
2. 相同作用域链中按着从小到大的规则查找变量
3. 子作用域能够访问父作用域，父级作用域无法访问子级作用域
展开
2
5
正则表达式：
正则表达式是用于匹配字符串中字符组合的模式。在JS中，正则表达式也是对象
作用：表单验证，过滤敏感词
语法
(1）定义规则
(2）根据规则去查找
const 变量名 = /正则表达式字面量/
变量名.test(被检测的字符串) //检测是否匹配
变量名.exec(被检测的字符串) //搜索匹配
test：找到就返回true，找不到就返回false
exec：找到就返回数组，找不到就返回null
元字符：
具有特殊含义的字符
边界符 （表示位置）
用来提示字符所处的位置
（1） ^xxx：表示以xxx开头
（2） xxx$：表示以xxx结尾
注意：^和$一起使用，必须是精确匹配
console.log(/^哈$/.test('哈')) //true
console.log(/^哈$/.test('哈哈')) //false
量词 （表示重复次数）
（1） *可有可无 重复次数>=0
（2） + 重复次数 >=1
（3） ？重复0次或1次
（4） {n} 必须出现n次
（5） {n,} 重复n次或更多次
（6） {n,m} 重复次数 >=n && <=m
逗号左右不能有空格
字符类
（1） [ ] 匹配字符集合
console.log(/[abc] /.test('agnbth')) //后面的字符串只要包含abc中的任意一个字符，都返回true
（2）[ ] 里面加上-连字符，表示一个范围
[a-z] 表示 a到z 26个英文字母都可以
[a-zA-Z] 表示大小都可以
[0-9] 表示0-9的数字都可以
3）[ ] 里面加上^ 取反符号
[a-z]在a前面加^ 匹配除了小写字母以外的字符
（4）匹配除换行符之外的任何单个字符
（5）预定义类：指某些常见模式的简写方式
修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
（1） 语法：/表达式/修饰符
i 是ignore的缩写，正则匹配时字母不区分大小写
g 是单词global的缩写，匹配所有满足正则表达式的结果
（2） replace 替换
语法：字符串.replace(/正则表达式/，'替换的文本')
正则表达式是用于匹配字符串中字符组合的模式。在JS中，正则表达式也是对象
作用：表单验证，过滤敏感词
语法
(1）定义规则
(2）根据规则去查找
const 变量名 = /正则表达式字面量/
变量名.test(被检测的字符串) //检测是否匹配
变量名.exec(被检测的字符串) //搜索匹配
test：找到就返回true，找不到就返回false
exec：找到就返回数组，找不到就返回null
元字符：
具有特殊含义的字符
边界符 （表示位置）
用来提示字符所处的位置
（1） ^xxx：表示以xxx开头
（2） xxx$：表示以xxx结尾
注意：^和$一起使用，必须是精确匹配
console.log(/^哈$/.test('哈')) //true
console.log(/^哈$/.test('哈哈')) //false
量词 （表示重复次数）
（1） *可有可无 重复次数>=0
（2） + 重复次数 >=1
（3） ？重复0次或1次
（4） {n} 必须出现n次
（5） {n,} 重复n次或更多次
（6） {n,m} 重复次数 >=n && <=m
逗号左右不能有空格
字符类
（1） [ ] 匹配字符集合
console.log(/[abc] /.test('agnbth')) //后面的字符串只要包含abc中的任意一个字符，都返回true
（2）[ ] 里面加上-连字符，表示一个范围
[a-z] 表示 a到z 26个英文字母都可以
[a-zA-Z] 表示大小都可以
[0-9] 表示0-9的数字都可以
3）[ ] 里面加上^ 取反符号
[a-z]在a前面加^ 匹配除了小写字母以外的字符
（4）匹配除换行符之外的任何单个字符
（5）预定义类：指某些常见模式的简写方式
修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
（1） 语法：/表达式/修饰符
i 是ignore的缩写，正则匹配时字母不区分大小写
g 是单词global的缩写，匹配所有满足正则表达式的结果
（2） replace 替换
语法：字符串.replace(/正则表达式/，'替换的文本')
展开
评论
7
数组中的map和join方法：
map方法：
map可以处理数据，并且返回新的数组
map是迭代数组，可以给数组元素做某些操作，并且里面写return，就可以返回处理后的数据
map方法也可以遍历数组，功能更强大
数组.map(function(item, index){ })
item：数组元素
index：数组下标
join方法：
用于把数组中的所有元素转换成一个字符串
数组.join('')
参数：数组元素是通过参数里面指定的分隔符进行分隔的
map方法：
map可以处理数据，并且返回新的数组
map是迭代数组，可以给数组元素做某些操作，并且里面写return，就可以返回处理后的数据
map方法也可以遍历数组，功能更强大
数组.map(function(item, index){ })
item：数组元素
index：数组下标
join方法：
用于把数组中的所有元素转换成一个字符串
数组.join('')
参数：数组元素是通过参数里面指定的分隔符进行分隔的
展开
评论
2
### location对象
location的数据类型是对象，拆分并保存了URL地址的各个组成部分
常见属性和方法：
①、href ：获取完整的URL地址，利用JS的方法进行跳转
location.href = '链接' （推荐使用）
②、assign()：跳转
location.assign('链接')
③、search：获取地址栏？后面的参数
④、hash ：获取地址中#后面的哈希值
⑤、reload()：刷新，相当于浏览器的刷新
参数为true时，强制刷新
histroy对象
histroy.back()：返回上一页
histroy.forward()：前进一页
histroy.go(数字)：到历史记录的具体一页
location的数据类型是对象，拆分并保存了URL地址的各个组成部分
常见属性和方法：
①、href ：获取完整的URL地址，利用JS的方法进行跳转
location.href = '链接' （推荐使用）
②、assign()：跳转
location.assign('链接')
③、search：获取地址栏？后面的参数
④、hash ：获取地址中#后面的哈希值
⑤、reload()：刷新，相当于浏览器的刷新
参数为true时，强制刷新
histroy对象
histroy.back()：返回上一页
histroy.forward()：前进一页
histroy.go(数字)：到历史记录的具体一页
展开
评论
1
JS执行机制：
JS语言是单线程的，同一时间只能做一件事
（1）、同步
执行完一个任务，再执行另外一个任务
同步任务立即执行，放在执行栈中
（2）、异步
可以同时做多个任务
异步任务耗时，放在任务队列中
（3）、事件循环：
①、先执行执行栈中的同步任务
②、异步任务放到任务队列中
③、一旦执行栈中所有的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
JS语言是单线程的，同一时间只能做一件事
（1）、同步
执行完一个任务，再执行另外一个任务
同步任务立即执行，放在执行栈中
（2）、异步
可以同时做多个任务
异步任务耗时，放在任务队列中
（3）、事件循环：
①、先执行执行栈中的同步任务
②、异步任务放到任务队列中
③、一旦执行栈中所有的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
展开
评论
2
Window对象：
BOM（浏览器对象模型）
(1）window对象是一个全局对象，也可以说是JS里的顶级对象
(2）在全局作用域下定义的函数，其实就是window对象的方法
(3）在全局作用域下使用var声明的变量，其实就是window对象的属性
(4）只要是window对象的属性和方法，window就可以不写
定时器-延时函数
JS内置的一个用来让代码延迟执行的函数
（1）语法：
setTimeout（回调函数，等待的毫秒数）
（2）延时函数只执行一次（浏览器将代码延迟执行）；间歇函数执行多次
（2）清除延时函数
let timer = setTimeout（回调函数，等待的毫秒数）
clearTimeout(timer )
BOM（浏览器对象模型）
(1）window对象是一个全局对象，也可以说是JS里的顶级对象
(2）在全局作用域下定义的函数，其实就是window对象的方法
(3）在全局作用域下使用var声明的变量，其实就是window对象的属性
(4）只要是window对象的属性和方法，window就可以不写
定时器-延时函数
JS内置的一个用来让代码延迟执行的函数
（1）语法：
setTimeout（回调函数，等待的毫秒数）
（2）延时函数只执行一次（浏览器将代码延迟执行）；间歇函数执行多次
（2）清除延时函数
let timer = setTimeout（回调函数，等待的毫秒数）
clearTimeout(timer )
展开
评论
1