【js自学打卡8】filter / 类与原型链 / 转字符串

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}'