写点什么

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

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

    阅读完需:约 9 分钟

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

🦖我是 Sam9029,一个前端

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

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

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')  //"Su"console.log(hotGirlName) //["Reli","Mona","Alice",'Su']
let returnVal2 = hotGirlName.push('Sana','Aimi') //"Aimi"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') //"Aimi"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-bfunction(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 的 InfoQ 主页:Sam9029 (infoq.cn)


发布于: 刚刚阅读数: 5
用户头像

Sam9029

关注

庸俗 2022.09.03 加入

好色

评论

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