首页 > 其他分享 >JS中常用方法

JS中常用方法

时间:2023-06-28 13:35:16浏览次数:38  
标签:常用 const log 元素 arr JS Output console 方法

数组

splice:

splice() 方法的第一个参数是起始索引,第二个参数是要删除的元素数量(可以为0),然后可以传递更多的参数作为要插入的新元素。

限制删除的数量:
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(0, 3);
console.log(arr);     // Output: [4, 5]
console.log(removed); // Output: [1, 2, 3]
------------------------------------------
删除所有元素:
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(0);
console.log(arr);     // Output: []
console.log(removed); // Output: [1, 2, 3, 4, 5]
------------------------------------------
从末尾删除元素:
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(-2);
console.log(arr);     // Output: [1, 2, 3]
console.log(removed); // Output: [4, 5]
------------------------------------------
删除并插入元素:
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(1, 2, 'a', 'b', 'c');//在index是1的位置删除2个元素,并添加'a','b','c'
console.log(arr);     // Output: [1, 'a', 'b', 'c', 4, 5]
console.log(removed); // Output: [2, 3]
------------------------------------------
替换元素:
const arr = [1, 2, 4, 5];
const replaced = arr.splice(2, 1, 'a', 'b');
console.log(arr);      // Output: [1, 2, 'a', 'b', 5]
console.log(replaced); // Output: [4]
------------------------------------------
插入元素:
const arr = [1, 2, 4, 5];
arr.splice(2, 0, 3);//在index为2的位置,删除0个元素,并添加3
console.log(arr); // Output: [1, 2, 3, 4, 5]
------------------------------------------
删除元素:
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 1);
console.log(arr);     // Output: [1, 2, 4, 5]
console.log(removed); // Output: [3]

pop(), push(), shift(), unshift()

const arr = [1, 2, 3];
arr.pop();
console.log(arr); // Output: [1, 2]

arr.push(4);
console.log(arr); // Output: [1, 2, 4]

arr.shift();
console.log(arr); // Output: [2, 4]

arr.unshift(0);
console.log(arr); // Output: [0, 2, 4]

copyWithin()

copyWithin() 方法在数组内部进行浅拷贝,并将指定位置的元素复制到其他位置。它接受两个参数:目标索引(target)和源索引(start)以及可选的结束索引(end)。该方法会修改原始数组,不会创建新的数组。下面是对 copyWithin() 方法的详细解释以及相应的示例代码:
copyWithin() 方法的语法如下:

arr.copyWithin(target, start, end)

target(必需):要复制到的目标索引位置。
start(可选):要复制的源起始索引位置。
end(可选):要复制的源结束索引位置(不包含该索引)。

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // 将索引3及之后的元素复制到索引0及之后的位置
console.log(arr); // Output: [4, 5, 3, 4, 5]

在上面的示例中,我们将索引为3的元素(4, 5)复制到索引为0的位置开始,结果是原始数组被修改为 [4, 5, 3, 4, 5]。
复制特定范围内的元素:

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 2, 4);
console.log(arr); // Output: [1, 3, 4, 4, 5]

复制到末尾:

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(2, 0);
console.log(arr); // Output: [1, 2, 1, 2, 3]

在上面的示例中,我们从索引为0的位置开始复制,将复制的元素粘贴到索引为2的位置,直到末尾。结果是原始数组被修改为 [1, 2, 1, 2, 3]。

fill()

fill() 方法用于将数组中的元素替换为静态值,从指定的起始索引位置开始,到指定的结束索引位置结束(不包括结束索引位置)。它会修改原始数组,不会创建新的数组。下面是对 fill() 方法的详细解释以及相应的示例代码:

arr.fill(value, start, end)

参数说明:

value(必需):用于替换数组元素的静态值。
start(可选):替换开始的起始索引位置,默认为 0。
end(可选):替换结束的索引位置(不包括该位置),默认为数组长度。

const arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // Output: [0, 0, 0, 0, 0]

替换特定范围内的元素:

const arr = [1, 2, 3, 4, 5];
arr.fill('a', 1, 4);
console.log(arr); // Output: [1, 'a', 'a', 'a', 5]

