js String api 整理

wxyyyxlj
58 阅读17分钟

HTML5

拖放API

HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，

将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠

标指针。

实现把照片拖放到div盒子中

<body>
    <div id="a" ondragover="dragover(event)" ondrop="drop(event)"><h1>拖放</h1></div>
    <img id="b" src="./OIP-C.jpg" alt="" draggable="true" ondragstart="dragstart(event)">
</body>

(ev)=>{
    // 传递img的id信息
    ev.dataTransfer.setData("Text",ev.target.id)
  }
  let drop = (ev)=>{
    // 获取到待拖动元素的id
    let data = ev.dataTransfer.getData("Text") // 有点像发布订阅模式
    // 获取元素
    let img = document.getElementById(data)
    // 添加元素
    ev.target.appendChild(img)
  }
  let dragover = (ev)=>{
    ev.preventDefault();
    // 组织浏览器的默认行为
 }
</script>

fer.setData("Text",ev.target.id)
  }
  let drop = (ev)=>{
    // 获取到待拖动元素的id
    let data = ev.dataTransfer.getData("Text") // 有点像发布订阅模式
    // 获取元素
    let img = document.getElementById(data)
    // 添加元素
    ev.target.appendChild(img)
  }
  let dragover = (ev)=>{
    ev.preventDefault();
    // 组织浏览器的默认行为
    // 默认是不让拖放的
  }
</script>

DOM

获取节点

  • childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。
  • children： 获取当前节点的所有元素子节点（不包含文本节点）。
  • parentNode: 获取当前节点的父节点。
  • firstChild： 获取第一个子节点，包括回车等文本节点；
  • firstElementChild： 获取第一个元素节点。 (不含文本节点)；
  • lastChild： 获取最后一个子节点，包括回车等文本节点；
  • lastElementChild： 获取最后一个子节点，不含文本节点；
  • previousSibling： 获取当前节点的前一个兄弟节点，(包括文本节点)；
  • previousElementSibling： 获取当前节点的前一个元素兄弟节点；
  • nextSibling：获取当前节点的后一个兄弟节点，(包括文本节点)；
  • nextElementSibling：获取当前节点的后一个元素兄弟节点；
  • attributes: 获取当前节点的所有属性节点。 返回数组格式

属性

textContent

textContent 是一个 DOM 元素的属性，用于获取或设置元素的文本内容。

方法

document.querySelector()

文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的**第一个 Element对象。**如果找不到匹配项，则返回null。 匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。

document.querySelectorAll ()

document.querySelectorAll 是 JavaScript 中 Document 对象的方法之一，用于选择匹配特定 CSS 选择器的所有元素。 它接受一个 CSS 选择器作为参数，并返回一个 NodeList 对象，其中包含与选择器匹配的所有元素。NodeList 是一个类似数组的对象，它表示一组节点。 示例： var paragraphs = document.querySelectorAll('p'); // 选择所有

元素 var element = document.querySelectorAll('#myElement'); // 选择 ID 为 "myElement" 的元素 var links = document.querySelectorAll('a[href^="https://"]'); // 选择所有 href 属性以 "https://" 开头的 元素

document.getElementById()

返回的是一个dom元素，不是数组 id唯一！！！

document.createElement()

语法： document.createElement(nodename:string)

document.createTextNode()

document.createTextNode(textcontent:string) 创建文本节点 var btn=document.createElement("BUTTON"); var t=document.createTextNode("CLICK ME"); btn.appendChild(t);

appendChild()

语法： node.appendChild(node:object) 返回值：添加的节点 appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

contains()

判断直接嵌套关系 contains() 是 DOM 中的一个方法，用于检查一个元素是否包含另一个元素（即判断父元素是否包含子元素）。它的语法如下： parentElement.contains(childElement) 需要注意的是，contains() 方法只能用于判断直接嵌套关系，不会递归地检查子孙元素

BOM

JS

基本：string number boolean null undefined 引用数据类型：object ：array function date regexp.... ES6 新增：Symbol BigInt Set Map

包装类

Boolean()

Boolean(NaN)? 特别的： Boolean(-1) :true 因为任何非零数值在逻辑上都被视为真。

String()

Number()

全局函数

eval()

eval(): 执行一个字符串表达的JavaScript代码。

Number()

Number() 是一个全局函数，用于将给定的值转换为一个数字。它可以将字符串、数字、布尔值等转换为数字。如果无法转换，将返回 NaN（Not a Number） Number() 的语法： Number(value)//传入字符串 其中 value 是要转换为数字的值。 特殊记忆：

  • Number(null)=0
  • Number(undefined)=NaN
  • null和undefined在进行比较的时候不能转换为其他的值
  • null == undefined

parseInt()

parseInt() 是一个全局函数，用于解析一个字符串并返回一个整数。它会从字符串的开头开始解析，直到遇到非数字字符为止。如果无法解析，则返回 NaN parseInt() 的语法： parseInt(string, radix)

  • string 是要解析的字符串。
  • radix 是一个介于 2 和 36 之间的整数，用于指定解析时使用的基数。如果未指定 radix，则 parseInt() 会根据字符串的内容自动选择基数。如果省略该参数或其值为 0，则数字将以 10进制 为基础来解析。 parseInt('1111', 2)//返回5 总结 Number() 用于将值转换为数字，而 parseInt() 则用于解析字符串并返回整数部分 img转存失败，建议直接上传图片文件

parseFloat()

parseFloat(): 将字符串转换为浮点数。

isNaN()

isNaN(): 检查值是否为NaN。（Not a Number） isNaN()会先试图将参数转换为数字，不能转换为数字的话则返回true 注意和Number.isNaN()的区别,后者只有在参数严格为NaN的时候才会返回true，不会进行强制类型转换。

isFinite()

isFinite(): 检查值是否为有限数。

decodeURI(), decodeURIComponent()

decodeURI():用于解码整个URI decodeURIComponent():用于解码经过编码的 URI组件。 在 URI（Uniform Resource Identifier）中，某些字符具有特殊含义，例如用于分隔路径和查询参数的字符（如 / 和 ?），或者用于表示特殊字符的转义序列（如 %20 表示空格）。为了在 URI 中正确处理这些特殊字符，我们可以使用 encodeURIComponent() 函数对 URI 进行编码，将特殊字符转换为安全的表示形式。 而 decodeURIComponent() 函数的作用就是对经过编码的 URI 组件进行解码，将转义序列还原为原始字符。 以下是 decodeURIComponent() 函数的示例用法： const encodedURI = 'example.com/path%20to%2…'; const decodedURI = decodeURIComponent(encodedURI); console.log(decodedURI); 在上面的示例中，我们有一个经过编码的 URI 'example.com/path%20to%2… decodeURIComponent() 函数对该 URI 进行解码，将 %20 转换回空格字符。解码后的 URI 'example.com/path to file.html' 将被打印到控制台。 请注意，decodeURIComponent() 函数只能解码经过编码的 URI 组件，而不能解码整个 URI。如果你想要解码整个 URI，可以使用 decodeURI() 函数。

encodeURI(), encodeURIComponent()

encodeURI(), encodeURIComponent(): 编码统一资源标识符（URI）或其组件。

Object

Object不是可迭代的对象

Object.assign()

Object.assign() 是一个 JavaScript 内置的静态方法，用于将一个或多个源对象的属性复制到目标对象中。 浅拷贝

Object.assign() 是一个 JavaScript 方法，它用于将一个或多个源对象的属性复制到一个目标对象中。该方法是 ECMAScript 6 (ES6) 中引入的。

语法：

Object.assign(target, ...sources)

参数：

  • target: 目标对象，属性将被复制到该对象中。
  • sources: 一个或多个源对象，属性将被复制从这些对象中。

返回值：目标对象。

使用 Object.assign() 可以实现以下功能：

  1. 属性复制：将一个或多个源对象的属性复制到一个目标对象中。
  2. 对象合并：合并两个或多个对象的属性到一个新对象中。
  3. 属性覆盖：如果目标对象已经有一个属性，源对象的属性将覆盖目标对象的属性。

例子：

const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 };
const source2 = { c: 5, d: 6 };

Object.assign(target, source1, source2);

console.log(target); // { a: 1, b: 3, c: 5, d: 6 }

在上面的例子中，target 对象的属性 b 和 c 被覆盖了。

注意：

  • 如果源对象有一个属性是 undefined 或 null，则目标对象的属性将被设置为 undefined 或 null。
  • 如果源对象有一个属性是函数，则目标对象的属性将被设置为该函数的引用。
  • 如果源对象有一个属性是对象，则目标对象的属性将被设置为该对象的引用。

Object.assign() 的一些常见用途：

  • 对象合并：合并两个或多个对象的属性到一个新对象中。
  • 属性复制：将一个或多个源对象的属性复制到一个目标对象中。
  • 属性覆盖：如果目标对象已经有一个属性，源对象的属性将覆盖目标对象的属性。

然而，Object.assign() 也有一些局限性：

  • 浅复制：Object.assign() 只能复制源对象的属性，如果源对象的属性是对象，则目标对象的属性将被设置为该对象的引用。
  • 不支持 Symbol 属性：Object.assign() 不支持复制 Symbol 属性。

因此，在使用 Object.assign() 时，需要注意这些局限性。

Object.keys()

Object.keys() 是 Object 构造函数的静态方法 Object.keys() 方法返回一个给定对象自身可枚举属性的字符串数组，数组中的每个元素对应对象的一个属性键。

Object.values()

Object.values() 是 JavaScript 中的一个内置方法，用于返回给定对象自身可枚举属性值的数组。它的语法简单且易于使用，特别是在需要快速获取对象所有值的场景下非常有用。

