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

发布于：2022-12-11 ⋅ 阅读:(295) ⋅ 点赞:(0)

🦖我是Sam9029，一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

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

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

前言

前言可略看–所有主要内容均在 数组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]'
//为什么，往下看

注意：关于valueOf 和 toString 有许多需要注意, 详情参见 彻底了解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') // 0
hotGirl.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的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布