在上面的示例中,我们从索引为1的位置开始,替换到索引为4的位置结束(不包括索引4)。结果是原始数组被修改为 [1, 'a', 'a', 'a', 5]。

替换从末尾开始的元素:

const arr = [1, 2, 3, 4, 5];
arr.fill('b', -3);
console.log(arr); // Output: [1, 2, 'b', 'b', 'b']

在上面的示例中,我们从倒数第三个元素开始,将之后的所有元素替换为静态值 'b'。结果是原始数组被修改为 [1, 2, 'b', 'b', 'b']。

reverse()

const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

sort()

const arr = [3, 2, 1];
arr.sort();
console.log(arr); // Output: [1, 2, 3]

join()

const arr = ['Hello', 'World'];
const joined = arr.join(' ');
console.log(joined); // Output: "Hello World"

forEach()

const arr = [1, 2, 3];
arr.forEach(item => {
  console.log(item);
});
// Output:
// 1
// 2
// 3

map()

const arr = [1, 2, 3];
const doubled = arr.map(item => item * 2);
console.log(doubled); // Output: [2, 4, 6]

filter()

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(item => item % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

indexOf()

const arr = [1, 2, 3, 4, 5];
const index = arr.indexOf(3);
console.log(index); // Output: 2

lastIndexOf()

const arr = [1, 2, 3, 4, 3, 5];
const lastIndex = arr.lastIndexOf(3);
console.log(lastIndex); // Output: 4

reduce(),reduceRight()

reduce() 方法和 reduceRight() 方法都是用于数组的迭代方法,它们可以通过对数组中的元素进行累积计算来返回一个最终的值。它们的差异在于迭代的方向不同。下面是对 reduce() 和 reduceRight() 方法的详细解释以及相应的示例代码:
reduce() 方法:
reduce() 方法从数组的左侧开始迭代元素,依次将每个元素和累加器进行操作。
它接受两个参数:回调函数和可选的初始值。
回调函数接受四个参数:累加器(accumulator),当前元素(current value),当前索引(index),原始数组(array)。
回调函数返回的值将作为下一次迭代的累加器的值。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15

在上面的示例中,我们使用 reduce() 方法对数组中的元素进行累加计算,并将初始值设置为 0。最终的结果是所有元素的和,即 15。
reduceRight() 方法:
reduceRight() 方法从数组的右侧开始迭代元素,依次将每个元素和累加器进行操作。
它接受两个参数:回调函数和可选的初始值。
回调函数接受四个参数:累加器(accumulator),当前元素(current value),当前索引(index),原始数组(array)。
回调函数返回的值将作为下一次迭代的累加器的值。

const numbers = [1, 2, 3, 4, 5];
const concatenated = numbers.reduceRight((accumulator, currentValue) => accumulator + currentValue, '');
console.log(concatenated); // Output: '54321'

在上面的示例中,我们使用 reduceRight() 方法将数组中的元素从右侧开始拼接成一个字符串,并将初始值设置为空字符串。最终的结果是逆序拼接的字符串,即 '54321'。

无论是 reduce() 还是 reduceRight() 方法,你可以根据需求选择合适的方法来实现对数组的累积计算。在回调函数中,你可以根据需要对累加器和当前元素进行任意操作,并返回下一次迭代的累加器的值。

在 reduce() 方法中,可选的第二个参数是初始值(initial value),它指定了累加器的初始值。如果不提供初始值,则默认使用数组的第一个元素作为初始值,并从数组的第二个元素开始迭代。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // Output: 15

在上面的示例中,我们没有提供初始值,因此 reduce() 方法会将数组的第一个元素(1)作为初始值,并从数组的第二个元素(2)开始进行累加计算。
现在,让我们给出一个使用回调函数接受四个参数的示例:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue, index, array) => {
  console.log(`accumulator: ${accumulator}, currentValue: ${currentValue}, index: ${index}, array: ${array}`);
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

对象常用方法示例

keys()

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys); // Output: ["a", "b", "c"]

values()

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // Output: [1, 2, 3]

entries()

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]

hasOwnProperty()