语法
Object.values(obj)
  • obj 是你想要获取值的对象。
返回值
  • 返回一个包含对象自身可枚举属性值的数组（不包括继承的属性）。
示例
const person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

const values = Object.values(person);
console.log(values); // 输出: ["Alice", 30, "New York"]
使用场景

  1. 遍历对象的值：可以结合 for...of 循环来遍历对象的值。

    const obj = { a: 1, b: 2, c: 3 };
for (const value of Object.values(obj)) {
    console.log(value);
}
// 输出: 
// 1
// 2
// 3

  2. 与其他方法结合使用：可以与 Array 的其他方法结合使用，比如 map，filter 等。

    const prices = {
    apple: 1.5,
    banana: 0.8,
    cherry: 2.0
};

const total = Object.values(prices).reduce((acc, price) => acc + price, 0);
console.log(total); // 输出: 4.3

  3. 浅拷贝对象的值：可以用于快速创建对象值的数组副本。

    const original = { x: 10, y: 20 };
const valuesCopy = [...Object.values(original)];
console.log(valuesCopy); // 输出: [10, 20]

Object.values() 是 ECMAScript 2017 (ES8) 引入的，因此在使用时需要注意浏览器兼容性，特别是在较旧的环境中可能需要使用 polyfill。

Object.create()

Object.create() 是一个 JavaScript 内置函数，用于创建一个新对象，使用指定的原型对象和可选的属性描述符来扩展新对象。 Object.create(proto, propertiesObject) 的语法如下： Object.create(proto, propertiesObject) 参数说明：

  • proto：必需，表示新对象的原型对象。新创建的对象将继承自该原型对象。
  • propertiesObject：可选，表示要添加到新对象的属性及其属性描述符。该参数是一个普通对象，其中每个属性名是要添加到新对象的属性名称，每个属性值是对应属性的属性描述符。
  • 返回值：返回一个新对象，继承自指定的原型对象，并可选地拥有指定的属性。 以下是一个示例： const personProto = { sayHello() { console.log(Hello, my name is ${this.name}); } }; const john = Object.create(personProto); john.name = 'John'; john.sayHello(); // 输出: Hello, my name is John 在上述示例中，我们创建了一个 personProto 对象作为原型对象，它包含一个 sayHello 方法。然后，通过调用 Object.create(personProto)，我们创建了一个新对象 john，它继承自 personProto。我们还为 john 对象添加了一个 name 属性，并将其值设置为 'John'。最后，我们可以通过 john.sayHello() 调用继承自原型的 sayHello 方法。 另外，Object.create() 方法还可以接受第二个可选的参数 propertiesObject，用于指定要添加到新对象的属性及其属性描述符。例如： const john = Object.create(personProto, { age: { value: 30, writable: true, enumerable: true, configurable: true } }); console.log(john.age); // 输出: 30 在上述示例中，我们在创建 john 对象时，通过 propertiesObject 参数添加了一个 age 属性，并指定了该属性的值为 30，可写、可枚举和可配置。 需要注意的是，Object.create() 方法创建的新对象的 [[Prototype]] 是指定的原型对象，而不是一个类的实例。如果需要创建一个类的实例对象，可以使用 new 关键字和构造函数来创建。

Object.setPrototypeOf(obj)

Object.getPrototypeOf(obj)

Object.getPrototypeOf(obj) 是一个 JavaScript 内置函数，用于获取指定对象的原型（即 [[Prototype]]）。

语法如下：

Object.getPrototypeOf(obj)

其中，obj 是要获取原型的对象。

它和obj.__proto__的效果是一样的，不过现在__proto__已经弃用了

obj.prototype返回的是类的原型，就是类的构造函数的原型

该函数返回指定对象的原型对象。如果对象没有显式指定自己的原型，或者原型链上没有更多的原型，那么返回的是 null。

以下是一个示例：

const person = {
 name: 'John',
 age: 30
};
const prototype = Object.getPrototypeOf(person);
console.log(prototype); // 输出: {}

在上述示例中，我们创建了一个 person 对象，它没有显式指定自己的原型。通过调用 Object.getPrototypeOf(person)，我们获取到了 person

对象的原型对象，即空对象 {}。

另外，Object.getPrototypeOf(obj) 方法可以用于获取任意对象的原型，包括自定义类的实例对象。例如：

class Person {
 constructor(name) {
  this.name = name;
 }
 sayHello() {
  console.log(`Hello, my name is ${this.name}`);
 }
}
const john = new Person('John');
const prototype = Object.getPrototypeOf(john);
console.log(prototype); // 输出: [Person]

在上述示例中，我们创建了一个 Person 类及其实例 john。通过调用 Object.getPrototypeOf(john)，我们获取到了 john 对象的原型对象，即

Person 类的原型。

需要注意的是，Object.getPrototypeOf(obj) 方法是只读的，不允许修改对象的原型。如果需要设置对象的原型，可以使用 Object.setPrototypeOf(obj, prototype) 方法。

Object.defineProperty()

Object.defineProperty 是一个 JavaScript 方法，它允许你定义一个对象的属性，并指定该属性的行为。该方法是 ECMAScript 5 (ES5) 中引入的。

语法：

Object.defineProperty(obj, prop, descriptor)

参数：

  • obj: 要定义属性的对象。

  • prop: 要定义的属性名。

  • descriptor: 属性描述符，一个对象包含以下属性：

    • value: 属性的值。
    • writable: 一个布尔值，表示属性是否可写。
    • enumerable: 一个布尔值，表示属性是否可枚举。
    • configurable: 一个布尔值，表示属性是否可配置。
    • get: 一个函数，表示属性的 getter。
    • set: 一个函数，表示属性的 setter。

**返回值：**被定义的对象。

使用 Object.defineProperty 可以实现以下功能：

  1. 定义一个新属性。
  2. 修改一个现有属性的行为。
  3. 删除一个属性。

例子：

var obj = {};

// 定义一个新属性
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(obj.name); // 输出：John

// 修改一个现有属性的行为
Object.defineProperty(obj, 'name', {
  get: function() {
    return 'Jane';
  }
});

console.log(obj.name); // 输出：Jane

// 删除一个属性
Object.defineProperty(obj, 'name', {
  value: undefined,
  configurable: true
});

console.log(obj.name); // 输出：undefined

注意：在 ES5 中，Object.defineProperty 只能定义一个属性。在 ES6 中，可以使用 Object.defineProperties 定义多个属性。

Object.defineProperty 的一些常见用途：

  • 实现 getter 和 setter。
  • 定义常量。
  • 实现私有属性。
  • 防止属性被枚举或配置。

然而，在现代 JavaScript 中，Object.defineProperty 已经被 class 和 Object.assign 等新特性所取代。

在现代 JavaScript 中，Object.defineProperty 的一些用途已经被其他新特性所取代。下面是一些例子：

  1. Getter 和 Setter：在 ES6 中，可以使用 class 来定义 getter 和 setter。
class Person {
  get name() {
    return this._name;
  }

  set name(value) {
    this._name = value;
  }
}

取代了 Object.defineProperty 的 getter 和 setter 定义：

Object.defineProperty(obj, 'name', {
  get: function() {
    return this._name;
  },
  set: function(value) {
    this._name = value;
  }
});
  1. 定义常量：在 ES6 中，可以使用 const 关键字来定义常量。
const PI = 3.14;

取代了 Object.defineProperty 的常量定义：

Object.defineProperty(obj, 'PI', {
  value: 3.14,
  writable: false,
  configurable: false
});
  1. 私有属性：在 ES6 中，可以使用 class 来定义私有属性。
class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  get name() {
    return this.#name;
  }
}

取代了 Object.defineProperty 的私有属性定义：

Object.defineProperty(obj, 'name', {
  value: 'John',
  enumerable: false,
  configurable: false
});
  1. 属性合并：在 ES6 中，可以使用 Object.assign 来合并对象的属性。
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObj = Object.assign({}, obj1, obj2);

取代了 Object.defineProperty 的属性合并：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

Object.defineProperty(obj1, 'b', {
  value: obj2.b,
  enumerable: true,
  configurable: true
});

Object.defineProperty(obj1, 'c', {
  value: obj2.c,
  enumerable: true,
  configurable: true
});

这些新特性使得代码更简洁、更易于维护，也减少了 Object.defineProperty 的使用。

Object.entries()

Object.entries()方法是JavaScript中的一个非常有用的方法，它返回一个给定对象自身可枚举属性的键值对数组。这个方法对于遍历对象属性以及将对象转换为更易于处理的格式非常有帮助。 语法 Object.entries(obj)

  • obj：必需参数，表示要从中获取键值对的对象。

  • 返回值

  • Object.entries(obj)返回一个数组，其中每个元素都是另一个包含两个元素的数组：第一个元素是原对象的键（字符串），第二个元素是对应的值。

    示例 基本使用

    const object = { foo: 'bar', baz: 42 };
console.log(Object.entries(object));
// 输出: \[ \['foo', 'bar'], \['baz', 42] ]

    遍历返回的数组

    Object.entries()返回的数组可以与for...of循环或者.forEach()方法结合使用，以便遍历对象的键值对。

    const object = { foo: 'bar', baz: 42 };
