面向 2020 春招面试题(三)

1
2
3
4
5
6
7
8
typeof undefined    //undefined
typeof 'abc'        //string
typeof 123          //number
typeof true         //boolean
typeof console.log  //function
typeof {}           //object
typeof []           //object
typeof null         //object

1
2
null == undefined  //true
null === undefined //false

1
2
3
4
if (obj.a == null) {
  // 这里的 'obj.a == null' 相当于 'obj.a === null || obj.a === undefined'的简写形式.
  // 这是 JQuery 源码中的推荐写法.
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 输出以下方法执行的结果
function Foo () {
  this.a = function () {
    console.log('1')
  }
  Foo.a = function () {
    console.log('2')
  }
}
Foo.prototype.a = function () {
  console.log('3')
}
Foo.a = function () {
  console.log('4')
}
Foo.a()		// 这里直接使用 Foo 对象自带的 a 方法, 结果为: 4
var obj = new Foo()		// 将 Foo 作为类生成对象 obj, 将 a 方法绑定 obj 对象, 替换原有的 Foo 类中的 a 方法.
obj.a()		// 执行 obj 对象 a 方法, 结果为: 1
Foo.a()		// 执行 Foo 类中的 a 方法, 结果为: 2

1
var a=10;

1
2
3
4
//预编译阶段
var a;
//执行阶段
a=10;

1
2
3
function f(){
    console.log("declaration");
}

1
2
3
4
5
//预编译
var f;
f = function () {
  console.log("declaration");
}

1
2
3
4
5
6
7
8
f();//=>?
var f = function () {
  console.log("var");
}
 
function f() {
  console.log("function");
}

1
2
3
4
5
6
7
8
var f = function () {
  console.log("var");
}
 
function f() {
  console.log("function");
}
f();//=>?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 /* 预编译阶段
 *函数声明提前优先级别更高，先进行预编译,并对f进行了赋值。
 *在预编译阶段后于函数声明，f经历两次赋值，后来的赋值替代了原先的赋值，表现为f执行函数表达式。
 */
 
//函数声明预编译阶段
var f;
f = function () {
  console.log("function");
}
//函数表达式提前预编译,由于它是变量声明，变量声明提前是只有声明提前，而没有赋值提前。
//重复的声明，js会忽略
var f;
/*执行阶段*/
//变量f再次赋值
f = function () {
  console.log("var");
}
f();//=>"var"

1
2
3
4
5
6
7
8
if(true) {
  var name = 'Tom'
}

for(var i = 0; i < 3; i++) {}

console.log(name)		// Tom
console.log(i)		// 2

1
2
3
4
5
6
7
8
9
10
11
12
var outVariable = "我是最外层变量"; //最外层变量
function outFun() { //最外层函数
    var inVariable = "内层变量";
    function innerFun() { //内层函数
        console.log(inVariable);
    }
    innerFun();
}
console.log(outVariable); //我是最外层变量
outFun(); //内层变量
console.log(inVariable); //inVariable is not defined
innerFun(); //innerFun is not defined

1
2
3
4
5
6
7
function outFun2() {
    variable = "未定义直接赋值的变量";
    var inVariable2 = "内层变量2";
}
outFun2();//要先执行这个函数，否则根本不知道里面是啥 ★★★
console.log(variable); //未定义直接赋值的变量
console.log(inVariable2); //inVariable2 is not defined

1
2
3
4
5
var a = 100
function fn() {
    console.log(a) // 这里的a在这里就是一个自由变量
}
fn()

1
2
3
4
5
6
7
8
9
var x = 10
function fn() {
  console.log(x)
}
function show(f) {
  var x = 20
  f() //10，而不是20
}
show(fn)

1
2
3
4
5
for(var i = 0; i < 3; i++) {}
console.log(i)		// 2
------------------------------------------
for(let i = 0; i < 3; i++) {}
console.log(i)		// i is not defined

1
2
3
4
5
6
7
8
9
10
11
12
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
<script type="text/javascript">
   var btns = document.getElementsByTagName('button')
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        console.log('第' + (i + 1) + '个')
      }
    }
</script>
// 点击任意一个按钮，后台都是弹出 “第四个”, 这是因为 i 是全局变量, 执行到点击事件时，此时 i 的值为 3。

1
2
3
4
5
6
// 修改方法如下: 
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log('第' + (i + 1) + '个')
  }
}

1
2
3
function fn () {
  var a = 1;
}

1
2
3
4
5
6
7
8
9
// 使用闭包将函数作用域中的变量让外界调用
function fn () {
  var a = 1;
  function fn2 () {
    return a
  }
  return fn2()
}
console.log(fn())

