一些不错的js题 - Githubissues

xiaohesong commented 5 years ago

输出内容系列

输出什么？


function getPersonInfo(one, two, three) {
console.log(one);
console.log(two);
console.log(three);
}

const person = "Lydia"; const age = 21;

getPersonInfo${person} is ${age} years old;


是不是大吃一惊，哈哈。这个细节还真是没有注意到。

withzhaoyu commented 5 years ago

方法后面跟模板字符串。。。这是什么写法。。

xiaohesong commented 5 years ago

@withzhaoyu 这个叫做"tagged template"。mdn--Template literals (Template strings)

withzhaoyu commented 5 years ago

@withzhaoyu 这个叫做"tagged template"。mdn--Template literals (Template strings)

😝，谢谢。昨天去了解了下，居然还有这样的用法，涨姿势了

liaodeen commented 5 years ago

涨姿势了。 👍

xiaohesong commented 5 years ago

输出什么？

const name = "Lydia";
age = 21;

console.log(delete name);
console.log(delete age);

[x] A:false, true
[ ] B: "Lydia", 21
[ ] C: true, true
[ ] D: undefined, undefined

为毛是这个结果？因为delete。他如果作用于被var，const，let声明的变量，是不会起作用的，那么就返回false告诉你失败。如果你仔细去了解下，还真是会发现有点东西的。

我们都知道delete多用于删除某个对象的属性，对GC更友好。来看看delete的一些冷知识点。前面说了var , let, const这些不起作用，对于属性描述configurable为false的属性，他也不起作用。而且如果你删除一个不存在的属性，他还会给你返回true，真是调皮呀。

xiaohesong commented 5 years ago

下面console.log注释掉的值应该是什么语句才可以输出对应的内容？
function* startGame() {
const answer = yield "Do you love JavaScript?";
if (answer !== "Yes") {
return "Oh wow... Guess we're gone here";
}
return "JavaScript loves you back ❤️";
}

var game = startGame(); console.log(/ 1 /); // Do you love JavaScript? console.log(/ 2 /); // JavaScript loves you back ❤️


- [ ] A: `game.next("Yes").value` 和`game.next().value`
- [ ] B: `game.next.value("Yes")` 和 `game.next.value()`
- [x] C: `game.next().value` 和 `game.next("Yes").value`
- [ ] D: `game.next.value()` 和 `game.next.value("Yes")`

