JavaScript【js】中的数组的方法36条

本文详细介绍了JavaScript中数组的一些主要方法,包括Array构造函数、Array.of()、Array.from()、find()、findIndex()、fill()、map()等,以及它们的使用场景和示例,帮助读者理解和掌握JavaScript数组操作。
摘要由CSDN通过智能技术生成


bilibili讲解链接
【7.JavaScript【JS】中数组对象】 https://www.bilibili.com/video/BV1oM4y1S76K/?share_source=copy_web&vd_source=217d169be9cae06c51f35af48cda8f9e

1.Array()

我们可以通过这个方法创建一个具有特定长度的数组长度

let a = Array(10)
// 我们直接输出a
console.log(a)//输出3

// 输出a的长度
console.log(a.lenght)//输出3
// (10) [empty × 10]
// length: 10

从上面我们可以直接看出,这里的a长度为10,即可我们创建的数组长度为10。

2.Array.of()

这个方法我们可以用来创建数组

let a = Array.of(1,2,3)
console.log(a)//[1,2,3]

3.Array.from()

我们可以用这个方法将类数组对象(例如 NodeList)或可迭代对象(例如 Map 和 Set)转换为真正的数组。这里需要讲两个知识点,类数组对象和可迭代对象:

1.类数组对象

具有数字索引和长度属性的对象,但不是数组,不能使用数组方法

let arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };

2.可迭代对象

这里我用map和set举例
首先我们要知道map和set是用来做什么的

1.map

map是用键值对的形式储存数据结构,每个键值对都是一个独立的实体,允许使用键存储和检索值。
下面来举个例子

let map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map.get('name'));  // John

上面的代码我们可以看出,name和John是成对存在的

2.set

Set 是一种存储唯一值的数据结构,允许您快速检查某个值是否存在。

let set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set.has(1));  // true

这里我们添加了三个数字,在最后一行我们进行了判断返回了一个true。

3.Array.from的使用

好了,接下来我们可以学习**Array.from()**的使用方法了

  1. 先写一个类数组对象
  2. 用Array.from方法把他转换成数组
let arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
let arr = Array.from(arrayLike);
console.log(arr);  // ["a", "b", "c"]

当然也可以使用映射函数

let arrayLike = { 0: 1, 1: 2, 2: 3, length: 3 };
let arr = Array.from(arrayLike, x => x + x);
console.log(arr);  // [2, 4, 6]

4.find()

用于查找数组中第一个符合条件的数组元素,如果找不到则返回undefined

let numbers = [1, 2, 3, 4, 5];
let firstEven = numbers.find(x => x % 2 === 0);
console.log(firstEven);  // 2

5.findIndex()

它用来找符合条件的数值的索引
Array.prototype.findIndex() 方法类似于 Array.prototype.find(),但它返回数组中第一个符合条件的元素的索引,而不是元素的值。如果找不到符合条件的元素,则返回 -1。

let numbers = [1, 2, 3, 4, 5];
let firstEvenIndex = numbers.findIndex(x => x % 2 === 0);
console.log(firstEvenIndex);  // 1

6.fill()

填充
Array.prototype.fill() 方法用于将数组中的所有元素都填充为指定的值。

let numbers = [1, 2, 3, 4, 5];
numbers.fill(0);
console.log(numbers);  // [0, 0, 0, 0, 0]

该方法接受两个必选参数:填充的值和开始填充的索引。
如果有第三个可选参数,则可以指定填充的结束索引(不包括在内)。
举两个例子:

1.两个必选参数的情况

这里从索引为 2 开始填充,其结果为 [1, 2, 0, 0, 0]。

let numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 2);
console.log(numbers);  // [1, 2, 0, 0, 0]
2.三个必选参数的情况

索引为 2 到索引为 3 的元素将被填充为 0,第四位忽略,其结果为 [1, 2, 0, 0, 5]。

let numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 2, 4);
console.log(numbers);  // [1, 2, 0, 0, 5]

7.copyWithin()

它的语法是这样的,很抽象

array.copyWithin(target, start, end)

我们写一段实例,再举个例子大家就懂了

let numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, 3);
console.log(numbers);  // [4, 5, 3, 4, 5]

在此例中,从数组索引为 3 开始复制,并将元素复制到数组的开头。因此,结果为 [4, 5, 3, 4, 5]。

let numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(2, 0, 2);
console.log(numbers);  // [1, 2, 1, 2, 5]

在此例中,从数组索引为 0 开始复制,并在索引为 2 处结束复制。复制的元素被复制到数组的索引为 2 的位置。因此,结果为 [1, 2, 1, 2, 5]。

8.entries()

这是一个遍历的方法
JavaScript 中的一个数组方法,它返回一个新的数组迭代器对象,该对象包含数组中每个元素的索引和值的键值对数组。

let numbers = [1, 2, 3, 4, 5];
let iterator = numbers.entries();
for (let e of iterator) {
  console.log(e);
}

// 输出:
// [0, 1]
// [1, 2]
// [2, 3]
// [3, 4]
// [4, 5]

什么是迭代器

let numbers = [1, 2, 3, 4, 5];
let iterator = numbers[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

// 输出:
// 1
// 2
// 3
// 4
// 5

首先我创建了一个叫numbers的数组
同时创建了一个迭代器,请注意迭代器的迭代方法没有惯用名称,而是使用了符号Symbol.iterator作为名字

next()方法返回对象的下一个数据项和一个表示是否已经遍历完所有数据项的布尔值。在上面的示例中,每次调用 next() 方法时,它都会返回数组中的下一个数字,并在遍历完整个数组后返回一个布尔值 done 设置为 true。

上面是相对官方的解释,用正常的话说就是,next指访问下一个值,done在没有访问到最后一个数值是返回的都是false,到达最后一个数值变成true。
所以把 !result.done作为循环判断的方法。

什么是生成器(暂时跳过)

9.keys()

keys() 方法是 JavaScript 中 Array 对象的一个方法,它返回一个包含数组中每个索引键的迭代器。可以通过使用迭代器的 next() 方法来遍历数组中的所有键
这个代码要区分key()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var keys = fruits.keys();

for (var key of keys) {
  console.log(key);//0 1 2 3 
}

在上面的代码中,keys() 方法返回数组中每个键的迭代器,然后使用** for…of 循环遍历该迭代器**并将其中的值打印到控制台。

10.values()

这个很常用也很简单,这是一个数组方法,它用于返回数组中的所有值。

// 10.values()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var vals = fruits.values();

for (var val of vals) {
  console.log(val);
}
// Banana
// Orange
// Apple
// Mango

11.includes()

用于判断一个数组是否包含一个指定的值,并返回 true 或 false

// 11.includes()
let array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true


let array2 = ['mango', 'banana', 'apple'];
console.log(array2.includes('apple'));
// expected output: true

12.flat()

flat() 方法用于将多维数组降为一维数组,并返回新数组

// 12.flat()
let array1 = [1, 2, [3, 4, [5, 6]]];
console.log(array1.flat());
// expected output: [1, 2, 3, 4, [5, 6]]


let array2 = [1, 2, [3, 4, [5, 6]]];
console.log(array2.flat(2));
// expected output: [1, 2, 3, 4, 5, 6]

13.flatMap()

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为 1。

就是和flat的扁平化一个意思

// 13.flatMap()


const arr1 = [1, 2, [3], [4, 5], 6, []];
const flattened = arr1.flatMap(num => num);
console.log(flattened);
// Expected output: Array [1, 2, 3, 4, 5, 6]


var arr2 = [1, 2, 3, 4];

arr2.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr2.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr2.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
// 箭头函数
flatMap((currentValue) => { /* … */ } )
flatMap((currentValue, index) => { /* … */ } )
flatMap((currentValue, index, array) => { /* … */ } )

// 回调函数
flatMap(callbackFn)
flatMap(callbackFn, thisArg)

// 行内回调函数
flatMap(function(currentValue) { /* … */ })
flatMap(function(currentValue, index) { /* … */ })
flatMap(function(currentValue, index, array){ /* … */ })
flatMap(function(currentValue, index, array) { /* … */ }, thisArg)

callback
可以生成一个新数组中的元素的函数,可以传入三个参数:
currentValue
当前正在数组中处理的元素
index可选
可选的。数组中正在处理的当前元素的索引。
array可选
可选的。被调用的 map 数组
thisArg可选
可选的。执行 callback 函数时 使用的this 值。

14.扩展运算符

扩展运算符 (spread operator) 是 JavaScript 中的三个点 (…) 符号。它允许你在数组,对象和字符串之间进行复制,合并,拆分和其他操作。

let a = [1, 2, 3];
let b = [...a]; // 等同于 let b = [1, 2, 3];
let a = [1, 2, 3];
let b = [4, 5, 6];
let c = [...a, ...b]; // 等同于 let c = [1, 2, 3, 4, 5, 6];
function sum(...numbers) {
  return numbers.reduce((prev, next) => prev + next);
}

let result = sum(1, 2, 3, 4, 5);
console.log(result); // 15
let a = { name: "John Doe", age: 32 };
let b = { ...a, job: "Software Engineer" };
console.log(b); // { name: "John Doe", age: 32, job: "Software Engineer" }

15.fliter()

filter() 方法创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
该方法接受一个回调函数作为参数,该回调函数在数组的每个元素上被调用,并且返回 true 或 false。如果回调函数的返回值为 true,该元素将被包含在返回的新数组中;否则该元素将被忽略

总结起来就是下面这张图:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8]