// 使用 for...of 遍历
for (const \[key, value] of Object.entries(object)) {
console.log(`${key}: ${value}`);
}
// 输出:
// foo: bar
// baz: 42
// 使用 forEach 遍历
Object.entries(object).forEach((\[key, value]) => {
console.log(`${key}: ${value}`);
});
// 输出:
// foo: bar
// baz: 42

    注意事项

    Object.entries()只返回对象自身的可枚举属性，不包括继承的属性。 返回的键值对数组的顺序与通过for...in循环（或Object.keys()）遍历对象时的顺序相同（两者的区别是for...in还会遍历可枚举的原型链属性）。

    兼容性

    **Object.entries()是在ES2017（即ES8）中引入的，因此在一些老旧的浏览器或JavaScript环境中可能不被支持。在使用它之前，请确保你的目标环境支持该方法，或者使用polyfill(Babel)**来提供支持。

Object.is()

Object.is() 是ES6（ECMAScript 2015）中引入的一个方法，用于比较两个值是否严格相等。它与严格相等运算符（===）类似，但在某些特殊情况下有不同的行为。 语法 Object.is(value1, value2);

  • value1：第一个要比较的值。
  • value2：第二个要比较的值。 返回值
  • 如果两个值严格相等，则返回 true。
  • 否则，返回false。 与 === 的区别 Object.is() 与 === 的主要区别在于以下几个特殊情况： 1. NaN 的比较：
    • NaN === NaN 返回 false。
    • Object.is(NaN, NaN) 返回 true。 2. +0 和 -0 的比较：
    • +0 === -0 返回 true。
    • Object.is(+0, -0) 返回 false。

Object.freeze()

Object.freeze() 是 JavaScript 中的一个方法，用于冻结一个对象。冻结后，该对象将无法被修改，具体来说，它会阻止：

  1. 添加新属性：无法为对象添加新属性。
  2. 删除现有属性：无法删除对象的现有属性。
  3. 修改现有属性的值：无法修改对象中现有属性的值。
  4. 修改属性的可枚举性、可配置性和可写性：无法更改属性的这些特性。

语法

Object.freeze(obj);
  • obj：要冻结的对象。

返回值

返回被冻结的对象。

示例

const obj = {
  name: 'Alice',
  age: 25
};

Object.freeze(obj);

// 尝试修改属性
obj.age = 30; // 无效，不会修改
obj.gender = 'female'; // 无效，不会添加

console.log(obj); // 输出: { name: 'Alice', age: 25 }

注意事项

  1. 浅冻结：Object.freeze() 只会冻结对象的第一层属性。如果对象的属性是另一个对象，这个嵌套对象仍然是可变的。

    const nestedObj = {
  inner: {
    key: 'value'
  }
};

Object.freeze(nestedObj);
nestedObj.inner.key = 'newValue'; // 仍然可以修改
console.log(nestedObj.inner.key); // 输出: 'newValue'

  2. 深冻结：如果需要对嵌套对象进行冻结，可以使用递归函数：

    function deepFreeze(obj) {
  Object.freeze(obj);
  Object.keys(obj).forEach(key => {
    if (obj[key] && typeof obj[key] === 'object') {
      deepFreeze(obj[key]);
    }
  });
}

const deepObj = {
  inner: {
    key: 'value'
  }
};

deepFreeze(deepObj);
deepObj.inner.key = 'newValue'; // 无效
console.log(deepObj.inner.key); // 输出: 'value'

总结

  • Object.freeze() 用于防止对象被修改，确保对象的不可变性。
  • 它是一个浅冻结方法，嵌套对象不会被冻结。
  • 可以通过递归实现深冻结以确保所有嵌套对象也不可变。

toString()

方法返回一个表示该对象的字符串。

toString() 方法是 JavaScript 中所有对象的一个方法，它用于将对象转换为字符串表示形式。这个方法可以在所有对象上调用，因为它是从

Object.prototype 继承而来的。不同类型的对象会有不同的字符串表示形式。 基本用法

以下是一些常见类型对象的 toString() 方法的使用示例： 数字对象

let num = 123;
let numObj = new Number(123);
console.log(num.toString());   // 输出: "123"
console.log(numObj.toString());  // 输出: "123"

字符串对象

let str = "hello";
let strObj = new String("hello");
console.log(str.toString());   // 输出: "hello"
console.log(strObj.toString());  // 输出: "hello"

布尔对象

let bool = true;
let boolObj = new Boolean(true);
console.log(bool.toString());   // 输出: "true"
console.log(boolObj.toString()); // 输出: "true"

数组对象

let arr = [1, 2, 3];
console.log(arr.toString()); // 输出: "1,2,3"

对象

对于普通对象，toString() 方法会返回 "[object Object]"，除非对象重写了 toString() 方法。

let obj = { a: 1, b: 2 };
console.log(obj.toString()); // 输出: "[object Object]"

自定义 toString() 方法 你可以为自定义对象重写 toString() 方法，以提供更有意义的字符串表示形式。

let person = {
 firstName: "John",
 lastName: "Doe",
 age: 30,
 toString: function() {
  return `${this.firstName} ${this.lastName}, Age: ${this.age}`;
 }
};
console.log(person.toString()); // 输出: "John Doe, Age: 30"
Object.prototype.toString.call()

Object.prototype.toString.call() call(thisArg,arg1,arg2...) 有时你可能会看到 Object.prototype.toString.call() 这种用法，这是为了获取对象的准确类型。默认的 toString 方法对于对象返回 "[object Type]" 格式的字符串，其中 Type 是对象的内部类型标签。

console.log(Object.prototype.toString.call([]));    // 输出: "[object Array]"
console.log(Object.prototype.toString.call({}));    // 输出: "[object Object]"
console.log(Object.prototype.toString.call(new Date())); // 输出: "[object Date]"
console.log(Object.prototype.toString.call(null));   // 输出: "[object **Null**]"
console.log(Object.prototype.toString.call(undefined)); // 输出: "[object **Undefined**]"

null和undefined没有包装类对象啊 疑问？

valueOf()

valueOf() 是 JavaScript 中的一个方法，它返回对象的原始值（primitive value）。该方法通常用于将对象转换为对应的基本类型值。 当调用 valueOf() 方法时，JavaScript 引擎会尝试将对象转换为原始值。具体的转换规则取决于对象的类型和实现。大多数内置对象都提供了自定义的 valueOf() 方法，以便在需要时进行合适的转换。 以下是一些常见对象的 valueOf() 方法的示例： Number 对象的 valueOf() 方法返回包装对象的原始数值。

var num = new Number(42);
console.log(num.valueOf()); // 输出: 42
String 对象的 valueOf() 方法返回包装对象的原始字符串值。
var str = new String('Hello');
console.log(str.valueOf()); // 输出: 'Hello'
Boolean 对象的 valueOf() 方法返回包装对象的原始布尔值。
var bool = new Boolean(true);
console.log(bool.valueOf()); // 输出: true

Date 对象的 valueOf() 方法返回从 1970 年 1 月 1 日至日期对象表示的时间之间的毫秒数。

var date = new Date();
console.log(date.valueOf()); // 输出: 毫秒数

需要注意的是，大多数情况下，JavaScript 会自动调用 valueOf() 方法来进行类型转换。例如，在进行数值运算时，对象会首先调用 valueOf() 方法来获取原始数值，然后进行计算。

var obj = {
 valueOf: function() {
  return 42;
 }
};
console.log(obj + 8); // 输出: 50

需要注意的是，如果对象没有自定义的 valueOf() 方法，JavaScript 会尝试调用 toString() 方法来进行类型转换。

Number

原始值包装类型

toFixed()

toFixed() 是 JavaScript 中 Number 对象的一个方法，用于将数字格式化为指定的小数位数，并返回一个字符串表示。这个方法常用于控制数字的显示精度，特别是在需要展示货币或其他精确数值时。

语法
number.toFixed(digits)
参数
  • digits：可选参数，表示要保留的小数位数。范围是 0 到 20 之间的整数。如果省略此参数，则默认值为 0。
返回值
  • 返回一个字符串，表示指定小数位数的数字。
示例
  1. 基本用法：
let num = 123.45678;
console.log(num.toFixed(2)); // "123.46"
  1. 没有小数位：
let num = 123.45678;
console.log(num.toFixed(0)); // "123"
  1. 超过指定小数位的情况：
let num = 123.4;
console.log(num.toFixed(3)); // "123.400"
  1. 负数：
let num = -123.456;
console.log(num.toFixed(2)); // "-123.46"
  1. 处理大数：
let num = 0.1 + 0.2; // 浮点数相加可能出现精度问题
console.log(num.toFixed(2)); // "0.30"
注意事项
  • toFixed() 方法返回的是字符串类型，而不是数字类型。如果需要数字类型，可以使用 parseFloat() 或 Number() 转换。
  • 如果 digits 超过了 20，将会抛出 RangeError。
  • toFixed() 方法会进行四舍五入。
总结

toFixed() 是一个非常实用的方法，用于控制数字的小数位数并格式化输出。在处理财务数据或需要精确显示数字时，它尤其重要。如果你有其他问题或需要更详细的解释，请告诉我！

toPrecision()

数zi转为字符串

用于将数字转换为指定精度（几位有效数字，不够的补0）的字符串表示形式。

该方法接受一个参数 precision，用于指定所需的精度。精度是一个整数，表示有效数字的总位数（包括整数部分和小数部分）。如果指

定的精度大于当前数字的有效位数，则结果将使用零进行填充。

示例：

var number = 123.456789;
console.log(number.toPrecision(4)); // 输出: 123.5
console.log(number.toPrecision(7)); // 输出: 123.4568

toString()

将数字转成字符串

数字转为字符串

  • toFixed(digits)
  • toString(radix)

Math

单例内置对象

Math.round()

该方法接受一个数字作为参数，并返回最接近的整数（四舍五入）。并不会修改原数字

示例：

