箭头函数
细节
- 箭头函数是匿名函数，一般做为参数传递
- 如果函数体只有一句，那么可以省略{},同时默认会返回函数体的结果，不能写return
- 如果只有一个参数，那么可以省略中间 ()
- 如果没有参数，中间 () 不能省略
箭头函数的应用
// 定义一个箭头函数 没有实参 没有返回值 2行实际业务
const func3 = () => {
console.log(123);
console.log(456);
}
console.log(func3()); // 123 456
// 只有一个形参、没有返回值、业务代码只有一行
const func4 = num1 => console.log(678);
console.log(func4()); // 678
// 两个或者多个形参（括号不能省略）、没有返回值、业务代码只有一行 省略大括号
const func5 = (a,b,c) => console.log(a,b,c);
console.log(func5(1,3,5)); // 输出1 3 5
// 没有形参 有返回值 业务代码只有两行
const func6 = () => {
let a = 100
return a + 100
}
console.log(func6()); // 输出200
// 没有形参、有返回值、业务代码只有一行
const func7 = () => 100+100 // 相当于 return 100+100
console.log(func7()); // 输出200
返回对象
const arr = ['a', 'b', 'c']
// 需求：返回 [ {name:"a",name:"b",name:"c"} ]
// 实现
const newArr = arr.map(value=>name:value ) // 错误
const newArr = arr.map(value=>{name:value} ) // 错误
// 如果只写一个大括号，箭头函数会认为这个大括号是块级空间，而不是对象的符号
const newArr = arr.map(value => ({name:value})) // 正确写法
常用数组方法
| 方法 | 描述 |
|---|---|
| every() | 检测数值元素的每个元素是否都符合条件。 |
| filter() | 检测数值元素，并返回符合条件所有元素的数组。 |
| find() | 返回符合传入测试（函数）条件的数组元素。 |
| findIndex() | 返回符合传入测试（函数）条件的数组元素索引。 |
| forEach() | 数组每个元素都执行一次回调函数。 |
| includes() | 判断一个数组是否包含一个指定的值。 |
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| isArray() | 判断对象是否为数组。 |
| join() | 把数组的所有元素放入一个字符串。 |
| map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
| reduce() | 将数组元素计算为一个值（从左到右）。 |
| reverse() | 反转数组的元素顺序。 |
| some() | 检测数组元素中是否有元素符合指定条件。 |
| sort() | 对数组的元素进行排序。 |
面向对象
一种编程行业通用的写项目级的代码的思维，引导我们如何编写高质量的代码，万物皆对象 - 看待事物的角度，（属性：数据，行为：动作（方法））。代码特点是封装和继承
字面量
简单粗暴，但不适合创建多个同样类型的对象的场景
const obj1 = { name: '悟空1', tel: 123321 };
const name1 = 123;
const obj2 = { name: '悟空2', tel: 123322 };
const name2 = 123;
const obj3 = { name: '悟空3', tel: 123323 };
const name3 = 123;
const obj4 = { name: '悟空4', tel: 123324 };
const name4 = 123;
const obj5 = { name: '悟空5', tel: 123325 };
// 好处 方便
// 坏处 不方便维护和修改
// 当不想要name这个属性时，修改成username就会变的繁琐
工厂函数
- 容易理解
- 失去
血缘关系,无法简单分辨对象的特征 - 后期无法实现继承
function createPerson(name, age, height) {
return {
// name: name,
username: name,
age: age,
height: height,
};
}
// 创建对象
const obj1 = createPerson('悟空', 18, 150);
const obj2 = createPerson('八戒', 20, 140);
const obj3 = createPerson('龙马', 30, 190);
console.log(obj1);
console.log(obj2);
console.log(obj3);
// 优点 容易维护
// name => username
// 弊端 无法实现 继承的作用！
构造函数
- 可以方便的创建对象
- 拥有血缘关系
- 还有后续更多的优势
// 1 声明函数
function createStudent(name, age) {
// 2 通过 this 赋值
this.name = name;
this.age = age;
}
// 3 通过 new 来创建对象
const obj = new createStudent("悟能", 83);
console.log(obj);
构造函数的弊端
同一个 say 方法占据了两份内存
function createStudent(name, age) {
this.name = name;
this.age = age;
this.say = function () {
console.log(this.name);
}
}
const obj = new createStudent("悟能", 83);
const obj1 = new createStudent("悟能1", 84);
console.log(obj.say === obj1.say); // false 不是同一say方法 浪费了内存
示例图
同一个 say 方法
- 解决了浪费内存的弊端
- 但是造成了
污染全局变量的问题
// 提前将say 声明好
function say() { // 污染全局变量 代码多容易被覆盖
console.log(this.name);
}
function createStudent(name, age) {
this.name = name;
this.age = age;
this.say = say
}
const obj = new createStudent("悟能", 83);
const obj1 = new createStudent("悟能1", 84);
console.log(obj.say === obj1.say); // tru
示例图
原型模式
-
解释
- 原型的单词是
prototype, 原型的这个名字是行业内共同认可的名字 - 原型本质是一个对象，理解为
JavaScript自动帮我们添加的 - 原型是
JavaScript自动帮我们在定义构造函数的时候添加的 - 所有构造函数的实例，共享一个原型
- 原型上一般是挂载函数
- 原型的单词是
示例图
-
作用
- 解决了同一个
say浪费 内存的问题 - 解决了污染全局变量的问题
// 原形对象 是任何构造函数对象存在的一个对象 prototype // 作用 构造函数看做是人，原形对象看做是人的DNA // 如果我们修改了DNA，那么构造函数创建的实例也会一起发生改变 // 同样，如果我们在DNA上面新增了一些东西，对应的实例也会新增 function Create(name) { this.name = name } // 在DNA上面新增 Create.prototype.say = function () { console.log('你好'); } const obj1 = new Create('悟空') const obj2 = new Create('八戒') obj1.say() obj2.say() // console.log(obj1.name); // console.log(obj2.name); Create.prototype.say = function () { console.log('学生你好'); } // console.log(obj1.say === obj2.say);// 没有性能问题 // 小结 原型对象-构造函数 一般情况 // 构造函数内只放属性 name 、age、color、height // 对应原型上 都是放 方法 = 函数 - 解决了同一个