数组为偶数则返回true,就是到新数组里面去

16.Array.isArray()

用于判断传递值是否是Array

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true

let str = 'hello';
console.log(Array.isArray(str)); // false

返回一个布尔值,是的话返回true,不是的话返回false

17.Foreach()

array.forEach(function(currentValue, index, arr), thisValue)
  • currentValue:当前数组中正在处理的元素。
  • index:当前处理的元素的索引。
  • arr:调用 forEach() 的数组本身。
  • thisValue:(可选)对于回调函数中的 this 关键字的指定值。
var numbers = [1, 4, 9];
numbers.forEach(function(currentValue, index, arr) {
  console.log(currentValue, index, arr);
});

// 输出:
// 1 0 [1, 4, 9]
// 4 1 [1, 4, 9]
// 9 2 [1, 4, 9]

当然一般我们用的时候不会这么夸张
一般的用法是这样的

let array = ["xiaotian","xu",18,99999]
array.forEach(item=>console.log(item))
array.forEach((item,index)=>console.log(index+""+item))

18.reduce()

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
  • callback:执行数组中每个值的函数,包含四个参数:
    • accumulator:累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或者初始值(initialValue)
    • currentValue:数组中正在处理的元素
    • index:当前元素在数组中的索引
    • array:调用reduce()的数组
  • initialValue(可选):作为第一次调用 callback 的第一个参数的值。如果没有提供初始值,则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。
let array = [1,2,3,4]
getSum = (total,item)=>{
    return total + item;
}
console.log(array.reduce(getSum))
console.log(array.reduce(getSum,10))


// 1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
// 2、currentValue (数组中当前被处理的元素)
// 3、index (当前元素在数组中的索引)
// 4、array (调用 reduce 的数组)
var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},0) //注意这里设置了初始值
console.log(arr, sum);
// 打印结果:
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10

19.concat()

拼接数组,此方法返回一个新数组,且不会改变this以及参数提供的数组
注意:这里的是浅层复制,不会影响原数组值,也不会影响this的指向和内容

// 拼接数组
let array1=[1,2]
let array2= [3,4]
console.log(array1.concat(array2))
console.log(array1)

20.every()

判断数组内的元素是否符合条件
符合返回true,不符合返回false
注意:如果every收到的是空数组,则不论怎样,都会返回true

// 20.every

let array = [1,2,3,4,5]
console.log(array.every(item=>item>0))//true
console.log(array.every(item=>item<3))//false



21.indexof()

indexOf() 方法用于在数组中查找某个元素的索引(下标),如果该元素不存在,则返回 -1

var array = [2, 9, 9];
var index = array.indexOf(2);
console.log(index); // 输出 0,因为元素 2 的索引是 0

index = array.indexOf(7);
console.log(index); // 输出 -1,因为元素 7 不存在

也可以传递第二个参数表示从数组的个位置开始搜索

var array = [2, 5, 9, 2];
var index = array.indexOf(2, 2);
console.log(index); // 输出 3,因为元素 2 的索引是 3

22.lastIndexOf()

该方法返回指定字符或子字符串在字符串中最后一次出现的位置,如果没有找到则返回 -1。

const str = "hello world";
const index = str.lastIndexOf("o");
console.log(index); // 输出 7

23.jion()

