js 基础梳理

一、ES5

1. Array.from

• 含义：Array.from是JavaScript中的一个静态方法，用于从类数组对象或可迭代对象创建一个新的浅拷贝的数组实例。
• 语法：Array.from(arrayLike [,mapFn [, thisArg]])
• 参数说明：
  • arrayLike: 要转换为数组的类数组对象或可迭代对象。
  • mapFn: 可选。一个映射函数，用于对数组中的每个元素进行处理。
  • thisArg: 可选。可选的映射函数的执行上下文。
• 示例：
  • 将类数组对象转换为数组：

  var arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
  var array = Array.from(arrayLike)
  
  console.log(array) // ['a', 'b', 'c']
  

  • 使用映射函数对数组中的元素进行处理

  var arrayLike = {0: 1, 1: 2, 2: 3, length: 3}
  var array= Array.from(arrayLike, function(item){
  	return item * 2
  })
  
  console.log(array) // [2, 4, 6]
  

  • 从字符串构建数组

  Array.from("foo"); // [ "f", "o", "o" ]
  

  • 从Set构建数组

  const set = new Set(["foo", "bar", "baz", "foo"]);
  Array.from(set); // [ "foo", "bar", "baz" ]
  

  • 从Map构建数组

  const map = new Map([
    [1, 2],
    [2, 4],
    [4, 8],
  ]);
  Array.from(map); // [[1, 2], [2, 4], [4, 8]]
  
  const mapper = new Map([
    ["1", "a"],
    ["2", "b"],
  ]);
  Array.from(mapper.values()); // ['a', 'b'];
  
  Array.from(mapper.keys()); // ['1', '2'];
  
  

二、ES6

1. call

• 含义：用来调用一个函数，并指定函数内部的this值和参数列表。
• 语法：function.call(thisArg, arg1, arg2...)
• 解释：function是要调用的函数，thisArg是要设置为函数内部的this值的对象，arg1,arg2,...是要传递给函数的参数列表
• 作用：call方法的作用是在指定的thisArg上调用函数，并将参数传递给函数。通过调用call方法，我们可以显式的指定函数内部的this值，而不依赖于函数的调用方式。
• 示例：

function greet(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}
const person = {
  name: "John"
};
greet.call(person, "Alice"); // Hello, Alice! My name is John.

2. class

• 含义：class是一种用于创建对象的语法题，它提供了一种更简洁和面向对象的方式来定义和使用对象。使用class关键字可以定义一个类，类是一种模板或蓝图，描述了对象的属性和方法。类可以看做是对象的构造函数，通过实例化可以创建对象。
• 使用场景：
  • 创建对象：使用class可以方便的创建对象，尤其是需要创建多个具有相同属性和方法的对象时。
  • 封装代码：class提供了一种封装代码的方式，将相关的属性和方法阻止在一起，使代码更加清晰和可维护。
  • 继承和多态：class支持继承和多态的特性，可以通过继承来扩展已有的类，并通过多态来实现不同类的统一接口。
• 示例：

class Person{
	constructor(name, age){
		this.name = name
		this.age = age
	}
	sayHello(){
		console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`)
	}
}
const person = new Person('Alice',18)
person.sayHello() // Hello, my name is Alice and I'm 18 years old.

• 解释：
  在上面的示例中，我们定义了一个Person类，他有两个属性name和age，和一个方法sayHello。通过class关键字和constructor方法，定义了类的构造函数和属性。在构造函数中，使用this关键字来引用当前实例对象。

3. findIndex

• 含义：用于查找数组中指定条件的元素的索引
• 语法：array.findIndex(callback(element[, index[, array]])[, thisArg])
• 参数
  • callback: 回调函数，用于测试数组中的每个元素，可以接收三个参数：
    • element: 当前正在被测试的元素
    • index(可选)：当前元素的索引
    • array(可选)：调用findIndex方法的数组
      回调函数返回一个布尔值，表示当前元素是否满足条件。
  • thisArg(可选)：执行回调函数时使用的this值
• 用法：findIndex方法会从数组的第一个元素开始，依次调用回调函数，直到找到满足条件的元素。如果找到了满足条件的元素，则返回该元素的索引；如果没有找到，则返回-1
• 示例：

const numbers = [1,2,3,4,5];
const index = numbers.findIndex((element) => element > 3)

console.log(index) // 3

关于index和array的使用

const numbers = [1,2,3,4,5]
const index = numbers.findIndex((element , index, array) => {
	if(index > 0 && element === array[index - 1]){
		return true
	}
	return false
})

console.log(index) // -1；目的是查找数组中是否存在相邻重复的元素，未找到所以返回-1

三、TypeScript

四、ES7

1. Array.prototype.includes

• 定义：includes()方法用来判断一个数组或字符串是否包含一个指定的值。如果包含返回true，否则返回false
• 语法：

arr.includes(value, [, fromIndex])

• 参数说明：
  • value: 要查找的指定值
  • fromIndex(可选)：从数组的fromIndex位开始查找。若fromIndex大于等于数组长度，则返回false；若fromIndex的为负数，使用数组长度+fromIndex 计算的索引作为新的fromIndex，如果新的fromIndex为负值，则搜索整个数组。
• 示例：

let arr = [1,2,3,4]
arr.includes(3,1) // true
arr.includes(3,3) // false
arr.includes(3,20) // false
arr.includes(3, -100);  // true
arr.includes(3, -1);    // false

2. Exponentiation Operator幂运算

• 含义：幂运算符 ** ，相当于Math.pow()
• 示例：

5 ** 2  // 25
Math.pow(5, 2) // 25

五、ES8

六、ES9

七、ES10

八、ES11

1. 空值合并运算符 ?? ||

• 1.1 空值合并操作符 ??
  • 定义：?? 是一个逻辑操作符，当左边的操作书为null或undefined的时候，返回其右侧操作符，否则返回左侧。
  • 示例：

  	undefined ?? 'foo'  // 'foo'
  	null ?? 'foo'  // 'foo'
  	'foo' ?? 'bar' // 'foo'
  

• 1.2 逻辑或操作符 ||
  • 定义：逻辑或操作符 （||），会在左侧操作数为假值（左侧操作数会先转换为Boolean，false则为假值）时返回右侧操作数。
  • 示例：

  	0 || 1  // 1
  	0 ?? 1  // 0
  	
  	'' || 'bar'  // 'bar'
  	'' ?? 'bar'  // ''
  	
  	NaN || 1  // 1
  	NaN ?? 1  // NaN
  	
  	false || 'bar'  // 'bar'
  	false ?? 'bar'  // false
  

• 1.3 注意
  不可将??与&& || 一起使用，会报错

  	null || undefined ?? "foo"; // 抛出 SyntaxError
  	true || undefined ?? "foo"; // 抛出 SyntaxError