面試題問答-001

時間 2020-01-07

原文原文鏈接

上週去面了兩家公司，part1是第一家公司的部分試題，part2是第二家公司的部分試題javascript

Part 1

手寫一個類和類的繼承？擴展一下class中屬性和方法的寫法和class繼承的用法。css

// Animal, Dog, Cat  Animal是父類，Dog和Cat都是Animal的子類
// Dog打印 我是貴賓狗，我叫小黑，我6歲，我喜歡吃骨頭。
// Cat打印 我是木偶貓，我叫小白，我7歲，我喜歡吃魚

/* 
分析一下： 公共的有名字（name)，年紀(age)，喜歡吃的食物(food)
*/

class Animal{
  constructor(name, age, food) {
    Object.assign(this, {name, age, food});
  }
  basicInfo(){
    return `我叫${this.name}，我${this.age}歲，我喜歡吃${this.food}`
  }
}

class Dog extends Animal{
  constructor(name, age, food, type) {
    super(name, age, food )
    this.type = type
  }
  log(){
    console.log(`我是${this.type}，${super.basicInfo()}!`)
  }
}

class Cat extends Animal{
  constructor(name, age, food, type){
    super(name, age, food)
    this.type = type
  }
  log(){
    console.log(`我是${this.type}，${super.basicInfo()}!`)
  }
}

// (name, age, food, type)
let an = new Animal("小紅",6, "飯")
let dog = new Dog("小黑", 6, "骨頭", "貴賓狗")
let cat = new Cat("小白", 7, "魚", "木偶貓")

console.log(an.basicInfo());
dog.log()
cat.log()
// 我叫小紅，我6歲，我喜歡吃飯
// 我是貴賓狗，我叫小黑，我6歲，我喜歡吃骨頭!
// 我是木偶貓，我叫小白，我7歲，我喜歡吃魚!

遇到這樣，要寫類和繼承的題，分析步驟是：html

找出父類和子類中的公共屬性和方法，做爲父類的屬性和方法
找出子類中獨有的屬性和方法，做爲子類的屬性和方法
根據歸類好的屬性和方法，寫父類和子類；父類直接 class 定義，子類繼承父類用extends
constructor中，子類須要多少屬性，就傳參多少個，來自父類的屬性，用super方法處理，再將其餘的屬性賦給this對象
子類的方法中，須要用到父類方法時，用super對象調用

下面的函數輸出什麼？java

含 new Promise，setTimeOutcss3
```
setTimeout(() => {
  console.log("hello");
}, 100);

new Promise((resolve, reject) => {
  console.log(1);
  resolve("a");
}).then((res) => {
  console.log(res);
  console.log("resolved");
}).catch(()=> {
  console.log(3);
})
console.log("finished");
```
打印結果： 1 finished a resolved hello web

分析：數組
- setTimeout是下一輪事件循環開始時執行因此 hello 最後打印。
- Promise建立後，立刻執行，打印1
- Promise的then方法是當前腳本的全部同步任務執行完了以後，也就是本輪事件循環結束時執行，打印 finished
- Promise構造函數的兩個參數分別是 resolve和reject，resolve會將promise實例的狀態置爲fulfilled（完成），而後代碼就不會往下執行。接着代碼就會走到then方法中，then方法中的參數，就是resolve的結果，當resolve中參數一個非promise時，res就是這個參數自己打印a resolved

css3的幾個屬性 translate，transform，transition，animation。拓展：幾個css3特效的用法。promise

這幾個屬性的區別區別說明的網站瀏覽器

translate用法：app

translate是 transform的一個屬性。translate方法傳兩個參數left，top，表示沿x軸和y軸的移動的距離。 translate(0, -50%) 表示沿y軸向上移動 50%
transform用法：

變形改變。包括旋轉（rotate）、扭曲（skew）、縮放（scale）、移動（translate）, matrix。起點位置爲 transform-origin: bottom left;

看例子：

<style>
.box{
  width: 0;
  height: 0;
  border-top: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid rgb(193, 240, 195);
  /* 上面畫一個三角形 */
  cursor: pointer;
  margin: 200px 0 0 200px;
}
</style>
<body>
  <div class="box" onclick="handleChange()">我是box</div>
  <script>
    let i = 1
    function handleChange(){
      let ele = document.querySelector(".box") // 返回當前文檔中第一個類名爲 "box" 的元素
      /* let deg = i % 2 ? 90 : 0
      ele.style.transform = `rotate(${deg}deg)` */

      /* let scale = i % 2 ? "0.8,0.5" : "0.3,0.3"
      ele.style.transform = `scale(${scale})` */

      let skew = i % 2 ? "20" : "-20"
      ele.style.transform = `skew(${skew}deg)`
      i ++
    }
  </script>
</body>

transition的用法

transition 屬性是四個屬性的縮寫 transition-property， transition-duration, transition-timing-function, transition-delay。分別表示：過渡效果的css屬性名稱、完成過渡效果須要的秒或毫秒、速度效果的速度曲線、過渡效果什麼時候開始。

transition 屬性是這四個屬性是順序日後排。第一個transition-property和transition-duration是必填。transition-timing-function的可選項是： linear(勻速)，ease（慢速開始-快-慢速結束），ease-in（慢速開始）， ease-out(慢速結束)， ease-in-out（慢速開始和結束的）

基於上面的例子，能夠把 transition和transform放在一塊兒用：
```
// 點擊box時，1秒以後，在0.5s時間內，先快後慢，順時針旋轉90°  
function handleChange(){
  let ele = document.querySelector(".box") // 返回當前文檔中第一個類名爲 "box" 的元素
  ele.style.transition = "transform .5s ease-in 1s"
  let deg = i % 2 ? 90 : 0
  ele.style.transform = `rotate(${deg}deg)`
  i ++
}
```