const number2 = 7.8;
const roundedNumber2 = Math.round(number2);
console.log(roundedNumber2); // 输出: 8
const number3 = -2.6;
const roundedNumber3 = Math.round(number3);
console.log(roundedNumber3); // 输出: -3

特别的

如果参数的小数部分等于0.5，四舍五入到相邻的在正无穷（+∞）方向上的整数。

x=Math.round(2019.5);     //2020
x=Math.round(-2019.5);     //-2019

数字取整的办法

Math.trunc()

trunc：截断，取整的意思

使用 Math.trunc() 方法：只截取整数部分，没有四舍五入

const number = 3.14;
const integerPart = Math.trunc(number);
console.log(integerPart); // 输出: 3
console.log(Math.trunc(-3.14)); // 输出: -3
console.log(Math.trunc(3.7)); // 输出: 3
console.log(Math.trunc(-3.7)); // 输出: -3

在上述示例中，我们使用 Math.trunc() 方法来获取 number 的整数部分。

Math.random()

可以生成一个 0 到 1 之间的随机小数（包括 0 但不包括 1）

Math.floor(Math.random()*10)+1 生成1-10的随机数

Math.floor()

向下取整

与Math.trunc的区别：

console.log(Math.trunc(3.7));  // 输出: 3
console.log(Math.trunc(-3.7));  // 输出: -3
Math.floor()
console.log(Math.floor(3.7));  // 输出: 3
console.log(Math.floor(-3.7));  // 输出: -4

Math.ceil()

向上取整

Math.abs()

取绝对值

String

原始值包装类型

String.fromCharCode()

fromCharCode() 是 JavaScript 中的一个静态方法，用于根据指定的 Unicode 编码值创建一个字符串。

传递单个值
const charCode = 65;
const char = String.fromCharCode(charCode);
console.log(char);
传递多个值
const charCode1 = 72;
const charCode2 = 101;
const charCode3 = 108;
const charCode4 = 108;
const charCode5 = 111;
const str = String.fromCharCode(charCode1, charCode2, charCode3, charCode4, charCode5);
console.log(str);// Hello

注意输出的值是连续的，没有逗号

常见的字符的unicode值

以下是字符 A、a 和 0 的 Unicode 值：

  • A 的 Unicode 值是 U+0041（十进制：65）
  • a 的 Unicode 值是 U+0061（十进制：97）
  • 0 的 Unicode 值是 U+0030（十进制：48） 你可以使用 charCodeAt获取这些字符的 Unicode 值，例如：
console.log('A'.charCodeAt(0)); // 输出: 65
console.log('a'.charCodeAt(0)); // 输出: 97
console.log('0'.charCodeAt(0)); // 输出: 48

concat() 数组

不会改变原字符串和数组，会返回一个新的字符串和数组 str1.concat(str2):连接字符串str1,str2

charCodeAt()

charCodeAt() 方法是 JavaScript 字符串对象的一个方法，用于返回指定位置字符的 Unicode 编码（即字符的 UTF-16 代码单元值）。

语法
str.charCodeAt(index)
参数
  • index: 一个整数，表示要返回字符的索引。索引从 0 开始。
返回值

返回指定位置字符的 Unicode 编码（一个整数）。如果索引超出字符串的范围，则返回 NaN。

示例
1. 基本用法
let str = "Hello";
console.log(str.charCodeAt(0)); // 输出: 72 (H 的 Unicode 编码)
console.log(str.charCodeAt(1)); // 输出: 101 (e 的 Unicode 编码)
console.log(str.charCodeAt(4)); // 输出: 111 (o 的 Unicode 编码)
2. 超出范围的索引
let str = "Hello";
console.log(str.charCodeAt(5)); // 输出: NaN (超出范围)
3. 处理中文字符
let str = "你好";
console.log(str.charCodeAt(0)); // 输出: 20320 (你 的 Unicode 编码)
console.log(str.charCodeAt(1)); // 输出: 22909 (好 的 Unicode 编码)
4. 使用循环获取字符串中所有字符的 Unicode 编码
let str = "abc";
for (let i = 0; i < str.length; i++) {
    console.log(`字符: ${str[i]}, Unicode 编码: ${str.charCodeAt(i)}`);
}
// 输出:
// 字符: a, Unicode 编码: 97
// 字符: b, Unicode 编码: 98
// 字符: c, Unicode 编码: 99
总结

charCodeAt() 方法非常有用，可以用于获取字符串中每个字符的 Unicode 编码，特别是在需要处理字符编码或进行字符比较时。如果你有其他问题或需要更多示例，请告诉我！

charAt()

str.charAt(index:number)

console.log("125421".charAt(1))//2:在索引1的位置的字符为2
console.log("125421".charAt(5))//1

str[index]

可以访问字符串index处的字符

两者的区别

在 JavaScript 中，charAt(index) 和使用方括号 [] 来访问字符串字符的确可以实现相同的功能，但它们有一些细微的差别和各自的用途：

1. 功能相同
  • s[index] 和 s.charAt(index) 都可以用来获取字符串中指定索引位置的字符。
2. 返回值的差异
  • s[index]：如果索引超出范围，返回 undefined。
  • s.charAt(index)：如果索引超出范围，返回一个空字符串 ""。
3. 可读性
  • 使用 charAt() 有时可以提高代码的可读性，特别是在明确表达“获取字符”的意图时。
4. 兼容性
  • charAt() 是更早的方式，可能在一些较旧的代码中更常见，但现代 JavaScript 中，使用 [] 更加简洁。
示例
let s = "Hello";
console.log(s[1]);          // 输出 'e'
console.log(s.charAt(1));   // 输出 'e'
console.log(s[10]);         // 输出 undefined
console.log(s.charAt(10));  // 输出 ''
总结

虽然在功能上它们是等价的，但 charAt() 的存在主要是为了提供一种更传统的方式来访问字符，并在某些情况下可能更具可读性。对于现代 JavaScript 开发者来说，使用 [] 更加简洁和常见。选择哪种方式取决于个人偏好和代码风格。

indexOf() （数组也有）

str1.indexOf(str2)

子字符串str2在字符串str1中第一次出现的位置

console.log("125421".indexOf("54"))//2
console.log("125421".indexOf("543"))//-1:代表没有这个字符串

lastIndexOf() 数组

str1.lastIndexOf(str2)：str2在str1最后出现的位置

lastIndexOf(str):子字符串在字符串中最后一次出现的位置

console.log("125421".lastIndexOf("2"))//4

slice() 数组也有这个方法

slice()不会改变原数组

slice(start_index,[end_index]):提取指定部分的字符串，包含start_index,不包含end_index

  • 如果start_index大于end_index的话，不会交换位置，会返回空的字符串
  • 可以处理负数参数
  • 如果省略 endIndex，则截取到字符串的末尾。
console.log("125421".slice(1,5))//2542

substr()

substr(start_index,length):从指定位置截取指定长度的子字符串

console.log("01234567".substr(1,5))//12345
  • 如果省略 length 参数，substr() 方法会提取从 startIndex 索引到字符串末尾的所有字符。
  • 可以处理负数索引

substring()

substring(start_index,end_index):不包括end_index

console.log("01234567".substring(1,5))//1234

  • 如果 startIndex 大于 endIndex，substring() 方法会自动交换两个参数的位置。

  • 如果省略 endIndex 参数，substring() 方法会提取从 startIndex 索引到字符串末尾的所有字符。

  • 不能处理负数参数

slice(),substr(),substring()对于处理负数参数的不同
  • slice():所有负数参数加上字符串的长度
  • substr():第一个加上长度，第二个参数当成0处理
  • substring():两个参数都当成0处理。

includes() （数组也有该方法）

用于检查字符串中是否含有searchstr，返回一个Boolean

string.includes(searchString, position);

  • searchString 是要搜索的子字符串。
  • position 是可选参数，表示在字符串中开始搜索的索引位置。
includes()不能用于检测二维数组
const matrix = [[1,2],[3,4]];
console.log(matrix.includes([1,2])); // false

在 JavaScript 中，Array.prototype.includes 方法用于判断一个数组是否包含某个特定的元素。对于基本数据类型（如数字、字符串、布尔值等），includes 方法可以正常工作，因为这些类型的比较是基于值的。然而，对于对象和数组这样的复杂数据类型，includes 使用的是引用相等性（即引用是否指向同一个对象），而不是值相等性。

在你的例子中：

const matrix = [[1, 2], [3, 4]];
console.log(matrix.includes([1, 2])); // false
  • [1, 2] 是一个新的数组对象，它与 matrix 中的第一个子数组 [1, 2] 并不是同一个引用。
  • 即使它们的内容相同，includes 方法会比较引用而不是内容，因此返回 false。
解决方案

如果你想检查一个数组中是否包含具有相同内容的子数组，可以使用自定义的比较函数。例如，使用 Array.prototype.some 方法结合 Array.prototype.every 来实现：

const matrix = [[1, 2], [3, 4]];
const target = [1, 2];

const containsArray = matrix.some(subArray => 
  subArray.length === target.length && 
  subArray.every((value, index) => value === target[index])
);

console.log(containsArray); // true

在这个代码中：

  • some 方法用于检查 matrix 中是否存在至少一个子数组 subArray 满足条件。
  • every 方法用于比较 subArray 和 target 中的每一个元素是否相等。
  • 只有当 subArray 的长度与 target 相同，并且所有对应元素都相等时，containsArray 才会返回 true。

split()

split(separator,limit):将字符串分割成子字符串数组,

  • 如果省略该参数那么将返回不被分割的字符串数组

  • 如果传入一个空字符串 ""，则将字符串分割为单个字符的数组。

  • separator：可以是字符串或是正则表达式

  • limit：用来指定分割的个数