将数组或者类数组对象连成字符串
他有以下三点需要注意

  1. join() 方法不会改变原始数组,而是返回一个新的字符串。
  2. 如果原始数组中的元素是 undefined 或 null,则在返回的字符串中会以空字符串表示。
  3. 如果原始数组中包含的元素是对象或数组等复杂数据类型,那么在返回的字符串中会以它们的 toString() 方法的返回值作为表示。
const arr = ["apple", "banana", "orange"];
const str = arr.join(", ");
console.log(str); // 输出 "apple, banana, orange"

// 我同样可以拿+来写
const str2 = arr.join("+");
console.log(str); // 输出 "apple+banana+orange"

24.map()

这是一个高阶函数
语法如下

array.map(callback(currentValue, index, array), thisArg)

其中,callback 是一个回调函数,用于处理数组中的每个元素,它可以接收三个参数:

  • currentValue:当前正在被处理的元素。
  • index:当前元素在数组中的索引。
  • array:原始数组。

thisArg 是一个可选的参数,用于指定 callback 函数中 this 关键字所引用的对象。如果省略该参数,则默认使用全局对象。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
  return number * number;
});
console.log(squaredNumbers); // 输出 [1, 4, 9, 16, 25]

在上面的例子中,map() 方法将数组 numbers 中的每个元素都平方,并返回一个新的数组 squaredNumbers,该数组的元素为平方后的结果。最终输出的新数组为 [1, 4, 9, 16, 25]。
需要注意的是,map() 方法不会改变原始数组,而是返回一个新数组。如果原始数组中的元素是 undefined 或 null,则它们将被跳过。如果原始数组中包含的元素是对象或数组等复杂数据类型,那么在回调函数中可以对它们进行任何自定义的操作。

25.pop()

从数组中删除一个数,并返回该数组的值

const fruits = ["apple", "banana", "orange"];
const removedFruit = fruits.pop();
console.log(removedFruit); // 输出 "orange"
console.log(fruits); // 输出 ["apple", "banana"]

在上面的例子中,pop() 方法从数组 fruits 中移除了最后一个元素 “orange”,并将其返回给变量 removedFruit。最终输出的结果为 “orange” 和移除元素后的数组 [“apple”, “banana”]。
需要注意的是,pop() 方法会改变原始数组,即它会直接从数组末尾移除一个元素。如果数组是空的,pop() 方法将返回 undefined。因此,在使用 pop() 方法时需要确保数组非空,或者使用条件语句进行判断。

26.reduceRight()

array.reduceRight(callback(accumulator, currentValue, index, array), initialValue)

其中,callback 是一个回调函数,用于处理数组中的每个元素,它可以接收四个参数:

  • accumulator:累计的结果,初始值为 initialValue 或数组的最后一个元素(如果没有提供 initialValue)。
  • currentValue:当前正在被处理的元素。
  • index:当前元素在数组中的索引。
  • array:原始数组。

