Js水几个基础知识点:数组的操作,字符串和数组之间的互转,持续补充,欢迎关注

这篇具有很好参考价值的文章主要介绍了Js水几个基础知识点:数组的操作,字符串和数组之间的互转,持续补充,欢迎关注。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

关于数组的操作

一、插入 / 删除元素:

我们就不从创建开始讲了,那个太基础了,js创建数组一般都直接let arr = […,…,…],有部分仁兄喜欢new Array(…, …, …),这样看起来可能高级点,结果是一样的哈。
这里我们直接来讨论插入元素:

1、在末尾插入 / 删除元素(push / pop,操作原数组)

push 方法用于在数组的末尾添加一个或多个元素,并返回新数组的长度。这是常用于将元素追加到数组的方法。

const fruits = ['apple', 'banana', 'cherry'];
fruits.push('grape'); // 向数组末尾添加 'grape'
fruits.pop(); // 删除末尾的 'grape'
2、在开头插入元素 / 删除开头元素(unshift / shift,操作原数组)

unshift方法:unshift 方法用于在数组的开头添加一个或多个元素,并返回新数组的长度。

const fruits = ['banana', 'cherry'];
fruits.unshift('apple'); // 向数组开头添加 'apple'

shift方法:shift 方法用于删除数组的第一个元素,并返回被删除的元素。

const fruits = ['apple', 'banana', 'cherry'];
const removedFruit = fruits.shift(); // 删除 'apple'
console.log(removedFruit); // 'apple'
3、(重要)在指定位置插入元素、替换元素或删除元素(splice)

splice方法:splice 方法可以用于在指定位置插入元素、替换元素或删除元素。它可以执行更灵活的操作,因为你可以指定插入位置和要插入的元素。
(1)在指定位置插入

array.splice(startIndex, deleteCount, item1, item2, ...);

参数解释:
startIndex:要插入元素的起始索引位置。
deleteCount:要删除的元素数量(可选,如果不删除元素,则传入 0)。
item1, item2, …:要插入到数组的元素(可选)。
示例,要在数组的第二个位置插入一个元素:

const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 0, 'grape'); // 在索引 1 处插入 'grape',不删除任何元素
console.log(fruits); // ['apple', 'grape', 'banana', 'cherry']

(2)删除指定位置元素,splice 方法也可以用于删除数组中的元素。你只需指定要删除的元素数量,并省略要插入的元素:

array.splice(startIndex, deleteCount);

示例,要删除数组的第二个元素:

const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1); // 从索引 1 开始删除一个元素
console.log(fruits); // ['apple', 'cherry']

(3)替换元素,splice 方法还可以用于替换数组中的元素。你可以指定要删除的元素数量,并提供要插入的新元素:

array.splice(startIndex, deleteCount, newItem1, newItem2, ...);

示例,要将数组中的第二个元素替换为新的元素:

const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1, 'grape'); // 从索引 1 开始删除一个元素并插入 'grape'
console.log(fruits); // ['apple', 'grape', 'cherry']

总结:splice 方法是一个非常灵活的数组操作方法,可以用于插入、删除、替换元素,根据需要对数组进行修改。要使用它,只需了解参数的用法并根据具体的需求进行调整。同时,要注意 splice 会直接修改原数组,所以在使用时要小心。

4、拼接数组(concat)

(1)合并多个数组,可以通过传递多个数组参数,将它们全部合并到一个新数组中(移动端的下拉分页加载更多经常会用到):

const arr1 = [1, 2];
const arr2 = ['a', 'b'];
const arr3 = [true, false];

const mergedArray = arr1.concat(arr2, arr3);
console.log(mergedArray); // [1, 2, 'a', 'b', true, false]

(2)合并值到现有数组,通过将这些值作为参数传递给 concat 方法:

const originalArray = [1, 2, 3];
const newValue = 4;

const newArray = originalArray.concat(newValue);
console.log(newArray); // [1, 2, 3, 4]

注意事项:concat 方法不会修改原始数组,而是返回一个新数组
如果传递给 concat 的参数为空,则它会创建原数组的一个浅拷贝。
如果要合并大量数组,使用 concat 可能不是最高效的方法,因为它会创建新的数组,这可能会导致性能问题。在合并大型数组时,可以考虑其他方法,例如使用 push 和循环。
concat 不会修改原始数组,但如果原始数组或任何合并的数组包含引用类型(如对象或数组),则它们的引用将保留在新数组中,这可能会导致意外的行为。如果需要深拷贝,请考虑使用其他方法来创建新数组
总之,concat 方法是一个方便的数组合并工具,用于将一个或多个数组合并成一个新数组,不会修改原始数据。它在创建新数组时非常有用,并且可以处理多个数组的合并。