const obj = { a: 1, b: 2 };
console.log(obj.hasOwnProperty('a')); // Output: true
console.log(obj.hasOwnProperty('c')); // Output: false

标签:常用,const,log,元素,arr,JS,Output,console,方法
From: https://www.cnblogs.com/johnyang/p/17511157.html

相关文章

  • java 异步方法总结(减少主线程阻塞)
    主要点第一点:@Async只能使用到被代理的对象方法上,即代理类的入口方法处,且方法必须是public的。第二点:事务处理机制使用@Async异步注解不能和@Transaction事务注解在同一个方法上同时使用,不然事务注解将无效。要使用事务,需要把事务注解提取到方法里面的子方法上。  代码实......
  • JAVA常用类---静态内部类
    publicclassOuter{privateStringname="李四";privateStringsex="男";//静态类和外部类权限一样/*外部调用Outer.Interinter=newOuter.Inter();Outer.Inter仅表示包含关系,如果是成员类应为Outer.Interinter=newOuter().Inter();还需要导......
  • dayjs 根据时间展示不同的信息
    getTime(data){consttime=this.$dayjs(data).format('YYYYMDD')constnowDate=this.$dayjs().format('YYYYMDD')//今天constyesterday=this.$dayjs().subtract(1,'day').format('YYYYMDD')//前一......
  • spring基础之常用组件
    spring基础之常用组件一、基于xml注入bean先看看我们在没有使用注解之前,最早使用xml进行bean的注入是怎么操作的呢?首先我们需要在项目中创建一个.xml文件然后使用bean标签注册一些组件。现在我们就以注册person这个bean进行举例。先创建一个需要注册的bean实例@Data@AllArgs......
  • 【一】Docker常用命令
    【一】Docker常用命令1.查看容器名dockerps-a2.重启青龙容器dockerrestart你的容器名3.更新青龙(或者直接面板更新)dockerexec-itqinglongqlupdate4.更新青龙并编译dockerexec-itqinglongqlrestart5.拉取自定义仓库,已Faker仓库为例dockerexec-itqinglong......
  • GIS融合之路(四)如何用CesiumJS做出Cesium For Unreal的效果
    同样在这篇文章开始前重申一下,山海鲸并没有使用ThreeJS引擎。但由于ThreeJS引擎使用广泛,下文中直接用ThreeJS同CesiumJS的整合方案代替山海鲸中3D引擎和CesiumJS整合。系列传送门:山海鲸可视化:GIS融合之路(一)技术选型CesiumJS/loaders.gl/iTowns?山海鲸可视化:GIS融合之路(二)Cesium......
  • Transaction rolled back because it has been marked as rollback-only大概问题及解
    Transactionrolledbackbecauseithasbeenmarkedasrollback-only问题:前几天遇到一个问题,代码没有抛出我想要的带自定义提示消息的异常,却报了个这个,去搜了一下,大概原因如下:因为我在controller的方法上写了@Transactional注解,里边调用的service的方法上也写了@Transactiona......
  • Git忽略部分修改的方法(.gitignore添加忽略文件不起作用的解决办法)
    背景:有时候本地修改,有些修改不需要提交上库,所以需要进行部分文件的修改进行忽略处理。 一、.gitignore方式忽略.gitignore文件中只能忽略本地新增的目录或者文件,这个文件默认会被提交上库,除非该文件添加了忽略自身。 二、.git/info/exclude方式忽略.git/info/exclude文件......
  • U8备份账套恢复为不同账套号,进行删除操作数据时提示:当前对应的账套不存在处理方法
    现象:U8备份账套恢复为不同账套号,进行删除操作数据时提示:当前对应的账套不存在 处理方法:该账套的原始账套存在协同,我们在协同中添加一个账套协同即可解决,使用完成后可以删除 ......
  • CSS中实现元素居中的七种方法总结
    在前端开发中,经常需要将元素居中显示,CSS提供了多种技术方法来实现元素的居中,在不同场景下有不同的使用方法、不同的效果,需要特别记住它们的应用场景才能够正常的居中。这篇文章就大致总结一下CSS中的居中方法。一、元素分类在CSS中,元素大致可以分为以下几种:1.块级元素(Block-l......