追求JS小姊姊系列 Day7 -- 郑列展现的工具力（中）

前情提要

郑列展现了自己的工具力（快速找杂物），但似乎还有别的？

郑列：我看你是完全不懂啊，我还有别的能力啊，那就是：

1. 快速调整乱堆杂物排序的方法
   a.Array.prototype.sort()
   b.Array.prototype.reverse()

2. 快速增减杂物的方法
   a.Array.prototype.splice()

工具力再启动之 -- 姊，东西想换位置也没关系喔

Array.prototype.sort()

公式：sort(compareFn((firstEl,secondEl))
公式解释：

1. compareFn：用於比较阵列内值的函式
2. firstEl：第一个比较值
3. secondEl：第二个比较值

是否会回传值：

1. 单纯使用sort()，没有加入compareFn时：
   会将阵列内容转为字串，接着根据内建的unicode规则（用charCodeAt()判断输入值的unicode大小。)，来判断输入大小後，接着进行排列。

2. 加入compareFn进行比较时：
   根据MDN所写的比较规则：

If compareFunction(a, b) returns a value > than 0, sort b before a.
If compareFunction(a, b) returns a value < than 0, sort a before b.
If compareFunction(a, b) returns 0, a and b are considered equal.

大略翻译就是：
1. a>0时，数值b往前排;
2. a <0时，维持a在前b在後; 
3. a=0时，也维持a在前b在後

Ｑ1： 想照着英文字母顺序摆放名牌？没问题

let x = ["BenQ","Apple","Guci","Parda","Hermes"];
console.log(x.sort())
//排序背後的道理是依据unicode的规则判断

Array.prototype.reverse()

公式：find(callback((element,index))
公式解释：

1. callback：所有阵列内的元素都会被这个函式执行
2. element：目标阵列内的元素
3. index：元素的索引值位置(选择性)

是否会回传值：

1. 符合条件：会把索引值的内容调换

Ｑ１：原本由年代远到近的合照摆放，会感觉自己正在变老，想交换顺序行吗？
这样要很久？给郑列我1分钟就够处理

let jsWithFriendsPhotos = ["2016-大家的合照","2017-大家的合照","2018-大家的合照"];
console.log(jsWithFriendsPhotos.reverse())

工具力再启动之 -- 姊，堆好多东西都要一次丢也没关系

郑列：哼哼，这个技能我特别得意，先来假想情境才能显现它的厉害，假如今天JS一如往常堆满了各种东西，如图：

let jsCollections = ["JS姐妹的东西",
"JS姐妹的东西","JS姐妹的东西",
"JS的私人杂物","JS的私人杂物",
"JS的私人杂物","JS的私人杂物",
"JS的私人杂物","JS的私人杂物",
"JS姐妹的东西","工具人的朝贡",
"工具人的朝贡","工具人的朝贡",
"工具人的朝贡","工具人的朝贡",];

Ｑ1：今天她说她觉得自己的杂物太多了，想丢掉一些
那还记得之前追求JS小姊姊系列 Day5 -- 工具人登场的部分，有提到的pop(),shift()吗？只能先用起来了！

//首先我们知道JS的杂物范围在索引值[4]-[9]之间
//1 用pop
jsCollections.pop();
jsCollections.pop();
jsCollections.pop();

//2 用shift
jsCollections.shift();
jsCollections.shift();
jsCollections.shift();
//3 用[]一个一个消
delet jsCollections[4];
delet jsCollections[5];
delet jsCollections[6];

为了爱，当然照样整理下去，然後就会遇到各种问题：pop只会从尾端删内容,shif则是从头，根本处理不到中间的部分.....
这就是Array.prototype.splice()登场的时候了

Array.prototype.splice()

公式：splice(start, deleteCount, item1, item2, itemN)
公式解释：

1. start：开始执行的索引值位置
2. deleteCount：输入整数（代表欲删除值的数量），若没有输入值或是输入的值等於阵列长度，会删除start值後所有的内容 (选择性)
3. item1..N：欲添加的值，数量不限，以,间格(选择性)

是否会回传值：

1. 有删除内容：回传被删除内容的阵列
2. 没有删除内容：回传空阵列

Ｑ1：解决杂物太多，却想一次丢的问题

let jsCollections = ["JS姐妹的东西",
"JS姐妹的东西","JS姐妹的东西",
"JS的私人杂物","JS的私人杂物",
"JS的私人杂物","JS的私人杂物",
"JS的私人杂物","JS的私人杂物",
"JS姐妹的东西","工具人的朝贡",
"工具人的朝贡","工具人的朝贡",
"工具人的朝贡","工具人的朝贡",];

jsCollections.splice(4,3);
//就能轻松把自己的杂物清除啦！～

Ｑ2：仰慕者一次给我好多东西喔～也没问题！

let jsCollections = ["JS姐妹的东西",
"JS姐妹的东西","JS姐妹的东西",
"JS的私人杂物","JS的私人杂物",
"JS的私人杂物","JS的私人杂物",
"JS的私人杂物","JS的私人杂物",
"JS姐妹的东西","工具人的朝贡",
"工具人的朝贡","工具人的朝贡",
"工具人的朝贡","工具人的朝贡",];

//依照上面的公式，选择你想放置的位置
jsCollections.splice(4,"仰慕者的朝贡1","仰慕者的朝贡2","仰慕者的朝贡3","仰慕者的朝贡4");
console.log(jsCollections);

郑列：不过说来惭愧，其实这些能力都不太受JS的青睐...
我：（看他突然很难过，该安慰他吗？..），不然JS到底喜欢哪些能力啊。
郑列：（恢复精神样）哼，既然你真心诚意地发问了，我就大发慈悲的回应你吧。

-- to be continued --

那今天就到这边搂！今天分享喜欢的歌是：
Queen - Keep Yourself Alive (Official Video)
https://www.youtube.com/watch?v=JofwEB9g1zg

每天的休息，是为了後面的追求，明天见。

参考资料：

1. MDN
2. 008