5、扩展运算符(…)

使用扩展运算符:ES6引入的扩展运算符可以用于将一个数组的元素展开到另一个数组中,从而实现元素的插入。

const fruits = ['apple', 'banana', 'cherry'];
const newFruits = [...fruits, 'grape']; // 创建一个新数组,并添加 'grape'
6、过滤元素(filter,删除用法,返回新的数组)

filter 方法创建一个新数组,其中包含满足特定条件的元素。你可以使用 filter 来过滤掉不需要的元素。

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(num => num !== 3); // 删除等于 3 的元素
console.log(filteredNumbers); // [1, 2, 4, 5]
小结:

差不多以上就是数组所有的添加和删除元素方法了,这部分特别基础,适用于新手,同时有些不常用的方法,部分老手也经常忘记,包括我自己,于是我整理了一份出来,哎,只怪我太健忘。

二、将数组转换成字符串:join()和toString();将字符串分隔成数组:split()

join() 允许你指定分隔符,因此你可以自定义连接数组元素的方式。
toString() 不允许指定分隔符,它总是使用英文逗号 , 作为分隔符。
除了分隔符的区别,这两种方法的功能相似,都用于将数组元素转换为字符串。根据具体需求,你可以选择使用其中之一。如果需要自定义分隔符或连接方式,join() 更灵活;如果只需使用英文逗号分隔元素,toString() 更简洁。

const fruits = ['apple', 'banana', 'cherry'];
const fruitString = fruits.join(', '); // 使用逗号和空格分隔
console.log(fruitString); // 'apple, banana, cherry'

const fruits = ['apple', 'banana', 'cherry'];
const fruitString = fruits.toString();
console.log(fruitString); // 'apple,banana,cherry'

需要注意的是,这两种方法都不会修改原始数组,它们只是返回一个新的字符串表示形式。

split() 方法。这个方法可以将字符串按照指定的分隔符拆分成一个数组。以下是示例:

const commaSeparatedString = "apple,banana,cherry";
// 使用逗号分隔的字符串转换为数组
const commaSeparatedArray = commaSeparatedString.split(",");
console.log(commaSeparatedArray); // ['apple', 'banana', 'cherry']
三、所有数组方法汇总(只有你想不到的,没有数组做不到的)

push():将一个或多个元素添加到数组的末尾,并返回新数组的长度。
pop():删除数组的最后一个元素,并返回被删除的元素。
shift():删除数组的第一个元素,并返回被删除的元素。
unshift():在数组的开头添加一个或多个元素,并返回新数组的长度。
concat():将一个或多个数组合并成一个新数组,而不修改原数组。
join():将数组的所有元素连接成一个字符串,并返回该字符串。
slice():从数组中提取一段子数组,不修改原数组。
splice():用于插入、删除和替换数组中的元素。
forEach():遍历数组的每个元素,并对其执行指定的函数。
map():创建一个新数组,其中包含根据指定函数的返回值从原始数组中的每个元素生成的结果。
filter():创建一个新数组,其中包含通过指定函数筛选的原始数组中的元素。
reduce():通过指定函数将数组的所有元素汇总成一个值。
reduceRight():类似于 reduce(),但是从数组的最后一个元素开始。
find():查找数组中满足指定条件的第一个元素,并返回该元素。
findIndex():查找数组中满足指定条件的第一个元素的索引,并返回该索引。
indexOf():查找数组中指定元素的第一个索引。
lastIndexOf():查找数组中指定元素的最后一个索引。
includes():检查数组是否包含指定元素。
some():检查数组中是否至少有一个元素满足指定条件。
every():检查数组中是否所有元素都满足指定条件。
sort():对数组元素进行排序(默认按字母顺序)。
reverse():颠倒数组中元素的顺序。
toString():将数组转换为字符串。
toLocaleString():将数组元素转换为本地化字符串。
isArray():检查一个值是否为数组。文章来源地址https://www.toymoban.com/news/detail-702975.html

