JavaScript吐槽,吐槽JavaScript的表情包

js高手来帮我解释一下这段代码的意思

lastScrollY=-0; // 定义变量最后一个 滚动的Y

function backtop() {  // 定义定时器的回调函数backtop

  diffY=document.body.scrollTop;  // body 的scrollTop也就是当前滚动的长度为diffY

  percent=.1*(diffY-lastScrollY); // 定义变量percent 为 diffY - lastScrollY 乘0.1

  // 上面的意思为 body 的滚动高度 减去定义的高度 的十分之一 赋值给 percent变量

  if(percent0) {

    percent=Math.ceil(percent);

  } else {

    percent=Math.floor(percent);

  }

  // 如果计算出来的值是大于0的 就上取整 否则就下取整 (如果不懂可以百度下这两个函数)

  //document.all.toolTipLayer2.style.pixelTop+=percent;

  // 然后给toolTipLayer2这个元素的 pixelTop属性。加上percent （因为定时器是每1毫秒执行

  //一次所以说是不停的加上percent）

  

  lastScrollY=lastScrollY+percent;

  // lastScrollY 的值变为 lastScrollY和percent之和。 

  // 其实这段代码的含义就是  让一个元素不停的滚动， 因为lastScrollY每次都会成为之前

  // 的lastScrollY和percent之和。 所以diffY 减去 lastScrollY 乘以0.1 的值就会越来越小

  // 直到他们的值 小于0 后 被下取整后成为0 就不再滚动了。 也就是一个从快到慢的滚动过程 

}

window.setInterval("backtop()",1);

相关问答

Q1: [大一]三道javascript的题目不会，求解答

看了题目，无力吐槽。

出题目的纯属刁难。

题1：

变量i纯属垃圾变量，while优化为：

while((j-=3)5){}

出题的干啥吃的。。。

题2：

统计字符串长度，考验的是基本上不会用到的转义"\02"，这种写法我是第一次见，"\t"、"\x02"、"\u0002"这种写法还好，容易识别，"\02"TM纯属刁难，"\77"和"\78"的长度分别多少？

题3：

已知：true==1成立，true!=2、true2成立。if(2){console.log(true)}else{console.log(false)}控制台输出？

不知道出题的在除了出题目，还在什么场景直接写过if(abc)这种晦涩难懂的代码

Q2: React Hook介绍与使用心得

React Hook 对于React来说无疑是一个伟大的特性，它将React从类组件推向了函数组件，从而让人们对于JavaScript的理解不再去可以理解晦涩的JS中的类，以及难以琢磨的this。在《你不知道的JavaScript》上卷中，作者就对JavaScript中的类，继承，面向对象做了一定的解释，总的来说就是，在JavaScript中生搬硬套用面向对象，得不偿失，很容易造成学习和理解负担。

在React16之前没有Hook的时候，必须在类组件去维护组件状态，因此必须理解JS中this的工作机制，并且在给元素绑定事件的时候总是需要绑定this。在组件之间复用状态逻辑比较困难，官方提供的 render props 和 高阶组件 确实很好用，但是整个用起来感觉很重，具体关于对类组件的吐槽可以参考React官网 Hook简介 这部分内容。

当使用React Hook去写React应用后，会发现再也不想用类组件了。。。

官方是这么介绍Hook的： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

在React中提供了以下几种Hook

示例：

将useState这个钩子从react中导入，在函数组件Login中利用解构赋值的方式声明两个常量 num ， setNum 作为 useState(0) 的返回值，useState钩子返回一个数组，第一个参数是我们声明的 state变量 ，第二个参数是一个 方法 ，用来手动改变第一个参数。

语法： const [num, setNum] = useState(0)

useState接受参数为基本类型如数字字符串等，也可以是引用类型对象数组等。用来作为初始值。

关于 useState返回值的第二个参数

示例：

官网这么说：如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount ， componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect接收一个 函数 为第一个参数。

关于useEffect 这个Hook，它的形式有以下几种：

说了这么多那到底什么是 副作用 ？

React官网是这样解释的：数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作，或是“副作用”这个名字，应该都在组件中使用过它们。

也就是说，当函数在运行的过程中对外部环境造成影响，或者与外部环境发生交互。比如操作DOM，发起请求，设置订阅这种，都属于副作用。同时有些副作用需要清除，比如订阅解绑，定时器延时器清除，有些不需要清除，比如数据获取，操作DOM。

那什么样的函数没有副作用呢？纯函数是不会有副作用的。

在使用useEffect hook的时候可以使用多个Effect分离关注点：

举一个场景来说下：弹窗场景。在父组件中点击按钮打开弹窗，在弹窗内部点击关闭按钮关闭弹窗。

此时控制弹窗打开与关闭的只能是一个状态isOpen，此时这个isOpen状态就需要在字符组件中共享。

使用isOpen控制弹窗的显示与隐藏，在父组件中调用setIsOpen方法，打开弹窗，在弹窗组件中使用useContext共享的父组件中的方法setIsOpen关闭弹窗。

注：父子组件一般不会存在一个文件中，需要将popContext导出再在子组件中导入使用。

官网这样解释： useState 的替代方案。它接收一个形如 (state, action) = newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

示例：

useReducer第一个参数是一个reducer函数，第二个参数是初始化状态，在reducer函数中根据不同的type对state进行不同的处理。类似于redux中的reducer。

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（ initialValue ）。返回的 ref 对象在组件的整个生命周期内保持不变。

这个看来有两种用法：

第一种就是命令式操作DOM元素

