1.filter
数组方法
作用:通过函数筛出原数组中复合条件的元素,生成新的数组
结果:创建一个新数组
基本语法:
const newArray = array.filter(function(element, index, array) {
// 返回 true 以保留元素,或返回 false 以排除元素
});
使用箭头函数:
const newArray = array.filter(element => {
// 返回 true 以保留元素,或返回 false 以排除元素
});
下面是一个具体的例子,假设我们有一个包含数字的数组,我们想要过滤出所有大于5的数字:
const numbers = [1, 4, 6, 8, 10, 3, 5];
const filteredNumbers = numbers.filter(number => number > 5);
console.log(filteredNumbers); // 输出: [6, 8, 10]
这里是一个更复杂的例子,假设我们有一个对象数组,我们想要过滤出所有年龄大于18的学生:
const students = [
{ name: 'Alice', age: 17 },
{ name: 'Bob', age: 18 },
{ name: 'Charlie', age: 19 },
{ name: 'David', age: 16 }
];
const adults = students.filter(student => student.age >= 18);
console.log(adults);
// 输出:
// [
// { name: 'Bob', age: 18 },
// { name: 'Charlie', age: 19 }
// ]
2.类与原型链
力扣2695
2.1 两者的关系
省流:
1.类是个语法糖,方便使用继承与共享特性。本质还在使用原型(机制)
2.原型是js中实现继承和共享的基础机制。原型链是因实例指向原型的构造函数prototype
属性而产生。
3.函数都拥有prototype
属性,这是个对象,存了实例共有的属性与方法。
4.对于实例,可以通过__proto__
访问该实例的原型。
2.1.1 类(Class)
- 类是ES6(ECMAScript 2015)引入的一个语法糖,它使得原型继承更加清晰和易于理解。
- 类提供了更简洁的语法来创建对象,定义构造函数,以及添加方法。
- 类通过
class
关键字定义,并在内部可以使用constructor
方法来初始化实例属性。 - 类可以包含静态方法,这些方法属于类本身,而不是类的实例。
- 类使用
extends
关键字来实现继承,子类可以继承父类的属性和方法。
2.1.2 原型(Prototype)
- 原型是JavaScript实现继承和共享属性和方法的基础机制。
- 每个JavaScript函数都有一个
prototype
属性,这是一个对象,包含了所有实例共享的属性和方法。 - 当你创建一个对象实例时,这个实例的内部
[[Prototype]]
(在大多数现代浏览器中可以通过__proto__
访问)指针指向构造函数的prototype
属性。 - 如果访问一个对象的属性或方法,而该对象本身没有这个属性或方法,解释器会沿着原型链向上查找,直到找到为止。
原型对象(Prototype Object)
每个JavaScript函数都有一个名为prototype
的属性,这是一个普通的对象,用于存储所有实例共享的属性和方法。当你通过new
关键字创建一个对象实例时,这个实例内部会包含一个指向构造函数prototype
属性的链接,这个链接被称为原型链。
原型链(Prototype Chain)
原型链是JavaScript实现继承的一种机制。当你试图访问一个对象的属性或方法时,如果这个对象本身没有这个属性或方法,解释器会沿着原型链向上查找,直到找到这个属性或方法,或者到达原型链的末端。
示例
下面是一个简单的示例来说明原型的工作原理:
// 定义一个构造函数
function Animal(name) {
this.name = name;
}
// 在Animal的prototype上添加一个方法
Animal.prototype.sayName = function() {
console.log(this.name);
};
// 创建一个Animal的实例
var myAnimal = new Animal('Mittens');
// 调用实例的方法,这个方法是从原型链上获得的
myAnimal.sayName(); // 输出: Mittens
在这个例子中:
Animal
是一个构造函数,它有一个prototype
属性。sayName
是一个添加到Animal.prototype
上的方法。- 当
myAnimal
实例调用sayName
方法时,因为myAnimal
本身没有这个方法,解释器会沿着原型链查找,并在Animal.prototype
上找到这个方法。
原型的原型
原型本身也是一个对象,因此它也有自己的原型。默认情况下,所有函数的原型都继承自Object.prototype
,这意味着所有的对象都可以访问Object.prototype
上的方法,比如toString
、valueOf
等。
原型属性 __proto__
大多数现代JavaScript环境在每个对象上都提供了一个名为__proto__
的属性,它直接指向该对象的原型。这个属性不是标准的一部分,但它提供了一种简便的方式来访问和检查对象的原型。
console.log(myAnimal.__proto__ === Animal.prototype); // 输出: true
2.1.3 关系
- 当你使用类定义一个对象时,JavaScript实际上在背后使用了原型机制。
- 类的
constructor
方法相当于传统构造函数,而类中定义的方法实际上是被添加到构造函数的prototype
属性上。 - 类的
extends
关键字实际上是在设置子类的prototype
属性,使其指向父类的prototype
,从而实现原型链。
以下是一个简单的类和原型关系的例子:
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
// 类Animal的prototype属性
console.log(Animal.prototype); // { constructor: f, speak: f }
const animal = new Animal('Mammal');
// 实例animal的内部[[Prototype]]指向Animal的prototype
console.log(animal.__proto__ === Animal.prototype); // true
// 调用原型上的方法
animal.speak(); // Mammal makes a noise.
在这个例子中,Animal
是一个类,它有一个prototype
属性,该属性包含了一个constructor
和一个speak
方法。当创建animal
实例时,它的内部[[Prototype]]
指向了Animal.prototype
,这就是原型链的工作原理。通过类,我们得到了一个更清晰的语法来操作原型链。
2.2 两者的区别对比和代码示例
语法和形式
类(Class):
- 类是ES6(ECMAScript 2015)引入的语法糖,使得原型继承更加清晰和易于理解。
- 使用
class
关键字定义类,使用constructor
方法初始化实例属性。 - 使用
extends
关键字实现继承。 - 方法定义在类的块内部,不需要使用
function
关键字。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
原型(Prototype):
- 原型链是JavaScript实现继承的基础机制。
- 使用构造函数和原型对象来定义类和实例方法。
- 通过
new
关键字创建实例,并将实例的__proto__
属性指向构造函数的prototype
属性。
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
继承
类(Class):
- 使用
extends
关键字来创建子类,并使用super
关键字调用父类的构造函数或方法。
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
speak() {
super.speak();
console.log('Woof!');
}
}
原型(Prototype):
- 通过设置子构造函数的原型对象为父构造函数的实例来实现继承。
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
Animal.prototype.speak.call(this);
console.log('Woof!');
};
方法添加
类(Class):
- 方法直接在类体内部定义。
class Animal {
speak() {
// ...
}
}
原型(Prototype):
- 方法被添加到构造函数的
prototype
属性上。
Animal.prototype.speak = function() {
// ...
};
3.转字符串
3.1 tostring
作用对象:数组
对每个元素都进行toString操作。数组里还有数组也会转化,去掉[ ]
在JavaScript中,数组对象有一个 toString
方法,该方法返回一个字符串,表示指定的数组及其元素。toString
方法会将数组中的每个元素转换为字符串(如果它们不是字符串的话),然后用逗号将它们连接起来。
以下是一些对数组使用 toString
方法的示例:
const array1 = [1, 2, 3];
console.log(array1.toString()); // 输出: "1,2,3"
const array2 = [1, 'a', true, null, undefined, { key: 'value' }, [4, 5]];
console.log(array2.toString()); // 输出: "1,a,true,,,[object Object],4,5"
const array3 = [];
console.log(array3.toString()); // 输出: ""
注意事项:
- 对于数组中的原始值(如数字、字符串、布尔值),
toString
方法将它们转换为字符串。 - 对于
null
和undefined
,toString
方法会将它们转换为空字符串。 - 对于对象(包括数组和函数),
toString
方法通常调用对象的toString
方法,对于大多数对象,这将返回[object Object]
或[object Array]
。 - 逗号用于分隔数组中的元素。
由于toString
方法会忽略数组中的undefined
和null
值,并且在处理对象时可能不会返回有用的信息,所以在需要更复杂的数组转字符串操作时,可能需要使用其他方法,如join
方法,它允许指定一个分隔符来连接数组元素。
3.2 JSON.stringify()
作用对象:对象
const obj = { name: "Alice", age: 30 };
const str = JSON.stringify(obj);
console.log(str); // 输出: '{"name":"Alice","age":30}'