到了这里,关于Js水几个基础知识点:数组的操作,字符串和数组之间的互转,持续补充,欢迎关注的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 柔性数组知识点

    什么是柔性数组?柔性数组其实也是动态内存管理部分的内容。这节主要来复习柔性数组的知识点。  当结构体的最后一个成员为数组, 且这个数组的大小未确定时, 我们就称它是柔性数组。 如: struct stu {         char name[20];         int age;         char adress[]; } 这里的

    2024年02月22日
    浏览(33)
  • ES6知识点汇总(2)--数组

    1、扩展运算符的应用 ES6通过扩展元素符…,就像rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列 主要用于函数调用的时候,将一个数组变为参数序列 能够更简单实现数组复制 数组的合并也更为简洁 注意:通过扩展运算符实现的是浅拷贝,修改了引用指向的值,

    2024年02月13日
    浏览(31)
  • C语言:数组、字符串知识点整理:

    补充 :数组长度= sizeof(arr)/sizeof(arr[0]) 注意: !!! 不适用于当arr 充当形参时(函数传参) !!! 因为函数 传递 的是 int arr[0] 的 地址(指针) ,而 不是数组内容 , 若在此情况计算整形数组长度         在X86系统下,指针大小为 4 ,所以计算结果为4/4=1;       

    2024年03月10日
    浏览(41)
  • C语言零碎知识点之字符串数组

    在C语言中字符串数组有两种表示方法: 第一种, 二维字符数组 可以利用二维字符数组来表示字符串,格式是: char strs[row][col]; 。例如: 其中的 row 表示二维数组中的行,表示有几个字符串;而 col 表示二维数组中的列,表示能存放字符串的最大长度。 第二种, 字符指针数

    2024年01月18日
    浏览(32)
  • 怎么制作AI绘画?学会这几个技巧就能制作AI绘画,这些Python高级必会知识点你能答出来几个

    大家知道AI绘画吗?这是最近很火的一种绘画方式,我有时候能在社交平台上看到别人发出来的图画。问了才知道,这是通过人工智能软件制作出来的,只要提供画面的描述,AI就能根据这些词汇进行创作。所以即使是不会绘画的小伙伴也不用担心啦,我们通过这些软件

    2024年04月16日
    浏览(32)
  • MATLAB知识点:isempty函数(★★★★☆)判断数组是否为空

    ​讲解视频:可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇(数学建模清风主讲,适合零基础同学观看)_哔哩哔哩_bilibili 节选自第3章:课后习题讲解中拓展的函数 在讲解第三章课后习题的过程中,我给大家拓展了一些讲义中没有

    2024年04月22日
    浏览(37)
  • js的十个知识点

    1、箭头函数 箭头函数没有自己的this,只会在自己的作用域的上一层继承this,所以箭头函数的this指向在它定义的时候就已经确定了,之后不会改变,使用call、apply、bind等方法也不能改变,因为没有自己的this,所以不能作为构造函数使用 2、JSON json是一种基于文本的轻量级的

    2024年01月23日
    浏览(43)
  • Vue.js知识点学习的一点笔记

    目录 一、虚拟DOM  二、MVVM 三、数据代理 四、事件修饰 五、键盘事件 六、插值语法{{}}、方法methods、计算属性computed 七、 监视、深度监视、另一种写法、简写 八、computed计算属性和watch侦听 九、什么时候用箭头函数 十、Vue侦听和watch侦听原理 十一、从Vue侦听原理得出,往对

    2024年02月11日
    浏览(31)
  • CSS基础知识点

    目录 ​编辑一、基本语法规范 二、CSS 选择器 1、简单选择器  (1)标签选择器 (2)类选择器 (3)ID 选择器 2、复合选择器 (1)后代选择器 (2)子选择器 (3)并集选择器 三、CSS常用属性值 1、设置字体家族 2、设置字体大小 3、设置字体的粗细 4、文字倾斜设置 5、文字

    2024年02月11日
    浏览(37)
  • Kubernetes基础知识点

    k8s可以看做是一个集群操作系统,能够对容器进行调度和编排。 Kubernetes中的基本对象 pod 是k8s中的最小单位,一个pod封装一个或者多个容器,存储资源。 deployment 是对pod的服务化封装,可以包含一个或多个pod statefulset 为每一个pod维护一个固定化id job 用来控制批处理型人物的

    2024年02月15日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包