其实这个也不是很难，第二个和第四个明显是语法有误，就第一个和第三个到底是哪个？
这个还是比较有意思的，如果对generator不熟悉的，第一眼还真是看不出来。可以看看之前写的关于generator的文章，里面对于传参的情况写的也很清楚。
[generator也是可以传参数的](https://github.com/xiaohesong/TIL/blob/master/front-end/es6/understanding-es6/iterators%26generators.md#generator%E4%B9%9F%E6%98%AF%E5%8F%AF%E4%BB%A5%E4%BC%A0%E5%8F%82%E6%95%B0%E7%9A%84)

xiaohesong commented 5 years ago

下面会输出哪一个？

var status = "😎"

setTimeout(() => {
  const status = "😍"

  const data = {
    status: "🥑",
    getStatus() {
      return this.status
    }
  }

  console.log(data.getStatus())
  console.log(data.getStatus.call(this))
}, 0)

[ ] A: "🥑" and "😍"
[x] B: "🥑" and "😎"
[ ] C: "😍" and "😎"
[ ] D: "😎" and "😎"

额，如果这个难倒了，那就需要看看这个万恶的this了。

this的那几钟情况或者直接看这里

xiaohesong commented 5 years ago

下面的内容会怎么输出？

const value = "constructor";
value[value][value]('console.log("WTF?")')();

[ ] A: ReferenceError
[ ] B: TypeError
[ ] C: WTF?
[ ] D: console.log("WTF?")

这么突然的一眼看上去还挺操蛋，不过聪明的你想来已经把他给分解了。

monic-shixi commented 5 years ago

下面会输出哪一个？
var status = "😎"

setTimeout(() => {
  const status = "😍"

  const data = {
    status: "🥑",
    getStatus() {
      return this.status
    }
  }

  console.log(data.getStatus())
  console.log(data.getStatus.call(this))
}, 0)
[ ] A: "🥑" and "😍"

[ ] B: "🥑" and "😎"

[ ] C: "😍" and "😎"

[ ] D: "😎" and "😎"

额，如果这个难倒了，那就需要看看这个万恶的this了。

this的那几钟情况或者直接看这里

console.log(data.getStatus())

这个就是当前对象的指向，所以这个应该没有问题。

console.log(data.getStatus.call(this))

这个结果是猜出来的，不过猜对了。 😢

xiaohesong commented 5 years ago

下面的代码会输出什么

var obj = {}
obj.x = obj = {name: 'xiaohesong'}
console.log(`obj is`, obj, `property x is`, obj.x)

[ ] A: obj is {name: "xiaohesong"} property x is {name: "xiaohesong", x: {name: "xiaohesong"}}
[ ] B: obj is {name: "xiaohesong", x: {name: "xiaohesong"}} property x is {name: "xiaohesong"}
[ ] C: obj is {name: "xiaohesong"} property x is undefined
[ ] D: TypeError

你觉得答案是哪个？

显示答案

#### 答案: c 你可能好奇，为什么不是一个循环引用？因为在 ```js obj.x = obj = {name: 'xiaohesong'} ``` 这段代码中有连续的赋值，导致引用被改变。下面来详细的说说。正常情况来说`obj = {name: 'xiaohesong'}`会有个默认的`{name: 'xiaohesong'}`返回，就会变成： ```js obj.x = {name: 'xiaohesong'} ``` 其实这里的连续赋值和这个情况类似，不过多了个引用的问题。我们知道[LHS](https://github.com/xiaohesong/TIL/blob/master/front-end/javascript/you-dont-known-js/scope%20%26%20closures/chapter1-what-is-scope.md#compiler-speak)查找会确定他的作用域，此时找到的`obj.x`中的`obj`是上面定义的`{}`。看看后面的赋值(`obj = {name: 'xiaohesong'}`)，赋值先从这里开始(从左到右嘛), 这时候`obj`就是`{name: 'xiaohesong'}`了，这是一个 **新的引用** ！然后变成了`obj.x = {name: 'xiaohesong'}`。不错，这里的obj的`x`属性的值就是`{name: 'xiaohesong'}`，但是你得知道，这里得`obj.x`得这个`obj`得引用是指向`{}`的。所以最后你的`obj.x`的值是`undefined`，因为你最后的`obj`是指向`{name: 'xiaohesong'}`这个引用的。另外，不得不提一句，js中[没有指针](https://github.com/xiaohesong/TIL/blob/master/front-end/javascript/you-dont-known-js/scope%20%26%20closures/chapter1-what-is-scope.md#compiler-speak)，只有对值的引用。

xiaohesong commented 5 years ago

下面的代码会输出什么？


function nums(a, b) {
if
(a > b)
console.log('a is bigger')
else 
console.log('b is bigger')
return 
a + b
}

console.log(nums(4, 2)) console.log(nums(1, 2))


- [ ] A: `a is bigger`, `6` 和`b is bigger`, `3`
- [ ] B: `a is bigger`, `undefined` 和 `b is bigger`, `undefined`
- [ ] C: `undefined` 和 `undefined`
- [ ] D: `SyntaxError`

你觉得答案是哪个？

<details>
<summary><b>显示答案</b></summary>
<p>

#### 答案: B

其实这个也不是很难，不过这里想说下，对于一些语句他会自动插入分号。

哪些语句？`throw`，`return`，`break`等
</p>
</details>

xiaohesong commented 5 years ago

下面的代码会输出什么？


function compareMembers(person1, person2 = person) {
if (person1 !== person2) {
console.log("Not the same!")
} else {
console.log("They are the same!")
}
}

const person = { name: "Lydia" }

compareMembers(perosn)

- [ ] A: `Not the same!`
- [ ] B: `They are the same!`
- [ ] C: `ReferenceError`
- [ ] D: `SyntaxError`

你觉得答案是哪个？

<details>
<summary><b>显示答案</b></summary>
<p>

#### 答案: B

答案真的是`B`吗？ 原[题目答案](https://github.com/lydiahallie/javascript-questions#105-whats-its-value)是说`B`。

但是这里要分情况了。如果你在现代的浏览器，那是会报错的，报什么错，那就你自己试试。知道为啥报错吗？查看[es6 function params](https://github.com/xiaohesong/TIL/blob/master/front-end/es6/understanding-es6/function.md#function-params)。

还有一种情况，就是不报错，那就是es5的情况，这种情况不好模拟，因为大多数现代浏览器都支持了es6。es5会输出对应的`B`这个答案。

从回答里可以看出，作者是想表述的是关于引用的问题，但是出的这个题不是很恰当。

> 提示：不要被`const`搞混，你可以把`const`换成`var`来试试：

```js
var person = { name: "Lydia" };

function compareMembers(person1, person2 = person) {
  if (person1 !== person2) {
    console.log("Not the same!")
  } else {
    console.log("They are the same!")
  }
}

compareMembers(perosn)

在现代浏览器里是不是一样的效果？

xiaohesong commented 4 years ago

下面的代码会发生什么？

let config = {
  alert: setInterval(() => {
    console.log('Alert!');
  }, 1000),
};

config = null;

[ ] A: setInterval回调不会被调用
[ ] B: setInterval回调被调用一次
[ ] C: setInterval回调仍然被每秒调用一次
[ ] D: SyntaxError

你觉得答案是哪个？

显示答案

#### 答案: c 这个在定义对象的时候会解析属性值，如果有引用，直接解析引用，所以`setInterval`被调用了。

xiaohesong / TIL

一些不错的js题 #23

输出内容系列