第二种是关于其另外一个特性变更 .current 属性不会引发组件重新渲染

使用 myRef.count 来统计组件渲染次数。每一次组件重新渲染的时候，都将返回同一个 myRef 对象，并且， myRef 对象发生变化时，并不会导致组件渲染，这样的特性可以用来处理一些特殊场景下的需求。

当自定义一个myRef对象时，每次组件重新渲染都将返回一个新的对象。

这两个Hook可以用来做优化，比如以下例子，有name和age两个状态，子组件只需要在name发生变化时重新渲染，而在age发生变化时不需要重新渲染。

示例：

useMemo第一个参数接收一个函数第二个参数接收一个数组 useMemo(()=fn, []) ，数组里面是依赖，只有数组里面的依赖发生变化，函数才会执行。

useCallback(fn, deps) 相当于 useMemo(() = fn, deps) 。

React 官方也在极力推动Hook的发展，并且近期也有了React准备重写文档，更新后的文档针对Hook的内容肯定会更多，而且Vue在3.0版本出来后也使用了类似于React Hook的机制Composition API，这也是一个趋势。

最近在用webpack4+react16+ts4做自己的一个移动端小博客，功能正在完善中，主要是想学习使用一下React技术栈，期间发现React Hook确实非常好用，因此做一些记录。

博客 github 地址：

线上地址： （开发中）

Q3: JavaScript与Java有什么关系？

avaScript和Java是两种不一样的语言，但是它们之间存在联系。

背景方面

Javascript(1995年，Netscape公司雇佣了程序员Brendan Eich开发这种网页脚本语言)最初名字叫做Mocha，1995年9月改为LiveScript。12月，Netscape公司与Sun公司（Java语言的发明者和所有者）达成协议，后者允许将这种语言叫做JavaScript。这样一来，Netscape公司可以借助Java语言的声势，而Sun公司则将自己的影响力扩展到了浏览器。使用Java语言开发网络应用程序，JavaScript可以像胶水一样，将各个部分连接起来。当然，后来的历史是Java语言的浏览器插件（applet）失败了，JavaScript反而发扬光大。

另： ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

语法方面

JavaScript的基本语法和对象体系，是模仿Java而设计的。但是，JavaScript没有采用Java的静态类型。正是因为JavaScript与Java有很大的相似性，所以这门语言才从一开始的LiveScript改名为JavaScript。基本上，JavaScript这个名字的原意是“很像Java的脚本语言”。

在JavaScript语言中，函数是一种独立的数据类型，以及采用基于原型对象（prototype）的继承链。这是它与Java语法最大的两点区别。JavaScript语法要比Java自由得多。数据结构部分则借鉴Java语言，包括将值分成原始值和对象两大类。

编译方面

另外，Java语言需要编译，而JavaScript语言则是运行时由解释器直接执行。

结语

总之，JavaScript的原始设计目标是一种小型的、简单的动态语言，与Java有足够的相似性，使得使用者（尤其是Java程序员）可以快速上手。

Q4: javascript 语句、代码、代码块

什么破书，讲东西那么拗口。

以上的答案是原始答案，一年过去了，为当时年轻的自己买单来了。

请各位看清楚，问题问的是：javascript（js）的代码和代码块，最佳答案里描述的，script标签是html的一个闭合标签，而不是什么js的代码块。好，吐槽结束，我来一个一个回答题主的问题。

怎么理解，js代码是语句的系列：这句话是要解释什么是js代码，那它说，这个js代码是什么呢？是“语句的系列“，怎么理解“语句的系列”呢，首先，语句指的是什么？当然指的是js语句。比如说一个js声明语句：

var a;

再比如说一个js赋值语句：

a = 0;

再比如说一个js计算语句：

a = a + 1;

理解了语句，然后我们来看一下语句的系列。当然指的就是这些语句写在一起，比如把上边的语句写在一起：

var a;

a = 0;

a = a + 1;

那么上面这些就是语句的系列。这也就是js语句了。

"语句是通过代码块的形式进行组合"，再举例说明。

是啊，你要先知道什么是代码块，才能理解上面这句话。这句话是说，语句的组织形式。怎么把之前我们理解的js语句整合起来呢。比如说，我要实现一个累加器，每次点击页面上的一个按钮，我就在计数上加1。那么我就应该这么做：

var buttonClickedTimes = 0；

buttonClickedTimes = buttonClickedTimes + 1;

可是这样的代码，这两行是要一起运行么？显然不是的，每次当点击按钮的时候，应该只运行第二句，第一句应该只在页面初始化加载的时候执行一次，否则，每次点击按钮都把变量buttonClickedTimes 赋值为0.这样点击以后变量的值也总会是1。不能实现累加。

所以：这个代码应该这样写：

//初始化时运行一次

var buttonClickedTimes = 0；

//绑定事件到按钮元素

document.getElementById('buttonId').onclick = function(e) {

buttonClickedTimes += 1;

console.log(buttonClickedTimes);

}

这样我们看到，代码是不是就分成了两部分，每个部分，都有他们运行的时机。广义的说，这两个部分都可以叫做代码块。狭义来说，第二部分用大括号包起来的部分，是一个很典型代码块。这段代码只有当用户点击了页面上一个id为buttonId的按钮时，才会执行。那么理解了什么是代码块，我们也就能理解了“语句以代码块的形式进行组合”是什么意思了，对吧。

最后还是要说一声，这本教材很不好，用拗口的定义打消了那么多人写代码的乐趣。这是我比较反对的。给自己补坑完成。