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

CSDN话题挑战赛第2期
参赛话题：学习笔记

---

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

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

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

join(),concat(),slice()

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

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

sort()， splice()，reverse()

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

map(),filter(),forEach()

---

🐸目录

⭐数组Array API — 改变原数组的API 篇

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

• pop() push()

• shift() unshift()

• sort()

• splice()

• reverse()

一共 7 个

⭐pop() push()

这两个就是一组互为对应,作用相反的API，Array-API 中这样的组合还不少，所以一起 battle 它们

pop() 删除数组中最后一位元素

• 返回值：被删除的元素

let hotGirlName = ["Reli","Mona","Alice"]
let returnVal = hotGirlName.pop()  //"Alice"

push() 向数组中添加元素（从末尾开始）

• 注意，可以push(x,y,……) 追加多个值
• 返回值(push的返回值不常用)：新数组长度 (这哩就需要注意啦！)

let hotGirlName = ["Reli","Mona","Alice"]
let returnVal = hotGirlName.push('Su')  //4
console.log(hotGirlName) //["Reli","Mona","Alice",'Su']

let returnVal2 = hotGirlName.push('Sana','Aimi')  //6
console.log(hotGirlName) //["Reli","Mona","Alice",'Su','Sana','Aimi']

---

⭐shift() unshift()

shift() 删除数组 第一位（首位） 元素

• 返回值：被删除的元素

let hotGirlName = ["Reli","Mona","Alice"]
let returnVal = hotGirlName.shift()  //"Reli"

---

unshift() 从数组头部（首位）开始 添加元素

• 注意：可以添加 array.unshift(a,b,……) 多个值
• 返回值：新数组长度 (这哩就需要注意啦！)

let hotGirlName = ["Reli","Mona","Alice"]
let returnVal = hotGirlName.unshift('Su')  //'4'
console.log(hotGirlName) //['Su',"Reli","Mona","Alice"]

let returnVal2 = hotGirlName.unshift('Sana','Aimi')  //"6"
console.log(hotGirlName) //['Sana','Aimi','Su',"Reli","Mona","Alice"]

---

⭐reverse() 颠倒数组的元素位置

• 返回值：颠倒位置后的新数组

let hotGirlName = ['Sana','Aimi','Su',"Reli","Mona","Alice"]
hotGirlName.reverse() //['Alice', 'Mona', 'Reli', 'Su', 'Aimi', 'Sana']

---

⭐splice() 提取元素

• 从 某个位置 提取 多少个 元素

  • array.splice(index,length)

  • index:开始提取的索引（含其值）

    length:提取的元素个数

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

let hotGirlName = ['Sana','Aimi','Su',"Reli","Mona","Alice"]
hotGirlName.splice(0,1) //['Sana']
hotGirlName.splice(0,2) //猜猜这个，先好好想想

答案是：['Aimi','Su'] (因为上一条语句已经把 Sana 提取（相当于删掉）了，要记住现在说的API 都会改变原数组的)

进一步了解splice()

• 提取数据并在原位置写入新元素 array.splice(index,length,replace)

• 新参数 replace:需要写入的新元素

  所以 此API 是很重要的,解决删除对应元素并替换新值``

let hotGirlName = ['Sana','Aimi','Su',"Reli","Mona","Alice"]
hotGirlName.splice(0,1,'Dena') //返回值依旧是 被删除的 ['Sana']
hotGirlName.splice(0,2,'Morgan') //猜猜这个，先好好想想
console.log(hotGirlName) //再想想原数组变成什么样了

答案分别是：

['Dena', 'Aimi'] (因为上一条语句已经把 Sana 提取（相当于删掉）了，同时替换成了’Dena’,此时在从索引0开始提取2个元素

["Morgan","Su","Reli","Mona","Alice"] 不解释了，请自行思考

---

⭐sort()

关于sort的使用，需要注意

⭐传入函数使用 array.sort(()=>{}) (未必要箭头函数，可使用普通函数)

亦可，可以直接使用 array.sort()，此可做了解，请看下面的文档链接

既然是排序就，不得不涉及 升降序

返回值 排序后的新数组

sort()升序

传入参数是函数，(a,b)=> a-b 或 function(a,b)=>{return a-b}

其中 a代表前一个元素，b代表后一个元素

⭐两者的差值（a-b>0） 若大于零 即前者大于后者 升序排列

let hotGirlAge = [19,21,18,22,20]
hotGirlAge.sort((a,b)=> a-b ) // [18,19,20,21,22]

sort()降序

⭐两者的差值（a-b<0） 若小于零 即前者小于后者 降序排列

let hotGirlAge = [19,21,18,22,20]
hotGirlAge.sort((a,b)=> b-a ) // [22,21,20,19,18]

一道sort()的思考题

[
  { hot_girl_name: "Rena", age: 25 },
  { hot_girl_name: "Mona", age: 22 },
  { hot_girl_name: "Tina", age: 20 }
].sort(function (o1, o2) {
  return o1.age - o2.age;
})
//可以看到，sort排序还能够对对象中的属性作为依据

答案请自行console中输出

关于sort 的更多内容请看 Array 对象API - sort - JavaScript 教程 - 网道 (wangdoc.com)

---

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

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

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

---

参考

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

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

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

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

---

🦖我是Sam9029，一个前端

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

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

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