console.log("125,421,456,789".split(","))//['125', '421', '456', '789']
console.log("125,421,456,789".split(""))// ['1', '2', '5', ',', '4', '2', '1', ',', '4', '5', '6', ',', '7', '8', '9']

toLocaleLowerCase()

可以指定规则

let lowerCaseStr = str.toLocaleLowerCase('tr-TR'); // 使用土耳其地域规则转换为小写

toLowerCase()

toLocaleLowerCase():转小写

console.log("ABCDEFG".toLocaleLowerCase())

toLocaleUpperCase()

toUpperCase()

toLocaleUpperCase():转大写

console.log("abcdefg".toLocaleUpperCase())

replace()

在 JavaScript 中，String.prototype.replace() 方法用于替换字符串中的某些部分。它接受两个参数：要被替换的内容和替换成的内容。

语法
str.replace(searchValue, newValue)
参数
  1. searchValue: 可以是一个字符串或正则表达式，表示要查找的内容。
  2. newValue: 替换内容，可以是字符串或一个函数，用于生成替换内容。
返回值

返回一个新字符串，表示替换后的结果。原始字符串不会被修改。

示例
1. 使用字符串替换
const str = "Hello, world!";
const newStr = str.replace("world", "JavaScript");
console.log(newStr); // 输出: "Hello, JavaScript!"
2. 使用正则表达式替换
const str = "The quick brown fox jumps over the lazy dog.";
const newStr = str.replace(/the/gi, "a"); // 使用正则表达式，忽略大小写
console.log(newStr); // 输出: "a quick brown fox jumps over a lazy dog."
3. 使用函数生成替换内容
const str = "I have 1 apple and 2 bananas.";
const newStr = str.replace(/\d+/g, (match) => {
    return parseInt(match) * 2; // 将数字乘以 2
});
console.log(newStr); // 输出: "I have 2 apple and 4 bananas."
4. 只替换第一个匹配项

如果使用字符串作为 searchValue，replace() 默认只会替换第一个匹配项：

const str = "Hello, world! Hello again!";
const newStr = str.replace("Hello", "Hi");
console.log(newStr); // 输出: "Hi, world! Hello again!"
5. 全局替换

要替换所有匹配项，使用正则表达式并加上 g 标志：

const str = "Hello, world! Hello again!";
const newStr = str.replace(/Hello/g, "Hi");
console.log(newStr); // 输出: "Hi, world! Hi again!"
总结
  • replace() 方法非常灵活，支持字符串和正则表达式。
  • 可以通过函数生成动态替换内容。
  • 默认只替换第一个匹配项，使用正则表达式和 g 标志可以替换所有匹配项。

如果你有其他问题或需要更多示例，请告诉我！

match()

match 方法是 JavaScript 字符串对象的一部分，用于匹配字符串与正则表达式的模式。它返回一个数组，包含所有匹配的结果。

语法
string.match(regexp)
参数
  • regexp：一个正则表达式对象。**如果提供的是字符串，则会被转换为正则表达式。**可以使用全局标志 g 来查找所有匹配项。
返回值
  • 如果正则表达式没有全局标志 g，返回一个数组，其中包含匹配的结果和捕获组；如果没有匹配，返回 null。
  • 如果使用了全局标志 g，返回一个包含所有匹配项的数组，不包括捕获组。

意思就是说match()最多返回一个捕获组

示例
1. 没有全局标志的情况
const str = "The quick brown fox jumps over the lazy dog.";
const regex = /quick (\w+)/; // 捕获组
const result = str.match(regex);
console.log(result);

输出：

[
  'quick brown', // 整个匹配
  'brown',       // 捕获组
  index: 4,     // 匹配的起始位置
  input: 'The quick brown fox jumps over the lazy dog.', // 原始字符串
  groups: undefined
]
1.2 命名捕获组

groups 属性不是在所有的情况下都会出现。它通常在使用命名捕获组（Named Capture Groups）时才会出现。命名捕获组是指通过 (?<name>pattern) 或 (?'name'pattern) 这样的语法在正则表达式中为捕获组命名。

const regex = /(?<number>\d+)-(?<letter>[a-z]+)/;
const str = '123-abc';
const match = str.match(regex);

console.log(match.groups); // [Object: null prototype] { number: '123', letter: 'abc' }

在 JavaScript 中，[Object: null prototype] 是浏览器或 Node.js 控制台输出中的一种提示，用来表示对象的原型为 null 或者是一个“纯净”的对象，即没有继承任何属性或方法。

在这种情况下，[Object: null prototype] 是控制台输出的一种格式化信息，用来表示对象是一个纯粹的对象，没有继承任何原型链上的属性或方法。这种格式化信息的目的是为了提供更清晰的对象输出，显示对象的实际内容，而不受原型链上的属性影响。

console.log(match);
[
  '123-abc',
  '123',
  'abc',
  index: 0,
  input: '123-abc',
  groups: [Object: null prototype] { number: '123', letter: 'abc' }
]

为什么match.groups能访问数组的元素？？？

index,input,groups都是match数组的属性，不是数组的元素，就想数组的length属性一样。

console.log(match[3]); // undefined

console.log(match.index); // 0
console.log(match.input); // 123-abc
console.log(match.groups.number); // 123
console.log(match.groups.letter); // abc
2. 使用全局标志的情况
const str = "The rain in Spain stays mainly in the plain.";
const regex = /ain/g; // 全局匹配
const result = str.match(regex);
console.log(result);

输出：

[ 'ain', 'ain', 'ain' ]
注意事项
  • 使用全局标志 g 时，返回的数组只包含匹配的字符串，不包括捕获组信息。
  • 如果没有匹配，返回 null。
总结

match 方法非常适合用于查找和提取字符串中的模式，尤其是当需要获取捕获组时。根据是否使用全局标志，返回的结果会有所不同。

padEnd()

padEnd() 是 JavaScript 字符串方法之一，用于在当前字符串的末尾（右侧）填充指定的字符，直到字符串达到指定的长度为止。如果当

前字符串长度已经达到或超过指定的长度，则不会进行填充。

str.padEnd(targetLength [, padString])

  • str：当前字符串，即要进行填充的字符串。

  • targetLength：目标长度，表示填充后字符串的最终长度。

  • padString（可选）：填充字符，默认为空格。

let str = "Hello";
let paddedStr = str.padEnd(10, '!');
console.log(paddedStr); // 输出: "Hello!!!!!"

repeat()

JavaScript 中的 repeat() 方法用于创建一个包含指定字符串重复若干次的新字符串。它接受一个整数参数，表示要重复字符串的次数。

str.repeat(count)

  • str 是要重复的字符串。
  • count 是一个整数，表示要重复 str 的次数。
返回值

repeat() 方法会返回一个新的字符串，该字符串是将原始字符串重复指定次数后的结果。

需要注意的是，如果 count 参数为小数或者字符串，会先进行取整操作。如果 count 参数为负数或者 Infinity，则返回一个空字符串。如果 count 参数为 0 或者 NaN，则返回一个空字符串。

请注意在使用 repeat() 方法时，要确保参数的合法性，以避免意外的结果。

以下是一些示例：

const str = 'Hello, World! ';
const repeatedStr = str.repeat(3);
console.log(repeatedStr);
// 输出: "Hello, World! Hello, World! Hello, World! "
const emptyStr = ''.repeat(5);
console.log(emptyStr);
// 输出: ""
const errorStr = 'Error '.repeat(-1);
console.log(errorStr);
// 输出: ""
  • 在第一个示例中，str 字符串被重复了 3 次，生成了一个新的字符串 repeatedStr，它包含了原始字符串重复的结果。
  • 在第二个示例中，空字符串 '' 被重复了 5 次，生成了一个空字符串 emptyStr。
  • 在第三个示例中，由于传递给 repeat() 方法的次数为负数，返回的结果是一个空字符串。

String.Prototype.trim()

str.trim() 是 JavaScript 中的一个字符串方法，用于去除字符串两端的空白字符（包括空格、制表符、换行符等）。 这个方法不会修改原始字符串，而是返回一个新的字符串。

语法
let newStr = str.trim();
参数
  • trim() 方法没有参数。
返回值
  • 返回去掉了前导和尾随空白字符的新字符串。
示例
  1. 基本用法 
    let str = "   Hello, World!   ";
let trimmedStr = str.trim();
console.log(trimmedStr); // 输出: "Hello, World!"
  2. 去除不同类型的空白字符 
    let str = "\n\t   Hello, World!   \n\t";
let trimmedStr = str.trim();
console.log(trimmedStr); // 输出: "Hello, World!"
  3. 不影响原始字符串 
    let originalStr = "   Hello!   ";
let newStr = originalStr.trim();
console.log(originalStr); // 输出: "   Hello!   "
console.log(newStr); // 输出: "Hello!"
注意事项
  • trim() 只去掉字符串两端的空白字符，中间的空白字符不会被去除。
  • 在 JavaScript 中，trim() 方法是 ES5 引入的，因此在较旧的浏览器中可能不被支持（如 IE8 及以下版本）。
总结

str.trim() 是一个非常有用的方法，常用于处理用户输入，以确保在存储或比较字符串时没有多余的空白字符。

Array

会改变原数组的方法

  • push() 队尾添加元素 返回数组的长度
  • pop() 队尾删除元素 返回删除的元素
  • shift() 从队头移除元素 返回移除的元素
  • unshift() 从队头添加元素 返回数组的长度
  • splice(start,deletCount,item1,item2...) 添加，替换，删除元素，返回一个包含被删除元素的数组，如果没有删除任何元素，则返回空数组。
  • sort() 返回修改后的数组
  • reverse() 返回修改后的数组
  • fill() 返回修改后的数组
  • copyWithin(target,start,end) 返回修改后的数组

