JavaScript練習問題ブログ用

JavaScript練習問題ブログ用.md

問1

const a = {a: 'a'}とconst b = {b: 'b'} をマージしたc を出力してください e.g{a:'a',b:'b'}

const a = {a: 'a'};
const b = {b:'b'};
const c = Object.assign(a, b);
c //{a: 'a', b: 'b'}

問2

const arry = ['aa','bb','cc','dd','ee','ff','gg'];

のdd,ee,ffを新たな配列として返してください

const newArry = arry.slice(-4,-1);
//or
const newArry = arry.slice(3,-1);

問3

const arry = ['a','b’] の要素をconsole出力してください e.g 'a'と'b'

const arry = ['a','b'];
arry.forEach(function(elem,i){
 console.log(elem)
})
//'a'
//'b'

問4

const arry = ['a', 'b']の各要素にindex値を足した文字列を出力してくださいe.g 'a0'と'b1'

const arry = ['a','b'];
arry.forEach(function(key,i){
 console.log(key + i)
})
//'a0'
//'b1'

問5

const arry = [1,2]と定義して配列かどうかを評価してください e.g true

Array.isArray(arry) //true
//arry instanceof Array //true
//instanceof比較は継承しているオブジェクトのインスタンス比較なので
// aryy instanceof Objectでもtrueが返ってくる

問6 こちら

//1
if (typeof x === 'undefined') {
 ???
}

//2
if(x === undefined){
 ???
}

変数xが定義されていない場合上の1、2は実行されますか?

//1は実行される
//2は実行されない(ReferenceError)

//typeofは変数が存在しない場合エラーは投げない。
//ただこのような値の存在チェックは避けるべき
//グローバル上の値のチェックはfor in

問7

こちら

//1
var x;
if (x === void 0) {
}

//2
// 直前まで y は宣言されていない
if (y === void 0) {
}

1,2はそれぞれ実行されますか

//1は宣言はされているが値が割り当てられていない場合です。
//実行される


//2は宣言されていない場合です。
//実行されない

//void 0 は確実にundefindeを返すことが保証されています
//undefinedはただのglobal変数なので
undefined = "foo";
undefined;
//'foo'
で代入でき、保証はされていない

e.g:
undefined = 1;
console.log(!!undefined); //true
console.log(!!void(0)); //false

問8

下記

const obj = {
 key: 'aa',
 key2: 'bb'
}

の中のkeyとvalueを自身のプロパティのみ全て出力しなさい

const obj = {
 key: 'aa',
 key2: 'bb'
}
for (key in obj){
 if(obj.hasOwnProperty(key)){
   console.log(key, obj[key])
  }
}
//key aa
//key2 bb

問9

こちらの ['a', 'b', 'c'] 配列の中の全ての要素を結合し、1つの文字列として出力してください。

const arry = ['a', 'b', 'c'];
array.join("");
//'abc'

//other
const arry = ['a', 'b', 'c'];
let str = '';
const count = array.length;
for(var i= 0; i < count; i++){
  str += arry[i];
}
str
//'abc'

問10

こちら

x = 43
let y = 3

の2つの変数。deleteできるのはどちらですか？

deleteは暗黙に定義された場合は変数は削除できるが、
var(let) や function文中の変数はnon-configurableであり削除できない

//globaleオブジェクト
x = 43;
delete x 
//true //暗黙に定義されたglobale変数なので

//var宣言
delete y
false //削除できない

//関数宣言文の中でのdelete
function f(){
 var z = 44;
 delete z;
 console.log(z)
}
f()
//44 //削除されていない

【配列の要素の削除】
1
let color = ['red', 'blue', 'green'];
//要素として存在する状態にするが値は未定義
color[1]= undefined;
color
//["red", undefined, "green"]
if(1 in color){console.log('実行されてます')}
//実行されてます

2
let color = ['red', 'blue', 'green'];
delete color[1]
//true
color.length//削除しても配列の長さには影響しない
//3
//配列の一部ではなくなります
if(1 in color){console.log('実行されてます')}
//出力されない(1との違いに注意してください)

//
function Foo(){}
Foo.prototype.bar = 42;
let foo = new Foo();
delete foo.bar;
//true

//trueを返すがプロトタイプから継承してオブジェクトに存在するプロパティは削除できない
foo.bar
//42

//プロトタイプ上でプロパティを削除
delete foo.prototype.bar;
foo.bar 
//undefined

問11

var arry =[
  {id:1,name:'morita'},
  {id:2,name:'kenji'},
  {id:4,name:'uro'},
  {id:3,name:'ken'}
  ];

をid番号が若い順にソートしたオブジェクトを含む配列を出力してください

let arry =[
  {id:1,name:'morita'},
  {id:2,name:'kenji'},
  {id:4,name:'uro'},
  {id:3,name:'ken'}
];
arry.sort(function(a,b){
 return a.id > b.id
})

//先に位置させたい時はaが'正'をになるように返します

//other
arry.sort(function(a,b){
 if(a.id > b.id) return 1;
 if(a.id < b.id) return -1;
});

/*
[
  {id:1, name:'morita'},
  {id:2, name:'kenji'},
  {id:3, name:'ken'},
  {id:4, name:'uro'}
]
*/

問12

var a, b;の変数はデフォルトとしてaは5、bは7を持ち、aに1を代入してconsole出力してください。

var [a=5, b=7] = [1];
console.log(a, b);
//1 7

//other
var {a = 5, b = 7} = {a: 1}

問13

next()を実行しただけ返り値が1増える関数を定義してください

var setUp = function(){
  var count = 0;
  return function(){
return (count += 1);
  }
};
var next = setUp();
next();//1
next();//2
next();//3

問14

fun(1,2,3)を実行したら引数が全て配列で返る関数funを定義しなさい 参照

function fun(){
 return Array.from(arguments)
}
fun(1,2,3)//[1.2,3]

//other
function fun (...arg){
  return arg;
}
fun(1,2,3)
//[1,2,3]

問15

配列

const array = ['a1','a2','a3','a4','a5']

の0〜2番目の要素をそれぞれ

red, green, yellow

に置き換えて配列にしてください。また実行した際の返り値を教えてください

const array = ['a1','a2','a3','a4','a5']
//インデックス0から2つの要素を削除
array.splice(0,2, 'red', 'green','yellow');
//["a1", "a2"]

//返り値:['a1', 'a2']
array
//['green', 'red', 'yellow', 'a3', 'a4', 'a5']

問16

const array = ['a1','a2','a3','a4','a5']

のインデックス2〜4の要素を取り出し、 配列として出力しなさい。 実行された後のarrayの要素を教えてください

const array = ['a1','a2','a3','a4','a5']
const newArray = array.slice(1,4);
newArray
//['a2', 'a3', 'a4']
array
//['a1','a2','a3','a4','a5']

問17

const array = ['a1','a2','a3','a4','a5']

の全ての要素を"/"で結合した文字列を出力し、さらにその文字列を'/'区切りで配列に直してください

const array = ['a1','a2','a3','a4','a5']
array.join('/').split('/');

問18

配列['おはよう','こんにちは','おやすみなさい']の要素がランダムに出力される関数を書いてください。(配列に要素が追加される事を仮定してたものにしてください)

const array = ['おはよう','こんにちは','おやすみなさい'];
const greeting = array[Math.floor(Math.random() * array.length)]
greeting
//おはよう or こんにちは or おやすみなさい

問19

Object.createで空のオブジェクトを作成し、値が1のプロパティpを出力してください

const obj = Object.create({}, {p: {value: 1}});
obj.p //1

問20

コンストラクタWhoの初期化時に'morita'(String)を渡しインスタンスプロパティnameに代入、 インスタンスメソッドgetNameの返り値がWho.prototype.name値になるいわゆる「classのようなもの」を作成してください ※インスタンスメソッドはprototypeに代入してください

function Who(name){
 this.name = name;
};
Who.prototype.getName = function(){
 console.log('Myname is ' + this.name);
};
var o = new Who('morita');
o.getName()

問21

浅いコピー(shallow copy)と深いコピー(deep copy)の違いを説明してください

//**shallow copy**
//プロパティ値や要素値だけのコピーでその先の参照まではコピーしない
//例
var arr = [{x : 2}];//オブジェクト参照をもつ配列
var arr2 = [].concat(arr);//要素をコピー
arr2[0].x = 123;//変数arr2から見える要素の参照先オブジェクトを変更。
arr[0].x//変数arrから変更が見える(shallowだから)
//123

//**deep copy**
//コピー元とコピー先が別のオブジェクトを参照していること。プロパティが別のオブジェクトを参照していれば参照崎のオブジェクトも含めてコピーします。deepcopyが必要な場面はない。自分で実装する必要がある。パーフェクトP199

問21

下記

var array = ['e','a','k','B','c'];
array.sort();

を実行した結果を答えてください

['B', 'a', 'c', 'e', 'k']

//note 順番は文字エンコーディングによって決まる
//要素に数値があった場合文字列に置き換えられる

問22

上記の配列を大文字小文字区別なく順番通りにしてください。期待する値[a','B','c', 'e','k']

var array = ['e','a','k','B','c'];
array.sort(function(a,b){
 return a.toUpperCase() > b.toUpperCase() ? 1 : -1 ;
});

//['a', 'B', 'c', 'e', 'k']

問23

このような[20,100,3,35,0]

比較する配列の要素が数値の場合、「降順」にsortしてください 期待する結果[100, 35, 20, 3, 0]

var numArray = [20,100,3,35,0];
numArray.sort(function(a,b){
 return b - a;
});
[100, 35, 20, 3, 0]

//昇順の場合
return a - b

問24

文字列 '10'をNumber型にし、型判定し、数値かどうか評価後、文字列に変換してください

var a = +'10';
typeof a
//number
isNaN(a);
//false
a.toString();
//'10'

//other
var a = parseInt('10', 10);

問25

カーリー化されたadd(1)(2)もしくはadd(1,2) を実行した際両方とも返り値3になる関数を定義しなさい。p85

function add(x, y){
 if(typeof y == 'undefined'){//部分適用
  return function(y){
return x + y
  }
 }
 //完全適用
 return x + y
}
add(1)(2) //3
add(1,2) //3

問26

クロージャーを使ったファクトリー関数。

var fafa = Factory('morita');
fafa.introduce()
//'morita'

上記のような実行をしたら渡したname(ここではmorita)が表示されるメソッドintroduceを持つファクトリー関数を定義しなさい。

function Factory(name){
 function getName(){
  return name;
 };
 return {
  introduce : function(){
    console.log(getName());
   }
 }
};
var fafa = Factory('morita');
fafa.introduce()
//morita

問27 関数sayHiに自分の名前を引数で渡した際にhello!yourname、何も渡さない場合hello! と返す関数を作成し、それをapplyで実行してください。また applyの第一引数にnullを渡す場合とオブジェクトを渡す場合のそれぞれのthisは何を指しますか答えてください p83

var sayHi = function(name){
 return 'hello!' + (name ? name : '');
};
sayHi('kenji');
sayHi();
sayHi.apply(null,['kenji']);//関数呼び出し
var greeting = {
  sayHi: function(name){
    return 'hello!' + (name ? name : '');
  }
};
//メソッド呼び出し
greeting.sayHi.apply(greeting,['kenji']);//渡す
greeting.sayHi.apply(greeting);//渡さない


//関数呼び出しの場合thisはwindowを指し、nullを渡す、
//メソッド呼び出しの場合thisはオブジェクトを指しオブジェクトの参照を渡す

問28

var obj = {x : 2, y: 3};

このobjをプロパティ追加不可、削除変更は可能にし、プロパティ追加不可か否かの判定メソッドでtrueが返る事を確認した後、objのkeyを列挙してください。

var obj = {x : 2, y: 3};
Object.preventExtensions(obj);
Objcet.isExtensible(obj);//true
Object.key(obj);
//['x', 'y']

問29

こちらvar obj = {} と等価をObjctメソッドで生成してください

var obj = Object.create(Object.prototype);

問30

こちら

var obj = {x : 2, y: 3}

と等価をObjectメソッドで生成してください

var obj = Object.create(Object.prototype, {
   x : {value: 2, writable: true, enumerable: true, configurable: true},
   y : {value: 3, writable: true, enumerable: true, configurable: true}
})

問31

こちら

var obj = { x : 2}

の属性を出力してください

Object.getOwnPropertyDescriptor(obj, 'x');
// {
//  configurable: false,
//  enumerable: false,
//  value: 2,
//  writable: false
//.fseventsd/}

問31

こちら var obj2 = {x : 2};にObjectメソッドを用いてプロパティy、値2、プロパティ追加可能を定義して、Objectメソッドで情報(値と属性)を返してくださいP149

var obj2 = {x : 2};
Object.defineProperty(obj2, 'y', {value: 3, enumerable: true});
//[object Object] {
//  x: 2,
//  y: 3
//}

Object.getOwnPropertyDescriptor(obj2, 'y')
// {
//  configurable: false,
//  enumerable: true,
//  value: 3,
//  writable: false
//}

問32

実引数の数を出力、第一引数を出力する関数fを実行してください

function f(){
 console.log(arguments.length)
 console.log(arguments[0])
}
f(2)
//1
//2

問33

var arr = ['2','23','0','16'];

を小さい順にソートしてください。その後ソートをできないようにread-onlyにしてください

var arr = ['2','23','0','16'];
arr.sort(function(a,b){ return a - b ;});
//['0', '2', '16', '23']
Object.freeze(arr);
//['0', '2', '16', '23']
arr.sort();
//.fseventsd/'Cannot assign to read only property '1' of [object Array]'

問34

var arr = [3,4,5];をconcat以外で新たな配列としてarr2にコピーしてください。その後arr2[0]= 123を代入するとarrは何を出力するか答えなさい

var arr = [3,4,5];
var arr2 = arr.slice(0, arr.length);
arr2
//[3, 4, 5]
arr2[0] = 123;
arr
//[3, 4, 5]//変数arrから変更は見えない(要素をコピーしているから)
arr2
//[123, 4, 5]


//別解

var arr2 = arr.map(ele => ele);
arr2
//[3, 4, 5]

問35

こちらは2つのパラメーターを足して返すgetSum関数です。

const getSum = (a, b) => a + b

このパラメーターに何もわたってこなかった場合Errorをスローすようにしてください 期待する結果 getSum(10) //throws b is not defined getSum(undefined, 10) //throws a is not defined

const _err = function(message) {
    throw new Error(message);
}
const getSum = (a = _err('a is not defined'), b = _err('b is not defined'))=> a + b
getSum(10) //throws b is not defined
getSum(undefined, 10) //throws a is not defined

getSum(10, 20);
//30

問36 strict modeの代表的な制約を挙げて説明してください。

- 暗黙のグローバル変数の禁止
(標準モードではvarを伴わず変数に値を割り当てると現在のスコープに関係なくグローバルオブジェクトにその名前のプロパティを追加してしまう。strictモードでは明示的にエラーになる)
- 関数内でthis参照がグローバルオブジェクトを参照しない

- NaN、Infinity、undefinedのグローバル変数を読み込み専用

- 重複のプロパティ名とパラメータ名を禁止

リテラルでのオブジェクト生成時同じ名前を持つプロパティを複数定義する場合や、関数に同じ名前を持つパラメータを複数与える場合標準モードでは後に定義されたものが優先されますがstrictモードではこのようなコードを実行する際にエラーが発生します。
'use strict';

//オブジェクト生成時にエラー//標準モードで実行する場合は後に定義されたものが反映される

var object = {
  prop1 : 100,
  prop1 : 200
}

//関数定義字にエラー発生

function func(val, val){
  console.log(val);
}
func(1, 2);
//2


パラメータとargumentsがそれぞれ独立
。
標準モードでは関数にパラメータを設定している場合、関数本体におけるパラメータの名前を持つ変数はパラメータの一にあるargumentsオブジェクトの要素のエイリアスとして定義されていました
。つまり最初のパラメータとargument[0]は、名前は異なるものの、その実体は同じものでした。
strictモードではこれが変更されパラメータとargumentsは独立した存在として扱われるようになり、それぞれ個別の引数が割り当てられます。
(function (param){
  'use strict';
  //引数がプリミティブ型の場合はStrictモードと標準モードで動作がことなる。

  pram = 'param';
  console.log(param, arguments[0]);
  //'param'
  //(標準モードの場合)
  'param' 'param'

  arguments[0] = 'arg';
  console.log(param, arguments[0]);
  //'param' 'arg';
  //標準モードの場合 'arg' 'arg'
  })('引数') //関数に文字列を渡して実行

但し、引数がオブジェクトの場合はパラメータとargumentsに同じオブジェクトへの参照が格納されるためプロパティへのアクセスは事実上同じものへのアクセスとなります。

arguments オブジェクトへの値の割り当ての禁止

関数実行時に与えられた引数はarguments変数に格納されます。Strictモードではこのargumentsオブジェクトに別の新たなオブジェクトを割り当てることができません。
'use strict';

//arguments変数を別の値で置き換えることができない

(function(){
  //SyntaxErrorが発生

  arguments = [100, 200, 300];//別の値でまるまる置き換えている。。

  })();

  //argumentsへの要素の追加や変更は可能

  (function(){
    //要素の置き換え
    arguments[0] = 200;
    要素の追加
    arguments[1] = 300;
    console.log(arguments[0], arguments[1]);
    //200, 300
    })()

    - arguments.calleeアクセスの禁止

再帰などの目的で関数内でその関数自身にアクセスする必要がある場合にはarguments.calleeではなく、関数名を使って呼び出します。関数式を使用する場合は無名関数にするのではなく、その関数に名前を与えておく必要があります。
8進数リテラルの禁止

'use strict';
//8進数リテラルを使用するとsyntaxError
//標準モードで実行する場合はあoctに数値8が割り当てられる。
var oct = 010;

- Functionオブジェクトのcallerプロパティのアクセス禁止

ブロック内の関数分の禁止


'use strict';
//ブロック内部の関数宣言はsyntaxError
if(true) {
  function func(val){return  val;}
}

//ブロック内部での関数式の定義は問題なし

if(true){
  val fun = function(val) {return val};
}


delateによる変数や関数の削除の禁止

標準モードでは演算対象が削除できない変数や関数であっても暗黙的に失敗していた。strictモードではエラーを発生させる。Configurable属性にfalseが設定されている再設定不可プロパティの削除時もエラーが発生します。

- with文の禁止
使用するとSyntaxErrorが発生する

- evalが新しいシンボルを作らない
-
evalコードが独自のスコープで動作する。標準モードでevalに文字列を渡してコードを実行するとそのコードは呼び出しているスコープ上で動作する。つまりevalの実行中に宣言された変数は呼び出したスコープに定義される。

strictモードではevalで実行されるコードが自身のスコープを持ちます。このスコープから外側のスコープにある変数にはアクセスできますが外側のスコープに変数を定義することはできません。関数スコープと同じです。


//'use strict'は複数のstrictモード記述のあるjsファイルの結合されて本番のファイルを構成している場合先頭のファイルの先頭部に置いた'use strict'文によって結合されたスクリプト全体がstrictモードになりその結果コードが誤作動するという事例があった。
ある関数がstrictモードで動作するかの判定は呼び出し時のスコープではなく、定義されたスコープで行われる。Strictモードのコード内で呼び出しても標準モードで定義された関数は標準モードで実行される。argumentsとevalを使っているか？使っていたらそこがstrictモードかどうかを確認しましょう。※scriptタグはタグ単位でスクリプトの実行環境を生成する。そのため<script>タグごとにモードの選択をする。Strictモード内で<script>タグを動的に生成する場合も新しく生成されたタグ内のScriptは指示序文を与えなければ標準モードで動作します。node.jsのrequire()で呼び出すコードは呼び出し元の指示序文に影響されません。strictでも呼び出すコードのコンテクストが標準モードならそのコードは標準モードで動作する

//strictモードの即時実行関数

(function(){
  'use strict';
  //loose関数の中身はStrictモードではエラーが発生するコード
  loose();
  })()
  function loose(){
    //varを忘れて、8進数リテラルを使用
    a = 010;
  }

  //loose関数は標準モードで動作するため、aがグローバルオブジェクトのプロパティとして追加されている
  console.log(a);
  //8

//thisの値にnullやundefinedが競ってされていた場合標準モードではthisはこれらの代わりにグローバルオブジェクトを参照する。strictモードではこの強制的な変換は行われずthisにはそれぞれの値がそのまま格納される。this値にプリミティブ値が競ってされた場合標準モードではそのthisはプリミティブ値の型に対応するプリミティブラッパー型オブジェクトを参照するがstrictはこの型変換もしない。

問37 for in文に関する注意点を3つ挙げてください

- プロパティを列挙する順序がオブジェクトリテラルと配列リテラルで違う
- 列挙できないプロパティがある(Array.lengthなど)
- プロトタイプ継承したプロパティも列挙する

問38

DOM上にあるdivをnodeListに変換して配列に格納してください

const nodelist = [...document.querySelectorAll('div')];

問39 配列var arr = ['f','o','x','k'];をインデックス順に出力させてください

var arr = ['f','o','x','k'];
for(var j of arr){
console.log(j)
}


//別解

var arr = ['f','o','x','k'];
arr.forEach(function(ele){
 console.log(ele);
 }
)

問40 またイテレーターを使い順番に出力してください

var arr = ['f', 'o', 'x', 'k'];
var eArr = arr[Symbol.iterator]();
eArr.next().value //f
eArr.next().value //o
eArr.next().value //x
eArr.next().value //k

問41

配列['a', 'b', 'c', 'd', 'e'] のインデックス2番目に'morita'という要素を加えなさい。期待する結果['a', 'b','morita', 'c', 'd', 'e']

var arry = ['a', 'b', 'c', 'd', 'e'];
arry.splice(2, 0 , 'morita');
arry
//['a', 'b','morita', 'c', 'd', 'e']

問42 これvar o = {};と同じ意味を持つコードをObjectのAPIを使って生成してください

var o = Object.create(Object.prototype);

問43 {p: 42}となるようなオブジェクトをObjectメンバを使って生成してください

o = Object.create({}, {p: {value : 42}});

問44

1234という数字を文字列に変更後、配列の要素としてインデックス順に格納してください

var count = 1234;
var ee = count.toString();
var arr = [];
for(var i = 0; i < ee.length; i++){
 arr[i] = ee.charAt(i);
}
console.log(arr)//['1','2','3','4'];

問45

こちらは要素が2だったらループを抜けたいのだが期待どうり動かない 期待する出力 //0, 1

[0, 1, 2, 3, 4].forEach(function(val, i) {
  if (val === 2) {
    // how do we stop?
    return true;
  }
  console.log(val);
});
// 0, 1, 3, 4

期待通りになるようにしてください

//use some
[0, 1, 2, 3, 4].some(function(val, i) {
  if (val === 2) {
    return true;
  }
  console.log(val); // your code
});
//0, 1

//use for
const a = [0, 1, 2, 3, 4];
for (var i = 0; i < a.length; i++) {
  if (a[i] === 2) {
    break; // stop the loop
  }
  console.log(a[i]);
}
//0, 1

問46

var Speaker = {
 say : function(wordsGetter){
  var words = wordsGetter();
   alert(words);
 }
};
function Person(nickname){
 this.nickname = nickname;
}

Person.prototype.sayName = function(){
    self = this;
    Speaker.say(function(){
      return self.nickname;
    });
};
var person = new Person('moriken');

person.sayName();

答え2

var Speaker = {
 say : function(wordsGetter){
  var words = wordsGetter();
   alert(words);
 }
};
function Person(nickname){
 this.nickname = nickname;
}

Person.prototype.sayName = function(){
    Speaker.say(function(){
      return this.nickname;
    }.bind(this));
};
var person = new Person('moriken');

person.sayName();

問47

下記のような

array = [
{name: 'kenji', mail:'fafa@eee.com'},
{name: 'morita', mail: 'kkk@faf.com'}
]

配列内にある連想配列のkeyとmail値を配列に格納して出力してください

array = [
{name: 'kenji', mail:'fafa@eee.com'},
{name: 'morita', mail: 'kkk@faf.com'}
];
var array2 = [];
array.forEach(function(Element, ind, array){
   for(var key in Element){
    if(key == 'mail'){

  array2.push(Element[key])
  }
 }
})
console.log(array2);

問48 配列var passed = [12, 5, 8, 130, 44]の要素全てが10以上かどうかを評価してtrueかfalseを返してください。また10以上のものが一つでもあった場合trueを返してください。

function isBigEnough(ele, ind, arry){
 return (ele >= 10);
};
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
passed //false

問49 二次元配列

[['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']
];

の'two'の値を取得してください

var fafa = [['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']
];
var map = new Map(fafa);
map.get('two');
//'send@fafa'

問50 問49の変数fafaにインデックス3番目の要素として['four',fafa@eee]の配列を追加してください

var fafa = [['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']
];
var map = new Map(fafa);
map.set('four', 'fafa@eee');

問51

問50の変数fafa内にある要素を出力してください //期待する出力 //['one','info@fa'] //['two', 'send@fafa'] //['three', 'hoso@fafa']

var fafa = [['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']];
var entries = map.entries();
for (var entry of entries){
 console.log(entry);
}

問52

'morita kenji'のような1つ以上の小英字、半角スペース、1つ以上の小英字にマッチした場合、配列['morita kenji']が返るようにしてください。

//正解例
/\w+\s\w+/.exec('morita kenji')

問53

このような 'It is an important problem'と'The import duty is not cheap'の文字列内importにマッチするとbooleanを返す記述をしてください

const str = 'It is an important problem';
const str2 = 'The import duty is not cheap';
let isImport = /.*\bimport\b.*/.test(str);
isImport//false
let isImport = /.*\bimport\b.*/.test(str2);
isImport
//true

//単語の境界線には\b

問54

ひらがな全てにマッチ、半角カタカナ全てにマッチ、カタカナ全てにマッチする正規表現を記述してください

//ひらがな
[ぁ-ん]
//カタカナ
[ァ-ヶ]
//半角カタカナ
/^[\uFF65-\uFF9F]+$/

//半角以外にmatch
//[
^A-Za-z0-9
]

問55

「」の中に「ヤッホー!」の文字列が1回以上続く場合にのみマッチする正規表現を書いてください。(！が英単語を構成する文字以外の場合はどうか、また「ヤッホー！」が2回以上3回以下にマッチにはどう書きますか)

var str = '「ヤッホー！ヤッホー！」'; /「(ヤッホー！)+」/.exec(str); //['「ヤッホー！ヤッホー！」', 'ヤッホー！']

//メタ文字
var str = '「ヤッホー?ヤッホー@」';
/「(ヤッホー\W)+」/.exec(str);
['「ヤッホー?ヤッホー@」', 'ヤッホー@']

問56

正規表現の/(ありがとう|こんにちは｜さようなら)/と/ありがとう|こんにちは｜さようなら/の違いを教えてください。それぞれexecメソッドを使用した際の返り値を教えてください

//文中に使えるかどうか
//
var str = '彼はありがとうと言った';
/彼は(ありがとう|こんにちは｜さようなら)と言った/.exec(str);
//['彼はありがとうと言った', 'ありがとう']

//
var str = '彼はありがとうと言った';
/彼はありがとう|こんにちは｜さようならと言った/.exec(str);
//['彼はありがとう']

問57 「When」、「Where」、「Who」、「What」、「Why」、「How」の単語のみにマッチする正規表現を書きなさい

var str = 'How';
/Wh(en|ere|o|at|y|)|How/.exec(str);

問58 こちらが

x = new Boolean(false)

if文の式として渡すと実行されるか答えなさい 参照

x = new Boolean(false);
if (x) {
 //実行される
}
//undefinedやnull以外のオブジェクトは実行されます

//真偽値オブジェクトは格納されている値がfalseであってもtrueと評価される。
var falseValue = new Boolean(false);
console.log(falseValue)//false,真偽値オブジェクトが出力される
if(falseValue){//真偽値オブジェクトの内容がfalseでもオブジェクト自体は常にtrue値をみなされる
  //run
}


//もし真偽値でない値を真偽値に変換したいのであればnew演算子を使用せずBoolean()に値を渡してください。Boolean()はプリミティブ値のtrueもしくはfalseを返します。以下は全てfalse

console.log(Boolean(0));
console.log(Boolean(-0));
console.log(Boolean(false));
console.log(Boolean(''));
console.log(Boolean(undefined));
console.log(Boolean(null));


//以下は全てtrue

console.log(Boolean(1789));
console.log(Boolean('false'));//'false'という文字列は真偽値プリミティブのfalseとは異なる

console.log(Boolean(Math);
console.log(Boolean(Array()));

//see: 開眼!Javascirpt(O'REILLY)

問59

myFalse = new Boolean(false);
g = new Boolean(myFalse);

上記のコードはtrueかfalseか

答え

myFalse = new Boolean(false);
g = new Boolean(myFalse);
g//true
//Boolean オブジェクトの初期値としてオブジェクトを指定した場合、それが値が false の Boolean オブジェクトであっても、新しい Boolean オブジェクトは true の値を持ちます

問60

undefined == null

の真偽値は何か

if (undefined == null){
  //run
}
//実行されます

問61 関数iiを実行すると返り値で関数を受け取り、その関数に引数'home'を渡し実行すると'my home'と返ってくるクロージャーを作ってください

var ii = function(){
  var pp = 'my ';
  return function(value){
    console.log(pp + value);
  }
}
var kk = ii();
kk('home');
//my home

問62 今の時間、何時何分何秒を表してください

var now = new Date();
var nowtime = '今' + now.getHours() + '時' +  now.getMinutes() + '分' + now.getSeconds() + '秒';
nowtime
//'今23時49分56秒'

問63 こちら

function getSomething(){
  return {
    first: 1,
    second: 2,
    third: 3
  }
}

の関数で返しているオブジェクトのfirst,second,thirdのvalue値をそれぞれ first,second,thirdに代入してください

function getSomething(){
  return {
    first: 1,
    second: 2,
    third: 3
  }
}
var { first, second, third } = getSomething();
first
//1
second
//2
third
//3

問64

問65

文字列'fafafakenjifafafa'に'kenji'が含まれているかどうかの真偽値を出力してください expect //true

console.log('fafaeeekenjifa'.includes('kenji'));
//true

問66

文字列'repeat'を2回繰り返した結果を出力してください

expect //'repeatrepeat'

console.log('repeat'.repeat(2));
//'repeatrepeat'

問67

文字列fooをイテレーターを使い['f','o','o']となるようにしてください。

var chars = [];
for (let n of 'foo'){
 chars.push(n);
}
console.log(chars);//['f','o','o']

問68

IteratableからIteratorを取得、要素を出力していきして「要素がもうない意」の{value: undefined, done: true}を出力してください

var arr = ['ooo', 'eee'];

var Iterator = arr[Symbol.iterator]();
console.log(Iterator.next()); // { done: false, value: 'ooo'}
console.log(Iterator.next()); // { done: false, value: 'eee' }
console.log(Iterator.next()); //{ done: true, value: undefined }

問69

文字列'foo'を['f','o','o']と出力してください

//スプレッドオペレータ
var arr = [...'foo'];
console.log(arr);

問70

文字列moritaの1文字目mを変数index0に代入、2文字目oをindex1に代入、残りを配列restの各要素として出力してください

//分割代入
var [index0, index1, ...rest] = 'morita';
console.log(index0,index1, rest);
//'m'
//'o'
//['r', 'i', 't', 'a']

問71

foo(1, 2, 3, 4, 5, 6)を実行したら1がfirst、2がsecond、残りが配列の要素になるような fooを定義してください

//レストパラメータ
function foo(first, second, ...rest){
 console.log('first', first);
 console.log('second', second);
 console.log('rest', rest);
}

foo(1,2,3,4,5,6);

問72

配列arr = [1, 2, 3]にArray#concatを使わずにarr2 = [4, 5, 6]を結合させ[1, 2, 3, 4, 5, 6]となるようにしてください

//スプレッドオペレータ

var arr2 = [4, 5, 6];
var arr = [1, 2, 3, ...arr2];
console.log(arr);//[1, 2, 3, 4, 5, 6]

問73

下記のようなあるファイル(module.js)で記述した

var foo = 'foo';
function bar(){};
class Baz{
  baz(){}
}

を別のファイル(import.js)にexport、個別のメンバとして読み込む記述を示してください。また「module」という別名で全てのメンバを取得する記述も示してください ※module.jsとimport.jsは同階層にあるものとする

//読み込まれる側
var foo = 'foo';
function bar(){};
class Baz{
  baz(){}
}
export {foo, bar, Baz};

//読み込む側
//メンバ毎にインポート
import {foo, bar, Baz} from './module';
//console.log(foo);
//bar();
//new Baz();

//インポートする変数名の指定
import {foo as poo} from './module';
console.log(poo)

//モジュールまとめてインポート
import * as from './module';
//console.log(module.foo)

問74

var obj = {foo: foo, bar: bar} オブジェクトのkeyとvalueが等しい場合の記述 をせよ

var obj = {foo: foo, bar: bar};
var obj = {foo, bar};

問75

下のように

var key = 'foo';
var obj = {};
obj[key] = 0;
obj[key + '_bar'] = 1;

書いていた記述をECMAScript2015の記述で書いてください

var key = 'foo';
var obj = {
  [key] : 0,
  [key + '_bar'] : 1
}

//common
console.log(obj.foo, obj.foo_bar);
//0, 1

問76

下記

function ff(){
  return 'kenji';
}

のような関数をconsole.log内からテンプレートリテラルを使って出力してください

期待する出力 my name is kenji 参照

function ff(){
  return 'kenji';
}
console.log(`my name is ${ff()}`);
//my name is kenji

問77

変数a,bにそれぞれ1,2を代入してください

let [a, b] = [1, 2];

問78

文字列 line1とline2を改行してconsole.log出力してください

console.log(`line1
line2
`);

問79

var long = '30px';
var weight = '40px';

function tag(strings, ...values){
  //console.log(strings);['身長','で、体重は','です']
  return `m:${values[0]}、p:${values[1]}`; };

var str1 = tag`身長${long}で、体重は${weight}です`; console.log(str1);

問80

ユーザー定義関数funを作り、実行時の引数として、オブジェクトkeyにa,b。値をそれぞれ1,4として加算して返してください

function fun({a, b}){
  return a + b;
}
fun({a: 1, b: 4});//5

問81

var aa = [['morita', 'kenji', 'keiko'],['morita', 'kenji', 'keiko']

全てのaaにある多次元配列の全ての要素に文字列'san'を付け加えて一つの配列として出力してください

問82

mapとforEachの違いは何か答えてください

//The main difference between the two methods is conceptual and stylistic: You use forEach when you want to do something to or with each element of an array (doing 'with' is what the post you cite meant by 'side-effects', I think), whereas you use map when you want to copy and transform each element of an array (without changing the original).

//ref
http://stackoverflow.com/questions/3034392/what-use-does-the-javascript-foreach-method-have-that-map-cant-do

//map
//新しいarrayを返す

var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
var uu = a.map(function(el) {
    el.val++;
    return el.val
});
a//[{ val: 2 }, { val: 3 }, { val: 4 }]
uu//[2, 3, 4]

//forEach
var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
a.forEach(function(el) {
    el.val++;
    console.log(el.val);
});
//2
//3
//4

//実行するだけ
//forEachならこんなことも

//forEachが配列の要素を編集して配列で返すには
//
var a = [1,2,3],
    b = [];
a.forEach(function(el) {
    b.push(el+1);
});

// b is now [2,3,4], a is unchanged [1, 2, 3]

var a = [1, 2, 3];
var b = a.map(function(elem){
  return  elem + 1;
});
b// [2, 3, 4]
a// [1, 2, 3]


//メソッドを実行
cats.forEach(function(cat) {
    cat.meow(); // nicer than cats[x].meow()
});


var oo = [2,3,4,5,6];
var aa = oo.map(function(x){
    return x + 1;
});
aa //[3, 4, 5, 6, 7]

//forEach
それぞれの配列の要素に対して何かしたいとき
var oo = [2,3,4,5,6];
var aa = oo.forEach(function(x){
    return x + 1;
});
aa// undefined

//forEachは元の配列を変更できる

//map
元の配列を変更せず変換やcopyをしたいとき

問83

[{name: 'kenji'},{name: 'morita'}]の要素のvalueを次のように書き出してください(文字列'san'を付けています)e.g ['kenjisan', 'moritasan']

var aa = [{name: 'kenji'},{name: 'morita'}];
var result = aa.map(function(ele, i){
   return ele.name + 'san';
});
result//['kenjisan', 'moritasan']

問84

問83と同じ事をforEachでしてください

var aa = [{name: 'kenji'},{name: 'morita'}];
var arry = [];
aa.forEach(function(ele, i){
      for (var key in ele){
           arry.push(ele[key] + 'san')
      }
});
arry//['kenjisan', 'moritasan']

Objects

問85

const atom = {
  value: 1,
  addValue: function (value) {
    return atom.value + value;
  },
};

上記object-shorthandを使って書き換えてください

//ok
const atom = {
  value: 1,
  addValue(value) {
    return atom.value + value;
  },
};

問86

こちらのobjをkey内でメソッド呼び出しされているのをコンピューティッドプロパティを使って書き換えてください

function getKey(k) {
  return `a key named ${k}`;
}

const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

//ok
function getKey(k) {
  return `a key named ${k}`;
}
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

問87

下記のようなURLのファイルパスごとに配列に格納してください

var filepath = location.pathname.substring(1).split('/');
filepath;

//['kenmori', 'Angular2_TypeScript', 'tree', 'master', 'angular2-quickstart']
//https://github.com/kenmori/Angular2_TypeScript/tree/master/angular2-quickstart```

問88

下記のようなobj内のkeyと値が一緒の際できるshorthandで記述してください

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

//ok
const obj = {
  lukeSkywalker,
};

問89

下記のようなある配列itemsの要素をコピーしている記述をspreadArrayを使って簡潔に記述してください

const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}
const itemCopy = [...items];

問90

windowオブジェクトを7つ答えてください

navigator
location
history
screen
frames
document
parent, top, self

問90

下のようにuserというnameとidをプロパティで持ったオブジェクトを再割り当てやマルチプルなobjectを扱う際に簡潔な書き方にしてください

function add (user){
  const name = user.name;
  const id = user.id;
  return `${name} ${id}`;
}

答え

//ベター
function add (user) {
  const { name, id } = user;
  return `${name} ${id}`;
}
//best
function add ({name, id}){
  return `${name} ${id}`;
}

問91

var aaa = [['oo','oo1'], ['ll','ll2']];このような多次元配列のインデックス0番目だけを出力してください

var aaa = [['oo','oo1'], ['ll','ll2']];
aaa.forEach(function(ee){
  ee.filter(function(eee, i){
  if(i == 0){
      console.log(eee);
    }
  });
});
//oo ll

問92

Array destructuringとして簡潔に記述してください。 シャローコピーとディープコピーの違いを教えてください。また var aa = ['oo', 'll']; aaをbbにシャローコピーしてbb[0]に任意の文字列を代入し、aa[0]の参照する値が変わらないことを確認してください

//concat
var aa = ['oo', 'll'];
var arry = [];
var bb = arry.concat(aa);//shallow copy
bb[0] = 'kk';
aa//['oo', 'll']
bb//['kk', 'll']

//slice
var aa = ['oo', 'll'];
var bb = aa.slice(0, aa.length);
bb[0] = 'kk';
aa//['oo', 'll']
bb//['kk', 'll']

//bad
//spliceは破壊的メソッド(元参照を変える)
var aa = ['oo', 'll'];
var bb = aa.splice(0, aa.length);
bb//['oo', 'll']
aa//[]

問93

var aa = ['oo', 'll'];をbbにコピーしてaaは['kk', 'jj'];が挿入されるようにしてください。期待する結果

bb//['oo', 'll']; aa//['kk', 'jj'];

var aa = ['oo', 'll'];
var bb = aa.splice(0, aa.length, ['kk','jj'])
bb//['oo', 'll'];
aa//['kk', 'jj'];

問94

このような配列 var aa = ['ii', 'jj', 'kk'];がある。'jj'要素を削除するために deleteを使った場合とspliceを使った場合の違いは何か。それがわかるコードを書いてください

deleteは削除されたインデックスを残す。spliseは間を詰める。
var aa = ['ii', 'jj', 'kk'];
delete aa[1];
aa//['ii', undefined, 'kk']
var aa = ['ii', 'jj', 'kk'];
aa.splice(1,1);
aa//['ii', 'kk']

問95

var text = 'key and value';このような文字列を単語毎に配列の要素として格納してください //期待する結果 //['key','and','value']

var text = 'key and value';
var arraytext = ii.match(/\w+/g);
arraytext
['text', 'and', 'value']

問96

var text = 'abc def ghi jkl';の空白の直前の文字をグループ化してカンマ文字の後ろに移動させなさい。

期待する文字列 'ab,cde,fgh,ijkl'

var text = 'abc def ghi jkl';
text.replace(/(.)\s/g,',$1');
'ab,cde,fgh,ijkl'

//or

var text = 'abc def ghi jkl';
text.replace(/(.)\s/g,function(m0, m1){
   return ',' + m1
});
'ab,cde,fgh,ijkl'

問97

var array = ['aa','bb','cc','dd','ff']; このような配列の要素'bb'の前に'ff'を移動させて ['aa','ff','bb','cc','dd']このような配列を完成させてください

array.splice(1,0,array.splice(4,1)[0])
//array
//['aa','ff','bb','cc','dd']

問98

nullの比較についてそれぞれtureかfalseか答えてください

null < 1
null > 1
null < -1
null > -1

null < 0
null <= 0
null >= 0
null > 0
null == 0
null === 0

//Anser
null < 1 //ture
null > 1 //false
null < -1 //false
null > -1 //true
//数値コンテキストではnullは0と解釈されるため、1より小さく、-1より大きい。
null < 0 //false
null <= 0 //true
null >= 0 //true
null > 0 //false
null == 0 //false
null === 0 //false
//0以下であるが0より小さくはない。
//0以上であっても0より大きくはない。

問99

こちらの2つのif分の条件式の違いを教えてください

if('a' in obj)
if(obj.a)


**in演算子の場合**
objにキーaが存在する場合(undefinedでも)trueを返す
if('a' in obj)は実行される

**obj.aの場合**
undefinedの場合falseを返す
if(obj.a)が存在しても未定義だと実行されない

問100

var arr = [ 10, 20 ];においてarr[2]が存在しないことを確認してください

2 in arry;