js 基础梳理

十三月呀

已于 2023-07-20 19:07:41 修改

阅读量257

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2023-07-18 14:25:49 首次发布

本文链接：https://blog.youkuaiyun.com/yjie970715/article/details/131784351

版权

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

一、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