写点什么

JS- 内置对象 API-Array(数组)-(二)- 不改变原数组的 API- 篇

作者:Sam9029
  • 2022 年 9 月 20 日
    四川
  • 本文字数:3649 字

    阅读完需:约 12 分钟

JS-内置对象API-Array(数组)-(二)-不改变原数组的API-篇

🦖我是 Sam9029,一个前端

Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)

**🐱‍🐉🐱‍🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍**


前言

前言可略看--所有主要内容均在 数组Array API


一句JS内一切皆对象的名言,我们是无法避免 ,使用各种 JS内置对象的API ,也是打牢基础的必经之路,介于之前我还未完整细致的了解JS内置对象的API 的使用,总觉得不舒服,故写此篇与诸君共勉


文章只阐述 各API 基础使用


关于 Array-API 之前我学习时,就有四大难点


  • 多:所有(ES5+ES6)的 Array-API 加起来一共 有 22 个

  • 使用方法

  • 作用不同:操作时,原数组会发生变化与否

  • 返回值:API 的返回值

这些 API 操作时造成的原数组属性的变化同时也是学习 API 时的拦路虎,是必须要记住的

如果你想验证一下 Array-API 个数的对不对😗,欢迎检阅-数组对象 API Array 对象 - JavaScript 教程 - 网道 (wangdoc.com)


