🦖我是 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

• valueOf()，toString()
  

• join()
  

• concat()
  

• slice()
  

• some()，every()
  

• reduce()，reduceRight()
  

• indexOf()，lastIndexOf()
  

一共 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') // 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)