以下是 JavaScript 数组常用方法的列表以及每个方法的简要说明和示例：

Array.isArray()

Array.isArray(): 判断一个对象是否为数组。返回true/false 数组的静态方法

let fruits = ['apple', 'banana'];
console.log(Array.isArray(fruits)); // 输出：true

Array.from()

将可迭代对象/类数组对象(set,string)转化为数组

可迭代对象：有迭代器的就是可迭代对象

Array.from(arrayLike[, mapFn[, thisArg]])
  • mapFn:映射函数
创建二维数组
方法一：
const matrix = new Array(row).fill().map(() => Array(col).fill(0));
方法二：
const matrix = Array.from({length : row}, () => Array(col).fill(0));
方法三：

双层循环创建二维数组

join()

join(): 将数组中所有元素连接成一个字符串。

join() 是 JavaScript 中数组对象的方法，用于将数组的所有元素连接成一个字符串。

array.join(separator)

  • array: 要连接的数组。

  • separator: 可选，指定作为分隔符的字符串。如果省略该参数，则数组元素之间会以逗号 , 分隔。

  • 返回值：一个包含数组所有元素的字符串。元素通过指定的分隔符连接在一起。

let fruits = ['apple', 'banana', 'orange'];
let fruitsString = fruits.join(', ');
console.log(fruitsString); // 输出：'apple, banana, orange'

toString()

toString() 是 JavaScript 中数组对象的方法，用于将数组转换为一个字符串。

array.toString()

  • array: 要转换为字符串的数组。

  • 返回值：一个包含数组所有元素的字符串。数组元素之间用逗号 , 分隔。

const numbers = [1, 2, 3, 4, 5];
const result = numbers.toString();
console.log(result); // 输出: "1,2,3,4,5"

在这个示例中，toString() 方法被调用来将数组 numbers 转换为一个字符串。最终返回的字符串是 "1,2,3,4,5"，其中数组元素被逗号分隔。

push()

push(): 在数组末尾添加一个或多个元素，并返回数组的新长度。

let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // 输出：['apple', 'banana', 'orange']

pop()

pop(): 移除数组末尾的元素，并返回移除的元素。

let fruits = ['apple', 'banana', 'orange'];
let removedFruit = fruits.pop();
console.log(removedFruit); // 输出：orange

unshift()

unshift(): 在数组开头添加一个或多个元素，并返回数组的新长度。

let fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits); // 输出：['apple', 'banana', 'orange']

shift()

shift(): 移除数组开头的元素，并返回移除的元素。

let fruits = ['apple', 'banana', 'orange'];
let removedFruit = fruits.shift();
console.log(removedFruit); // 输出：apple

slice()

不改变原数组，返回一个新的数组,截取数组的内容

array.slice(startIndex,endIndex)

  • 包含开始不包含结束,省略结束索引，则 slice() 方法会一直复制到原始数组的末尾。

slice() 方法返回的是选定的元素的浅拷贝

splice()

splice会改变原数组

splice(): 从数组中添加或删除或替换元素。

array.splice(start, deleteCount, item1, item2, ...)

  • start：指定修改的起始位置，即从哪个索引开始进行操作。

  • deleteCount：要删除的元素数量，如果为 0，则不删除任何元素。

  • item1, item2, ...：可选参数，要插入到数组中的元素。

功能：

  • 删除元素：通过指定 deleteCount 参数，可以删除数组中的元素，从 start 索引开始删除指定数量的元素。

  • 插入元素：可以在指定位置插入新的元素，通过在 start 索引处插入 item1, item2, ...。

  • 替换元素：可以删除指定数量的元素，并在相同位置插入新的元素。

返回值：

返回一个包含被删除元素的数组，如果没有删除任何元素，则返回空数组。

let fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'grape');
console.log(fruits); // 输出：['apple', 'grape', 'orange']

reduce(fn)

reduce(): 对数组中的每个元素执行一个提供的函数，将其结果汇总为单个值。

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

  • array: 要操作的数组。
  • callback: 用来执行每个元素的函数，接受四个参数：
  • accumulator: 累积器，累积回调函数的返回值。它在每次回调函数执行时更新。

reduce() 方法中的 accumulator 的初始值是作为 reduce() 方法的第二个参数传入的 initialValue，如果没有提供 initialValue，则 accumulator 的初始值将是数组的第一个元素，同时回调函数将从数组的第二个元素开始执行。

  • currentValue: 当前元素的值。

  • currentIndex (可选): 当前元素的索引。

  • array (可选): 调用 reduce() 的数组。

  • initialValue (可选): 作为第一次调用回调函数时的第一个参数 accumulator 的初始值。

reduce() 方法从数组的第一个元素开始，依次遍历数组中的每个元素，并将每个元素和累积值传递给回调函数。回调函数可以对当前元素和累积值进行操作，并返回一个新的累积值。最终，reduce() 方法返回回调函数执行后的最终累积值。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 输出：15

map(fn)

map(): 创建一个新数组，其结果是对原数组中的每个元素调用一个提供的函数。

let numbers = [1, 2, 3];
let doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // 输出：[2, 4, 6]

filter(fn)

filter(): 创建一个新数组，包含通过测试函数的所有元素。

array.filter(callback(element[, index][, array][, thisArg]))

  • array: 要操作的数组。
  • callback: 用来测试每个元素的函数，接受三个参数：
  • element: 当前元素的值。
  • index (可选): 当前元素的索引。
  • array (可选): 调用 filter() 的数组。
  • thisArg (可选): 执行回调时使用的this值。

filter() 方法会对数组中的每个元素调用一次 callback 函数，如果回调函数返回 true，则该元素将包含在新数组中；如果返回 false，则该元素将被排除在外。最终，filter() 方法返回一个新数组，其中包含满足条件的元素。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);//如果加了{}一定要显示的返回！！！
console.log(evenNumbers); // 输出：[2, 4]

forEach(fn)

forEach(): 对数组中的每个元素执行提供的函数。

array.forEach(function(currentValue, index, arr), thisValue)

  • currentValue: 必需。当前元素的值。
  • index: 可选。当前元素的索引。
  • arr: 可选。当前正在操作的数组。
  • thisValue: 可选。传递给函数的值用作“this”。

forEach方法没有返回值，它仅用于迭代数组中的每个元素。因此，它不会返回任何结果或修改原始数组，而是用于执行针对每个元素的操作。

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(fruit => console.log(fruit));
// 输出：
// apple
// banana
// orange

every(fn)

every(): 检测数组中的所有元素是否满足指定条件。

let numbers = [2, 4, 6];
let allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // 输出：true

some(fn)

some(): 检测数组中的某些元素是否满足指定条件。

some() 方法是JavaScript数组的一个方法，用于检测数组中是否至少有一个元素满足指定条件，返回值为布尔值。

array.some(callback(element, index, array))

  • array: 要操作的数组。
  • callback: 用来测试每个元素的函数，接受三个参数：
  • element: 当前元素的值。
  • index (可选): 当前元素的索引。
  • array (可选): 调用 some() 的数组。

some() 方法对数组中的每个元素执行指定的回调函数，如果回调函数对任意一个元素返回 true，则 some() 方法返回 true；如果所有元素都不满足条件，返回 false。

let numbers = [1, 2, 3];
let hasEvenNumber = numbers.some(num => num % 2 === 0);
console.log(hasEvenNumber); // 输出：true

findIndex(fn)

findIndex(): 返回数组中满足提供的测试函数的第一个元素的索引，否则返回 -1。

array.findIndex(callback(element, index, array), thisArg)

  • callback：表示用来测试每个元素的函数，它可以接受三个参数：
  • element：当前元素的值。
  • index：当前元素的索引。
  • array：调用 findIndex 方法的数组。
  • thisArg（可选）：执行 callback 函数时使用的 this 值。

findIndex 方法会从数组的第一个元素开始，依次调用 callback 函数，直到找到第一个使 callback 返回值为真（truthy）的元素。一旦找到这样的元素，findIndex 方法会立即返回该元素的索引；如果没有找到满足条件的元素，则返回 -1。

let numbers = [10, 20, 30];
let index = numbers.findIndex(num => num > 15);
console.log(index); // 输出：1 (对应元素为20)

indexOf() 字符串

indexOf() :方法从数组的开头开始查找指定元素，并返回第一个匹配元素的索引。

如果找到匹配元素，则返回该元素的索引；如果没有找到匹配元素，则返回-1。

array.indexOf(searchElement[, fromIndex])

  • searchElement：要查找的元素。
  • fromIndex：可选参数，指定从哪个索引位置开始搜索，默认为0。

lastIndexOf() 字符串

lastIndexOf():方法从数组的末尾开始向前查找指定元素，并返回最后一个匹配元素的索引。

如果找到匹配元素，则返回该元素的索引；如果没有找到匹配元素，则返回-1。

array.lastIndexOf(searchElement[, fromIndex])

  • searchElement：要查找的元素。
  • fromIndex：可选参数，指定从哪个索引位置开始向前搜索，默认为数组的长度减1。

includes() 字符串共有 ES6

includes() 是 JavaScript 中用于检测数组或字符串中是否包含指定元素的方法。下面是关于 includes() 方法的详细解释：

对数组的使用：
const array = [1, 2, 3, 4, 5];
// 检测数组中是否包含指定元素
const result = array.includes(3);
console.log(result); // Output: true

includes() 方法是 ES6 新增的方法，可以很方便地判断数组中是否存在某个元素。