initialValue 是一个可选的参数,用于指定累计的初始值。如果省略该参数,则默认使用数组的最后一个元素。
下面举个例子

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduceRight(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 输出 15

在上面的例子中,reduceRight() 方法从数组 numbers 的末尾向前遍历数组,对数组中的每个元素执行回调函数,将元素的值累加到初始值 0 中,并返回最终的累加结果 15。
需要注意的是,reduceRight() 方法不会改变原始数组,而是返回一个累加的结果。如果数组是空的,并且没有提供 initialValue,则 reduceRight() 方法将抛出一个 TypeError 异常。如果数组只有一个元素,并且没有提供 initialValue,则该元素将作为累计的结果返回。

27

28.reverse()

reverse() 是 JavaScript 数组(Array)的一个方法,用于将数组中的元素顺序颠倒,并返回修改后的数组

const fruits = ["apple", "banana", "orange"];
fruits.reverse();
console.log(fruits); // 输出 ["orange", "banana", "apple"]

在上面的例子中,reverse() 方法将数组 fruits 中的元素顺序颠倒,即将 “apple” 置于末尾,“orange” 置于首位。最终输出的结果为修改后的数组 [“orange”, “banana”, “apple”]。
需要注意的是,reverse() 方法会改变原始数组,即它会直接修改原始数组中的元素顺序,而不是返回一个新的数组。如果数组中只有一个元素或者是空数组,则 reverse() 方法将不起任何作用。

29.shift()

shift() 是 JavaScript 数组(Array)的一个方法,用于移除数组中的第一个元素,并返回被移除的元素。

const fruits = ["apple", "banana", "orange"];
const first = fruits.shift();
console.log(first); // 输出 "apple"
console.log(fruits); // 输出 ["banana", "orange"]

在上面的例子中,shift() 方法移除数组 fruits 中的第一个元素 “apple”,并将其返回给变量 first。最终输出的结果为被移除的元素 “apple” 和修改后的数组 [“banana”, “orange”]。
需要注意的是,shift() 方法会改变原始数组,即它会直接移除数组中的第一个元素。如果数组是空的,则 shift() 方法将返回 undefined。如果数组中只有一个元素,则 shift() 方法将将数组清空并返回该元素。因此,在使用 shift() 方法时需要注意数组的长度和元素的类型。

30.slice()

返回一个从原始数组中指定开始和结束位置的新数组,而不会修改原始数组。
语法如下

array.slice(start, end)
const fruits = ["apple", "banana", "orange", "grape", "kiwi"];
const newFruits = fruits.slice(1, 4);
console.log(newFruits); // 输出 ["banana", "orange", "grape"]
console.log(fruits); // 输出 ["apple", "banana", "orange", "grape", "kiwi"]

在上面的例子中,slice() 方法从数组 fruits 的第二个元素(即索引值为 1)开始,提取了三个元素,直到第四个元素(即索引值为 4)结束,返回一个新的数组 newFruits。最终输出的结果为新数组 [“banana”, “orange”, “grape”] 和原始数组 [“apple”, “banana”, “orange”, “grape”, “kiwi”]。
需要注意的是,slice() 方法不会修改原始数组,而是返回一个新的数组。如果 start 或 end 参数超出了原始数组的范围,则 slice() 方法会自动调整参数,以使其落在原始数组的范围内。如果 start 大于等于 end,则 slice() 方法返回一个空数组。

31.some()

用于测试数组中的元素是否满足指定条件中的任意一个,如果满足则返回 true,否则返回 false。

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(function (number) {
  return number % 2 === 0;
});
console.log(hasEven); // 输出 true

在上面的例子中,some() 方法用于判断数组 numbers 中是否存在任意一个偶数。由于数组中有偶数 2 和 4,因此 some() 方法返回 true。最终输出的结果为 true。
需要注意的是,some() 方法只会遍历数组中的元素,直到找到第一个满足条件的元素,就会立即返回 true。如果数组中没有任何一个元素满足条件,则返回 false。如果数组为空,则 some() 方法始终返回 false。

32.sort()

sort()是一个数组方法,用于对数组进行排序。它没有参数,可以按照默认的字母顺序(升序)对数组元素进行排序。

const nums = [3, 1, 4, 1, 5, 9, 2, 6, 5];
nums.sort((a, b) => a - b);
console.log(nums); // [1, 1, 2, 3, 4, 5, 5, 6, 9]

在JavaScript中,a - b是一种比较函数(也称为排序函数),用于将数组元素进行排序。比较函数接受两个参数a和b,并根据它们之间的关系返回一个负数、零或正数。
如果返回负数,则表示a应该在b之前,即a应该排在b的左边。如果返回零,则表示a和b的顺序无所谓。如果返回正数,则表示a应该在b之后,即a应该排在b的右边。
因此,a - b比较函数的作用是将数组元素按升序排序。如果a小于b,则a - b返回负数,a排在b的左边;如果a等于b,则a - b返回零,a和b的顺序无所谓;如果a大于b,则a - b返回正数,a排在b的右边。
请注意,如果要进行降序排序,可以使用b - a作为比较函数。

let arr1 = [1,2,1000,9] 
console.log(arr1.sort())
//[1, 1000, 2, 9]

这是因为sort()默认使用字母顺序对数组元素进行排序。在字母顺序下,"1000"排在"2"前面,所以sort()方法将数组元素按照这个顺序排序。
sort()默认的排序方式是按照字母顺序进行排序,也称为字典顺序或字母表顺序。在字母顺序下,数字被视为字符串处理,因此排序结果可能与数字的大小不同。
在进行字母顺序排序时,sort()方法首先比较数组元素的第一个字符,如果它们相等,则比较第二个字符,以此类推。这种排序方式可能会导致数字按照其第一个数字(即最高位)的大小进行排序,而不是按照其真实值进行排序。例如,在字母顺序下,"1000"将排在"2"的前面,因为"1"的字符编码比"2"要小。
如果要按数字大小进行排序,可以使用比较函数(如a - b)来覆盖默认的字母顺序排序。比较函数比较两个数字的大小,并返回一个负数、零或正数,以便sort()方法根据这个值对数组进行排序。

33.splice()

用来增加或删除数字

array.splice(startIndex, deleteCount, item1, item2, ...)
  • startIndex 是要添加或删除元素的起始索引。
  • deleteCount 是从 startIndex 开始要删除的元素数量。
  • item1、item2 等是要在 startIndex 处添加到数组中的可选项。
  • 如果 deleteCount 为 0,则不会删除任何元素,并且该方法用于在 startIndex 处添加元素。如果 deleteCount 大于 0,则从 startIndex 处删除元素,可以在其位置添加新的元素。
const fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.splice(2, 1); // 从索引为 2 的位置删除一个元素
console.log(fruits); // 输出: ['apple', 'banana', 'date']
const fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.splice(2, 0, 'orange', 'kiwi'); // 从索引为 2 的位置开始添加 'orange' 和 'kiwi'
console.log(fruits); // 输出: ['apple', 'banana', 'orange', 'kiwi', 'cherry', 'date']
const fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.splice(1, 1, 'pear', 'melon'); // 从索引为 1 的位置开始替换 1 个元素
console.log(fruits); // 输出: ['apple', 'pear', 'melon', 'cherry', 'date']

34.toLocaleString()

toLocaleString() 是 JavaScript 中的一个方法,用于将数组转换为一个本地化的字符串。这个方法会调用数组中每个元素的 toLocaleString() 方法,并将它们拼接成一个字符串。使用 toLocaleString() 方法可以让数组中的元素根据用户所在地区的不同而以不同的格式进行显示,比如不同的日期格式、货币符号、小数点分隔符等。
以下是使用 toLocaleString() 方法的示例:

const numbers = [1000, 2000, 3000, 4000];
const localizedNumbers = numbers.toLocaleString('en-US');
console.log(localizedNumbers); // 输出: "1,000,2,000,3,000,4,000"

const dates = [new Date(), new Date(2023, 5, 1), new Date(2023, 11, 25)];
const localizedDates = dates.toLocaleString('en-GB', { dateStyle: 'medium' });
console.log(localizedDates); // 输出: "14-Feb-2023, 01-Jun-2023, 25-Dec-2023"

在上面的示例中,toLocaleString() 方法被调用来将数组中的元素格式化为本地化的字符串。第一个示例中的数组是数字数组,通过使用 ‘en-US’ 选项,该数组被转换为使用英文美国格式显示的字符串。第二个示例中的数组是日期数组,通过使用 ‘en-GB’ 选项和 { dateStyle: ‘medium’ } 选项,该数组被转换为使用英文英国格式显示的日期字符串。需要注意的是,toLocaleString() 方法接受一个可选的选项对象作为第二个参数,可以用于更详细地控制输出字符串的格式。

35.toString()

将数组转化为字符串

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

const colors = ['red', 'green', 'blue'];
const colorString = colors.toString();
console.log(colorString); // 输出: "red,green,blue"

const mixed = [1, 'two', { three: 3 }];
const mixedString = mixed.toString();
console.log(mixedString); // 输出: "1,two,[object Object]"

在上面的示例中,toString() 方法被调用来将数组转换为一个字符串。第一个示例中的数组是数字数组,第二个示例中的数组是字符串数组,第三个示例中的数组是一个混合类型的数组。在所有这些示例中,toString() 方法将数组中的元素转换为字符串并拼接在一起,使用逗号将它们隔开。
需要注意的是,toString() 方法与 join() 方法类似,都可以用于将数组转换为一个字符串。不同之处在于,join() 方法允许您指定要使用的分隔符,而 toString() 方法使用逗号作为默认分隔符。
在示例代码中,输出的结果是[object Object],这是因为数组中的第三个元素是一个对象。当调用该对象的 toString() 方法时,返回的结果是字符串 “[object Object]”,因此最终的输出结果就是[1, 2, “[object Object]”]。
需要注意的是,在 JavaScript 中,如果一个对象没有定义自己的 toString() 方法,那么会使用从 Object.prototype继承来的默认的 toString() 方法。默认的 toString() 方法会返回一个表示该对象类型的字符串,即"[object Object]",因此输出结果会是[object Object]。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值