JS30 day07 - Array Cardio Day2

作業內容

今天的內容比較無聊，有關一些陣列的方法練習

學到什麼

列點如下：

CSS
1. 第一次碰到 outline 屬性，他跟 border 有什麼差呢？
- border 會影響這個元素的大小(因為他在 box-model 裡)，而 outline 不會
- border 可以對上下左右有不同設定，但 outline 不行
- outline 預設是 focus 才會出現，而 border 預設原本就是這個元素常態要出現的一部分
1. 做出立體感：下面這個是我覺得很厲害的一小段 css，利用各種旋轉跟微妙的顏色作出立體效果(跪)
1
2
3
4
.suggestions li:nth-child(even) {
transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%);
}
JS
1. 在 JS 裡面，some() 這個方法跟 ruby 中 any? 的方法很像，用在確認這個矩陣中有沒有至少一個元素符合這個條件
2. 在 JS 裡面，every() 這個方法跟 ruby 中 all? 的方法很像，用在確認這個矩陣中有全部元素符合這個條件
3. find() 這個方法只會回傳第一個符合這個條件的元素
4. findIndex() 這個方法只會回傳第一個符合這個條件的元素的 index
5. splice() 這個方法會改變原有陣列，然後這個規則自己認為有點難記
  假設現在 arr = ["zero", "one", "two", "three", "four"]
- 只有一個數字的時候，會從這個 index 值開始刪掉後面的全部元素
1
2
arr.splice(2);
console.log(arr) //["zero", "one"]
- 只有兩個數字的時候，會把第一個數字當作 index, 後面那個數字當作數量，從 index 開始刪掉此數量的元素
1
2
arr.splice(2, 1);
console.log(arr) //["zero", "one", "three", "four"]
- 兩個數字之外還有東西的話，follow 上面那條規則，然後在 index 值插入後面帶的東西
1
2
arr.splice(2, 1, "qoo");
console.log(arr) //["zero", "one", "qoo", "three", "four"]
1. slice() 這個方法不會改變原有陣列，然後這規則也是要記一下
  假設現在 arr = ["zero", "one", "two", "three", "four"]
- 只有一個數字的時候，就會刪除前面幾個元素
1
console.log(arr.slice(2)) //["two", "three", "four"]
- 如果有兩個數字的話，會把前面那個當作起點 index，後面那個當作終點 index，複製一份起點到終點的陣列(不含終點)
1
console.log(arr.slice(1, 3)) //["one", "two"]
比較簡單的記法是把後面減掉前面，就拿這個數字的元素數量，在這個例子中 3 - 1 ＝ 2，所以就是從 index = 1 開始拿兩個元素，不過因為後面那個數字是可以放負值的，所以這樣記會有漏洞喔！

總結

今天的難度我覺得減少好多，可能是有學過 ruby 的關係？？

參考資料：
https://github.com/wesbos/JavaScript30

code 內容：
JS:

const people = [
  { name: 'Wes', year: 1988 },
  { name: 'Kait', year: 1986 },
  { name: 'Irv', year: 1970 },
  { name: 'Lux', year: 2015 }
];

const comments = [
  { text: 'Love this!', id: 523423 },
  { text: 'Super good', id: 823423 },
  { text: 'You are the best', id: 2039842 },
  { text: 'Ramen is my fav food ever', id: 123523 },
  { text: 'Nice Nice Nice!', id: 542328 }
];

// Some and Every Checks
// Array.prototype.some() // is at least one person 19 or older?
const isAdult = people.some(function(person){
  const currentYear = (new Date()).getFullYear();
  if (currentYear - person.year >= 19){
    return true;
  }
});
console.log(isAdult);

// Array.prototype.every() // is everyone 19 or older?
const isAllAdult = people.every(function(person){
  const currentYear = (new Date()).getFullYear();
  if (currentYear - person.year >= 19){
    return true;
  }
});
console.log(isAllAdult);
// Array.prototype.find()
// Find is like filter, but instead returns just the one you are looking for
// find the comment with the ID of 823423
const theComment = comments.find(function(comment){
  if(comment.id === 823423){
    return true;
  }
});
console.log(theComment.text);

// Array.prototype.findIndex()
// Find the comment with this ID
// delete the comment with the ID of 823423
const index = comments.findIndex(function(comment){
  if(comment.id === 823423){
    return true
  }
})
// comments.splice(index, 1)
const newComments = [
  comments.slice(0, index),
  comments.slice(index + 1)
]
console.table(comments)

JS30 day7 Array Cardio Day2"

JS30 day07 - Array Cardio Day2

作業內容

學到什麼

總結

FEATURED TAGS

FRIENDS