所以写文时我纠结该使用什么分类


  • 有返回值

  • 返回值又是什么

  • 无返回值

  • ⭐只有 forEach无返回值(这么说是不准确的,但可以这么记)

  • ``改变原数组`

  • 不改变原数组

  • 啥都不管-直接一通硬淦😊


而要一下子记所有 API 的这些属性,这么多内容的是不容易的,如果我们能 抽丝剥茧,化繁为简,事情就好办了


所以我将按照是否改变原数组判断将 Array-API 分类来 学习


此文为 JS-内置对象API-Array(数组)-(二)改变原数组-的API-篇

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

sort()splice()reverse()

姊妹篇 JS-内置对象API-Array(数组)-(一)不改变原数组-的API-篇

valueOf(),toString(),some(),every(),

reduce(),reduceRight(),indexOf(),lastIndexOf(),

join(),concat(),slice()

姊妹篇 JS-内置对象API-Array(数组)-(三)特殊数组API-篇

map(),filter(),forEach()



⭐数组 Array API --- 不改变原数组的 API 篇

废话不多讲,上今天要搞定的 API -- 不会改变原数组的Array-API


一共 11 个



vauleOf() 返回数组的本身

  • 返回值:返回数组的本身


每个 JS 内的对象都有valueOf(),表示对返回对象原始值,若为对象就返回对象本身

即 不同对象的valueOf方法不尽一致,数组的valueOf方法返回数组本身


let hotGirl = ['Nena','Mona']hotGirl.valueOf() // ['Nena','Mona']
let hotGirl = ['Nena','Mona',{"li":'lili'}]hotGirl.valueOf() // ['Nena','Mona',{"li":'lili'}]
复制代码

toString() 将数组元素转成字符串形式的返回

  • 返回值:将数组元素转成字符串形式的返回


let hotGirl = ['Nena','Mona']hotGirl.toString() // 'Nena,Mona'
复制代码


注意数组中含数组时:


let hotGirl = ['Nena','Mona',["Rena","Tina"]]hotGirl.toString() // 'Nena,Mona,Rena,Tina'
复制代码


注意数组中含对象时:


let hotGirl = ['Nena','Mona',{"name":"Tina"}]// 想想答案是什么?
hotGirl.toString() // 'Nena,Mona,[object Object]'//为什么,往下看
复制代码


注意:关于valueOftoString 有许多需要注意, 详情参见 彻底了解toString和valueOf区别_世态炎凉!!的博客-CSDN博客_tostring和valueof有什么区别


此处给一个典型的面试案例 (数组 与 对象 使用 valueOf 和 toString 的区别)

数组本身使用

[].valueOf() //[]
[].toString() //''

对象使用

{}.valueOf() // {}
//⭐ 特别重要 对象使用toString() 时 返回的都是 '[object Object]',当然除非自行重新设置了原型链上的 toString 方法😊
{}.toString() // '[object Object]'



join() 将数组所有元素按特定字符拼接成 一个字符串

  • 返回值:数组所有元素按特定字符拼接成 一个字符串

  • 参数:join(参数任意) 可不写


let hotGirl = ['Rena','Lena'] hotGirl.join('&') //'Rena&Lena'
复制代码

注意一点 :不写参数array.join()

  • 不写参数时,就直接连同 逗号返回


let hotGirl = ['Rena','Lena'] hotGirl.join() //'Rena,Lena'
复制代码

注意另一点:参数写空值array.join("")

//空值let hotGirl = ['Rena','Lena'] hotGirl.join("") //'RenaLena'
//空值占位的字符串(相当于是有一个空格作为参数)let hotGirl = ['Rena','Lena'] hotGirl.join(" ") //'Rena Lena'
复制代码



concat() 拼合数组

  • 返回值:拼接合成的新数组

  • 可以有多个参数array.concat(['a'],['b'],……)


var arr1_1 = [100, 200];var arr1_2 = [300, 400, 500];
arr1_1.concat(arr1_2) // [100, 200, 300, 400, 500]
复制代码


concat 数组 API 通常用于连接两个或多个数组,但并不意味着只能用于连接数组。其关键的部分是:由于其是数组的 API,所以其必须被数组调用。而不重要的部分则是:只要是数组在调用本 API,那么其余连接的部分则无所谓其他数据结构

['Nena','Mona'].concat('sa')
['Nena','Mona'].concat(['sa'])
// 答案都是 ['Nena','Mona','sa']

['Nena','Mona'].concat({'name':'sa'})
//答案是 ['Nena','Mona',{'name':'sa'}]



slice() 提取对应索引区间的元素(左闭右开)

  • 返回值:被提取的元素组成的新数组

  • 注意参数 array.slice(start,end)

  • start:开始提取的数组元素下标

  • end:结束提取的数组元素下标(不含)

  • 可以只写一个参数,那表示 start,即从 start 下标提取剩下的所有元素


let hotGirl = ['Jina','Tina','Morgan','Anja','Rena','Su']//长度6  下标即为 0 1 2 3 4 5
//此时我想和`Tina`说说话hotGirl.slice(1,2) // ["Tina" ]
//此时我想和`Tina`,'Morgan'(注意她们是相邻的元素)说说话hotGirl.slice(1,3) // ["Tina",'Morgan']
复制代码


只写一个参数


['Jina','Tina','Morgan','Anja','Rena','Su'].slice(1) //['Tina','Morgan','Anja','Rena','Su']
复制代码


对空数组使用


[].slice(1,2) //[]
复制代码


参数甚至可以写负数


['Jina','Tina','Morgan','Anja','Rena','Su'].slice(-1) // ['Su'] //从负1位(即'Su'所在),向右提取剩余的所有元素['Jina','Tina','Morgan','Anja','Rena','Su'].slice(-4,-2) // ['Morgan', 'Anja']
复制代码

⭐注意:参数中 start(在数组中的)索引位置 必须 在 endstart 索引位置 的左边

  • 否则只能提取到空数组


['Jina','Tina','Morgan','Anja','Rena','Su'].slice(-1,-2) // []['Jina','Tina','Morgan','Anja','Rena','Su'].slice(-1,-3) // []['Jina','Tina','Morgan','Anja','Rena','Su'].slice(3,1) // []['Jina','Tina','Morgan','Anja','Rena','Su'].slice(2,1) // []
// 我们可以尝试着 对上面4个例子 调换他们的参数位置 请自行console 看看结果
复制代码



some(),every() 从左向右 遍历数组 并判断 元素是否符合某种 条件

  • 返回值:布尔值 true or false

  • 参数

  • 接受函数作为参数

  • 函数可接受三个参数:当前元素当前位置(可选) 和整个数组 (可选)


every((item,index,arr)=>{})

some((item,index,arr)=>{})

后面两个参数 不常用



some 只要有一个 元素满足 条件就返回 true

let hotGirlHeight = [180,179,178,181]hotGirlHeight.some((item)=>{return item>=181}) // true// 有一个hotGirl的身高 高于等于了 181 所以返回true
复制代码

every 所有 元素满足 条件就返回 false

let hotGirlHeight = [180,179,178,181]hotGirlHeight.every((item)=>{return item>=181}) // false// 只有一个hotGirl的身高 高于等于了 181,其他人不满足 所以返回false
复制代码



indexOf(),lastIndexOf 返回元素在数组中的对应下标索引

  • 返回值:

  • 若对应元素在数组中存在 返回元素下标数值

  • 若对应元素在数组中不存在 返回 -1

  • 参数:被查元素(字符串,或 数值


indexOf() 和 lastIndexOf 的作用相反


indexOf() 从左往右 元素第一次出现的位置

lastIndexOf () 从左往右 元素最后一次出现的位置


let hotGirl = ['Jina','Tina','Morgan','Jina','Anja','Rena','Su']//注意 数组 中 有两 'Jina'
hotGirl.indexOf('Jina') // 0hotGirl.lastIndexOf('Jina') //3
复制代码



reduce(),reduceRight 从左向右依次对数组中的元素进行某些操作

关于这两个 API ,目前能力不足


详情可看 wangdoc 对应的内容,讲解的很好


Array 对象 - reduce&reduceright - JavaScript 教程 - 网道 (wangdoc.com)



注意以上API 操作都是会 ❗ 不改变原数组的!❗

了解 会改变原数组的 Array-API

姊妹篇 JS-内置对象API-Array(数组)-(一)改变原数组-的API-篇

以及 特别类型 Array-API

姊妹篇 JS-内置对象API-Array(数组)-(三)特殊类型的API-篇



参考

有关 JS 学习中 所有的内置对象API 查找 使用,推荐查看wangdoc.com文档,里面讲解的非常详细,并且每一个内置对象的 API 使用都附带了基础案例演示,实为必看精品


数组对象 API Array 对象 - JavaScript 教程 - 网道 (wangdoc.com)

所有内置对象 的 API标准库 - JavaScript 教程 - 网道 (wangdoc.com)

彻底了解toString和valueOf区别_世态炎凉!!的博客-CSDN博客_tostring和valueof有什么区别

Array 对象 - reduce&reduceright - JavaScript 教程 - 网道 (wangdoc.com)

本文大多参考wangdoc文档,如与其有出入,请参照wangdoc原文档




🦖我是 Sam9029,一个前端,坚信应无所往

文章若有错误,敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你,都看到这了,求收藏,求评论,求一个大大的赞👍!不过分吧**

Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)

发布于: 17 小时前阅读数: 21
用户头像

Sam9029

关注

庸俗 2022.09.03 加入

好色

评论

发布
暂无评论
JS-内置对象API-Array(数组)-(二)-不改变原数组的API-篇_JavaScript_Sam9029_InfoQ写作社区