对字符串的使用：
const str = 'Hello, World!';
// 检测字符串中是否包含指定子字符串
const result = str.includes('World');
console.log(result); // Output: true

通过使用 includes() 方法，您可以快速判断数组或字符串中是否包含特定的值或子字符串。

注意事项
const matrix = [[1,2],[3,4]];
console.log(matrix.includes([1,2]));

reverse() O(n)

会改变原数组

返回值：返回颠倒的数组

reverse(): 颠倒数组中元素的顺序。

let numbers = [1, 2, 3];
numbers.reverse();
console.log(numbers); // 输出：[3, 2, 1]

sort()

sort会改变原数组

返回值：返回排序后的数组

sort(): 排序数组的元素。

let numbers = [3, 1, 2];
numbers.sort();
console.log(numbers); // 输出：[1, 2, 3]
注意：

sort是按照字符串的顺序排序的，不是按照数字的大小排序的，如果想按照数字的大小排序的话，需要加上比较函数

arr.sort((a, b) => a - b);
// > 0, a在b的后面 升序
// < 0, a在b的前面 
// = 0 按照原顺序

concat()

concat() 方法是JavaScript数组的一个方法，用于合并两个或多个数组，并返回一个新的数组，而不会修改原始数组。

以下是 concat() 方法的语法和作用：

const new_array = old_array.concat(value1, value2, ..., valueN)
  • old_array: 原始数组，调用 concat() 方法的数组。
  • value1, value2, ..., valueN: 要合并到原始数组中的值，可以是单个元素、数组或多个元素。

concat() 方法将原始数组与指定的值或数组合并，按照参数的顺序将它们连接成一个新数组。原始数组不会被修改，而是返回一个新的合并后的数组。

let fruits = ['apple', 'banana'];
let moreFruits = ['orange', 'grape'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits);  // 输出: ['apple', 'banana', 'orange', 'grape']

fill()

fill() 方法是 JavaScript 数组的一个方法，用于用指定的静态值填充数组的所有元素，或指定范围内的元素。它会直接修改原数组。

语法
arr.fill(value, start, end)
参数
  • value：要填充的值。
  • start（可选）：填充的起始索引（默认为 0）。如果是负数，表示从数组末尾开始计算。
  • end（可选）：填充的结束索引（省略的话到结尾）（不包括该索引，默认为数组的长度）。如果是负数，表示从数组末尾开始计算。
返回值

返回修改后的数组。

示例
1. 填充整个数组
let arr = [1, 2, 3, 4, 5];
arr.fill(0); // 将所有元素填充为 0
console.log(arr); // 输出: [0, 0, 0, 0, 0]
2. 填充指定范围
let arr = [1, 2, 3, 4, 5];
arr.fill(9, 1, 4); // 将索引 1 到 4 的元素填充为 9
console.log(arr); // 输出: [1, 9, 9, 9, 5]
3. 使用负索引
let arr = [1, 2, 3, 4, 5];
arr.fill(7, -3, -1); // 将倒数第三个到倒数第一个的元素填充为 7
console.log(arr); // 输出: [1, 2, 7, 7, 5]
注意事项
  • fill() 方法会直接修改原数组，而不是返回一个新的数组。
  • fill() 方法可以填充任何类型的值，包括对象和数组。
示例：填充对象
let arr = new Array(3).fill({}); // 创建一个长度为 3 的数组，填充同一个对象
arr[0].name = 'Alice';
console.log(arr); // 输出: [{ name: 'Alice' }, { name: 'Alice' }, { name: 'Alice' }]

在这个例子中，所有元素引用的是同一个对象，因此它们的内容都是相同的。

在 JavaScript 中，当你使用 fill() 方法填充数组时，如果填充的是一个对象（或数组），所有的数组元素将引用同一个对象。这是因为对象在 JavaScript 中是通过引用来处理的，而不是通过值。

解释
  1. 对象的引用：
    • 当你创建一个对象并将其赋值给变量时，该变量实际上存储的是对象的引用，而不是对象的实际值。
    • 例如，let obj = {} 创建了一个对象，obj 变量保存了对这个对象的引用。
  2. 填充数组：
    • 当你使用 new Array(3).fill({}) 创建一个长度为 3 的数组并用一个对象填充它时，数组中的每个元素都指向同一个对象的引用。
    • 这意味着对数组中任意一个元素的修改，实际上是在修改同一个对象。
示例详细说明
let arr = new Array(3).fill({}); // 创建一个长度为 3 的数组，填充同一个对象
arr[0].name = 'Alice'; // 修改第一个元素的对象属性
console.log(arr); // 输出: [{ name: 'Alice' }, { name: 'Alice' }, { name: 'Alice' }]
总结

所有元素引用同一个对象是因为对象在 JavaScript 中是通过引用传递的。任何对数组中某个元素的修改，都会影响到所有引用该对象的元素。**如果你希望每个数组元素都是独立的对象，可以使用 map() 方法或循环来创建新的对象。**例如：

let arr = Array.from({ length: 3 }, () => ({})); // 创建三个独立的对象
arr[0].name = 'Alice';
console.log(arr); // 输出: [{ name: 'Alice' }, {}, {}]

在这个例子中，Array.from() 方法创建了三个独立的对象，因此它们的内容是不同的。

总结

fill() 方法是一个非常实用的工具，可以快速填充数组的元素。它适用于初始化数组或重置数组中的值。如果你有其他问题或需要更多示例，请告诉我！

find()

find() 方法用于在数组中查找满足指定条件的第一个元素，并返回该元素。下面是 find() 方法的详细语法：

array.find(callback[element,index,thisArg])

其中：

  • array：要在其中查找的数组。
  • callback：一个回调函数，用于定义查找条件。它可以接受三个参数：
  • element：当前正在处理的数组元素。
  • index（可选）：当前元素的索引。
  • array（可选）：调用 find() 方法的数组。

在回调函数中，你需要定义一个条件来判断元素是否满足要求。当回调函数返回 true 时，find() 方法将返回当前元素，并停止继续迭代。如果没有找到满足条件的元素，则返回 undefined。

  • thisArg（可选）：在执行回调函数时，用作 this 的值。

find() 方法是 JavaScript 数组的一个方法，用于返回数组中满足提供的测试函数的第一个元素。如果没有找到满足条件的元素，则返回 undefined。

示例
1. 基本用法
let numbers = [1, 2, 3, 4, 5];

let found = numbers.find(num => num > 3);
console.log(found); // 输出: 4
2. 查找对象数组中的元素
let users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

let user = users.find(user => user.id === 2);
console.log(user); // 输出: { id: 2, name: 'Bob' }
3. 查找不存在的元素
let numbers = [1, 2, 3, 4, 5];

let found = numbers.find(num => num > 5);
console.log(found); // 输出: undefined
4. 使用索引
let numbers = [10, 20, 30, 40, 50];

let found = numbers.find((num, index) => {
    console.log(`Index: ${index}, Value: ${num}`);
    return num === 30;
});
console.log(found); // 输出: 30
注意事项
  • find() 方法只返回第一个满足条件的元素，后续的元素不会被检查。
  • 如果想要找到所有满足条件的元素，可以使用 filter() 方法。
总结

find() 方法非常适合在数组中查找特定的元素，尤其是当数组包含对象时。如果你有其他问题或需要更多示例，请告诉我！

copyWithin()

copyWithin() 是 JavaScript 数组的一个方法，**用于浅复制数组的一部分到同一数组中的另一个位置。**它不会改变数组的长度。

语法
arr.copyWithin(target, start, end)
参数
  • target：指定复制到的目标位置（索引）。如果是负数，表示从数组末尾开始计算。
  • start（可选）：指定要复制的起始位置（索引）。**如果省略，默认为 0。**如果是负数，表示从数组末尾开始计算。
  • end（可选）：指定要复制的结束位置（索引），**不包括该位置的元素。如果省略，默认为数组的长度。**如果是负数，表示从数组末尾开始计算。
返回值

返回修改后的数组。

示例
1. 基本用法
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // 从索引 3 开始复制到索引 0
console.log(arr); // 输出: [4, 5, 3, 4, 5]
2. 使用 start 和 end
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 3, 5); // 从索引 3 到 5 复制到索引 1 (不包含索引5)
console.log(arr); // 输出: [1, 4, 5, 4, 5]
3. 负索引
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(-2, -4, -1); // 从索引 -4 到 -1 复制到索引 -2
console.log(arr); // 输出: [1, 2, 3, 2, 3]
注意事项
  • copyWithin() 方法会直接修改原数组，而不是返回一个新的数组。
  • 复制的部分会覆盖目标位置的现有元素。
总结

copyWithin() 方法可以用来在数组内部进行元素的复制和移动，适合在需要修改数组内容时使用。如果你有其他问题或需要更多示例，请告诉我！

类数组对象：

  • string
  • set/map
  • NodeList：DOM 操作中常见的 NodeList 对象，它表示一组通过查询 DOM 元素而获得的节点列表。
  • HTMLCollection：也是 DOM 操作中的常见类数组对象，表示一组特定标签名或类名下的 HTML 元素集合。

数组转为string

  • join
  • toString

合并两个数组

  • concat
  • ...扩展运算符[...arr1,...arr2]
  • 合并到arr1：arr1.push(...arr2)

Date

let date = new Date()
let date = new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)
console.log(date)//Wed Mar 06 2024 09:42:32 GMT+0800 (中国标准时间)

getDate()

getDate()：获取日期对象中的日期（1 到 31）。
console.log(date1.getDate())//6

getDay()

getDay()：获取日期对象中的星期几（**0 表示星期日**，1 表示星期一，依此类推）。
console.log(date1.getDay())//3