animation的用法：

animation是個複合屬性，是7個屬性的縮寫。 animation-name, animation-duration， animation-timing-function， animation-delay， animation-iteration-count，animation-direction， animation-play-state

上面7個屬性中難點是 animation-name的定義。 animation-name要用 @keyframes方法來定義。具體定義方法是：

@keyframes disapper{
  from{opacity: 1;}
  to{opacity:0;}
}
// 複雜的能夠不用from，to，直接用百分號
@keyframes dis{
  from{transform: translate(0,0)}
  20%{transform: translate(20,20)}
  to{transform: translate(100,20)}
}
// from 等價於 0%, to 等價於 100%

在使用animation以前，先定義 animation-name，而後在按照這幾個屬性的順序，給元素加animation屬。例如要實現一個三角形先旋轉90度，而後右移100px，而後下移100px，而後左移100px，左移的同時，漸漸消失。

旋轉： transform的rotate；右移，下移，左移: transform的translate；下移: transform的translate；消失： opacity

.box{
    width: 0;
    height: 0;
    border-top: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #28b9c4;
    animation: moveAndDisapper 10s ease-out 0s 3;  // 踩過了一個坑，當第四個參數animation-delay要填，且是0的時候，單位要帶上，要寫0s。不然瀏覽器沒法識別
    -webkit-animation: moveAndDisapper 10s ease-out 0s 3;
  }
  @keyframes moveAndDisapper {
    0%{transform: rotate(0deg)}
    20%{transform: rotate(90deg) translate(0, 0)}
    40%{transform: rotate(90deg) translate(0, -100px);opacity: 1;}
    60%{transform: rotate(90deg) translate(100px, -100px); opacity: .3}
    80%{transform: rotate(90deg) translate(100px, 0px); opacity: .3}
    90%{ transform: rotate(90deg) translate(0, 0);opacity: 1}
    100%{ transform: rotate(0deg) translate(0, 0);opacity: 1}
  }
  @-webkit-keyframes moveAndDisapper{
    // 代碼和@keyframes moveAndDisapper 相同
  }

part 2：

如何實現一個div水平、垂直居中？擴展一下float的用法和flex的用法。

前置條件：外層div.parent裏面又放了一個div.child

div水平居中的幾種方法

// 方法一：parent不作處理, child設margin
.child{
    margin: 0 auto;
}
// 方法二：parent設text-align:center, child設display：inline-block
.parent{
    text-align: center;
}
.child{
    display: inline-block;
}
// 方法三： 用float和relative，原理是float後，元素的寬高是子元素的寬高；relative時，可設置left和right屬性
// 在parent和child中間再加一個between標籤,between的寬高和child相同，bewteen帶着child左移50%（基於parent），child而後右移 50%（基於between）,最後child就居中了
.between{
  position: relative;
  left: 50%;
  float: left;
}
.child{
  width: 50px;
  height: 50px;
  position: relative;
  right: 50%;
}

div垂直居中的幾種方法
思路：top 50%，而後向上移動自身高度的50%

// 已經知道大盒子的高度和寬度時, 用position和margin來計算
.parent{
    position: relative;
}
.child{
    position:absolute;
    margin: 75px 0;
}
// 已知小盒子的寬度，用position和transform,
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
}
// flex佈局
.parent{
    display: flex;
    align-items: center;
}
// table-cell佈局
.parent{
    display:table;
}
.between{
    display:table-cell;
    vertical-align:middle;
}

div垂直水平居中
方法一：

思路：內層盒子相對外層盒子，top 50%, left 50%，而後translate移動自身高寬的 50%

.parent{
    position: relative;
}
.child{
    position:absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

方法二：（推薦，不知道高寬的時候也能夠用）

思路：內層盒子相對外層盒子，left，right，top，bottom都是0，margin: auto

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    margin:auto;
}

方法三：

思路：知道高寬的時候，經過margin的設置，來達到居中

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}

方法四：

思路: 經過flex佈局，橫軸和縱軸都居中

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

用flex如何實現兩個盒子，左右居中，而且寬度自動佔滿50%？

思路是利用 flex屬性，來讓子盒子平分寬度

html設置：

<div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">2</div>
</div>

css設置: 父元素設置display:flex 子元素設置flex: 1

.box{
    width: 400px;
    height: 400px;
    display: flex;
    background-color: #e0e012;
  }
  .box > div{
    height: 100px;
    flex: 1;
  }

flex設爲整數，或者 flex設爲auto均生效。

寫一個方法，將傳入的字符串的每一個字符後面都加上空格？

function getStr(str){
  let arr = str.split("")
  let newStr = arr.join(" ")
  console.log(newStr);
}

function getStr(separator){
    let args = [...arguments]
    return args.join(separator)
}

寫一個方法，打印出傳入的值。補充arguments的用法。
```
function logStr(){
  console.log(...arguments);
}
```
補充一下 arguments的用法。
```
function logStr(){
  console.log(arguments[0] === arr);
  console.log(...arguments);
}

let arr = ["good"]
let name = "cc"
logStr(arr, name)  // true  ["good"] "cc"
```
由arguments[0] === arr可得， argument的內容和參數是能夠一一對應上的，無論是複雜類型的變量【數組、對象， Symbol等】，仍是普通類型變量

mdn文檔筆記：
- arguments是類數組，能夠運用index訪問各個元素，也有length，可是沒有數組的方法forEach等
- 用擴展運算符 ...或者 Array.from()能夠把 arguments轉化爲真正的數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。