1
2
3
4
5
6
7
8
9
10
// 如果我们不使用闭包的方式:
function count() {
  var start = 0
  start ++
  return start
}
console.log(count())		// 1
console.log(count())		// 1
// 为什么会出现这种情况呢?
// 因为我们每次在全局调用这个函数, 里面的 start 变量都会重新定义一遍. 也就是说每次我们希望 start 可以在原有的基础上 +1, 其实都是重新从 0 开始 +1.

1
2
3
4
5
6
7
8
9
10
11
function count() {
  var start = 0
  function addCount() {
    return start ++		// 这里的 return start ++ 等于 return start; start ++
  }
  return addCount
}
var a = count()
console.log(a())		// 0
console.log(a())		// 1
console.log(a())		// 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Student(name) {
  var name = name
  function setName(name1) {
    name = name1
  }
  function getName() {
    return name
  }
  return{
    setName,
    getName
  }
}
var s1 = Student('Tom')
console.log(s1.getName());		// Tom
s1.setName('Jack')
console.log(s1.getName());		// Jack

1
2
3
4
5
6
7
8
9
var person = {
  name: 'Jack',
  print: function() {
    console.log(this.name)
  }
}
person.print()		// Jack
var print = person.print
print()						// undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var name = "Jay Global";
var person = {
    name: 'Jay Person',
    details: {
        name: 'Jay Details',
        print: function() {
            return this.name;
        }
    },
    print: function() {
        return this.name;
    }
};
console.log(person.details.print());  // Jay Details
console.log(person.print());          // Jay Person
var name1 = person.print;
var name2 = person.details;
console.log(name1()); // Jay Global
console.log(name2.print()) // Jay Details, 因为这是由 name2 对象调用的函数, 而 name2 指向 person.details

1
2
3
4
5
6
7
8
9
10
11
var obj = {
    name: 'Tom',
    print: function () {
        console.log(this.name);
    }
}
var obj2 = {
  name: 'Jack'
}
obj.print.call(obj2)		// Jack
obj.print.call({name: 'Lucy'})		// Lucy

1
2
3
4
5
6
7
8
9
10
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");		// Bill Gates Seattle USA

1
2
fun.call(this, arg1, arg2)
fun.apply(this, [arg1, arg2])

1
2
3
4
let arr = [1,2,3]
function fn (x,y,z) {}
fn.call(obj, arr)		// 如果我们这样写, 那相当于 x = [1,2,3], y = z = undefined
fn.call(obj, ...arr)		// 这样才是正确的写法.

1
obj.print.bind({name: 'Tom'})()

1
2
3
4
5
6
7
8
9
10
var obj = {
  name: 'Tom',
  sayHello: function (liveCity) {  
    console.log("I'm " + this.name + ". I'm live in " + liveCity)
  }
}

TomSayHello.call({name: 'Jack'}, '上海')		// I'm Jack. I'm live in 上海
TomSayHello.call(null, '上海')							// I'm . I'm live in 上海
TomSayHello.call({name:'Jack'})						 // I'm Jack. I'm live in undefined

1
2
3
4
5
var fn = setInterval(function () {
	var d = new Date();
  document.body = d.toLocaleTimeString();
}, 1000)
clearInterval(fn)		// 括号中带之前方法声明的变量

1
2
3
4
5
6
7
parent.addEventListener("click",function(e){
  console.log("click-parent");
},false);

child.addEventListener("click",function(e){
  console.log("click-child");
},false);

1
2
3
4
child.addEventListener("click",function(e){
　　console.log("click-child");
  　e.stopPropagation();
},false);

1
var arr = arr1.concat(arr2, arr3);   // 结果为: arr1 + arr2 + arr3

1
var newArray = arr.flat(depth)

1
2
3
//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);		// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function* helloWorldGenerator () {
    yield 'hello';
    yield 'world';
    return 'ending';
}

var hw = helloWorldGenerator();

console.log(hw.next()); 
//第一次调用，Generator函数开始执行，直到遇到yield表达式为止。next方法返回一个对象，它的value属性就是当前yield语句后面表达式的值hello，done属性为false，表示遍历还没有结束

console.log(hw.next()); 
//第二次调用，Generator函数从上次yield表达式停下的地方，一直执行到下一个yield表达式。next方法返回的对象的value属性就是当前yield语句后面表达式的值world，done属性值为false，表示遍历还没有结束。

