#javascript 面接問題のいろいろ

#async function await setTimeout の非同期処理

async function await setTimeout 非同期処理についての出題
下記ソースの console.log 出力順番

async function async1() {
  console.log(1);
  const result = await async2();
  console.log(3);
}

async function async2() {
  console.log(2);
}

Promise.resolve().then(() => {
  console.log(4);
});

setTimeout(() => {
  console.log(5);
});

async1();
console.log(6);

async function

async function 宣言は、 AsyncFunction オブジェクトを返す 非同期関数 を定義します。非同期関数は非同期でイベントループを介して実行され、暗黙的に Promise を返します。

developer.mozilla.org より(opens new window)

await を指定すると、Promise の結果が返されるまで待機

setTimeout(() => {})

==0 ミリ秒、お待ちください〜==ってことになりますが!?

setTimeout(...,0)などの使いドコロ(opens new window)

純粋なデータ処理であれば Web Worker に回す方法もありますが、DOM 操作が多い場合にはそうも行きません。ただ、もちろんブラウザを固めたりしてはクライアントコードとして失格なので、setTimeout を使うことで処理を分割する手法が存在します。

この記事で setTimeout 0 ミリ秒の使い道教えてくれました。そして、HTML5 の仕様では、最短の時間は 4 ミリ秒と勧告されています。

答え

1
2
6
4
3
5

参考

记一次大厂的面试过程(opens new window)

JavaScript Promise の本(opens new window)
Promise と async-await の例外処理を完全に理解しよう(opens new window)
async/await 地獄(opens new window)
async/await 入門(JavaScript)(opens new window)

#配列オブジェクトの豆知識

以下ソースの console.log 結果

let a = { a: 10 };
let b = { b: 10 };
let obj = {
  a: 10
};
obj[b] = 20;
console.log(obj[a]);

obj[b] = 20;の時点で、obj{a: 10, [object Object]: 20}になります

obj[a]obj[object Object]と同じくなります。

答え

20

#配列のユニーク値を求める

以下の配列の値をユニークにする

let originalArray = [1, 2, 3, 4, 5, 3, 2, 4, 1];

答え

// 案1
const result = Array.from(new Set(originalArray));
console.log(result); // -> [1, 2, 3, 4, 5]

// 案2
const result = [];
const map = new Map();
for (let v of originalArray) {
  if (!map.has(v)) {
    map.set(v, true);
    result.push(v);
  }
}
console.log(result); // -> [1, 2, 3, 4, 5]

// 案3
const result = [];
for (let v of originalArray) {
  if (!result.includes(v)) {
    result.push(v);
  }
}
console.log(result); // -> [1, 2, 3, 4, 5]

// 案4
for (let i = 0; i < originalArray.length; i++) {
  for (let j = i + 1; j < originalArray.length; j++) {
    if (originalArray[i] === originalArray[j]) {
      originalArray.splice(j, 1);
      j--;
    }
  }
}
console.log(originalArray); // -> [1, 2, 3, 4, 5]

// 案5
const obj = {};
const result = originalArray.filter(item =>
  obj.hasOwnProperty(typeof item + item)
    ? false
    : (obj[typeof item + item] = true)
);
console.log(result); // -> [1, 2, 3, 4, 5]

オブジェクト配列の場合

const responseList = [
  { id: 1, a: 1 },
  { id: 2, a: 2 },
  { id: 3, a: 3 },
  { id: 1, a: 4 }
];
const result = responseList.reduce((acc, cur) => {
  const ids = acc.map(item => item.id);
  return ids.includes(cur.id) ? acc : [...acc, cur];
}, []);
console.log(result); // -> [ { id: 1, a: 1}, {id: 2, a: 2}, {id: 3, a: 3} ]

#javascript の this

以下ソースの console.log 結果

var a = 10;
var obj = {
  a: 20,
  say: function() {
    console.log(this.a);
  }
};
obj.say();

答え

20

10 を出力させる方法

// 案1
var a = 10;
var obj = {
  a: 20,
  say: () => {
    console.log(this.a);
  }
};
obj.say(); // -> 10

// 案2
var a = 10;
var obj = {
  a: 20,
  say: function() {
    console.log(this.a);
  }
};
obj.say.call(this);

// 案3
var a = 10;
var obj = {
  a: 20,
  say: function() {
    console.log(this.a);
  }
};

var say = obj.say;
say();

#vuejs のライフサイクル

vue のライフサイクル

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

#HTML5 新仕様

HTML5 の新仕様&API を挙げる

タグ類

  • header
  • footer
  • nav
  • audio
  • video
  • section
  • time
    など

属性類

  • media
  • required
  • disabled
  • pattern
  • step
  • list
    など

API 類

  • Geolocation API(位置情報)
  • draggable Drag and drop(ドラッグ・ドロップ)
  • Clipboard API(クリップボードにコピー)
  • Canvas API(グラフィック描画)
  • WebSocket API(ソケット通信)
  • Web Workers(WPA などバックグラウンド処理)
  • Web Notifications(WEB 通知)
  • Web Storage(ブラウザストレージ)
    など

#Vuex のコアコンセプト

Vuex とは何か?(opens new window)

  • state ステート
  • getter ゲッター
  • mutation ミュテーション
  • action アクション
  • module モジュール

#一括に state を使う方法

mapStatemapActionsmapMutationsmapGettersなどは使ってますか?

import { mapState, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["price", "number"]),
    ...mapState({
      pref: state => state.options.pref,
      gender: state => state.options.gender
    })
  },
  methods: {
    ...mapMutations({
      setNumber: "SET_NUMBER"
    }),
    ...mapActions({
      setNumber: "SET_NUMBER"
    })
  }
};

#getter の使い方

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: "...", done: true },
      { id: 2, text: "...", done: false }
    ]
  },
  getters: {
    getTodoById: state => id => {
      return state.todos.find(todo => todo.id === id);
    }
  }
});

this.$store.getters.getTodoById(2)の結果はfalse

#action と mutation の違い

  • actionは非同期通信できるが、mutationはできない
  • actionは直接state変更できないが、mutationはできる
  • actiondispatchで実行、mutationcommit
  • actionの第一メソードはcontextmutationstate

#v-model で state 変更方法

<input v-model="message">
// ...
computed: {
    message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }
}
2019-11-08
  • javascript

関連記事

javascript 日本語 shift-js 対応 CSV ダウンロード
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
ReferenceError: location is not defined
nodejs 使う時のエラーたち
javascript reduce 連想配列の合計計算覚えよう
vuejs i18n の html-lang と font 設定
正規表現一覧 よく使う検索・置換のパターン
開発時によく使うゼロ埋めパディング作業まとめ
javascript で作る html から PDF 変換 pdfmake の日本語対応
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
nuxtjs と codeigniter で jwt システム構築
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay