发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

这些 JavaScript 笔试题你能答对几道？

八方沾恩泽

4

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
显示全部楼层
收藏 javascript-questions 这个仓库很久了，趁着周末来锻炼下自己的 JS 基础水平
因为逐渐也在承担一些面试工作，顺便摘录一些个人觉得比较适合面试的题目和方向
事件流（捕获、冒泡）

源链接
以下代码点击结果是啥？
  1.   <p onclick="console.log('p')">
  2.     Click here!
  3.   </p>
复制代码
答案-> 依次打印 p 和 div
这道题考查事件流，在事件传播中，有三个阶段，捕获->目标->冒泡，按照标签来看，就是 div->p->div，但是默认只在冒泡阶段处理事件
如果需要在捕获阶段处理事件，可用 addEventLister 并且传入第三个参数为 true（默认是 false，即默认冒泡阶段处理）
  1.   <p onclick="console.log('p')">
  2.     Click here!
  3.   </p>
复制代码
call、apply、bind

源链接
以下代码输出结果是啥？
  1. const person = { name: 'Lydia' };
  3. function sayHi(age) {
  4.   return `${this.name} is ${age}`;
  5. }
  7. console.log(sayHi.call(person, 21));
  8. console.log(sayHi.bind(person, 21));
复制代码
答案-> Lydia is 21 [Function: bound sayHi]
这道题主要考查 call 和 bind，当然我们面试的时候一般会把 apply 拿出来一起考察下
call、apply 以及 bind 都是为了改变 this 指向而生，而 call 和 apply 用法比较像，都会在函数调用时改变 this 指向，唯一的区别是 apply 的第二个参数是数组，而 call 从第二个参数开始都是实际传入该函数中的值。bind 与他们不一样，它返回的还是函数
new

源链接
以下代码输出结果是啥？
  1. function Car() {
  2.   this.make = 'Lamborghini';
  3.   return { make: 'Maserati' };
  4. }
  6. const myCar = new Car();
  7. console.log(myCar.make);
复制代码
答案-> Maserati
这题考查 new。如果对构造函数以及 new 比较了解的就会知道，构造函数里，如果返回一个非 null 的对象（包括数组），则将该对象值赋值给新建的对象
了解更多可以参考 一道有意思的笔试题引发的对于 new 操作符的思考
JSON.stringify

源链接
以下代码输出结果是啥？
  1. const settings = {
  2.   username: 'lydiahallie',
  3.   level: 19,
  4.   health: 90,
  5. };
  7. const data = JSON.stringify(settings, ['level', 'health']);
  8. console.log(data);
复制代码
答案-> {"level":19,"health":90}
这道题主要考查 JSON.stringify 的第二个参数，当然它还能传入第三个参数
语法：JSON.stringify(value[, replacer [, space]])。详见 JSON.stringify
replacer

replacer 参数可以是一个函数或者一个数组。作为函数，它有两个参数，键（key）和值（value），它们都会被序列化
在开始时，replacer 函数会被传入一个空字符串作为 key 值，代表着要被 stringify 的这个对象。随后每个对象或数组上的属性会被依次传入
  1. const settings = {
  2.   username: 'lydiahallie',
  3.   level: 19,
  4.   health: 90,
  5. };
  7. const data = JSON.stringify(settings, (k, v) => {
  8.   console.log(k, v);
  9.   return v
  10. });
  12. console.log(data);
  14. /*
  15. // 这里其实最开始打印了个空字符串。在开始时，replacer 函数会被传入一个空字符串作为 key 值，代表着要被 stringify 的这个对象
  16. { username: 'lydiahallie', level: 19, health: 90 }
  17. username lydiahallie
  18. level 19
  19. health 90
  21. {"username":"lydiahallie","level":19,"health":90}
  22. */
复制代码
  1. const settings = {
  2.   username: 'lydiahallie',
  3.   level: 19,
  4.   health: 90,
  5. };
  7. const data = JSON.stringify(settings, (k, v) => {
  8.   if (k === 'level') return v * 2
  9.   return v
  10. });
  12. console.log(data);
  14. // {"username":"lydiahallie","level":38,"health":90}
复制代码
当传入数组的时候，相对比较简单，就是需要 picked 的 key（但是没法深度 pick，只能 pick 第一层）
space

用来格式化，可以传入数字或者字符串
  1. const settings = {
  2.   username: 'lydiahallie',
  3.   level: 19,
  4.   health: 90,
  5. };
  7. const data = JSON.stringify(settings, null, 2); // 这时候和传入 '  '（length 2）效果一样
  9. console.log(data);
  11. /*
  12. {
  13.   "username": "lydiahallie",
  14.   "level": 19,
  15.   "health": 90
  16. }
  17. */
复制代码
  1. const settings = {
  2.   username: 'lydiahallie',
  3.   level: 19,
  4.   health: 90,
  5. };
  7. const data = JSON.stringify(settings, null, 'hello');
  9. console.log(data);
  11. /*
  12. {
  13. hello"username": "lydiahallie",
  14. hello"level": 19,
  15. hello"health": 90
  16. }
  17. */
复制代码
函数参数解构

源链接
以下代码输出结果是啥？
  1. const myFunc = ({ x, y, z }) => {
  2.   console.log(x, y, z);
  3. };
  5. myFunc(1, 2, 3);
复制代码
答案-> undefined undefined undefined
这道题比较简单，myFunc 函数需要的是一个对象参数，并且有 key x y 和 z，但是传入的并不是对象，所以都取了他们的默认值 undefined
如果传入对象，但是并没有对应的 key，也同样是 undefined
  1. const myFunc = ({ x, y, z }) => {
  2.   console.log(x, y, z);
  3. };
  5. myFunc({ x: 1 }); // 1 undefined undefined
复制代码
函数中的剩余参数

源链接
以下代码输出结果是啥？
  1. function getItems(fruitList, ...args, favoriteFruit) {
  2.   return [...fruitList, ...args, favoriteFruit]
  3. }
  5. getItems(["banana", "apple"], "pear", "orange")
复制代码
答案-> SyntaxError
这道题就比较脑经急转弯了，剩余参数只能放在最后，其实我觉得像上面代码那样其实也有使用场景，不知道未来会不会支持这样的写法
展开运算符

源链接
以下代码输出结果是啥？
  1. const person = {
  2.   name: 'Lydia',
  3.   age: 21,
  4. };
  6. const changeAge = (x = { ...person }) => (x.age += 1);
  7. const changeAgeAndName = (x = { ...person }) => {
  8.   x.age += 1;
  9.   x.name = 'Sarah';
  10. };
  12. changeAge(person);
  13. changeAgeAndName();
  15. console.log(person);
复制代码
答案-> { name: 'Lydia', age: 22 }
这道题的考点是展开运算符在对象中的使用。一般我们会用展开运算符来复制一个对象
当调用 changeAge(person) 时，参数传入了 person，所以 (x.age += 1) 实际操作的和 person 是一个对象引用。而调用 changeAgeAndName() 时，因为没有传入参数，所以 x 其实是 { ...person }，而这个其实是 person 的一个浅拷贝
可以考查下将 (x = { ...person }) 改成 (x = person)
||

源链接
以下代码输出结果是啥？
  1. const one = false || {} || null;
  2. const two = null || false || '';
  3. const three = [] || 0 || true;
  5. console.log(one, two, three);
复制代码
答案-> {} "" true
这道题的考点是 || 和假值。 || 运算符会返回第一个真值，如果都为假值，则返回最后一个值
这里可以顺便考查 &&。&& 操作符，一旦遇到了假值，便会停止往后
  1. console.log(true && 0); // 0
  2. console.log(true && 0 && true); // 0
  3. console.log(1 && 2); // 2
  4. console.log(1 && false); // false
  5. console.log('' && false); // ''
复制代码
falsy

源链接
以下哪些值是假值？
  1. 0;
  2. new Number(0);
  3. ('');
  4. (' ');
  5. new Boolean(false);
  6. undefined;
复制代码
答案-> 0 '' undefined
JS 中的假值有以下几种：

  • false
  • ''
  • NaN
  • undefined
  • null
  • 0 / -0
  • 0n（BigInt(0)）
除此之外，new Number、new Boolean 创建的其实都是对象，都是真值
对象中 key 重复

源链接
以下代码输出结果是啥？
  1. const obj = { a: 'one', b: 'two', a: 'three' };
  2. console.log(obj);
复制代码
答案-> { a: 'three', b: 'two' }
这其实更像是一个规范，当对象中 key 重复的时候，value 会被后面的替换，但是 key 的位置会是第一次出现的位置
一般是对象合并的时候会用到：
  1. const oldObj = {
  2.   name: 'fish',
  3.   age: 30
  4. }
  6. const coverdObj = { name: 'lessfish' }
  8. const newObj = {
  9.   ...oldObj,
  10.   ...coverdObj
  11. }
  13. console.log(newObj); // { name: 'lessfish', age: 30 }
复制代码
Array Operators

有好几道和数组操作有关的题
这题 主要考查 push 操作返回 push 后的数组长度，这题 也是类似
这题 主要考查哪些数组操作会改变原来的数组（splice）
这题 主要考查 reduce 的使用
  1. [1, 2, 3, 4].reduce((x, y) => console.log(x, y));
复制代码
这题还是比较有意思的，reduce 函数调用中如果有第二个参数，则会被当作第一次迭代中的 previous 值（也就是第一个参数 x），如果没有第二个参数，则数组第一个元素会被当作第一次迭代的 previous
所以上面的代码，如果 reduce 有第二个参数，会被迭代 4 次，如果没有，则是迭代三次
再看代码，因为没有第二个参数，所以第一次迭代参数是 1 和 2，reduce 迭代中的返回会被当作下次迭代的 previous，但是这里没返回，所以就是 undefined，而第二个参数 y 就是数组元素
Object Operators

这题 主要考查用 Object.defineProperty 定义的对象中的属性默认不可枚举，不能用 Object.keys 拿到
这题 主要考查 Object.freeze，顾名思义它能冰冻住对象，使得对象不能增、删、修改键值对（但是注意，它只是 freeze 了第一层，可以参考 这题）
这题 考查 Object.seal，它能阻止对象新增、删除属性，但是对于已有的属性依然可以修改其值（注意和 freeze 一样同样只是第一层）
delete

源链接
以下代码输出结果是啥？
  1. const name = 'Lydia';
  2. age = 21;
  4. console.log(delete name);
  5. console.log(delete age);
复制代码
答案-> false true
这题考查 delete 操作
首先 delete 返回一个布尔值，代表是否删除成功。然后 var const let 定义的变量，都不能被删除，只有全局变量才能被删除
这里要注意下 name，因为浏览器中默认挂了个全局变量 name，所以 delete name 是 ok 的
暂时性死区

这两题都是暂时性死区相关，注意下 var 和 let const 是有差异的，var 的话会变量声明提升（但是是 undefined），但是 let 和 const 并不会初始化
Object toString

源链接
以下代码输出结果是啥？
[code]const animals = {};let dog = { emoji: '
来源:https://www.cnblogs.com/lessfish/p/17155370.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

上一篇: 这些 JavaScript 笔试题你能答对几道？

下一篇: js-惰性函数

发表于 2023-2-26 21:31:35

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4