getFullYear()

getFullYear()：获取日期对象中的年份（四位数字）。
console.log(date1.getFullYear())//2024

getMonth()

getMonth():获取日期对象中的年份（0-11）0：一月份

getTime()

getTime()：获取日期对象的时间戳（从 1970 年 1 月 1 日以来的**毫秒数**）。
console.log(date1.getTime())//1709689414565

getHours()

getHours()：获取日期对象中的小时数（**0** 到 23）。
console.log(date1.getHours())//9

toLocaleString()

toLocaleString()：返回一个格式化的字符串表示日期和时间。
console.log(date1.toLocaleString())//2024/3/6 09:45:22

Set

add()

set.add(item) 向集合添加元素

has()

set.has(item) has() 方法返回一个布尔值来指示对应的值是否存在于该集合中。

RegExp

  1. 使用构造函数创建正则表达式对象的语法如下：
const regex = new RegExp(pattern, flags);
  • pattern：要匹配的正则表达式模式，可以是字符串。
  • flags：标志，可选参数，用于指定正则表达式的修饰符，如 **g（全局匹配）、i（忽略大小写）、m（多行匹配）**等。 例如，要创建一个匹配字符串中所有的数字的正则表达式对象，可以使用以下构造函数：
const regex = new RegExp('\\d', 'g'); // 反斜杠需要转义

这将创建一个正则表达式对象，用于全局匹配字符串中的所有数字。 2. 使用字面量创建正则表达式对象

const regex3 = /pattern/;
const regex4 = /pattern/g;

test()

reg.test(str) //返回值：true/false

要验证正则表达式是否匹配特定的字符串，您可以使用正则表达式的 test() 方法。这个方法在 JavaScript 中可用于检查一个字符串是否与正则表达式匹配。 以下是一个简单的示例：

const regex = /hello/;
const str = 'hello world';
if (regex.test(str)) {
 console.log('字符串与正则表达式匹配');
} else {
 console.log('字符串与正则表达式不匹配');
}

在这个示例中，regex.test(str) 将检查字符串 str 是否与正则表达式 regex 匹配，并返回 true 或 false。根据返回结果，您可以确定字符串是否符合正则表达式的模式。

exec()

在字符串中执行匹配操作。它接受一个字符串作为输入，并返回一个数组或 null，其中包含有关匹配结果的信息。

regExp.exec(str)
  • regExp是一个正则表达式对象，str 是要进行匹配的字符串。 当调用 exec() 方法时，它会在字符串 str 中查找与正则表达式 regExp匹配的内容。如果找到匹配项，则返回一个数组，数组的第一个元素是匹配的字符串，后续元素可能是与正则表达式中的捕获组匹配的子字符串。如果没有找到匹配项，则返回 null。 下面是一个示例：
var str = "Hello, world!";
var regex = /Hello/;
var result = regex.exec(str);
console.log(result); // 输出: ["Hello"]

match()和exec()的区别

是的，使用 exec() 方法时，即使正则表达式带有全局标志 g，它仍然可以返回捕获组的信息。每次调用 exec() 都会返回当前匹配的结果，包括捕获组。

示例
const str = "abc123def456";
const regex = /(\d+)/g; // 带有全局标志的正则表达式
let match;
while ((match = regex.exec(str)) !== null) {
    console.log(match); // 输出匹配结果，包括捕获组
}
输出示例

对于上述代码，输出将是：

[ '123', '123', index: 3, input: 'abc123def456', groups: undefined ]
[ '456', '456', index: 9, input: 'abc123def456', groups: undefined ]
说明
  • 第一个元素是整个匹配的字符串。
  • 后续元素是捕获组的匹配结果。
  • index 表示匹配的起始位置，input 是原始字符串。
注意事项
  • 当使用全局标志 g 时，exec() 方法每次调用都会从上次匹配的位置继续查找，这意味着你需要在循环中多次调用 exec() 来获取所有匹配。
  • 如果没有匹配到任何内容，exec() 将返回 null，并且循环会结束。

不加全局标志g

const pattern1 = /<([A-Z])>/; 
console.log(pattern1.exec('<A><B>'));
console.log(pattern1.exec('<A><B>'));

转存失败，建议直接上传图片文件

加全局标志g

const pattern2 = /<([A-Z])>/g; 
console.log(pattern2.exec('<A><B>'));
console.log(pattern2.exec('<A><B>'));

image-20240824104244508转存失败，建议直接上传图片文件

总结

即使在全局模式下，exec() 依然可以返回捕获组的信息，这是其一个重要特性。

Function

new Function()

使用new Function()创建函数对象时，其参数必须为字符串形式

apply()call()bind()的区别

call(), bind(), 和 apply() 是 JavaScript 中用于改变函数执行上下文的方法，它们之间有一些区别：

call() 方法:

call() 方法立即调用函数，并且可以传递一个参数列表。

语法：function.call(thisArg, arg1, arg2, ...)

第一个参数 thisArg指定函数内部的 this 值，后续参数是作为函数参数传递的值。

例子：func.call(obj, arg1, arg2) 会立即调用 func 函数，将 this 绑定到 obj 对象，并传递 arg1 和 arg2 作为函数参数。

**注意：**func.call,func没加括号

apply() 方法:

apply() 方法也立即调用函数，但是接收一个包含参数的数组或类数组对象。

语法：function.apply(thisArg, [argArray]).

第一个参数 thisArg 指定函数内部的 this 值，第二个参数是一个数组或类数组对象，包含作为函数参数传递的值。

例子：func.apply(obj, [arg1, arg2]) 会立即调用 func 函数，将 this 绑定到 obj 对象，并传递 arg1 和 arg2 作为函数参数。

bind() 方法:

bind() 方法不会立即调用函数，而是返回一个新函数，并可以预先绑定函数内部的 this 值。

语法：function.bind(thisArg[, arg1[, arg2[, ...]]]).

第一个参数 thisArg 指定函数内部的 this 值，后续参数是预先绑定到新函数的参数。

例子：const boundFunc = func.bind(obj, arg1, arg2) 返回一个新函数 boundFunc，当调用 boundFunc() 时，将会以 obj 作为 this 值，并传递 arg1 和 arg2 作为参数。

总结：

  • call() 和 apply() 都是立即调用函数的方法，而 bind() 返回一个新函数。

  • call() 和 apply() 的区别在于参数的传递方式，call() 接收一系列参数，而 apply() 接收一个数组参数。

  • bind() 可以预先绑定函数内部的 this 值，并返回一个新函数。

l 三者都可以传入null/undefined/不传，this将绑定到全局对象window上（非严格模式下，严格模式下是undefined）

apply()

它允许您在调用函数时设置函数体内的 this 值，并以数组形式传入参数。

它可以让一个对象调用其他对象方法，但是这是临时性的操作

function.apply(thisArg, [argsArray])

  • thisArg：在函数运行时指定的 this 值。可以是任何值，如果传入 null 或 undefined，则全局对象将被用作 this 值。

  • argsArray：一个数组或类数组对象，其中包含传递给函数的参数。

apply() 方法的作用是调用一个具有指定 this 值的函数，并以数组形式传入参数。这使得您可以动态地设置函数内部的 this 值并传入参数，而不需要事先知道参数的具体数量。

以下是一个示例，演示如何使用 apply() 方法：

function greet(greeting) {
  return `${greeting}, ${this.name}!`;
}
const person = { name: 'Alice' };
// 使用 apply() 方法调用 greet 函数，并设置 this 值为 person，传入参数为 ['Hello']
const result = greet.apply(person, ['Hello']);
// 就相当于const result = window.greet.apply(person, ['Hello']);
console.log(result); // 输出: "Hello, Alice!"

在这个示例中，我们定义了一个 greet 函数，然后使用 apply() 方法将 person 对象作为 this 值传递给函数，并传入参数 'Hello'。这样可以动态地设置函数内部的 this 值并传入参数，从而实现灵活的函数调用。

bind()

bind()函数是用于创建一个新函数的方法，bind函数在调用时将指定的对象作为其上下文（即this关键字的值）。这个新函数的this值将永久地绑定到bind()方法的第一个参数，无论它如何被调用。

//bind函数
function showName(owner){
    // console.log(this.name)
    console.log(owner + ' owns ' +this.name)
}
const car = {
    name:'ferrari',
    price:666666
}
const bindName = showName.bind(car,'wxy')

call()

call 是 JavaScript 中的一个函数方法，用于调用一个函数，并指定函数内部的 this 值，以及传递参数。

call 的语法如下：

function.call(thisArg, arg1, arg2, ...)

  • thisArg 是要将函数绑定到的对象，即函数内部的 this 值。

  • arg1, arg2, ... 是要传递给函数的参数列表。

//call函数
//不传入参数的情况
function sayHi(name){
 	console.log(this.hi)
	console.log(this.hi + name)
}
const person5 = {
	hi:'hi'
}
sayHi.call(person5)
//传入参数的情况
sayHi.call(person5, 24)

Symbol

Symbol.for(key)

会首先搜索全局 Symbol 注册表 如果找到具有给定键的 Symbol，则返回该 Symbol。 如果找不到，则会创建一个新的全局 Symbol，并将其注册到注册表中，以便以后可以通过相同的键检索到该 Symbol。 示例：

var symbol1 = Symbol.for('b');
var symbol2 = Symbol.for('b');
var symbol3 = Symbol.for('a');
console.log(symbol1 === symbol2); // 输出: true，相同的键返回同一个 Symbol
console.log(symbol1 === symbol3); // 输出: false，不同的键返回不同的 Symbol

JQuery

Web API

avatar
文章
阅读
粉丝