console.log(hw.next()); 
//第三次调用，Generator函数从上次yield表达式停下的地方，一直执行到return语句（如果没有return语句，则value属性为undefined），done属性为true，表示遍历已经执行结束。

console.log(hw.next()); 
//第四次调用，此时Generator函数已经执行完毕，next方法返回对戏那个的value属性为undefined，done属性为true，表示遍历结束。

console.log(hw.next()); 
//第五次执行和第四次执行的结果是一样的。 

1
2
var [a,b,c] = [1,2,3]
console.log(a,b,c);		// 1 2 3

1
2
3
4
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

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

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

1
2
3
4
5
6
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

1
2
3
4
let [a = 2] = [undefined]; // a = 2
let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

1
2
3
4
5
let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; 
// foo = 'aaa' // bar = 'bbb'  

let { baz : foo } = { baz : 'ddd' }; 
// foo = 'ddd'

1
2
3
4
5
6
7
8
let obj = {p: ['hello', {y: 'world'}] }; 
let {p: [x, { y }] } = obj; 
// x = 'hello' 
// y = 'world' 

let obj = {p: ['hello', {y: 'world'}] }; 
let {p: [x, {  }] } = obj; 
// x = 'hello'

1
2
3
4
let obj = {p: [{y: 'world'}] }; 
let {p: [{ y }, x ] } = obj; 
// x = undefined 
// y = 'world'

1
2
3
4
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; 
// a = 10 
// b = 20 
// rest = {c: 30, d: 40}

1
2
3
4
5
let {a = 10, b = 5} = {a: 3}; 
// a = 3; b = 5; 

let {a: aa = 10, b: bb = 5} = {a: 3}; 
// aa = 3; bb = 5;

1
2
3
4
5
6
7
8
9
10
11
// 1. 收集参数
function show(a, b, ...arg) {
  console.log(...arg);
}
show(1, 2, 4, 8, 16, 32)	// 结果: 4, 8, 16, 32

// 2. 数组展开
let arr1 = [1,2,3]
		arr2 = [4,5,6]
let arrAdd = [...arr1, ...arr2]
console.log(arrAdd)		// 结果: [1,2,3,4,5,6]

1
2
3
4
5
6
7
function sayHello(name, age, city = '上海') {
  console.log(`Hello, my name is ${name}, I'm ${age} years old and I'm living in ${city}`)
}
sayHello('Tom', 12)
// res: Hello, my name is Tom, I'm 12 years old and I'm living in 上海
sayHello('Tom',12, 'Beijing')		
// res: Hello, my name is Tom, I'm 12 years old and I'm living in Beijing

1
2
3
4
5
6
var score = [23, 76, 34, 89, 92],
    grade = ['及格', '不及格']
var result = score.map(item => {
  return item < 60 ? grade[1] : grade[0]
})
console.log(result);		// res: [ '不及格', '及格', '不及格', '及格', '及格' ]

1
2
3
4
5
6
7
// 取 5 名学生的身高平均数
let stus = [156, 174, 184, 168, 192],
		avgHeight
avgHeight = stus.reduce((temp, current, index) => {
  return index === stus.length - 1 ? (temp + current) / stus.length : temp + current
})
console.log(avgHeight)

1
2
3
4
5
6
7
// 返回数组中所有奇数
var arr = [22,49,23,56,71],
		res
res = arr.filter(item => {
  return item % 2 === 1
})
console.log(res)

1
2
3
4
5
6
7
var stus = ['Tom', 'Jack', 'David']
stus.forEach((item, index) => {
  console.log(`学号: ${index + 1}, 姓名: ${item}`);
})
// 学号: 1, 姓名: Tom
// 学号: 2, 姓名: Jack
// 学号: 3, 姓名: David

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
--------------------------------------------------------
// 新版本写法
--------------------------------------------------------
class Stu {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  sayHello() {
    console.log(`name: ${this.name}, age: ${this.age}`);
  }
}

var s1 = new Stu('tom', 22)
s1.sayHello()		// name: tom, age: 22

class OldStu extends Stu {
  constructor(name, age, gender) {
    super(name, age)
    this.gender = gender
  }
  ImOld () {
    console.log(`我是${this.age}岁的${this.gender}生`);
  }
}

var os1 = new OldStu('LiLi', 15, '女')
os1.ImOld()		// 我是15岁的女生

--------------------------------------------------------
// 老版本写法
--------------------------------------------------------
function User(name, pwd) {
  this.name = name
  this.pwd = pwd
}
User.prototype.sayHello = function () {  
  console.log(this.name, this.pwd);
}

var user1 = new User('Tom', 'a123')
user1.sayHello()