JavaScript 是一种基于脚本的编程语言，主要用于在 Web 页面上实现交互式的效果和动态的内容。JavaScript 是一种解释性语言，不需要编译就可以直接在浏览器中运行。

JavaScript 的主要特点包括：

轻量级：JavaScript 代码通常比较短小，可以快速加载和执行。

可移植性：JavaScript 可以在各种不同的浏览器和操作系统上运行。

面向对象编程：JavaScript 支持面向对象编程，包括对象、继承、封装等特性，可以用于构建复杂的软件系统。

客户端脚本语言：JavaScript 主要用于在 Web 页面上实现交互式的效果和动态的内容，可以与 HTML 和 CSS 一起使用。

异步编程：JavaScript 支持异步编程，可以利用回调函数、Promise、async/await 等方式实现异步操作，提高程序的性能和响应能力。

JavaScript 在 Web 开发中扮演着非常重要的角色，它可以用于实现各种交互式的效果和动态的内容，如表单验证、动画效果、AJAX 等。同时，JavaScript 也可以用于开发各种类型的应用程序，如桌面应用程序、移动应用程序等。

如果您想成为一名 Web 开发人员，JavaScript 是必不可少的编程语言之一，需要掌握 JavaScript 的基本语法和常用的开发框架和库，如 React、Angular、Vue 等。掌握 JavaScript 可以帮助您更加高效和灵活地实现 Web 开发中的各种功能和效果，为自己的职业发展和个人成长打下坚实的基础。

JavaScript

在JavaScript中，获取图像的大小（高度和宽度）可以通过几种不同的方法实现，具体取决于图像是已经在网页中显示，还是作为一个新资源被加载。下面我将分别介绍这两种情况的常用方法：

### 1. 获取网页中已存在的图像的大小

如果图像已经存在于网页中，你可以直接使用DOM API来获取其尺寸。这里是一个基本的例子：

```html
<img id="myImage" src="image.jpg" alt="测试图像">

<script>
  window.onload = function() {
    var img = document.getElementById('myImage');
    var width = img.clientWidth;
    var height = img.clientHeight;
    console.log("图像宽度: " + width + "，图像高度: " + height);
  };
</script>
```

在这个例子中，我们首先确保整个页面加载完成（`window.onload`），然后通过`getElementById`方法获取图像的DOM元素。之后，我们使用`clientWidth`和`clientHeight`属性来获取图像的宽度和高度。

### 2. 获取新加载图像的大小

如果你需要获取一个还未添加到DOM中的图像的大小，你可以创建一个新的`Image`对象，然后在图像加载后读取其尺寸。这里是如何做的：

```javascript
var img = new Image();
img.onload = function() {
  var width = img.width;
  var height = img.height;
  console.log("图像宽度: " + width + "，图像高度: " + height);
};
img.src = 'image.jpg';
```

在这个例子中，我们创建了一个新的`Image`对象，并设置了一个`onload`事件处理函数，该函数在图像加载完成后触发。在这个函数中，我们可以通过`width`和`height`属性来访问图像的尺寸。最后，我们设置`src`属性来开始加载图像。

### 注意事项

- 在获取图像尺寸时，确保图像已经加载完成，否则你可能得到的是0或错误的值。
- 对于跨域的图像资源，可能需要处理CORS（跨源资源共享）相关的问题。

使用以上任一方法，你都可以有效地获取JavaScript中图像的尺寸。选择哪一种方法取决于你的具体需求和场景。

How to get the image size (height & width) using JavaScript

在JavaScript中输出带前导零的数字，我们可以使用几种不同的方法。

### 方法1：使用`String.prototype.padStart()`方法

这个方法可以在字符串的开始部分填充一些字符，直到达到指定的长度。对于数字，我们首先需要将其转换为字符串，然后使用`padStart()`方法。

```javascript
function padNumber(num, length) {
    return num.toString().padStart(length, '0');
}

const num = 5;
const paddedNum = padNumber(num, 2); // 输出 "05"
console.log(paddedNum);
```

在这个例子中，数字`5`被转换为字符串并用`0`填充到长度为2。

### 方法2：使用`slice()`方法

这个方法不直接对数字操作，而是通过操作字符串来实现。首先生成一个足够长的前导零字符串，然后将数字转为字符串拼接在后面，最后通过`slice()`从后往前截取所需长度。

```javascript
function leadingZero(num, totalLength) {
    const numStr = '0000000000' + num; // 创建一个前导零足够多的字符串
    return numStr.slice(-totalLength);
}

const num = 5;
const result = leadingZero(num, 2); // 输出 "05"
console.log(result);
```

这个方法虽然看起来不够优雅，但在旧的JavaScript环境中非常有用，因为`padStart()`是ES2017中引入的较新功能。

### 方法3：使用`toFixed()`方法

对于需要固定小数位数的数字，可以使用`toFixed()`方法，它会返回字符串形式的数字，并保持固定的小数位数。

```javascript
function fixedZero(num, digits) {
    return num.toFixed(digits);
}

const num = 5;
const fixedNum = fixedZero(num, 2); // 输出 "5.00"
console.log(fixedNum);
```

这个方法主要用于处理带小数的数字，如果只是需要整数部分的前导零，则前两种方法更为合适。

以上就是在JavaScript中输出带前导零的数字的几种常见方法。每种方法都有其适用场景，可以根据具体需求选择使用。

How to output numbers with leading zeros in JavaScript?

在JavaScript中，可以使用几种不同的方法来检查一个数字是浮点数还是整数。

### 方法1: 使用 `Number.isInteger()` 函数

这是检查一个数字是否为整数的最直接方法。`Number.isInteger()` 方法会返回一个布尔值，表明提供的值是否为整数。

```javascript
function checkNumberType(num) {
  if (Number.isInteger(num)) {
    return `${num} 是整数`;
  } else {
    return `${num} 是浮点数`;
  }
}

console.log(checkNumberType(10)); // 输出: 10 是整数
console.log(checkNumberType(10.5)); // 输出: 10.5 是浮点数
```

### 方法2: 使用取模操作符 `%`

另一种方法是使用 `%` (取模) 操作符。如果一个数字除以1的余数为0，那么这个数字是整数；如果不为0，则为浮点数。

```javascript
function checkNumberType(num) {
  if (num % 1 === 0) {
    return `${num} 是整数`;
  } else {
    return `${num} 是浮点数`;
  }
}

console.log(checkNumberType(10)); // 输出: 10 是整数
console.log(checkNumberType(10.1)); // 输出: 10.1 是浮点数
```

### 方法3: 使用 `Math.floor()` 或 `Math.ceil()` 方法

通过比较一个数字与它向下取整或向上取整后的结果来判断。如果这两者相等，那么该数字是整数；如果不同，则为浮点数。

```javascript
function checkNumberType(num) {
  if (Math.floor(num) === num) {
    return `${num} 是整数`;
  } else {
    return `${num} 是浮点数`;
  }
}

console.log(checkNumberType(12)); // 输出: 12 是整数
console.log(checkNumberType(12.3)); // 输出: 12.3 是浮点数
```

### 总结

以上是JavaScript中几种常见的检查数字是否为整数的方法。`Number.isInteger()` 是最为简洁和现代的方法，通常也是推荐使用的方法。然而，其他的方法如使用 `%` 或 `Math.floor()` 在某些情况下也很有用，尤其是在需要考虑兼容性的场景中。

How do I check that a number is float or integer?

在React中，如果您想要在某些情况下（例如，当内容更新时）将`div`滚动到底部，可以通过编程方式操作DOM来实现。以下是几种可以实现这个需求的方法：

### 使用`ref`和DOM方法

您可以通过React的`ref`属性获得DOM元素的直接引用，并使用原生的DOM方法来滚动到底部。这可以通过设置`scrollTop`来实现，`scrollTop`应该等于`scrollHeight`减去`clientHeight`。

```jsx
import React, { useRef, useEffect } from 'react';

function ChatComponent() {
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(scrollToBottom, []); // 如果希望在组件首次渲染时滚动到底部，可以添加空数组作为依赖项

  return (
    <div style={{ overflowY: 'auto', height: '500px' }}>
      {/* 消息内容 */}
      <div>{/* ... */}</div>
      {/* 用于滚动的元素 */}
      <div ref={messagesEndRef} />
    </div>
  );
}
```

这里，`useEffect`用于在组件的生命周期内在适当的时刻触发滚动行为。

### 使用`scrollTop`和`scrollHeight`

如果您想要更直接控制滚动位置，可以直接设置`scrollTop`属性：

```jsx
import React, { useRef, useEffect } from 'react';

function ScrollToBottomComponent() {
  const divRef = useRef(null);

  const scrollToBottom = () => {
    const scrollHeight = divRef.current.scrollHeight;
    const height = divRef.current.clientHeight;
    const maxScrollTop = scrollHeight - height;
    divRef.current.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
  };

  useEffect(scrollToBottom, []); // 依据实际情况，可能需要添加其他依赖项，如消息数组

  return (
    <div ref={divRef} style={{ overflowY: 'auto', height: '500px' }}>
      {/* 消息内容 */}
      {/* ... */}
    </div>
  );
}
```

在这个例子中，我们在`useEffect`中调用`scrollToBottom`函数，这会在组件渲染后立即将`div`滚动到底部。

### 自动滚动处理新消息

如果您的`div`包含一个聊天界面，您可能希望在新消息到来时自动滚动到底部。这可以通过在`useEffect`中跟踪消息数组的变化来实现：

```jsx
import React, { useRef, useEffect } from 'react';

function AutoScrollToBottomComponent({ messages }) {
  const divRef = useRef(null);

  useEffect(() => {
    if (divRef.current) {
      const { scrollHeight, clientHeight } = divRef.current;
      divRef.current.scrollTop = scrollHeight - clientHeight;
    }
  }, [messages]); // 当消息数组改变时触发滚动

  return (
    <div ref={divRef} style={{ overflowY: 'auto', height: '300px' }}>
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
    </div>
  );
}
```

在这个例子中，每当传入组件的`messages`数组发生变化时，`useEffect`钩子就会执行，导致`div`自动滚动到底部。

以上就是在React中将`div`滚动到底部的几种方法。您可以根据您应用的具体需求选择适合的实现方式。

As Tushar mentioned, you can keep a dummy div at the bottom of your chat:

    render () {
      return (
        <div>
          <div className="MessageContainer" >
            <div className="MessagesList">
              {this.renderMessages()}
            </div>
            <div style={{ float:"left", clear: "both" }}
                 ref={(el) => { this.messagesEnd = el; }}>
            </div>
          </div>
        </div>
      );
    }
    

and then scroll to it whenever your component is updated (i.e. state updated as new messages are added):

    scrollToBottom = () => {
      this.messagesEnd.scrollIntoView({ behavior: "smooth" });
    }
    
    componentDidMount() {
      this.scrollToBottom();
    }
    
    componentDidUpdate() {
      this.scrollToBottom();
    }
    

I'm using the standard [Element.scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method here.

I just want to update the answer to match the new `React.createRef()` [method](https://reactjs.org/docs/refs-and-the-dom.html), but it's basically the same, just have in mind the `current` property in the created ref:

    class Messages extends React.Component {
    
      const messagesEndRef = React.createRef()
    
      componentDidMount () {
        this.scrollToBottom()
      }
      componentDidUpdate () {
        this.scrollToBottom()
      }
      scrollToBottom = () => {
        this.messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
      }
      render () {
        const { messages } = this.props
        return (
          <div>
            {messages.map(message => <Message key={message.id} {...message} />)}
            <div ref={this.messagesEndRef} />
          </div>
        )
      }
    }
    

UPDATE:

Now that hooks are available, I'm updating the answer to add the use of the `useRef` and `useEffect` hooks, the real thing doing the magic (React refs and `scrollIntoView` DOM method) remains the same:

    import React, { useEffect, useRef } from 'react'
    
    const Messages = ({ messages }) => {
    
      const messagesEndRef = useRef(null)
    
      const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
      }
    
      useEffect(() => {
        scrollToBottom()
      }, [messages]);
    
      return (
        <div>
          {messages.map(message => <Message key={message.id} {...message} />)}
          <div ref={messagesEndRef} />
        </div>
      )
    }
    

Also made a (very basic) codesandbox if you wanna check the behaviour [https://codesandbox.io/s/scrolltobottomexample-f90lz](https://codesandbox.io/s/scrolltobottomexample-f90lz)

Do not use [`findDOMNode`](https://github.com/yannickcr/eslint-plugin-react/issues/678) ["because it blocks certain improvements in React in the future"](https://github.com/jsx-eslint/eslint-plugin-react/issues/678#issue-165177220)

Class components with ref
=========================

    class MyComponent extends Component {
      componentDidMount() {
        this.scrollToBottom();
      }
    
      componentDidUpdate() {
        this.scrollToBottom();
      }
    
      scrollToBottom() {
        this.el.scrollIntoView({ behavior: 'smooth' });
      }
    
      render() {
        return <div ref={el => { this.el = el; }} />
      }
    }
    

Function components with hooks:
===============================

    import React, { useRef, useEffect } from 'react';
    
    const MyComponent = () => {
      const divRef = useRef(null);
    
      useEffect(() => {
        divRef.current.scrollIntoView({ behavior: 'smooth' });
      });
    
      return <div ref={divRef} />;
    }

Thanks to @enlitement

we should avoid using `findDOMNode`, we can use `refs` to keep track of the components

    render() {
      ...
    
      return (
        <div>
          <div
            className="MessageList"
            ref={(div) => {
              this.messageList = div;
            }}
          >
            { messageListContent }
          </div>
        </div>
      );
    }
    
    
    
    scrollToBottom() {
      const scrollHeight = this.messageList.scrollHeight;
      const height = this.messageList.clientHeight;
      const maxScrollTop = scrollHeight - height;
      this.messageList.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
    }
    
    componentDidUpdate() {
      this.scrollToBottom();
    }
    

reference:

*   [https://facebook.github.io/react/docs/react-dom.html#finddomnode](https://facebook.github.io/react/docs/react-dom.html#finddomnode)
*   [https://www.pubnub.com/blog/2016-06-28-reactjs-chat-app-infinite-scroll-history-using-redux/](https://www.pubnub.com/blog/2016-06-28-reactjs-chat-app-infinite-scroll-history-using-redux/)

The easiest and best way I would recommend is.
----------------------------------------------

_My ReactJS version: 16.12.0_

* * *

> For Class Components
> --------------------

**HTML structure** inside `render()` function

        render()
            return(
                <body>
                    <div ref="messageList">
                        <div>Message 1</div>
                        <div>Message 2</div>
                        <div>Message 3</div>
                    </div>
                </body>
            )
        )
    

`scrollToBottom()` function which will get reference of the element. and scroll according to `scrollIntoView()` function.

      scrollToBottom = () => {
        const { messageList } = this.refs;
        messageList.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
      }
    

and call the above function inside `componentDidMount()` and `componentDidUpdate()`

* * *

> For Functional Components (Hooks)
> ---------------------------------

Import `useRef()` and `useEffect()`

    import { useEffect, useRef } from 'react'
    

Inside your export function, (same as calling a `useState()`)

    const messageRef = useRef();
    

And let's assume you have to scroll when page load,

    useEffect(() => {
        if (messageRef.current) {
          messageRef.current.scrollIntoView(
            {
              behavior: 'smooth',
              block: 'end',
              inline: 'nearest'
            })
        }
      })
    

OR if you want it to trigger once an action performed,

    useEffect(() => {
      if (messageRef.current) {
        messageRef.current.scrollIntoView(
          {
            behavior: 'smooth',
            block: 'end',
            inline: 'nearest'
          })
      }
    },
    [stateVariable])
    

And Finally, to your **HTML structure**

    return(
        <body>
            <div ref={messageRef}> // <= The only different is we are calling a variable here
                <div>Message 1</div>
                <div>Message 2</div>
                <div>Message 3</div>
            </div>
        </body>
    )
    

for more explanation about `Element.scrollIntoView()` visit [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)

More detailed explanation in Callback refs visit [reactjs.org](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)

How to scroll to bottom in react?

在 JavaScript 中等待 iframe 内容加载完成，一般有几种常用的方法，分别是使用 `load` 事件、`DOMContentLoaded` 事件和轮询 `document.readyState` 属性。以下是对这些方法的详细解释和示例：

### 使用 `load` 事件

`load` 事件在 iframe 的所有内容（包括图像、脚本文件等）加载完成后触发。监听 iframe 的 `load` 事件是最简单直接的方法：

```javascript
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
    console.log('Iframe 完全加载完成');
    // 在这里执行其他操作
};
```

或者使用 `addEventListener` 方法：

```javascript
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
    console.log('Iframe 完全加载完成');
    // 在这里执行其他操作
});
```

### 使用 `DOMContentLoaded` 事件

如果你只关心 iframe 的文档内容（不包括像图片这样的资源），可以使用 `DOMContentLoaded` 事件。这个事件在文档被完全加载和解析后立即触发，不需要等待样式表、图片和子框架的加载完成。

```javascript
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    iframeDocument.addEventListener('DOMContentLoaded', function() {
        console.log('Iframe 的 DOM 内容加载完成');
        // 在这里执行其他操作
    });
});
```

### 轮询 `document.readyState`

如果上述事件不适用于你的特定情况（例如，你无法保证能够在 `DOMContentLoaded` 触发之前设置事件监听器），你还可以通过轮询检查 iframe 的 `document.readyState` 属性：

```javascript
var iframe = document.getElementById('myIframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

function checkIframeLoaded() {
    // 检查 iframe 的 document 是否加载完成
    if (iframeDocument.readyState === 'complete' || iframeDocument.readyState === 'interactive') {
        console.log('Iframe 内容加载完成');
        // 在这里执行其他操作
    } else {
        // 如果没有加载完成，再次检查
        setTimeout(checkIframeLoaded, 100);
    }
}

checkIframeLoaded();
```

### 总结
根据您的具体需求，可以选择监听 `load` 事件来等待所有资源加载完毕，或者使用 `DOMContentLoaded` 事件等待 DOM 内容渲染完毕，或者不断轮询 `document.readyState` 属性来确定加载状态。在实际应用中，您可以根据 iframe 中内容的具体情况和您希望执行操作的时机来选择最合适的方法。

首先，我相信你应该影响`src`iframe 的属性，而不是`location`. 其次，挂钩 iframe 的`load`事件来执行更改：

    var myIframe = document.getElementById('righttop');
    myIframe.addEventListener("load", function() {
      this.contentWindow.document.notesform.ID_client.value = Client;
    });
    myIframe.src = 'timesheet_notes.php';
    

再次强调，这一切都假设您指的是**i**框架，而不是框架集。

我想你可以很容易地用 jQuery 来做到这一点... [jQuery Home](http://www.jquery.com) 只需将页面挂接到 jQuery `$ function ()`... 例如

    $(document).ready(function() { 
        $('iframe').load(function() { 
           // write your code here....
        });
    });
    

快速查看此处的文件上传器示例： [Using iframes for multiple file uploads...](http://sushantp.wordpress.com/2009/05/11/using-iframes-for-multiple-file-uploads-and-using-jquery-to-communicate-between-main-document-and-iframes/)

iFrame 可以动态加载元素，使用它们的最佳选择是使用递归：

     $('iframe').ready(function() {
       var triggerMeAgainIfNeeded = function() {
          setTimeout(function() {
              var neededElm = $('.someElementThatLoadedAfterIframe');
               if (neededElm.length > 0) {
                 // do your job
               } else {
                 triggerMeAgainIfNeeded();
               }
           }, 10);
       }
    });

尝试这个简单的解决方案：

    const myIframe = document.querySelector('iframe[name="my-iframe"]');
    const waitForMyIframeToReload = () => (new Promise(resolve => myIframe.addEventListener('load', () => resolve())));
    myIframe.contentWindow.location.reload(true);
    await waitForSdiIframeToReload();
    console.log('I executed after the iframe loaded'));

    <html>
      <body style="height: 100%; width: 100%;">
        <iframe name="my-iframe" src="https://platform.twitter.com/widgets/tweet_button.html" style="height: 100%; width: 100%;"></iframe>
      </body>
    </html>

运行代码片段Hide results

展开片段

How to wait for iframe to load in javascript

在JavaScript中，我们可以通过以下步骤将Canvas画布保存为PNG图像：

1. 获取Canvas元素的引用。
2. 使用`toDataURL`方法将Canvas内容转换为数据URL，指定PNG格式作为参数。
3. 创建一个`<a>`元素并将其`href`属性设置为上一步得到的数据URL，然后设置下载属性（`download`）以提供保存时使用的默认文件名。
4. 触发这个`<a>`元素的点击事件来启动下载。

下面是一个具体的实现例子：

```javascript
// 假设我们有一个id为'myCanvas'的<canvas>元素
const canvas = document.getElementById('myCanvas');

// 将canvas转换为数据URL，'image/png'指定了我们需要PNG格式
const imageURL = canvas.toDataURL('image/png');

// 创建一个a元素用于触发下载
const downloadLink = document.createElement('a');

// 设置下载文件的名称，例如 'my-canvas-image.png'
downloadLink.download = 'my-canvas-image.png';

// 将转换得到的图片URL设为a标签的href属性
downloadLink.href = imageURL;

// 隐藏该元素
downloadLink.style.display = 'none';

// 将该链接元素添加到DOM中
document.body.appendChild(downloadLink);

// 触发a标签的点击事件
downloadLink.click();

// 完成后，从DOM中移除该元素
document.body.removeChild(downloadLink);
```

在这个例子中，一个隐藏的`<a>`元素被创建并添加到了文档中。我们设置了它的`href`属性为Canvas的数据URL，并指定了下载时的文件名。接着，通过程序触发了这个链接的`click`事件，这会导致浏览器开始下载这个PNG图像。

请注意，这种方法在一些情况下可能会受到同源策略的限制。如果Canvas画布上绘制了跨域的图像资源，那么在没有适当的CORS标头的情况下，`toDataURL`方法可能会抛出安全错误。

[FileSaver.js](https://github.com/eligrey/FileSaver.js)应该能够帮助您。

    var canvas = document.getElementById("my-canvas");
    // draw to canvas...
    canvas.toBlob(function(blob) {
        saveAs(blob, "pretty image.png");
    });

我使用此解决方案来设置**文件名**：

HTML：

    <a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>
    <canvas id="canvas"></canvas>
    

JavaScript：

    function download(){
        document.getElementById("downloader").download = "image.png";
        document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    }

我遇到了这个问题，这是最好的解决方案，无需任何外部或额外的脚本库：在 Javascript 标签或文件中创建此函数：我们假设画布是您的画布：

    function download(){
            var download = document.getElementById("download");
            var image = document.getElementById("canvas").toDataURL("image/png")
                        .replace("image/png", "image/octet-stream");
            download.setAttribute("href", image);
    
        }
    

在 HTML 的正文部分中指定按钮：

    <a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>
    

这是有效的，下载链接看起来像一个按钮。在 Firefox 和 Chrome 中测试。

How to save canvas as png image

在JavaScript中，要实现页面截图功能，通常不会直接使用`canvas`元素来完成，因为`canvas`是HTML5的一部分，它更适合用来绘制图像、制作动画等。页面截图功能通常需要捕获当前页面的DOM并转换为图像，这可以通过HTML2Canvas等第三方库来完成。

HTML2Canvas是一个非常流行的JavaScript库，它可以将HTML元素捕获并转换为canvas图像。以下是使用HTML2Canvas实现页面截屏的基本步骤：

1. 首先，你需要在你的网页中引入HTML2Canvas库。你可以从HTML2Canvas的官网下载库文件或者通过CDN引入：

    ```html
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
    ```

2. 接下来，在JavaScript中，你需要调用`html2canvas`函数并传入你想要截图的DOM元素：

    ```javascript
    html2canvas(document.body).then(canvas => {
        // 你现在可以对canvas做你想做的事情了，比如添加到页面中显示
        document.body.appendChild(canvas);
    });
    ```

在这个例子中，我使用`document.body`作为参数，意味着整个页面将被截图。你也可以指定其他的DOM元素以截取页面的一部分。

3. 一旦你获得了canvas元素，你可以使用`toDataURL`函数将canvas转换为图像数据URL，然后你可以将它作为图片的`src`属性，或者使用JavaScript下载这个图像：

    ```javascript
    html2canvas(document.body).then(canvas => {
        // 转换为数据URL
        var imgData = canvas.toDataURL('image/png');

        // 创建一个新的Image元素并设置src属性
        var img = new Image();
        img.src = imgData;
        document.body.appendChild(img);

        // 或者创建一个下载链接
        var a = document.createElement('a');
        a.href = imgData;
        a.download = 'screenshot.png';
        a.click();
    });
    ```

使用HTML2Canvas时，请注意，由于跨域限制，你可能无法截图那些非同源图片和样式。此外，对于复杂的页面布局和高级的CSS特性（比如3D变换、滤镜等），HTML2Canvas可能无法完美地捕捉。

这种方法通过JavaScript和HTML2Canvas库，使得在不同的应用场景下，可以便捷地实现页面截图功能。

之前有人问过一个和这个有点相似的问题。滚动到 Youtube 底部并单击“报告错误”链接。Google 的反馈工具（Javascript 驱动）基本上执行您所描述的操作。从我查看的代码来看，它使用画布并有一个基于 JavaScript 的 JPEG 编码器，可以构建 JPG 图像并发送给 Google。

这肯定需要大量工作，但我相信您可以完成类似的事情。

如果可以选择商业解决方案，请查看[SnapEngage](http://snapengage.com)。单击右上角的“帮助”按钮即可查看其实际情况。这是屏幕截图：-

![在此输入图像描述](https://i.stack.imgur.com/VPHuO.png)

设置非常简单，您只需复制并粘贴几行 JavaScript 代码即可。

SnapEngage 使用 Java Applet 来截取屏幕截图，[这](http://www.barklund.org/blog/2009/10/14/how-snapabug-works/)是一篇有关其工作原理的博客文章。

How to take a screenshot of the page using canvas

`requestAnimationFrame`（简写为`rAF`）之所以在性能上优于`setInterval`或`setTimeout`，主要有以下几个原因：

### 1. 浏览器优化

`requestAnimationFrame`是专门为动画设计的API，浏览器知道您通过这个函数请求的回调是用于绘制动画的。因此，浏览器可以对动画进行优化，包括减少在不可见标签页中的动画的帧率，或者是在动画不在屏幕上时停止动画，这样可以提高性能并减少能耗。

### 2. 屏幕刷新率同步

`requestAnimationFrame`回调执行的频率通常与浏览器的屏幕刷新率同步。大多数屏幕有60Hz的刷新率，意味着屏幕每秒刷新60次。`rAF`会尽可能匹配这个频率，每次屏幕刷新时更新一次动画，从而创建平滑的视觉效果。而`setInterval`和`setTimeout`则没有这样的机制，可能会导致动画出现掉帧，或者动画更新与屏幕刷新不同步，造成不必要的计算和屏幕撕裂。

### 3. 减少页面重排和重绘

使用`requestAnimationFrame`进行动画处理，浏览器可以将动画的视觉更新和DOM更新安排在同一个浏览器的绘制周期内，这样可以减少页面重排（layout）和重绘（repaint）的次数，提高性能。

### 4. CPU节能

当使用`setInterval`或`setTimeout`时，如果设定的时间间隔很短，即使元素不可见，它们也会继续运行，这将不必要地占用CPU资源。`requestAnimationFrame`会智能调整，当用户切换到其他标签或最小化窗口时，动画会暂停，这有助于减少CPU消耗，特别是在移动设备上。

### 示例

考虑一个简单的动画例子，比如一个元素的左右滑动。使用`setInterval`可能会这样编写代码：

```javascript
let position = 0;
setInterval(function() {
  position += 5;
  element.style.transform = `translateX(${position}px)`;
}, 16); // 大约对应60Hz刷新率的间隔
```

这段代码会尝试每16毫秒移动元素，但没有机制确保它与屏幕刷新同步。

而使用`requestAnimationFrame`，代码如下：

```javascript
let position = 0;
function step() {
  position += 5;
  element.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(step);
}
requestAnimationFrame(step);
```

这里，动画逻辑与浏览器的刷新率同步，能够根据屏幕刷新情况智能调整执行频率。

综上所述，`requestAnimationFrame`提供了更高效、更平滑的动画体验，尤其是对于复杂或高性能需求的动画，这比使用`setInterval`或`setTimeout`要好得多。

高品质动画。
------

`requestAnimationFrame``setTimeout`产生更高质量的动画，完全消除使用或 时可能发生的闪烁和剪切`setInterval`，并减少或完全消除跳帧。

#### _剪切_

是在显示扫描中途将新的画布缓冲区呈现给显示缓冲区时，导致由不匹配的动画位置引起的剪切线。

#### _闪烁_

是在画布完全渲染之前将画布缓冲区呈现给显示缓冲区时引起的。

#### _跳帧_

这是由于渲染帧之间的时间与显示硬件不精确同步而引起的。每隔这么多帧就会跳过一帧，从而产生不一致的动画。（有一些方法可以减少这种情况，但我个人认为这些方法会产生更糟糕的总体结果）由于大多数设备每秒使用 60 帧（或倍数），导致每 16.666...ms 产生一个新帧，并且计时器并使用整`setTimeout`数值`setInterval`，它们永远无法完美匹配帧速率（如果有的话，四舍五入到 17ms `interval = 1000/60`）

* * *

### 一个演示抵得上一千个字。

**更新问题**[requestAnimationFrame循环不正确的fps](https://stackoverflow.com/a/43381828/3877726)的答案显示了setTimeout的帧时间如何不一致并将其与requestAnimationFrame进行比较。

该演示显示了一个简单的动画（条纹在屏幕上移动），单击鼠标按钮将在所使用的渲染更新方法之间切换。

使用了多种更新方法。动画工件的确切外观将取决于您正在运行的硬件设置。您会在条纹的运动中寻找轻微的抽搐

> 笔记。您可能关闭了显示同步或关闭了硬件加速，这将影响所有计时方法的质量。低端设备也可能在动画方面遇到问题

*   **计时器** 使用 setTimeout 来设置动画。时间为1000/60
    
*   **RAF 最佳质量**，使用 requestAnimationFrame 进行动画处理
    
*   **双定时器**，使用两个定时器，一个每 1000/60 清除调用一次，另一个用于渲染。
    
    **2019 年 10 月更新**计时器呈现内容的方式发生了一些变化。为了表明它`setInterval`无法与显示刷新正确同步，我更改了双计时器示例，以表明使用多个计时器`setInterval`仍然会导致严重闪烁。这将产生的闪烁程度取决于硬件设置。
    
*   **RAF 具有定时动画**，使用 requestAnimationFrame 但使用帧运行时间进行动画处理。这种技术在动画中很常见。我相信它有缺陷，但我把它留给观众
    
*   **带有定时动画的计时器**。作为“具有定时动画的 RAF”，在本例中用于克服“计时器”方法中出现的跳帧。我再次认为这很糟糕，但游戏社区发誓这是当您无法访问显示刷新时使用的最佳方法
    

    /** SimpleFullCanvasMouse.js begin **/
    
    var backBuff;
    var bctx;
    const STRIPE_WIDTH = 250;
    var textWidth;
    const helpText = "Click mouse to change render update method.";
    var onResize = function(){
        if(backBuff === undefined){
            backBuff = document.createElement("canvas")    ;
            bctx = backBuff.getContext("2d");
            
        }
        
        backBuff.width = canvas.width;
        backBuff.height = canvas.height;
        bctx.fillStyle = "White"
        bctx.fillRect(0,0,w,h);
        bctx.fillStyle = "Black";
        for(var i = 0;  i < w; i += STRIPE_WIDTH){
            bctx.fillRect(i,0,STRIPE_WIDTH/2,h)   ;
            
        }
        ctx.font = "20px arial";
        ctx.textAlign = "center";
        ctx.font = "20px arial";
        textWidth = ctx.measureText(helpText).width;
        
    };
    var tick = 0;
    var displayMethod = 0;
    var methods = "Timer,RAF Best Quality,Dual Timers,RAF with timed animation,Timer with timed animation".split(",");
    var dualTimersActive = false;
    var hdl1, hdl2
    
    function display(timeAdvance){  // put code in here
    
        tick += timeAdvance;
        tick %= w;
    
    
        ctx.drawImage(backBuff,tick-w,0);
        ctx.drawImage(backBuff,tick,0);
        if(textWidth !== undefined){
            ctx.fillStyle = "rgba(255,255,255,0.7)";
            ctx.fillRect(w /2 - textWidth/2, 0,textWidth,40);
            ctx.fillStyle = "black";
            ctx.fillText(helpText,w/2, 14);
            ctx.fillText("Display method : " + methods[displayMethod],w/2, 34);
        }
        if(mouse.buttonRaw&1){
            displayMethod += 1;
            displayMethod %= methods.length;
            mouse.buttonRaw = 0;
            lastTime = null;
            tick = 0;
            if(dualTimersActive) {
                 dualTimersActive = false;
                 clearInterval(hdl1);
                 clearInterval(hdl2);
                 updateMethods[displayMethod]()             
            }
        }
    }
    
    
    
    
    
    
    
    
    //==================================================================================================
    // The following code is support code that provides me with a standard interface to various forums.
    // It provides a mouse interface, a full screen canvas, and some global often used variable 
    // like canvas, ctx, mouse, w, h (width and height), globalTime
    // This code is not intended to be part of the answer unless specified and has been formated to reduce
    // display size. It should not be used as an example of how to write a canvas interface.
    // By Blindman67
    const U = undefined;const RESIZE_DEBOUNCE_TIME = 100;
    var w,h,cw,ch,canvas,ctx,mouse,createCanvas,resizeCanvas,setGlobals,globalTime=0,resizeCount = 0; 
    var L = typeof log === "function" ? log : function(d){ console.log(d); }
    createCanvas = function () { var c,cs; cs = (c = document.createElement("canvas")).style; cs.position = "absolute"; cs.top = cs.left = "0px"; cs.zIndex = 1000; document.body.appendChild(c); return c;}
    resizeCanvas = function () {
        if (canvas === U) { canvas = createCanvas(); } canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext("2d"); 
        if (typeof setGlobals === "function") { setGlobals(); } if (typeof onResize === "function"){ resizeCount += 1; setTimeout(debounceResize,RESIZE_DEBOUNCE_TIME);}
    }
    function debounceResize(){ resizeCount -= 1; if(resizeCount <= 0){ onResize();}}
    setGlobals = function(){ cw = (w = canvas.width) / 2; ch = (h = canvas.height) / 2; mouse.updateBounds(); }
    mouse = (function(){
        function preventDefault(e) { e.preventDefault(); }
        var mouse = {
            x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false, buttonRaw : 0, over : false, bm : [1, 2, 4, 6, 5, 3], 
            active : false,bounds : null, crashRecover : null, mouseEvents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",")
        };
        var m = mouse;
        function mouseMove(e) {
            var t = e.type;
            m.x = e.clientX - m.bounds.left; m.y = e.clientY - m.bounds.top;
            m.alt = e.altKey; m.shift = e.shiftKey; m.ctrl = e.ctrlKey;
            if (t === "mousedown") { m.buttonRaw |= m.bm[e.which-1]; }  
            else if (t === "mouseup") { m.buttonRaw &= m.bm[e.which + 2]; }
            else if (t === "mouseout") { m.buttonRaw = 0; m.over = false; }
            else if (t === "mouseover") { m.over = true; }
            else if (t === "mousewheel") { m.w = e.wheelDelta; }
            else if (t === "DOMMouseScroll") { m.w = -e.detail; }
            if (m.callbacks) { m.callbacks.forEach(c => c(e)); }
            if((m.buttonRaw & 2) && m.crashRecover !== null){ if(typeof m.crashRecover === "function"){ setTimeout(m.crashRecover,0);}}        
            e.preventDefault();
        }
        m.updateBounds = function(){
            if(m.active){
                m.bounds = m.element.getBoundingClientRect();
            }
            
        }
        m.addCallback = function (callback) {
            if (typeof callback === "function") {
                if (m.callbacks === U) { m.callbacks = [callback]; }
                else { m.callbacks.push(callback); }
            } else { throw new TypeError("mouse.addCallback argument must be a function"); }
        }
        m.start = function (element, blockContextMenu) {
            if (m.element !== U) { m.removeMouse(); }        
            m.element = element === U ? document : element;
            m.blockContextMenu = blockContextMenu === U ? false : blockContextMenu;
            m.mouseEvents.forEach( n => { m.element.addEventListener(n, mouseMove); } );
            if (m.blockContextMenu === true) { m.element.addEventListener("contextmenu", preventDefault, false); }
            m.active = true;
            m.updateBounds();
        }
        m.remove = function () {
            if (m.element !== U) {
                m.mouseEvents.forEach(n => { m.element.removeEventListener(n, mouseMove); } );
                if (m.contextMenuBlocked === true) { m.element.removeEventListener("contextmenu", preventDefault);}
                m.element = m.callbacks = m.contextMenuBlocked = U;
                m.active = false;
            }
        }
        return mouse;
    })();
    
    
    resizeCanvas(); 
    mouse.start(canvas,true); 
    onResize()
    var lastTime = null;
    window.addEventListener("resize",resizeCanvas); 
    function clearCTX(){
        ctx.setTransform(1,0,0,1,0,0); // reset transform
        ctx.globalAlpha = 1;           // reset alpha
        ctx.clearRect(0,0,w,h); // though not needed this is here to be fair across methods and demonstrat flicker
    }
    
    
    
    function dualUpdate(){
        if(!dualTimersActive) {
            dualTimersActive = true;
            hdl1 = setInterval( clearCTX, 1000/60);
            hdl2 = setInterval(() => display(10), 1000/60);
        }
    }
    function timerUpdate(){
        timer = performance.now();
        if(!lastTime){
            lastTime = timer;
        }
        var time = (timer-lastTime) / (1000/60);
        lastTime = timer;    
        setTimeout(updateMethods[displayMethod],1000/60);
        clearCTX();
        display(10*time);
    }
    function updateRAF(){ 
        clearCTX();
        requestAnimationFrame(updateMethods[displayMethod]);
        display(10);  
    }
    function updateRAFTimer(timer){ // Main update loop
    
        clearCTX();
        requestAnimationFrame(updateMethods[displayMethod]);
        if(!timer){
            timer = 0;
        }
        if(!lastTime){
            lastTime = timer;
        }
        var time = (timer-lastTime) / (1000/60);
        display(10 * time);  
        lastTime = timer;
    }
    
    displayMethod = 1;
    var updateMethods = [timerUpdate,updateRAF,dualUpdate,updateRAFTimer,timerUpdate]
    updateMethods[displayMethod]();
    
    /** SimpleFullCanvasMouse.js end **/

运行代码片段Hide results

展开片段

Why is requestanimationframe better than setinterval or settimeout

在浏览器中检测操作系统是否处于深色模式，我们可以使用CSS的媒体查询（Media Queries），具体来说是`prefers-color-scheme`这个媒体特性。`prefers-color-scheme` CSS媒体特性用于检测用户系统的颜色主题偏好，它可以让我们根据用户系统设置为深色模式或者浅色模式来调整网站或者应用的配色。

以下是如何使用CSS来根据操作系统的深色模式设置来改变网页样式的示例：

```css
/* 当操作系统设置为深色模式时，应用以下样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: white;
  }
}

/* 当操作系统设置为浅色模式时，应用以下样式 */
@media (prefers-color-scheme: light) {
  body {
    background-color: #FFF;
    color: black;
  }
}
```

如果你想在JavaScript中检测这个偏好，可以使用`window.matchMedia`方法来查询`prefers-color-scheme`。这能够让你在JavaScript中根据深色模式或浅色模式动态地改变样式或执行其他操作。下面是一个例子：

```javascript
// 检测深色模式
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // 操作系统设置为深色模式
  // 在这里可以编写适应深色模式的代码
}

// 使用matchMedia添加监听器，在深色模式与浅色模式之间切换时执行操作
window.matchMedia('(prefers-color-scheme: dark)').addListener(function(e) {
  if (e.matches) {
    // 现在系统设置为深色模式
  } else {
    // 现在系统设置为浅色模式
  }
});
```

注意，`prefers-color-scheme`是一个相对较新的Web特性，可能在一些旧版浏览器中不被支持。因此，对于兼容性考虑，你可能还需要实现一些后备方案，或者使用JavaScript库来帮助检测。

新标准已在[W3C 媒体查询级别 5 中](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)注册。

**注意：目前仅在**[Safari 技术预览版 68](https://developer.apple.com/safari/technology-preview/release-notes/)中可用[](https://developer.apple.com/safari/technology-preview/release-notes/)

如果用户偏好是`light`：

    /* Light mode */
    @media (prefers-color-scheme: light) {
        body {
            background-color: white;
            color: black;
        }
    }
    

如果用户偏好是`dark`：

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }
    

`no-preference`如果用户没有偏好，也可以选择。但我建议你在这种情况下使用普通的 CSS 并正确层叠你的 CSS。

> **编辑**（2018 年 12 月 7 日）：

在[Safari 技术预览版 71](https://developer.apple.com/safari/technology-preview/release-notes/)中，他们宣布了 Safari 中的切换开关，以使测试更容易。我还制作了一个[测试页面](https://davy.dev/darkmode)来查看浏览器的行为。

如果您安装了**Safari 技术预览版 71，**您可以通过以下方式激活：

> 开发 > 实验功能 > 深色模式 CSS 支持

然后，如果您打开[测试页面](https://davy.dev/darkmode)并打开元素检查器，您将看到一个新图标来切换暗/亮模式。

[![切换暗/亮模式](https://i.stack.imgur.com/z2SYe.png)](https://i.stack.imgur.com/z2SYe.png)

* * *

> **编辑**（2019 年 2 月 11 日）：Apple 推出新的[Safari 12.1](https://developer.apple.com/documentation/safari_release_notes/safari_12_1_release_notes)深色模式

* * *

> **编辑**（2019 年 9 月 5 日）：目前世界上 25% 的人可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)
> 
> 即将推出的浏览器：
> 
> *   iOS 13（我猜它将在苹果主题演讲后下周发布）
> *   EdgeHTML 76（不确定何时发货）

* * *

> **编辑**（2019 年 11 月 5 日）：目前世界上 74% 的人可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)

* * *

> **编辑**（2020 年 2 月 3 日）：Microsoft Edge 79 支持深色模式。 （2020 年 1 月 15 日发布）
> 
> 我的建议是：您应该考虑实施深色模式，因为大多数用户现在都可以使用它（对于您网站的夜间用户）。
> 
> **注意：**现在所有主流浏览器都支持深色模式，除了：IE、Edge

* * *

> **编辑**（2020 年 11 月 19 日）：目前世界上 88% 的人可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)
> 
> CSS 框架[Tailwind CSS v2.0](https://tailwindcss.com/)支持深色模式。 （2020年11月18日发布）

* * *

> **编辑**（2020 年 12 月 2 日）：
> 
> Google Chrome 在开发工具中添加了深色主题模拟。来源：[developer.chrome.com](https://developer.chrome.com/blog/new-in-devtools-96/#auto-dark-mode)

* * *

> **编辑**（2022 年 5 月 2 日）：
> 
> 目前全球 90% 的人都可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)

* * *

> **编辑**（2024 年 1 月 23 日）：
> 
> 目前全球 96.5% 的人都可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)

如果你想从JS中检测它，可以使用以下代码：

    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        // dark mode
    }
    

要观察变化：

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
        const newColorScheme = e.matches ? "dark" : "light";
    });

规范已启动（见上文），可作为媒体查询使用。[某些内容](https://bugs.webkit.org/show_bug.cgi?id=186606)已经登陆 Safari，另请参阅[此处](https://github.com/WebKit/webkit/commit/46198bd7636f0d1f85e36d830fd3108707d4c169)。所以理论上你可以在 Safari/Webkit 中执行此操作：

    @media (prefers-dark-interface) { color: white; background: black }
    

[MDN 上提到了](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)`inverted-colors`CSS媒体功能。 Plug：我[在这里](https://medium.freecodecamp.org/how-to-get-dark-mode-working-with-css-740ad31e22e)写了关于黑暗模式的博客。[](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)[](https://medium.freecodecamp.org/how-to-get-dark-mode-working-with-css-740ad31e22e)

How to detect if the os is in dark mode in browsers

在网页上检查滚动条是否可见通常有几种方法，常见的是使用JavaScript或者通过CSS样式来判断。以下是几种检查滚动条是否可见的方法：

### 使用JavaScript

#### 方法1: 比较元素的高度

```javascript
function isScrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
}

// 使用方法
let element = document.getElementById('myElement'); // 需要检查的元素
let scrollbarVisible = isScrollbarVisible(element);
console.log('滚动条是否可见:', scrollbarVisible);
```

#### 方法2: 计算元素的宽度差

```javascript
function isHorizontalScrollbarVisible(element) {
  return element.scrollWidth > element.clientWidth;
}

function isVerticalScrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
}

// 使用方法
let element = document.getElementById('myElement'); // 需要检查的元素
let horizontalScrollbarVisible = isHorizontalScrollbarVisible(element);
let verticalScrollbarVisible = isVerticalScrollbarVisible(element);
console.log('水平滚动条是否可见:', horizontalScrollbarVisible);
console.log('垂直滚动条是否可见:', verticalScrollbarVisible);
```

### 使用CSS

通过CSS，您可以更改元素的 `overflow` 属性来控制滚动条的可见性。这不是一个检测滚动条是否已经可见的方法，而是确保在需要时显示或隐藏滚动条的方法。

```css
/* 总是显示垂直滚动条 */
.element-always-show-vertical-scrollbar {
  overflow-y: scroll;
}

/* 当需要时显示垂直滚动条 */
.element-auto-vertical-scrollbar {
  overflow-y: auto;
}

/* 隐藏垂直滚动条 */
.element-hide-vertical-scrollbar {
  overflow-y: hidden;
}

/* 对于水平滚动条，替换 'y' 为 'x' */
```

请注意，以上方法检测的是元素级别的滚动条是否可见。如果需要检测整个页面的滚动条，可以将 `element` 替换为 `document.body` 或者 `document.documentElement`。

一个小插件。

    (function($) {
        $.fn.hasScrollBar = function() {
            return this.get(0).scrollHeight > this.height();
        }
    })(jQuery);
    

像这样使用它，

    $('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..
    

已测试可在 Firefox、Chrome、IE6、7、8 上运行

`body`但在标签选择器上无法正常工作

[演示](http://jsfiddle.net/reigel/p3FFL/)
=======================================

* * *

编辑

我发现当水平滚动条导致垂直滚动条出现时，此功能不起作用......

我找到了另一个解决方案...使用`clientHeight`

    return this.get(0).scrollHeight > this.get(0).clientHeight;

[`Element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)您可以使用和属性的组合来完成此操作[`Element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)。

根据MDN：

> Element.scrollHeight只读属性是元素内容高度的度量，包括由于溢出而在屏幕上不可见的内容**。****scrollHeight 值等于元素所需的最小 clientHeight，以便在不使用垂直滚动条的情况下适应视点中的所有内容。**它包括元素内边距，但不包括其边距。

和：

> Element.clientHeight只读属性返回元素的内部高度（以像素为单位），包括填充，但不包括水平滚动条高度、边框或边距**。**
> 
> clientHeight 可以计算为 CSS 高度 + CSS 填充 - 水平滚动条的高度（如果存在）。

因此，如果滚动高度大于客户端高度，该元素将显示滚动条，因此您的问题的答案是：

    function scrollbarVisible(element) {
      return element.scrollHeight > element.clientHeight;
    }

也许是一个更简单的解决方案。

    if ($(document).height() > $(window).height()) {
        // scrollbar
    }

我应该对雷格尔所说的做一些修改：

    (function($) {
        $.fn.hasScrollBar = function() {
            return this[0] ? this[0].scrollHeight > this.innerHeight() : false;
        }
    })(jQuery);
    

insideHeight 计算控件的高度及其顶部和底部填充

这扩展了@Reigel 的答案。它将返回水平或垂直滚动​​条的答案。

    (function($) {
        $.fn.hasScrollBar = function() {
            var e = this.get(0);
            return {
                vertical: e.scrollHeight > e.clientHeight,
                horizontal: e.scrollWidth > e.clientWidth
            };
        }
    })(jQuery);
    

例子：

    element.hasScrollBar()             // Returns { vertical: true/false, horizontal: true/false }
    element.hasScrollBar().vertical    // Returns true/false
    element.hasScrollBar().horizontal  // Returns true/false

How can i check if a scrollbar is visible

当我们需要检查 `webkit-input-placeholder`的样式时，可以通过浏览器内置的开发者工具进行操作。以下是具体的步骤： 

1. 首先，使用浏览器打开包含有占位符文本（placeholder）的输入框（通常是 `<input>`或 `<textarea>`标签）的网页。
2. 接着，右键点击需要检查的输入框，并选择“检查”（Inspect）或者使用快捷键（如在Chrome中通常是 `Ctrl+Shift+I`或 `Cmd+Opt+I`）打开开发者工具。
3. 在开发者工具的元素（Elements）面板中，定位到相对应的输入框的HTML代码，确保它已经被选中。
4. 在样式（Styles）侧边栏，你通常可以看到元素的CSS样式。但是由于 `::placeholder`是一个伪元素，它的样式可能不会直接展现出来。
5. 要检查 `webkit-input-placeholder`的样式，我们需要在样式侧边栏中手动添加一个新的伪元素选择器。比如，如果你的输入框有一个类名为 `.my-input`，那么你可以添加如下样式规则来检查：

```css
.my-input::-webkit-input-placeholder {
    /* CSS 规则 */
}
```

6. 添加后，如果输入框有相应的 `placeholder`样式，它们将会出现在样式侧边栏中，你就可以检查和修改这些样式。例如，你可以更改文字的颜色、字体大小、字体样式等。
7. 如果你需要看到实时的变化，可以在开发者工具中直接编辑这些样式规则，并观察输入框中的占位符文本样式如何变化。

举例来说，如果我想要检查一个类名为 `.example-input`的输入框的占位符样式，并且想将其颜色改为灰色，我可以这样操作：

1. 右键点击对应的输入框，选择“检查”打开开发者工具。
2. 在Elements面板中找到 `<input class="example-input" placeholder="Enter text...">`这一行。
3. 在Styles侧边栏中，点击"+ New Style Rule"按钮。
4. 在新的样式规则中输入 `.example-input::-webkit-input-placeholder`。
5. 接着添加 `color: grey;`这一CSS属性。
6. 随即可以看到输入框中占位符的文字颜色变为了灰色。

通过这种方式，开发人员可以很方便地调试和定制占位符的样式，以满足设计的需求。这对于保证网页在不同浏览器中的一致性和提升用户体验来说非常重要。

我想到了。

诀窍是在 Chrome 开发者工具的“设置”面板中启用“显示用户代理影子 DOM”：

![在此输入图像描述](https://i.stack.imgur.com/zFIYW.png)

要进行设置，请单击开发工具面板右上角的齿轮图标，然后确保选择左侧的“首选项”选项卡，找到“元素”标题，然后选中下面的“显示用户代理影子 DOM”复选框标题。

这样，您现在可以看到它：

![在此输入图像描述](https://i.stack.imgur.com/7Y0C0.png)

1.  对于 Google Chrome 版本 69：
2.  打开检查元素：在 Mac 上 ⌘ + Shift + C，在 Windows / Linux 上 Ctrl + Shift + C 或 F12。
3.  点击右上角的“⋮”按钮，然后进入设置
4.  在设置中单击首选项 > 单击显示用户代理 Shadow DOM

下图显示了该过程：

转到设置 > 首选项：  
[![转到设置 > 首选项](https://i.stack.imgur.com/QH98H.jpg)](https://i.stack.imgur.com/QH98H.jpg)

单击显示用户代理 Shadow DOM：  
[![在此输入图像描述](https://i.stack.imgur.com/kVEKn.jpg)](https://i.stack.imgur.com/kVEKn.jpg)

查看placeholder的CSS：  
[![在此输入图像描述](https://i.stack.imgur.com/gOkUi.jpg)](https://i.stack.imgur.com/gOkUi.jpg)

How to inspect webkit input placeholder with developer tools

在 JavaScript 中加载 CSS 文件，常用的方法包括：

1. **使用 JavaScript 创建 `<link>` 标签并添加到 `<head>` 中**

```javascript
var head = document.head;
var link = document.createElement('link');

link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'path/to/your/cssfile.css';

head.appendChild(link);
```

2. **使用 jQuery（如果你的项目中包含了 jQuery）**

```javascript
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/your/cssfile.css">');
```

3. **使用 `import` 语句在 JavaScript 模块中**

如果你在使用支持模块的现代 JavaScript 中，可以使用 `import` 语法。

```javascript
import './path/to/your/cssfile.css';
```

请注意，这通常需要构建工具（如 Webpack 或 Parcel）来处理 CSS 文件的导入。

4. **使用 `fetch` API 动态获取 CSS 内容并插入**

```javascript
fetch('path/to/your/cssfile.css')
    .then(response => response.text())
    .then(css => {
        var style = document.createElement('style');
        style.textContent = css;
        document.head.appendChild(style);
    });
```

以上就是一些在 JavaScript 中加载 CSS 文件的方法。选择哪种方法取决于你的具体需求和项目的构建环境。

这是“老派”的做法，希望它适用于所有浏览器。理论上，您会`setAttribute`不幸地使用 IE6 并不始终支持它。

    var cssId = 'myCss';  // you could encode the css path itself to generate id..
    if (!document.getElementById(cssId))
    {
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.href = 'http://website.example/css/stylesheet.css';
        link.media = 'all';
        head.appendChild(link);
    }
    

此示例检查 CSS 是否已添加，因此仅添加一次。

将该代码放入 JavaScript 文件中，让最终用户只需包含 JavaScript，并确保 CSS 路径是绝对路径，以便从服务器加载它。

香草JS
====

`head`下面是一个使用纯 JavaScript根据 URL 的文件名部分将 CSS 链接注入到元素中的示例：

    <script type="text/javascript">
    var file = location.pathname.split( "/" ).pop();
    
    var link = document.createElement( "link" );
    link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
    link.type = "text/css";
    link.rel = "stylesheet";
    link.media = "screen,print";
    
    document.getElementsByTagName( "head" )[0].appendChild( link );
    </script>
    

在结束标记之前插入代码`head`，CSS 将在页面呈现之前加载。使用外部 JavaScript ( ) 文件将导致出现无样式内容 ( [FOUC](http://en.wikipedia.org/wiki/Flash_of_unstyled_content)`.js` )的 Flash 。[](http://en.wikipedia.org/wiki/Flash_of_unstyled_content)

如果你使用jquery：

    $('head').append('<link rel="stylesheet" type="text/css" href="style.css">');

我想这个脚本会做这样的事情：

    <script type="text/javascript" src="/js/styles.js"></script>
    

该JS文件包含以下语句：

    if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');
    

如果 javascript 和 css 要引用您的网站，则它们的地址必须是绝对的。

[这篇“用分支技术对 CSS 黑客说不”](http://www.tjkdesign.com/articles/branching.asp)一文讨论了许多 CSS 导入技术。

但是[“使用 JavaScript 动态添加 Portlet CSS 样式表”](http://cse-mjmcl.cse.bris.ac.uk/blog/2005/08/18/1124396539593.html)一文还提到了 CreateStyleSheet 的可能性（IE 的专有方法）：

    <script type="text/javascript">
    //<![CDATA[
    if(document.createStyleSheet) {
      document.createStyleSheet('http://server/stylesheet.css');
    }
    else {
      var styles = "@import url(' http://server/stylesheet.css ');";
      var newSS=document.createElement('link');
      newSS.rel='stylesheet';
      newSS.href='data:text/css,'+escape(styles);
      document.getElementsByTagName("head")[0].appendChild(newSS);
    }
    //]]>

[Element.insertAdjacentHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)具有很好的浏览器支持，并且可以在一行中添加样式表。

    document.getElementsByTagName('head')[0].insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="path/to/style.css" />');

如果您想知道（或等待）样式本身加载，则可以执行以下操作：

    // this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
    // add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)
    
    let fetchStyle = function(url) {
      return new Promise((resolve, reject) => {
        let link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.onload = () => resolve();
        link.onerror = () => reject();
        link.href = url;
    
        let headScript = document.querySelector('script');
        headScript.parentNode.insertBefore(link, headScript);
      });
    };
    

用法：

    fetchStyle(url)
     .then(
       () => console.log("style loaded succesfully"),
       () => console.error("style could not be loaded"),
    );

How to load up css files using javascript

`offsetWidth`、`clientWidth`、`scrollWidth` 以及 `height` 是与 HTML 元素的大小和滚动相关的不同属性。下面我将详细解释它们之间的区别：

### offsetWidth

- **定义**: `offsetWidth` 是元素的布局宽度，包括元素的可视宽度、边框（border）、内边距（padding），但不包括外边距（margin）。
- **使用场景**: 当你需要元素的整体宽度时，包括它的边框和内边距。
- **例子**: 如果一个元素的宽度为100px，左右内边距分别为10px，左右边框宽度分别为1px，那么`offsetWidth`将会是 100 + 10 + 10 + 1 + 1 = 122px。

### clientWidth

- **定义**: `clientWidth` 是元素的内部可视宽度，包括内边距，但不包括边框和垂直滚动条（如果有的话），也不包括外边距。
- **使用场景**: 当你想要获取元素内容区域加上内边距的宽度，但不包括边框或滚动条。
- **例子**: 对于上面同一个元素，`clientWidth` 将会是 100 + 10 + 10 = 120px（假设没有垂直滚动条）。

### scrollWidth

- **定义**: `scrollWidth` 是元素的完整内容宽度，包括因为溢出被隐藏的部分。它包括内边距，但不包括边框和垂直滚动条（如果有的话），也不包括外边距。
- **使用场景**: 当你需要获取元素内容实际占用的总宽度，包括看得见和看不见（溢出部分）的内容。
- **例子**: 如果上面的元素内有足够的内容使其出现水平滚动条，而内容的实际宽度为300px，那么`scrollWidth`将会是 300 + 10 + 10 = 320px。

### height

- **定义**: `height` 不是一个标准的 DOM 属性，它通常指的是通过 CSS 设置的元素的高度（不包括内边距、边框或外边距）。
- **使用场景**: 当你需要定义或获取元素的内容区域的高度时。
- **例子**: 如果你通过 CSS 设置了`height: 200px;`，那么这个元素的内容区域高度就是200px，不考虑其他任何因素。

总结一下，`offsetWidth`和`clientWidth`都是考虑元素在页面布局中占用的实际空间，而`scrollWidth`是元素内容的实际宽度，不管是否可见。另一方面，`height`通常是通过CSS设置的属性，指定了元素的内容区域的高度。这些属性都是针对元素宽度和高度的不同方面的计量。

CSS 盒子模型相当复杂，尤其是在滚动内容时。虽然浏览器使用 CSS 中的值来绘制框，但如果您只有 CSS，则使用 JS 确定所有尺寸并不简单。

这就是为什么每个元素都有六个 DOM 属性以方便您使用：`offsetWidth`、`offsetHeight`、`clientWidth`、`clientHeight`和`scrollWidth`。`scrollHeight`这些是表示当前视觉布局的只读属性，并且它们都是_整数_（因此可能会出现舍入错误）。

让我们详细了解一下它们：

*   `offsetWidth`, `offsetHeight`: 包含所有边框的视觉框的大小。可以通过添加`width`/以及 paddings 和 borders来计算`height`，如果元素有`display: block`
*   `clientWidth`, `clientHeight`：框内容的可视部分，不包括边框或滚动条，但包括填充。不能直接从CSS计算，取决于系统的滚动条大小。
*   `scrollWidth`, `scrollHeight`：框所有内容的大小，包括当前隐藏在滚动区域之外的部分。不能直接从CSS计算，要看内容。

[![CSS2 盒子模型](https://i.stack.imgur.com/5AAyW.png)](http://jsfiddle.net/y8Y32/25/)

### 尝试一下：[jsFiddle](http://jsfiddle.net/y8Y32/25/)

* * *

由于`offsetWidth`考虑了滚动条宽度，我们可以使用它通过公式计算滚动条宽度

    scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth
    

不幸的是，我们可能会遇到舍入误差，因为`offsetWidth`和`clientWidth`始终是整数，而实际大小可能是缩放级别不是 1 的小数。

请注意，这

    scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth
    

在 Chrome 中无法可靠**地**工作，因为 Chrome 返回时`width`滚动条已被减去。 （此外，Chrome 将 paddingBottom 渲染到滚动内容的底部，而其他浏览器则不会）

我创建了一个更全面、更清晰的版本，有些人可能会发现它对于记住哪个名称对应哪个值很有用。我使用 Chrome 开发工具的颜色代码和对称组织的标签，以便更快地进行类比：

[![在此输入图像描述](https://i.stack.imgur.com/Cl1IA.png)](https://i.stack.imgur.com/Cl1IA.png)

*   注 1：`clientLeft`如果文本方向设置为从右到左，还包括垂直滚动条的宽度（因为在这种情况下滚动条显示在左侧）
    
*   注 2：最外面的线代表最接近的**_定位_**`position`父元素（其属性设置为不同于 `static`或 的值的元素`initial`）。因此，如果直接容器不是**_定位_** 元素，则该行不代表层次结构中的第一个容器，而是代表层次结构中更高的另一个元素。如果没有 找到**_定位的_**`html`父元素，浏览器将采用or`body` 元素作为参考
    

* * *

希望有人觉得它有用，只是我的 2 美分；）

如果您想使用scrollWidth来获取**“真实”** **内容宽度/高度**（因为内容可能比css定义的宽度/高度框更大），则scrollWidth **/Height非常不可靠**，因为某些浏览器似乎“移动”了paddingRIGHT & paddingBOTTOM 如果内容太大。然后，他们将填充物放置在“太宽/太高的内容”的右侧/底部（见下图）。

**\==>**因此，要在某些浏览器中获得真实内容宽度，您必须从滚动宽度中减去两个填充，而在某些浏览器中，您只需减去左侧填充。

我找到了一个解决方案，并想将其添加为评论，但不允许。所以我拍了这张照片，并使其在“移动的填充”和“不可靠的滚动宽度”方面变得更加清晰。**在蓝色区域中，您可以找到有关如何获得“真实”内容宽度的解决方案！**

希望这有助于让事情变得更加清晰！

[![在此输入图像描述](https://i.stack.imgur.com/JY33m.png)](https://i.stack.imgur.com/JY33m.png)

MDN 上有一篇很好的文章解释了这些概念背后的理论： [https ://developer.mozilla.org/en-US/docs/Web/API/CSS\_Object\_Model/Det​​ermining\_the\_dimensions\_of\_elements](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)

它还解释了boundingClientRect的宽度/高度与offsetWidth/offsetHeight之间的重要概念差异。

然后，为了证明这个理论是对还是错，你需要一些测试。这就是我在这里所做的：[https://github.com/lingtalfi/dimensions-cheatsheet](https://github.com/lingtalfi/dimensions-cheatsheet)

它正在测试 chrome53、ff49、safari9、edge13 和 ie11。

测试结果证明该理论总体上是正确的。对于测试，我创建了 3 个 div，每个 div 包含 10 个 lorem ipsum 段落。一些 CSS 应用于它们：

    .div1{
        width: 500px;
        height: 300px;
        padding: 10px;
        border: 5px solid black;
        overflow: auto;
    }
    .div2{
        width: 500px;
        height: 300px;
        padding: 10px;
        border: 5px solid black;
        box-sizing: border-box;
        overflow: auto;
    }
    
    .div3{
        width: 500px;
        height: 300px;
        padding: 10px;
        border: 5px solid black;
        overflow: auto;
        transform: scale(0.5);
    }
    

结果如下：

*   分区1
    
    *   偏移宽度：530（chrome53、ff49、safari9、edge13、ie11）
        
    *   偏移高度：330（chrome53、ff49、safari9、edge13、ie11）
        
    *   bcr.宽度：530（chrome53、ff49、safari9、edge13、ie11）
        
    *   bcr.高度：330（chrome53、ff49、safari9、edge13、ie11）
        
    *   客户端宽度：505（chrome53、ff49、safari9）
        
    *   客户端宽度：508（边缘13）
        
    *   客户端宽度：503（即11）
        
    *   客户端高度：320（chrome53、ff49、safari9、edge13、ie11）
        
    *   滚动宽度：505（chrome53、safari9、ff49）
        
    *   滚动宽度：508（边缘13）
        
    *   滚动宽度：503（即11）
        
    *   滚动高度：916（chrome53、safari9）
        
    *   滚动高度：954（ff49）
        
    *   滚动高度：922（边缘13，ie11）
        
*   分区2
    
    *   偏移宽度：500（chrome53、ff49、safari9、edge13、ie11）
        
    *   偏移高度：300（chrome53、ff49、safari9、edge13、ie11）
        
    *   bcr.width：500（chrome53、ff49、safari9、edge13、ie11）
        
    *   bcr.高度：300（chrome53、ff49、safari9）
        
    *   bcr.高度：299.9999694824219（edge13，ie11）
        
    *   客户端宽度：475（chrome53、ff49、safari9）
        
    *   客户端宽度：478（边缘13）
        
    *   客户端宽度：473（ie11）
        
    *   客户端高度：290（chrome53、ff49、safari9、edge13、ie11）
        
    *   滚动宽度：475（chrome53、safari9、ff49）
        
    *   滚动宽度：478（边缘13）
        
    *   滚动宽度：473（即11）
        
    *   滚动高度：916（chrome53、safari9）
        
    *   滚动高度：954（ff49）
        
    *   滚动高度：922（边缘13，ie11）
        
*   分区3
    
    *   偏移宽度：530（chrome53、ff49、safari9、edge13、ie11）
        
    *   偏移高度：330（chrome53、ff49、safari9、edge13、ie11）
        
    *   bcr.宽度：265（chrome53、ff49、safari9、edge13、ie11）
        
    *   bcr.高度：165（chrome53、ff49、safari9、edge13、ie11）
        
    *   客户端宽度：505（chrome53、ff49、safari9）
        
    *   客户端宽度：508（边缘13）
        
    *   客户端宽度：503（即11）
        
    *   客户端高度：320（chrome53、ff49、safari9、edge13、ie11）
        
    *   滚动宽度：505（chrome53、safari9、ff49）
        
    *   滚动宽度：508（边缘13）
        
    *   滚动宽度：503（即11）
        
    *   滚动高度：916（chrome53、safari9）
        
    *   滚动高度：954（ff49）
        
    *   滚动高度：922（边缘13，ie11）
        

因此，除了edge13和ie11中boundingClientRect的高度值（299.9999694824219而不是预期的300）之外，结果证实了其背后的理论是有效的。

从那里，这是我对这些概念的定义：

*   offsetWidth/offsetHeight：布局边框框的尺寸
*   boundingClientRect：渲染边框的尺寸
*   clientWidth/clientHeight：布局内边距框可见部分的尺寸（不包括滚动条）
*   scrollWidth/scrollHeight：布局填充框的尺寸（如果不受滚动条约束）

注意：默认垂直滚动条的宽度在edge13中为12px，在chrome53、ff49和safari9中为15px，在ie11中为17px（通过截图在photoshop中测量，并通过测试结果证明正确）。

但是，在某些情况下，您的应用程序可能未使用默认的垂直滚动条宽度。

因此，考虑到这些概念的定义，垂直滚动条的宽度应该等于（伪代码）：

*   布局尺寸：offsetWidth - clientWidth - (borderLeftWidth + borderRightWidth)
    
*   渲染尺寸：boundingClientRect.width - clientWidth - (borderLeftWidth + borderRightWidth)
    

请注意，如果您不了解布局与渲染，请阅读 mdn 文章。

另外，如果您有其他浏览器（或者如果您想亲自查看测试结果），您可以在此处查看我的测试页面：[http://codepen.io/lingtalfi/pen/BLdBdL](http://codepen.io/lingtalfi/pen/BLdBdL)

我的个人备忘单，涵盖：

[![DOM 元素尺寸](https://docs.google.com/drawings/d/e/2PACX-1vSL7XQsLsiABaVgInqMQb50jbzBbXTXgPlax5Nf1mIjE4ANDXWRBUzZTRCim8eX6ILpCWpYwuVyJJMs/pub?w=7964&h=2011)](https://docs.google.com/drawings/d/e/2PACX-1vSL7XQsLsiABaVgInqMQb50jbzBbXTXgPlax5Nf1mIjE4ANDXWRBUzZTRCim8eX6ILpCWpYwuVyJJMs/pub?w=7964&h=2011)

*   `.offsetWidth`/`.offsetHeight`
*   `.clientWidth`/`.clientHeight`
*   `.scrollWidth`/`.scrollHeight`
*   `.scrollLeft`/`.scrollTop`
*   `.getBoundingClientRect()`

带有小/简单/非全合一的图表:)

* * *

👁 查看全尺寸：[https://docs.google.com/drawings/d/1bOOJnkN5G\_lBs3Oz9NfQQH1I0aCrX5EZYPY3mu3\_ROI/edit ?usp=sharing](https://docs.google.com/drawings/d/1bOOJnkN5G_lBs3Oz9NfQQH1I0aCrX5EZYPY3mu3_ROI/edit?usp=sharing)

What is the different between offsetwidth clientwidth scrollwidth and height respectively

在网页设计中，我们常常需要确保页面在打印时的布局与在线浏览时不同。有些元素，比如导航栏、广告或者其他不适合打印的组件，我们在打印版面上通常会选择隐藏。要在打印网页时隐藏某些元素，我们可以使用CSS的媒体查询功能来实现。

以下是一个基本的步骤和示例，说明如何通过CSS隐藏不需要打印的元素：

### 1. 定义媒体查询
使用`@media print`媒体查询来为打印定义特定的CSS规则。这些规则只会在用户尝试打印页面时应用。

```css
@media print {
  /* 在这里编写打印时的CSS规则 */
}
```

### 2. 隐藏不必要的元素
在`@media print`块内，可以选择性地为不需要打印的元素设置`display: none;`规则，这样这些元素在打印预览和打印输出中就不会显示。

```css
@media print {
  .navigation, .sidebar, .footer {
    display: none;
  }
}
```

在上面的例子中，`.navigation`、`.sidebar` 和 `.footer` 类选择器的元素将在打印时被隐藏。

### 3. 调整打印布局
在某些情况下，除了隐藏特定元素外，我们还需要调整剩余内容的布局，以确保打印输出的格式正确。

```css
@media print {
  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
```

在这个例子中，`.content` 类的元素在打印时会被调整为占据全部可用宽度，并且移除外边距和内边距。

### 示例代码
将以下CSS代码添加到你的网页中，以隐藏`.navigation`类的元素并调整内容宽度，仅在打印时适用：

```css
@media print {
  .navigation {
    display: none;
  }
  
  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
```

记得，为了保证打印样式的正确应用，你需要在HTML文档的`<head>`标签内正确链接你的CSS文件，或者直接将样式嵌入到`<style>`标签中。

以上即是如何在打印网页时通过CSS隐藏某些元素的方法。这种方式允许我们为打印提供一个更清晰、更专注于内容的版本，同时保留网页本身的功能性和设计美感。

在您的样式表中添加：

    @media print
    {    
        .no-print, .no-print *
        {
            display: none !important;
        }
    }
    

然后`class='no-print'`在 HTML 中添加您不希望出现在打印版本中的内容（或将非打印类添加到现有的类语句中），例如您的按钮。

Bootstrap 3 有[自己**的**类，称为](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-print)：

    hidden-print
    

它的定义如下：

    @media print {
      .hidden-print {
        display: none !important;
      }
    }
    

**您不必自己定义它。**

* * *

在[Bootstrap 4](https://getbootstrap.com/docs/4.3/utilities/display/#display-in-print)和[Bootstrap5](https://getbootstrap.com/docs/5.1/utilities/display/#display-in-print)中，这已更改为：

    .d-print-none

最佳实践是**使用专门用于打印的样式表**，并将其`media`属性设置为`print`。

在其中显示/隐藏要打印在纸张上的元素。

    <link rel="stylesheet" type="text/css" href="print.css" media="print" />

这是一个简单的解决方案，将这个CSS

    @media print{
       .noprint{
           display:none;
       }
    }
    

这是 HTML

    <div class="noprint">
        element that need to be hidden when printing
    </div>

CSS文件

    @media print
    {
        #pager,
        form,
        .no-print
        {
            display: none !important;
            height: 0;
        }
    
    
        .no-print, .no-print *{
            display: none !important;
            height: 0;
        }
    }
    

HTML 标题

    <link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
    

元素

    <div class="no-print"></div>

How do i hide an element when printing a web page

在HTML页面中，如果用户的浏览器禁用了JavaScript，你可以使用 `<noscript>`标签来显示一条替代性的信息。例如：

```html
<!DOCTYPE html>
<html>
<head>
    <title>检测JavaScript是否启用</title>
</head>
<body>
    
    <script type="text/javascript">
        document.write("JavaScript已经被启用！");
    </script>
    
    <noscript>
        <p>JavaScript被禁用了。本网站的某些功能可能无法正常工作，请启用JavaScript。</p>
        // 或者  
        <meta http-equiv="refresh" content="0; url=whatyouwant.html" />
    </noscript>
</body>
</html>
```

上面的例子展示了当JavaScript被禁用时，页面会展示 `<noscript>`标签里面的内容。如果JavaScript是启用的，`<script>`标签内的代码会被执行，并且页面会显示“JavaScript已经被启用！”的消息。

请注意，使用 `<noscript>`标签只是一种给用户提示信息的简单方式，并不是一种程序化的检测方法。如果你需要在服务器端检测JavaScript是否被禁用，通常需要使用不依赖于JavaScript的后备方法，比如通过表单提交来判断，因为没有JavaScript支持，异步的JavaScript请求（例如使用Ajax）将不会发生，只能依靠传统的同步请求。

我想在这里添加我的 .02。它不是 100% 防弹，但我认为它已经足够好了。

对我来说，首选的例子是发布某种“如果没有 Javascript，这个网站就不能正常工作”的消息，问题是您需要确保您的网站在没有 Javascript 的情况下也能正常工作。一旦你开始走这条路，你就会开始意识到网站应该是防弹的，并且关闭 JS，这是一大堆额外的工作。

所以，你真正想要的是“重定向”到一个页面，上面写着“打开 JS，傻瓜”。但是，当然，您无法可靠地进行元重定向。所以，这是建议：

    <noscript>
        <style type="text/css">
            .pagecontainer {display:none;}
        </style>
        <div class="noscriptmsg">
        You don't have javascript enabled.  Good luck with that.
        </div>
    </noscript>
    

...您网站中的_所有_内容都用“pagecontainer”类的 div 进行包装。 noscript 标签内的 CSS 将隐藏所有页面内容，并显示您想要显示的任何“no JS”消息。这实际上就是 Gmail 所做的……如果它对 Google 来说足够好，那么对我的小网站来说也足够好。

我假设您正在尝试决定是否提供 JavaScript 增强内容。最好的实现会彻底降级，以便网站在没有 JavaScript 的情况下仍然可以运行。我还假设您指的是[服务器端](https://www.seguetech.com/client-server-side-code/ "“客户端与服务器端代码：有什么区别？”")检测，而不是[`<noscript>`](https://www.w3.org/TR/html52/semantics-scripting.html#the-noscript-element "WC3 建议：<noscript> 元素 (HTML 5.2)")出于无法解释的原因使用该元素。

没有好的方法来执行服务器端 JavaScript 检测。作为替代方案，可以[使用 JavaScript 设置 cookie](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie "MDN：文档.cookie")，然后在后续页面视图中使用服务器端脚本测试该 cookie。然而，这不适合决定要传送什么内容，因为它无法将没有 cookie 的访问者与新访问者或不接受 JavaScript 设置 cookie 的访问者区分开来。

[`noscript`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fnoscript)块在 JavaScript 被禁用时执行，通常用于显示您在 JavaScript 中生成的替代内容，例如

    <script type="javascript">
        ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
    </script>
    <noscript>
        <a href="next_page.php?nojs=1">Next Page</a>
    </noscript>
    

没有 js 的用户将获得`next_page`链接 - 您可以在此处添加参数，以便在下一页上知道他们是否通过 JS/非 JS 链接访问，或者尝试通过 JS 设置 cookie，如果没有 JS 则意味着 JS被禁用。这两个例子都相当琐碎并且容易被操纵，但你明白了。

如果您想要纯粹统计有多少用户禁用了 javascript，您可以执行以下操作：

    <noscript>
        <img src="no_js.gif" alt="Javascript not enabled" />
    </noscript>
    

然后检查您的访问日志以查看该图像被点击了多少次。这是一个稍微粗糙的解决方案，但它会给您一个关于用户群百分比的好主意。

上述方法（图像跟踪）对于纯文本浏览器或根本不支持 js 的浏览器不太适用，因此如果您的用户群主要转向该领域，这可能不是最好的方法。

这对我有用：如果禁用 javascript，它会重定向访问者

    <noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>

我建议您反其道而行之，编写不引人注目的 JavaScript。

让项目的功能适用于禁用 JavaScript 的用户，完成后，实现 JavaScript UI 增强功能。

[https://en.wikipedia.org/wiki/Unobtrusive\_JavaScript](https://en.wikipedia.org/wiki/Unobtrusive_JavaScript)

How to detect if javascript is disabled

在JavaScript中，可以使用`Element.classList`属性来检查一个元素是否包含某个class类。`classList`是一个只读属性，返回元素的类属性的实时`DOMTokenList`集合。其中的`contains()`方法可以用来检查集合中是否包含指定的类值。如果包含返回`true`，否则返回`false`。

以下是使用`classList.contains()`方法检查元素是否包含特定class的例子：

```javascript
// 假设有一个元素 <div id="myDiv" class="foo bar baz"></div>
var elem = document.getElementById('myDiv');

// 检查元素是否包含class 'foo'
if (elem.classList.contains('foo')) {
  console.log('元素包含class "foo"');
} else {
  console.log('元素不包含class "foo"');
}

// 检查元素是否包含class 'no-such-class'
if (elem.classList.contains('no-such-class')) {
  console.log('元素包含class "no-such-class"');
} else {
  console.log('元素不包含class "no-such-class"');
}
```

在上面的代码中，我们首先通过`document.getElementById`获取了ID为`myDiv`的DOM元素，然后使用`classList.contains`方法来检查该元素是否包含特定的class。根据这个方法的返回值，我们可以做出相应的处理或反馈。

使用方法：[`element.classList`](https://developer.mozilla.org/en-US/docs/DOM/element.classList) `.contains`

    element.classList.contains(class);
    

这适用于所有当前的浏览器，并且也有腻子可以支持旧版浏览器。

* * *

**或者**，如果您使用较旧的浏览器并且不想使用polyfills来修复它们，那么使用[`indexOf`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)是正确的，但您必须稍微调整一下：

    function hasClass(element, className) {
        return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
    }
    

`true`否则，如果您正在查找的类是另一个类名称的一部分，您也会得到。

[**演示版**](http://jsfiddle.net/fkling/zBKCC/)

jQuery 使用类似（如果不相同）的方法。

* * *

**应用于示例：**

由于这不能与 switch 语句一起使用，因此您可以使用以下代码达到相同的效果：

    var test = document.getElementById("test"),
        classes = ['class1', 'class2', 'class3', 'class4'];
    
    test.innerHTML = "";
    
    for(var i = 0, j = classes.length; i < j; i++) {
        if(hasClass(test, classes[i])) {
            test.innerHTML = "I have " + classes[i];
            break;
        }
    }
    

它也更少冗余;)

简单有效的解决方案是尝试**.contains**方法。

    test.classList.contains(testClass);

在现代浏览器中，您可以使用以下`contains`方法[**`Element.classList`**](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)：

    testElement.classList.contains(className)
    

* * *

### 演示

    var testElement = document.getElementById('test');
    
    console.log({
        'main' : testElement.classList.contains('main'),
        'cont' : testElement.classList.contains('cont'),
        'content' : testElement.classList.contains('content'),
        'main-cont' : testElement.classList.contains('main-cont'),
        'main-content' : testElement.classList.contains('main-content'),
        'main main-content' : testElement.classList.contains('main main-content')
    });

    <div id="test" class="main main-content content"></div>

运行代码片段Hide results

展开片段

* * *

### 支持的浏览器

[![在此输入图像描述](https://i.stack.imgur.com/3c8x9.png)](https://i.stack.imgur.com/3c8x9.png)

（来自[**CanIUse.com**](http://caniuse.com/#feat=classlist)）

* * *

### 聚合物填料

如果您想使用[**`Element.classList`**](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)但也想支持旧版浏览器，请考虑使用[**Eli Gray**](https://stackoverflow.com/users/78436/eli-grey)的[**这个 polyfill**](https://github.com/eligrey/classList.js)。[](https://stackoverflow.com/users/78436/eli-grey)

这个问题得到了相当扎实的回答`element.classList.contains()`，但人们的答案相当夸张，并提出了一些大胆的主张，[所以我运行了一个基准测试](https://jsben.ch/U3CpX)。

**请记住，每个测试都会进行 1000 次迭代，因此大多数测试仍然非常快。除非您在特定操作中广泛依赖于此，否则您不会看到性能差异。**

我用基本上所有的方法进行了一些测试。在我的机器上（Win 10、24gb、i7-8700），classList.contains 表现得非常好。 className.split(' ') 也是如此，实际上是相同的。

不过，获胜者是`classList.contains()`.如果您不检查 classList 是否为`undefined`，`~(' ' + v.className + ' ').indexOf(' ' + classToFind + ' ')`则会提前 5-15%

[![在此输入图像描述](https://i.stack.imgur.com/8kWMd.png)](https://i.stack.imgur.com/8kWMd.png)

### Element.matches()

_元素.matches(selectorString)_

根据[MDN 网络文档](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)：

> 该**`Element.matches()`**方法返回`true`该元素是否由指定的选择器字符串选择；否则，返回`false`。

因此，您可以使用它[`Element.matches()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)来确定元素是否包含类。

    const element = document.querySelector('#example');
    
    console.log(element.matches('.foo')); // true

    <div id="example" class="foo bar"></div>

运行代码片段Hide results

展开片段

[查看浏览器兼容性](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Browser_compatibility)

How to check if an element contains a class in javascript

在JavaScript中，从数组中删除重复值可以通过几种不同的方法实现。以下是一些常见的方法，每种方法都有其自身的优势。

### 1. 使用`Set`对象
`Set`是ES6中引入的一个新的数据结构，它允许你存储唯一值（重复的元素会被忽略）。我们可以利用这个特性来删除数组中的重复值。

```javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
```

使用`Set`对象是最简洁的方法，代码易于理解，且性能良好。

### 2. 使用`filter`方法
`Array.prototype.filter`方法可以用来遍历数组并返回一个新数组，包含所有通过测试函数的元素。我们可以利用这个方法来筛选出第一次出现的元素，从而达到去重的效果。

```javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
```

这种方法不需要任何外部库或特定的语言特性，因此适用于老版本的JavaScript环境。

### 3. 使用`reduce`方法
`Array.prototype.reduce`方法对数组中的每个元素执行一个由您提供的“reducer”函数，将其结果汇总为单个返回值。我们可以用它来构建一个不包含重复值的数组。

```javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, current) => {
  if (acc.indexOf(current) === -1) {
    acc.push(current);
  }
  return acc;
}, []);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
```

这种方法给了我们更多的控制力，但它的效率可能不如使用`Set`对象。

### 4. 使用`forEach`方法和辅助对象
我们也可以使用`forEach`遍历数组，并使用一个辅助对象（或者`Map`）来记录已经出现过的值。

```javascript
const array = [1, 2, 2, 3, 4, 4, 5];
let uniqueObject = {};
const uniqueArray = [];

array.forEach((item) => {
  if (!uniqueObject[item]) {
    uniqueArray.push(item);
    uniqueObject[item] = true;
  }
});
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
```

这种方法的效率也比较高，但是代码稍微复杂一些，并且需要额外的空间来存储辅助对象。

---

每种方法都有其适用场景，选择哪一种取决于具体需求、代码的可读性以及对旧版JavaScript的支持需求。例如，如果你正在编写一个需要在老版本浏览器上运行的应用程序，你可能需要避免使用`Set`和`filter`，而是选择`for`循环或其他ES5兼容的方法。如果你的环境支持ES6，那么使用`Set`可能是最简单和最直观的方式。

长话短说
----

使用[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)构造函数和[展开语法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)：

    uniq = [...new Set(array)];
    

_（请注意 var`uniq`将是一个数组... `new Set()`将其转换为集合，但 \[...\] 再次将其转换回数组）_

* * *

“聪明”但天真的方式
----------

    uniqueArray = a.filter(function(item, pos) {
        return a.indexOf(item) == pos;
    })
    

基本上，我们迭代数组，并针对每个元素检查该元素在数组中的第一个位置是否等于当前位置。显然，对于重复元素来说，这两个位置是不同的。

使用过滤器回调的第三个（“这个数组”）参数，我们可以避免数组变量的闭包：

    uniqueArray = a.filter(function(item, pos, self) {
        return self.indexOf(item) == pos;
    })
    

尽管简洁，但该算法对于大型数组（二次时间）并不是特别有效。

哈希表来救援
------

    function uniq(a) {
        var seen = {};
        return a.filter(function(item) {
            return seen.hasOwnProperty(item) ? false : (seen[item] = true);
        });
    }
    

通常是这样做的。这个想法是将每个元素放入哈希表中，然后立即检查它是否存在。这给了我们线性时间，但至少有两个缺点：

*   由于哈希键只能是 JavaScript 中的字符串或符号，因此此代码不区分数字和“数字字符串”。也就是说，`uniq([1,"1"])`只会返回`[1]`
*   出于同样的原因，所有对象都将被视为相等：`uniq([{foo:1},{foo:2}])`将返回 just `[{foo:1}]`。

也就是说，如果您的数组仅包含基元并且您不关心类型（例如它始终是数字），则此解决方案是最佳的。

来自两个世界的最好的
----------

通用解决方案结合了这两种方法：它对基元使用哈希查找，对对象使用线性搜索。

    function uniq(a) {
        var prims = {"boolean":{}, "number":{}, "string":{}}, objs = [];
    
        return a.filter(function(item) {
            var type = typeof item;
            if(type in prims)
                return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
            else
                return objs.indexOf(item) >= 0 ? false : objs.push(item);
        });
    }
    

排序|独特的
------

另一种选择是先对数组进行排序，然后删除与前一个元素相等的每个元素：

    function uniq(a) {
        return a.sort().filter(function(item, pos, ary) {
            return !pos || item != ary[pos - 1];
        });
    }
    

同样，这不适用于对象（因为所有对象都相等`sort`）。此外，我们默默地更改原始数组作为副作用 - 不好！但是，如果您的输入已经排序，那么这就是要走的路（只需`sort`从上面删除）。

独特之处在于...
---------

有时，需要基于除相等之外的某些标准来唯一化列表，例如，过滤掉不同但共享某些属性的对象。这可以通过传递回调来优雅地完成。此“key”回调应用于每个元素，并且具有相同“key”的元素将被删除。由于`key`预计返回一个原语，因此哈希表在这里可以正常工作：

    function uniqBy(a, key) {
        var seen = {};
        return a.filter(function(item) {
            var k = key(item);
            return seen.hasOwnProperty(k) ? false : (seen[k] = true);
        })
    }
    

一个特别有用的方法`key()`是`JSON.stringify`删除物理上不同但“看起来”相同的对象：

    a = [[1,2,3], [4,5,6], [1,2,3]]
    b = uniqBy(a, JSON.stringify)
    console.log(b) // [[1,2,3], [4,5,6]]
    

如果`key`不是原始的，则必须诉诸线性搜索：

    function uniqBy(a, key) {
        var index = [];
        return a.filter(function (item) {
            var k = key(item);
            return index.indexOf(k) >= 0 ? false : index.push(k);
        });
    }
    

在 ES6 中你可以使用`Set`：

    function uniqBy(a, key) {
        let seen = new Set();
        return a.filter(item => {
            let k = key(item);
            return seen.has(k) ? false : seen.add(k);
        });
    }
    

或`Map`：

    function uniqBy(a, key) {
        return [
            ...new Map(
                a.map(x => [key(x), x])
            ).values()
        ]
    }
    

它们都可以使用非原始键。

第一个还是最后一个？
----------

当通过键删除对象时，您可能希望保留第一个“相等”对象或最后一个对象。

使用`Set`上面的变体保留第一个，使用`Map`保留最后一个：

    function uniqByKeepFirst(a, key) {
        let seen = new Set();
        return a.filter(item => {
            let k = key(item);
            return seen.has(k) ? false : seen.add(k);
        });
    }
    
    
    function uniqByKeepLast(a, key) {
        return [
            ...new Map(
                a.map(x => [key(x), x])
            ).values()
        ]
    }
    
    //
    
    data = [
        {a:1, u:1},
        {a:2, u:2},
        {a:3, u:3},
        {a:4, u:1},
        {a:5, u:2},
        {a:6, u:3},
    ];
    
    console.log(uniqByKeepFirst(data, it => it.u))
    console.log(uniqByKeepLast(data, it => it.u))

运行代码片段Hide results

展开片段

图书馆
---

[underscore](http://underscorejs.org/#uniq)和[Lo-Dash](https://lodash.com/docs#uniq)都提供了`uniq`方法。他们的算法基本上类似于上面的第一个片段，归结为：

    var result = [];
    a.forEach(function(item) {
         if(result.indexOf(item) < 0) {
             result.push(item);
         }
    });
    

这是二次的，但还有一些额外的好处，例如包装 native `indexOf`、通过键进行统一的能力（`iteratee`用他们的说法）以及对已排序数组的优化。

如果你正在使用 jQuery 并且不能忍受没有一美元的任何东西，它会像这样：

      $.uniqArray = function(a) {
            return $.grep(a, function(item, pos) {
                return $.inArray(item, a) === pos;
            });
      }
    

这又是第一个片段的变体。

表现
--

JavaScript 中函数调用的开销很大，因此上述解决方案虽然简洁，但效率并不是特别高。为了获得最佳性能，请替换`filter`为循环并摆脱其他函数调用：

    function uniq_fast(a) {
        var seen = {};
        var out = [];
        var len = a.length;
        var j = 0;
        for(var i = 0; i < len; i++) {
             var item = a[i];
             if(seen[item] !== 1) {
                   seen[item] = 1;
                   out[j++] = item;
             }
        }
        return out;
    }
    

这段丑陋的代码与上面的代码片段 #3 的作用相同，但速度快了一个数量级（截至 2017 年，速度只有两倍 - JS 核心人员做得很好！）

显示代码片段

    function uniq(a) {
        var seen = {};
        return a.filter(function(item) {
            return seen.hasOwnProperty(item) ? false : (seen[item] = true);
        });
    }
    
    function uniq_fast(a) {
        var seen = {};
        var out = [];
        var len = a.length;
        var j = 0;
        for(var i = 0; i < len; i++) {
             var item = a[i];
             if(seen[item] !== 1) {
                   seen[item] = 1;
                   out[j++] = item;
             }
        }
        return out;
    }
    
    /////
    
    var r = [0,1,2,3,4,5,6,7,8,9],
        a = [],
        LEN = 1000,
        LOOPS = 1000;
    
    while(LEN--)
        a = a.concat(r);
    
    var d = new Date();
    for(var i = 0; i < LOOPS; i++)
        uniq(a);
    document.write('<br>uniq, ms/loop: ' + (new Date() - d)/LOOPS)
    
    var d = new Date();
    for(var i = 0; i < LOOPS; i++)
        uniq_fast(a);
    document.write('<br>uniq_fast, ms/loop: ' + (new Date() - d)/LOOPS)

Run code snippetHide results

Expand snippet

ES6
---

ES6 提供了[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)对象，这使得事情变得更加容易：

    function uniq(a) {
       return Array.from(new Set(a));
    }
    

或者

    let uniq = a => [...new Set(a)];
    

请注意，与 python 不同，ES6 集合按插入顺序迭代，因此此代码保留原始数组的顺序。

但是，如果您需要一个具有唯一元素的数组，为什么不从一开始就使用集合呢？

发电机
---

`uniq`可以在相同的基础上构建“惰性”、基于生成器的版本：

*   从参数中获取下一个值
*   如果已经看过，请跳过
*   否则，产生它并将其添加到已经看到的值集中

    function* uniqIter(a) {
        let seen = new Set();
    
        for (let x of a) {
            if (!seen.has(x)) {
                seen.add(x);
                yield x;
            }
        }
    }
    
    // example:
    
    function* randomsBelow(limit) {
        while (1)
            yield Math.floor(Math.random() * limit);
    }
    
    // note that randomsBelow is endless
    
    count = 20;
    limit = 30;
    
    for (let r of uniqIter(randomsBelow(limit))) {
        console.log(r);
        if (--count === 0)
            break
    }
    
    // exercise for the reader: what happens if we set `limit` less than `count` and why

运行代码片段Hide results

展开片段

使用 jQuery 又快又脏：

    var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
    var uniqueNames = [];
    $.each(names, function(i, el){
        if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
    });

厌倦了看到所有使用 for 循环或 jQuery 的糟糕例子。如今，Javascript 拥有完美的工具：排序、映射和归约。

Uniq 在保持现有顺序的同时减少
-----------------

    var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
    
    var uniq = names.reduce(function(a,b){
        if (a.indexOf(b) < 0 ) a.push(b);
        return a;
      },[]);
    
    console.log(uniq, names) // [ 'Mike', 'Matt', 'Nancy', 'Adam', 'Jenny', 'Carl' ]
    
    // one liner
    return names.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]);
    

更快的 uniq 排序
-----------

可能还有更快的方法，但这个方法相当不错。

    var uniq = names.slice() // slice makes copy of array before sorting it
      .sort(function(a,b){
        return a > b;
      })
      .reduce(function(a,b){
        if (a.slice(-1)[0] !== b) a.push(b); // slice(-1)[0] means last item in array without removing it (like .pop())
        return a;
      },[]); // this empty array becomes the starting value for a
    
    // one liner
    return names.slice().sort(function(a,b){return a > b}).reduce(function(a,b){if (a.slice(-1)[0] !== b) a.push(b);return a;},[]);
    

2015年更新：ES6版本：
--------------

在 ES6 中，您有 Sets 和 Spread，这使得删除所有重复项变得非常容易且高效：

    var uniq = [ ...new Set(names) ]; // [ 'Mike', 'Matt', 'Nancy', 'Adam', 'Jenny', 'Carl' ]
    

根据出现次数排序：
---------

有人询问如何根据唯一名称的数量对结果进行排序：

    var names = ['Mike', 'Matt', 'Nancy', 'Adam', 'Jenny', 'Nancy', 'Carl']
    
    var uniq = names
      .map((name) => {
        return {count: 1, name: name}
      })
      .reduce((a, b) => {
        a[b.name] = (a[b.name] || 0) + b.count
        return a
      }, {})
    
    var sorted = Object.keys(uniq).sort((a, b) => uniq[a] < uniq[b])
    
    console.log(sorted)

**Vanilla JS：使用像集合这样的对象删除重复项**

您始终可以尝试将其放入对象中，然后迭代其键：

    function remove_duplicates(arr) {
        var obj = {};
        var ret_arr = [];
        for (var i = 0; i < arr.length; i++) {
            obj[arr[i]] = true;
        }
        for (var key in obj) {
            ret_arr.push(key);
        }
        return ret_arr;
    }
    

**Vanilla JS：通过跟踪已经看到的值来删除重复项（订单安全）**

或者，对于顺序安全版本，使用一个对象来存储所有以前看到的值，并在添加到数组之前检查它的值。

    function remove_duplicates_safe(arr) {
        var seen = {};
        var ret_arr = [];
        for (var i = 0; i < arr.length; i++) {
            if (!(arr[i] in seen)) {
                ret_arr.push(arr[i]);
                seen[arr[i]] = true;
            }
        }
        return ret_arr;
    
    }
    

**ECMAScript 6：使用新的 Set 数据结构（顺序安全）**

ECMAScript 6 添加了新的`Set`数据结构，它允许您存储任何类型的值。 `Set.values`按插入顺序返回元素。

    function remove_duplicates_es6(arr) {
        let s = new Set(arr);
        let it = s.values();
        return Array.from(it);
    }
    

**用法示例：**

    a = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
    
    b = remove_duplicates(a);
    // b:
    // ["Adam", "Carl", "Jenny", "Matt", "Mike", "Nancy"]
    
    c = remove_duplicates_safe(a);
    // c:
    // ["Mike", "Matt", "Nancy", "Adam", "Jenny", "Carl"]
    
    d = remove_duplicates_es6(a);
    // d:
    // ["Mike", "Matt", "Nancy", "Adam", "Jenny", "Carl"]

`.filter`使用数组和函数的单行版本`.indexOf`：

    arr = arr.filter(function (value, index, array) { 
      return array.indexOf(value) === index;
    });
    

### ES6方法

    arr = arr.filter((value, index, array) => 
      array.indexOf(value) === index
    )

在JavaScript中，可以使用多种方法从数组中删除重复的值。

1. **使用 Set**
   Set 是一种允许你存储任何类型唯一值的集合。因此，你可以利用 Set 来轻松去重。

   ```javascript
   const array = [1, 2, 2, 3, 4, 4, 5];
   const uniqueArray = [...new Set(array)];
   console.log(uniqueArray); // [1, 2, 3, 4, 5]
   ```

2. **使用 filter()**
   `filter()` 方法可以用来创建一个新数组，这个新数组由通过所提供函数测试的所有元素组成。这里我们可以检查当前元素的索引是否是它首次出现的索引。

   ```javascript
   const array = [1, 2, 2, 3, 4, 4, 5];
   const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);
   console.log(uniqueArray); // [1, 2, 3, 4, 5]
   ```

3. **使用 reduce()**
   `reduce()` 方法对数组中的每个元素执行一个由你提供的“reducer”回调函数，将其结果汇总为单个返回值。你可以使用它来构建一个不包含重复项的新数组。

   ```javascript
   const array = [1, 2, 2, 3, 4, 4, 5];
   const uniqueArray = array.reduce((accumulator, current) => {
     if (accumulator.indexOf(current) === -1) {
       accumulator.push(current);
     }
     return accumulator;
   }, []);
   console.log(uniqueArray); // [1, 2, 3, 4, 5]
   ```

4. **使用 forEach() 和 includes()**
   你可以遍历数组并使用 `includes()` 方法检查结果数组中是否已经包含了当前项。

   ```javascript
   const array = [1, 2, 2, 3, 4, 4, 5];
   const uniqueArray = [];
   array.forEach(item => {
     if (!uniqueArray.includes(item)) {
       uniqueArray.push(item);
     }
   });
   console.log(uniqueArray); // [1, 2, 3, 4, 5]
   ```

以上是一些常见的方法来去除数组中的重复项。你可以根据实际情况选择最适合你的方法。通常情况下，使用 `Set` 是最简单快捷的方式。

How to remove duplicate values from js array

在JavaScript中，变量的作用域决定了在代码的哪些部分可以访问该变量。作用域可以是全局的或者局部的。

1. **全局作用域**：
   当一个变量在函数之外被声明时，它拥有全局作用域。这意味着它可以在代码的任何地方被访问和修改。全局变量在整个web页面的生命周期内都是可用的。

   例如：
   ```javascript
   var globalVar = "这是一个全局变量";

   function demoFunction() {
     console.log(globalVar); // 可以访问全局变量
   }

   demoFunction(); // 输出: 这是一个全局变量
   ```
   
   上面的 `globalVar` 就是一个全局变量，它可以在 `demoFunction` 函数内部被访问。

2. **局部作用域**：
   当一个变量在函数内部被声明时，它拥有局部作用域，也就是说它只能在该函数内部被访问和修改。局部变量对于函数外部的代码来说是隐藏的。

   例如：
   ```javascript
   function demoFunction() {
     var localVar = "这是一个局部变量";
     console.log(localVar); // 可以访问局部变量
   }

   demoFunction(); // 输出: 这是一个局部变量
   // console.log(localVar); // 错误：localVar 在这里是不可访问的
   ```
   
   `localVar` 只能在 `demoFunction` 函数内部被访问。

另外，JavaScript ES6 引入了两个新的关键字 `let` 和 `const` 来声明变量，它们提供了块级作用域（block scope）。

3. **块级作用域**：
   使用 `let` 和 `const` 声明的变量具有块级作用域。它们只能在包含它们的代码块（如一个for循环或者if语句）内部被访问。

   例如：
   ```javascript
   if (true) {
     let blockScopedVar = "这是一个块级作用域的变量";
     console.log(blockScopedVar); // 可以访问块级作用域的变量
   }

   // console.log(blockScopedVar); // 错误：blockScopedVar 在这里是不可访问的
   ```

在开发实际应用时，通常建议尽可能使用局部作用域或块级作用域来声明变量，以避免全局变量可能带来的命名冲突和难以追踪的bug。

总长DR
----

JavaScript 具有词法（也称为静态）作用域和闭包。这意味着您可以通过查看源代码来了解标识符的范围。

这四个范围是：

1.  全局 - 一切可见
2.  函数 - 在函数（及其子函数和块）内可见
3.  块 - 在块（及其子块）内可见
4.  模块 - 在模块内可见

除了全局和模块作用域的特殊情况之外，变量是使用`var`（函数作用域）、`let`（块作用域）和`const`（块作用域）声明的。大多数其他形式的标识符声明在严格模式下具有块作用域。

概述
--

范围是标识符有效的代码库区域。

词法环境是标识符名称和与其关联的值之间的映射。

作用域由词法环境的链接嵌套构成，嵌套中的每个级别对应于祖先执行上下文的词法环境。

这些链接的词汇环境形成了范围“链”。标识符解析是沿着这条链搜索匹配标识符的过程。

标识符解析仅发生在一个方向：向外。这样，外部词汇环境就无法“看到”内部词汇环境。

决定JavaScript 中[标识符](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-names-and-keywords)的[范围](https://en.wikipedia.org/wiki/Scope_(computer_science))有三个相关因素：[](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-names-and-keywords)

1.  标识符是如何声明的
2.  声明标识符的位置
3.  无论您处于[严格模式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)还是[非严格模式](https://developer.mozilla.org/en-US/docs/Glossary/Sloppy_mode)

声明标识符的一些方法：

1.  `var`，`let`和`const`
2.  功能参数
3.  catch 块参数
4.  函数声明
5.  命名函数表达式
6.  全局对象上隐式定义的属性（即`var`在非严格模式下丢失）
7.  `import`声明
8.  `eval`

可以声明一些位置标识符：

1.  全球背景
2.  函数体
3.  普通块
4.  控制结构的顶部（例如循环、if、while 等）
5.  控制结构体
6.  模块

声明样式
----

### 变量

使用声明的标识符具有`var` **函数作用域**，除非它们直接在全局上下文中声明，在这种情况下，它们将作为属性添加到全局对象上并具有全局作用域。它们在`eval`函数中的使用有单独的规则。

### 让和常量

使用`let`和声明的标识符`const` **具有块作用域**，除非直接在全局上下文中声明它们，在这种情况下它们具有全局作用域。

注：`let`、`const`、`var` [均为吊装](https://stackoverflow.com/a/31222689/38522)。这意味着它们定义的逻辑位置是其封闭范围（块或函数）的顶部。但是，在控制通过源代码中的声明点之前，无法读取或分配使用`let`and声明的变量。`const`过渡期被称为暂时死区。

    function f() {
        function g() {
            console.log(x)
        }
        let x = 1
        g()
    }
    f() // 1 because x is hoisted even though declared with `let`!

运行代码片段Hide results

展开片段

### 函数参数名称

函数参数名称的范围仅限于函数体。请注意，这有一点复杂。声明为默认参数的函数会关闭[参数列表](https://stackoverflow.com/questions/61208843/where-are-arguments-positioned-in-the-lexical-environment/)，而不是函数体。

### 函数声明

函数声明在严格模式下具有块作用域，在非严格模式下具有函数作用域。注意：非严格模式是一组复杂的紧急规则，基于不同浏览器的古怪历史实现。

### 命名函数表达式

命名函数表达式的范围仅限于其自身（例如，出于递归的目的）。

### 全局对象的隐式定义属性

在非严格模式下，全局对象上隐式定义的属性具有全局作用域，因为全局对象位于作用域链的顶部。在严格模式下，这些是不允许的。

### 评估

在`eval`字符串中，使用 using 声明的变量`var`将放置在当前范围内，或者，如果`eval`间接使用，则作为全局对象的属性。

例子
--

下面的代码将引发 ReferenceError，因为名称`x`、`y`、 和`z`在函数之外没有任何意义`f`。

    function f() {
        var x = 1
        let y = 1
        const z = 1
    }
    console.log(typeof x) // undefined (because var has function scope!)
    console.log(typeof y) // undefined (because the body of the function is a block)
    console.log(typeof z) // undefined (because the body of the function is a block)

运行代码片段Hide results

展开片段

`y`下面的代码将为and抛出一个 ReferenceError `z`，但对于 ，则不会`x`，因为 的可见性`x`不受块的约束。定义控制结构体（如`if`、`for`和`while`）的块的行为类似。

    {
        var x = 1
        let y = 1
        const z = 1
    }
    console.log(x) // 1
    console.log(typeof y) // undefined because `y` has block scope
    console.log(typeof z) // undefined because `z` has block scope

运行代码片段Hide results

展开片段

在下面，由于具有函数作用域，`x`因此在循环外部可见：`var`

    for(var x = 0; x < 5; ++x) {}
    console.log(x) // 5 (note this is outside the loop!)

运行代码片段Hide results

展开片段

...由于这种行为，您需要小心关闭使用`var`in 循环声明的变量。这里只声明了一个变量实例`x`，并且它在逻辑上位于循环之外。

下面的代码打印`5`, 五次，然后在循环外打印`5`第六次：`console.log`

    for(var x = 0; x < 5; ++x) {
        setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
    }
    console.log(x) // note: visible outside the loop

运行代码片段Hide results

展开片段

`undefined`由于`x`是块作用域，因此会打印以下内容。回调是一对一异步运行的。变量的新行为`let`意味着每个匿名函数都会对名为 的不同变量进行关闭`x`（与 不同`var`），因此会`0`打印整数`4`：

    for(let x = 0; x < 5; ++x) {
        setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
    }
    console.log(typeof x) // undefined

运行代码片段Hide results

展开片段

下面的代码不会抛出 a `ReferenceError`，因为 的可见性`x`不受块的约束；但是，它会打印，`undefined`因为变量尚未初始化（由于该`if`语句）。

    if(false) {
        var x = 1
    }
    console.log(x) // here, `x` has been declared, but not initialised

运行代码片段Hide results

展开片段

在循环顶部`for`使用声明的变量的`let`作用域为循环体：

    for(let x = 0; x < 10; ++x) {} 
    console.log(typeof x) // undefined, because `x` is block-scoped

运行代码片段Hide results

展开片段

以下代码将抛出 a `ReferenceError`，因为 的可见性`x`受到块的限制：

    if(false) {
        let x = 1
    }
    console.log(typeof x) // undefined, because `x` is block-scoped

运行代码片段Hide results

展开片段

使用`var`,`let`或声明的变量`const`都限定在模块范围内：

    // module1.js
    
    var x = 0
    export function f() {}
    
    //module2.js
    
    import f from 'module1.js'
    
    console.log(x) // throws ReferenceError
    

以下将在全局对象上声明一个属性，因为`var`在全局上下文中声明的变量将作为属性添加到全局对象中：

    var x = 1
    console.log(window.hasOwnProperty('x')) // true

运行代码片段Hide results

展开片段

`let`并且`const`在全局上下文中不向全局对象添加属性，但仍然具有全局作用域：

    let x = 1
    console.log(window.hasOwnProperty('x')) // false

运行代码片段Hide results

展开片段

函数参数可以认为是在函数体中声明：

    function f(x) {}
    console.log(typeof x) // undefined, because `x` is scoped to the function

运行代码片段Hide results

展开片段

Catch 块参数的作用域为 catch 块主体：

    try {} catch(e) {}
    console.log(typeof e) // undefined, because `e` is scoped to the catch block

运行代码片段Hide results

展开片段

命名函数表达式的作用域仅限于表达式本身：

    (function foo() { console.log(foo) })()
    console.log(typeof foo) // undefined, because `foo` is scoped to its own expression

运行代码片段Hide results

展开片段

在非严格模式下，全局对象上隐式定义的属性具有全局作用域。在严格模式下，您会收到错误。

    x = 1 // implicitly defined property on the global object (no "var"!)
    
    console.log(x) // 1
    console.log(window.hasOwnProperty('x')) // true

运行代码片段Hide results

展开片段

在非严格模式下，函数声明具有函数作用域。在严格模式下，它们具有块作用域。

    'use strict'
    {
        function foo() {}
    }
    console.log(typeof foo) // undefined, because `foo` is block-scoped

运行代码片段Hide results

展开片段

它是如何工作的
-------

范围定义为标识符有效的代码词汇区域[。](https://stackoverflow.com/a/1047479/38522)

在 JavaScript 中，每个函数对象都有一个隐藏引用，该引用是对其创建所在的[执行上下文](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-execution-contexts)（堆栈帧）的[词法环境](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-lexical-environments)`[[Environment]]`的引用。[](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-lexical-environments)[](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-execution-contexts)

当您调用函数时，`[[Call]]`会调用隐藏方法。此方法创建一个新的执行上下文，并在新的执行上下文和函数对象的词法环境之间建立链接。它通过将`[[Environment]]`函数对象上的值复制到新执行上下文的词法环境上的[外部引用字段中来实现此目的。](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-lexical-environments)

请注意，新的执行上下文和函数对象的词法环境之间的这种链接称为[闭包](https://stackoverflow.com/a/111114/38522)。

因此，在 JavaScript 中，作用域是通过外部引用以“链”形式链接在一起的词法环境来实现的。这个词法环境链称为作用域链，标识符解析是通过在[链中搜索](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-getidentifierreference)匹配的标识符来进行的。

了解[更多](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures)。

Javascript 使用作用域链来建立给定函数的作用域。通常有一个全局作用域，并且定义的每个函数都有其自己的嵌套作用域。在另一个函数中定义的任何函数都具有链接到外部函数的局部作用域。定义范围的始终是源代码中的位置。

作用域链中的元素基本上是一个带有指向其父作用域的指针的 Map。

解析变量时，JavaScript 从最内层范围开始向外搜索。

全局声明的变量具有全局作用域。函数内声明的变量的作用域为该函数，以及同名的影子全局变量。

（我确信真正的 JavaScript 程序员能够在其他答案中指出许多微妙之处。特别是我遇到了[这个页面](http://www.digital-web.com/articles/scope_in_javascript/)，了解`this`任何时候的确切含义。希望[这个更具介绍性的链接](http://bowles.byethost3.com/javascript/section6/lesson6.htm#part4)足以让您入门.)

老派 JavaScript
=============

传统上，JavaScript 实际上只有两种类型的作用域：

1.  **全局范围**：从应用程序启动时起，变量在整个应用程序中都是已知的_(\*)_
2.  **功能范围**：变量在其声明的[**函数**](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/function)内是已知的，从函数的开头开始_(\*)_

我不会详细说明这一点，因为已经有很多其他答案解释了其中的差异。

* * *

现代 JavaScript
=============

最新[**的 JavaScript 规范**](https://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/)现在还允许第三个范围：

3.  **块作用域**：标识符[在其声明的作用域顶部](https://stackoverflow.com/a/31222689/38522)是“已知的” ，但在其声明行之后才能对其进行赋值或取消引用（读取）。这个过渡时期被称为“暂时死区”。

* * *

### 如何创建块作用域变量？

传统上，您可以像这样创建变量：

    var myVariable = "Some text";
    

块作用域变量是这样创建的：

    let myVariable = "Some text";
    

* * *

### 那么函数作用域和块作用域有什么区别呢？

要了解函数作用域和块作用域之间的区别，请考虑以下代码：

    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, but undefined
    // l IS NOT known here
    
    function loop(arr) {
        // i IS known here, but undefined
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    
        for( var i = 0; i < arr.length; i++ ) {
            // i IS known here, and has a value
            // j IS NOT known here
            // k IS known here, but has a value only the second time loop is called
            // l IS NOT known here
        };
    
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    
        for( let j = 0; j < arr.length; j++ ) {
            // i IS known here, and has a value
            // j IS known here, and has a value
            // k IS known here, but has a value only the second time loop is called
            // l IS NOT known here
        };
    
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    }
    
    loop([1,2,3,4]);
    
    for( var k = 0; k < arr.length; k++ ) {
        // i IS NOT known here
        // j IS NOT known here
        // k IS known here, and has a value
        // l IS NOT known here
    };
    
    for( let l = 0; l < arr.length; l++ ) {
        // i IS NOT known here
        // j IS NOT known here
        // k IS known here, and has a value
        // l IS known here, and has a value
    };
    
    loop([1,2,3,4]);
    
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS NOT known here
    

在这里，我们可以看到我们的变量`j`仅在第一个 for 循环中已知，而不是之前和之后。然而，我们的变量`i`在整个函数中是已知的。

另外，请考虑块作用域变量在声明之前是未知的，因为它们没有被提升。您也不允许在同一块内重新声明同一块作用域变量。这使得块作用域变量比全局或函数作用域变量更不容易出错，全局或函数作用域变量被提升并且在多个声明的情况下不会产生任何错误。

* * *

### 现在使用块作用域变量安全吗？

今天使用是否安全取决于您的环境：

*   如果您正在编写服务器端 JavaScript 代码 ( [**Node.js**](https://nodejs.org/en/) )，则可以安全地使用该`let`语句。
    
*   如果您正在编写客户端 JavaScript 代码并使用基于浏览器的转译器（例如[**Traceur**](https://github.com/google/traceur-compiler)或[**babel-standalone**](https://github.com/babel/babel-standalone)），您可以安全地使用该`let`语句，但是您的代码在性能方面可能不是最佳的。
    
*   如果您正在编写客户端 JavaScript 代码并使用基于 Node 的转译器（如[**Traceur shell 脚本**](https://github.com/google/traceur-compiler/wiki/Compiling-Offline)或[**Babel**](https://babeljs.io/)），则可以安全地使用该`let`语句。而且由于您的浏览器只会了解转译的代码，因此性能缺陷应该是有限的。
    
*   如果您正在编写客户端 JavaScript 代码并且不使用转译器，则需要考虑浏览器支持。
    
    `let`以下是一些根本不支持的浏览器：
    
    *   **Internet Explorer 10**及以下版本
    *   **火狐浏览器 43**及以下版本
    *   **Safari 9**及以下版本
    *   **Android 浏览器 4**及以下版本
    *   **Opera 27**及以下版本
    *   **40丁目**以下
    *   任何版本的**Opera Mini**和**Blackberry 浏览器**

[![在此输入图像描述](https://i.stack.imgur.com/J9kEC.png)](https://i.stack.imgur.com/J9kEC.png)

* * *

### 如何跟踪浏览器支持

`let`有关在您阅读此答案时哪些浏览器支持该声明的最新概述，请参阅[**此`Can I Use`页面**](http://caniuse.com/#search=let)。

* * *

_(\*) 全局和函数作用域的变量可以在声明之前初始化和使用，因为 JavaScript 变量是[**提升的**](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)。_这意味着声明总是位于范围的顶部。

这是一个例子：

    <script>
    
    var globalVariable = 7; //==window.globalVariable
    
    function aGlobal( param ) { //==window.aGlobal(); 
                                //param is only accessible in this function
      var scopedToFunction = {
        //can't be accessed outside of this function
    
        nested : 3 //accessible by: scopedToFunction.nested
      };
    
      anotherGlobal = {
        //global because there's no `var`
      }; 
    
    }
    
    </script>
    

您将需要研究闭包，以及如何使用它们来创建[私有成员](http://www.crockford.com/javascript/private.html)。

What is the scope of variables in javascript

在 JavaScript 中，要生成指定范围内的随机整数，你可以使用 `Math.random()` 函数来获得一个 [0, 1) 区间内的随机浮点数，然后通过适当的计算将其转换为你需要范围内的整数。

以下是一个如何生成介于 `min` 和 `max` 之间的随机整数（包括 `min` 和 `max`）的函数示例：

```javascript
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min); // 确保最小值是整数
  max = Math.floor(max); // 确保最大值是整数
  return Math.floor(Math.random() * (max - min + 1)) + min; // 向下取整以确保结果为整数
}
```

使用这个函数，你可以通过传入不同的 `min` 和 `max` 来得到一个在这个范围内的随机整数。例如：

```javascript
let randomNum = getRandomIntInclusive(1, 10); // 生成一个1到10之间的随机整数，包括1和10
console.log(randomNum);
```

这段代码会在控制台打印出一个介于 1 到 10 之间的随机整数。

[Mozilla 开发者网络](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)页面上有一些示例：

    /**
     * Returns a random number between min (inclusive) and max (exclusive)
     */
    function getRandomArbitrary(min, max) {
        return Math.random() * (max - min) + min;
    }
    
    /**
     * Returns a random integer between min (inclusive) and max (inclusive).
     * The value is no lower than min (or the next integer greater than min
     * if min isn't an integer) and no greater than max (or the next integer
     * lower than max if max isn't an integer).
     * Using Math.round() will give you a non-uniform distribution!
     */
    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    

* * *

这是其背后的逻辑。这是一个简单的三条规则：

`Math.random()`返回`Number`介于 0（包含）和 1（不包含）之间的值。所以我们有一个这样的区间：

    [0 .................................... 1)
    

现在，我们想要一个`min`介于（包含）和`max`（不包含）之间的数字：

    [0 .................................... 1)
    [min .................................. max)
    

我们可以使用 来`Math.random`获取 \[min, max) 区间内的对应项。但是，首先我们应该通过`min`从第二个区间中减去一点来解决这个问题：

    [0 .................................... 1)
    [min - min ............................ max - min)
    

这给出：

    [0 .................................... 1)
    [0 .................................... max - min)
    

我们现在可以申请`Math.random`然后计算对应的。让我们选择一个随机数：

                    Math.random()
                        |
    [0 .................................... 1)
    [0 .................................... max - min)
                        |
                        x (what we need)
    

因此，为了找到`x`，我们会这样做：

    x = Math.random() * (max - min);
    

不要忘记加`min`回来，这样我们就得到了 \[min, max) 区间内的数字：

    x = Math.random() * (max - min) + min;
    

这是 MDN 的第一个功能。第二个返回介于`min`和之间的整数`max`（包含两者）。

现在要获取整数，您可以使用`round`,`ceil`或`floor`。

您可以使用`Math.round(Math.random() * (max - min)) + min`，但这会产生不均匀的分布。两者都有，`min`并且`max`只有大约一半的机会滚动：

    min...min+0.5...min+1...min+1.5   ...    max-0.5....max
    └───┬───┘└────────┬───────┘└───── ... ─────┘└───┬──┘   ← Math.round()
       min          min+1                          max
    

如果将`max`其排除在间隔之外，则滚动的机会甚至比 还要小`min`。

这样`Math.floor(Math.random() * (max - min +1)) + min`你就有了一个完美均匀的分布。

     min...  min+1...    ...      max-1... max....   (max+1 is excluded from interval)
    └───┬───┘└───┬───┘└─── ... ┘└───┬───┘└───┬───┘   ← Math.floor()
       min     min+1               max-1    max
    

您不能在该等式中使用`ceil()`and ，因为现在滚动的机会稍少，但您也可以滚动（不需要的）结果。`-1``max``min-1`

var randomnumber = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;

[数学.随机()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
=======================================================================================================

返回min（**包含**）和 max（**包含）之间的**[整数随机数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values_inclusive)：

    function randomInteger(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    

或者min（**包含**）和 max（**不包含**）之间的[任何随机数：](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_number_between_two_values)

    function randomNumber(min, max) {
      return Math.random() * (max - min) + min;
    }
    

有用的示例（整数）：

    // 0 -> 10
    const rand1 = Math.floor(Math.random() * 11);
    
    // 1 -> 10
    const rand2 = Math.floor(Math.random() * 10) + 1;
    
    // 5 -> 20
    const rand3 = Math.floor(Math.random() * 16) + 5;
    
    // -10 -> (-2)
    const rand4 = Math.floor(Math.random() * 9) - 10;
    
    console.log(rand1);
    console.log(rand2);
    console.log(rand3);
    console.log(rand4);

运行代码片段Hide results

展开片段

\*\* 总是很高兴被提醒（Mozilla）：

> Math.random() 不提供加密安全随机数。请勿将它们用于与安全相关的任何事情。请改用 Web Crypto API，更准确地说是 window.crypto.getRandomValues() 方法。

使用：

    function getRandomizer(bottom, top) {
        return function() {
            return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
        }
    }
    

用法：

    var rollDie = getRandomizer( 1, 6 );
    
    var results = ""
    for ( var i = 0; i<1000; i++ ) {
        results += rollDie() + " ";    // Make a string filled with 1000 random numbers in the range 1-6.
    }
    

分解：

我们返回一个函数（借用函数式编程），当调用该函数时，将返回值`bottom`和之间的随机整数`top`（含）。我们说“包含”是因为我们希望将底部和顶部都包含在可返回的数字范围内。这样，`getRandomizer( 1, 6 )`将返回 1、2、3、4、5 或 6。

（“底部”是较小的数字，“顶部”是较大的数字）

    Math.random() * ( 1 + top - bottom )
    

`Math.random()``top`返回 0 和 1 之间的随机双精度值，如果我们将其乘以 1 加上和之间的差值，我们将得到和`bottom`之间的双精度值。`0``1+b-a`

    Math.floor( Math.random() * ( 1 + top - bottom ) )
    

`Math.floor`将数字向下舍入到最接近的整数。现在我们有了`0`和之间的所有整数`top-bottom`。 1 看起来令人困惑，但它必须存在，因为我们总是向下舍入，因此如果没有它，实际上永远不会达到最高数字。我们生成的随机小数需要在`0`to范围内，以便我们可以向下舍入并获得在to`(1+top-bottom)`范围内的整数：`0``top-bottom`

    Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom
    

前面示例中的代码为我们提供了`0`和范围内的整数`top-bottom`，因此我们现在需要做的就是与该结果相加，以获得范围和范围内的`bottom`整数。 ：D`bottom``top`

* * *

注意：如果您首先传入非整数值或更大的数字，您将得到不良行为，但除非有人请求，否则我不会深入研究参数检查代码，因为它与原始问题的意图相去甚远。

所有这些解决方案都使用了太多的火力。你只需要调用一个函数：[Math.random();](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)

    Math.random() * max | 0;
    

这将返回 0（包含）和 max（不包含）之间的随机整数。

How to generating random whole numbers in javascrip

要将数字格式化为货币字符串，我们通常会遵循以下步骤：

1. **确定货币单位**：首先要决定使用哪种货币单位，比如美元（USD）、欧元（EUR）等，因为每种货币的格式可能有所不同。

2. **小数点精度**：货币通常需要保留两位小数，即分为单位。

3. **千分位分隔符**：大数额通常会使用逗号（在某些国家为点）作为千分位分隔符。

4. **货币符号**：根据货币的不同，可能会在前面或后面添加货币符号，比如'$'表示美元。

5. **负数的表示**：如果数额是负的，可以通过括号或者负号来表示。

举个例子，如果我们要将数字1234567.89格式化为美元字符串，我们会这样做：

- 确定货币单位：美元（$）
- 小数点精度：保留两位小数，即".89"
- 千分位分隔符：使用逗号将数字分隔为千分位，即"1,234,567.89"
- 货币符号：在数额前加上美元符号，即"$1,234,567.89"
- 负数的表示：如果是负数，写作"-$1,234,567.89"或"($1,234,567.89)"

在编程中，这可以通过各种方式实现，例如在JavaScript中，我们可以使用`Intl.NumberFormat`对象来格式化货币：

```javascript
const number = 1234567.89;
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

const formatted = formatter.format(number); // "$1,234,567.89"
```

在Python中，我们可以使用内置的`locale`模块或者第三方库如`Babel`来实现相同的功能：

```python
import locale
locale.setlocale(locale.LC_ALL, 'en_US.UTF-8')

number = 1234567.89
formatted = locale.currency(number, grouping=True)  # "$1,234,567.89"
```

这些方法都可以实现将数字格式化为货币字符串的目的，并且可以根据不同的地区设置进行定制。

[国际数字格式](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/NumberFormat)
===================================================================================================

JavaScript 有一个数字格式化程序（国际化 API 的一部分）。

    // Create our number formatter.
    const formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    
      // These options are needed to round to whole numbers if that's what you want.
      //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
      //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
    });
    
    console.log(formatter.format(2500)); /* $2,500.00 */

运行代码片段Hide results

展开片段

使用系统区域`undefined`设置代替第一个参数（`'en-US'`在示例中）（如果代码在浏览器中运行，则为用户区域设置）。[区域设置代码的进一步解释](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation)。

这是[货币代码的列表](https://www.iban.com/currency-codes)。

Intl.NumberFormat 与 Number.prototype.toLocaleString
---------------------------------------------------

最后一点是将其与旧版本进行比较。`toLocaleString`。它们都提供本质上相同的功能。然而，toLocaleString 的旧版本（Intl 之前）[实际上并不支持语言环境](http://www.ecma-international.org/ecma-262/5.1/#sec-15.7.4.3)：它使用系统语言环境。因此，在调试旧浏览器时，请确保您使用的是正确的版本（[MDN 建议检查 是否存在`Intl`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Checking_for_support_for_locales_and_options_arguments)）。如果您不关心旧浏览器或只使用[shim](https://github.com/andyearnshaw/Intl.js)，则根本无需担心这一点。

_此外，对于单个_项目来说，两者的性能是相同的，但如果您有很多数字需要格式化，那么使用速度`Intl.NumberFormat`会快大约 70 倍。因此，通常最好`Intl.NumberFormat`在每次页面加载时仅使用和实例化一次。无论如何，这是等效的用法`toLocaleString`：

    console.log((2500).toLocaleString('en-US', {
      style: 'currency',
      currency: 'USD',
    })); /* $2,500.00 */

运行代码片段Hide results

展开片段

### 关于浏览器支持和 Node.js 的一些说明

*   如今，浏览器支持不再是问题，全球支持率超过 99%
*   如果您确实需要，有一个[垫片可以在化石浏览器（例如](https://github.com/andyearnshaw/Intl.js)[Internet Explorer 8](https://en.wikipedia.org/wiki/Internet_Explorer_8) ）上支持它
*   v13 之前的 Node.js 仅支持`en-US`开箱即用。一种解决方案是安装[full-icu](https://github.com/icu-project/full-icu-npm)，请参阅[此处](https://stackoverflow.com/a/39626602/1000608)了解更多信息
*   查看[CanIUse](https://caniuse.com/#feat=internationalization)了解更多信息

[Number.prototype.toFixed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed)
---------------------------------------------------------------------------------------------------------------------------

该解决方案与每个主要浏览器兼容：

      const profits = 2489.8237;
    
      profits.toFixed(3) // Returns 2489.824 (rounds up)
      profits.toFixed(2) // Returns 2489.82
      profits.toFixed(7) // Returns 2489.8237000 (pads the decimals)
    

您所需要的只是添加货币符号（例如`"$" + profits.toFixed(2)`），您将获得美元金额。

自定义功能
-----

如果您需要在每个数字之间使用`,`，可以使用此功能：

    function formatMoney(number, decPlaces, decSep, thouSep) {
        decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
        decSep = typeof decSep === "undefined" ? "." : decSep;
        thouSep = typeof thouSep === "undefined" ? "," : thouSep;
        var sign = number < 0 ? "-" : "";
        var i = String(parseInt(number = Math.abs(Number(number) || 0).toFixed(decPlaces)));
        var j = (j = i.length) > 3 ? j % 3 : 0;
    
        return sign +
            (j ? i.substr(0, j) + thouSep : "") +
            i.substr(j).replace(/(\decSep{3})(?=\decSep)/g, "$1" + thouSep) +
            (decPlaces ? decSep + Math.abs(number - i).toFixed(decPlaces).slice(2) : "");
    }
    
    document.getElementById("b").addEventListener("click", event => {
      document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
    });

    <label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
    <br />
    <button id="b">Get Output</button>
    <p id="x">(press button to get output)</p>

运行代码片段Hide results

展开片段

像这样使用它：

    (123456789.12345).formatMoney(2, ".", ",");
    

如果您总是要使用“.”和“，”，您可以将它们从方法调用中删除，该方法将为您默认它们。

    (123456789.12345).formatMoney(2);
    

如果您的文化有两个符号翻转（即欧洲人）并且您想使用默认值，只需在方法中粘贴以下两行`formatMoney`：

        d = d == undefined ? "," : d,
        t = t == undefined ? "." : t,
    

自定义函数（ES6）
----------

如果您可以使用现代 ECMAScript 语法（即通过 Babel），则可以使用这个更简单的函数：

    function formatMoney(amount, decimalCount = 2, decimal = ".", thousands = ",") {
      try {
        decimalCount = Math.abs(decimalCount);
        decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
    
        const negativeSign = amount < 0 ? "-" : "";
    
        let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
        let j = (i.length > 3) ? i.length % 3 : 0;
    
        return negativeSign +
          (j ? i.substr(0, j) + thousands : '') +
          i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) +
          (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
      } catch (e) {
        console.log(e)
      }
    };
    
    document.getElementById("b").addEventListener("click", event => {
      document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
    });

    <label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
    <br />
    <button id="b">Get Output</button>
    <p id="x">(press button to get output)</p>

运行代码片段Hide results

展开片段

简短而快速的解决方案（适用于任何地方！）
--------------------

    (12345.67).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');  // 12,345.67
    

该解决方案背后的想法是用第一个匹配项和逗号替换匹配的部分，即`'$&,'`。匹配是使用[前瞻方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-lookahead)完成的。您可以将表达式理解为_“匹配一个数字，如果它后面跟着三个数字集（一个或多个）和一个点的序列”_。

**测试：**

    1        --> "1.00"
    12       --> "12.00"
    123      --> "123.00"
    1234     --> "1,234.00"
    12345    --> "12,345.00"
    123456   --> "123,456.00"
    1234567  --> "1,234,567.00"
    12345.67 --> "12,345.67"
    

**演示： http:** [//jsfiddle.net/hAfMM/9571/](http://jsfiddle.net/hAfMM/9571/)

* * *

扩展短解
----

您还可以扩展对象的原型[`Number`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Number)以添加对任意小数位数`[0 .. n]`和数字组大小的额外支持`[0 .. x]`：

    /**
     * Number.prototype.format(n, x)
     * 
     * @param integer n: length of decimal
     * @param integer x: length of sections
     */
    Number.prototype.format = function(n, x) {
        var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
        return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
    };
    
    1234..format();           // "1,234"
    12345..format(2);         // "12,345.00"
    123456.7.format(3, 2);    // "12,34,56.700"
    123456.789.format(2, 4);  // "12,3456.79"
    

**演示/测试：** [http://jsfiddle.net/hAfMM/435/](http://jsfiddle.net/hAfMM/435/)

* * *

超长短解
----

在此[超级扩展版本](https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript/14428340#comment34151293_14428340)中您可以设置不同的分隔符类型：

    /**
     * Number.prototype.format(n, x, s, c)
     * 
     * @param integer n: length of decimal
     * @param integer x: length of whole part
     * @param mixed   s: sections delimiter
     * @param mixed   c: decimal delimiter
     */
    Number.prototype.format = function(n, x, s, c) {
        var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
            num = this.toFixed(Math.max(0, ~~n));
    
        return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
    };
    
    12345678.9.format(2, 3, '.', ',');  // "12.345.678,90"
    123456.789.format(4, 4, ' ', ':');  // "12 3456:7890"
    12345678.9.format(0, 3, '-');       // "12-345-679"
    

**演示/测试：** [http://jsfiddle.net/hAfMM/612/](http://jsfiddle.net/hAfMM/612/)

看一下 JavaScript [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)对象，看看它是否可以帮助您。

*   `toLocaleString()`将使用特定于位置的千位分隔符格式化数字。
*   `toFixed()`将数字四舍五入到特定的小数位数。

要同时使用这些值，必须将其类型更改回数字，因为它们都输出字符串。

例子：

    Number((someNumber).toFixed(1)).toLocaleString()
    

**编辑**

可以直接使用 toLocaleString ，不需要重新转换为数字：

    someNumber.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
    

#### 多个号码

如果您需要经常类似地格式化数字，您可以创建一个特定的对象以供重用。就像德语（瑞士）：

    const money = new Intl.NumberFormat('de-CH',
      { style:'currency', currency: 'CHF' });
    const percent = new Intl.NumberFormat('de-CH',
      { style:'percent', maximumFractionDigits: 1, signDisplay: "always"});
    

可以用作：

    money.format(1234.50); // output CHF 1'234.50
    percent.format(0.083);  // output +8.3%
    

相当漂亮。

以下是[Patrick Desjardins（别名 Daok）的](https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript/149099#149099)代码，添加了一些注释和一些细微的更改：

    /*
    decimal_sep: character used as decimal separator, it defaults to '.' when omitted
    thousands_sep: char used as thousands separator, it defaults to ',' when omitted
    */
    Number.prototype.toMoney = function(decimals, decimal_sep, thousands_sep)
    {
       var n = this,
       c = isNaN(decimals) ? 2 : Math.abs(decimals), // If decimal is zero we must take it. It means the user does not want to show any decimal
       d = decimal_sep || '.', // If no decimal separator is passed, we use the dot as default decimal separator (we MUST use a decimal separator)
    
       /*
       According to [https://stackoverflow.com/questions/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function]
       the fastest way to check for not defined parameter is to use typeof value === 'undefined'
       rather than doing value === undefined.
       */
       t = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, // If you don't want to use a thousands separator you can pass empty string as thousands_sep value
    
       sign = (n < 0) ? '-' : '',
    
       // Extracting the absolute value of the integer part of the number and converting to string
       i = parseInt(n = Math.abs(n).toFixed(c)) + '',
    
       j = ((j = i.length) > 3) ? j % 3 : 0;
       return sign + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : '');
    }
    

这里有一些测试：

    // Some tests (do not forget parenthesis when using negative numbers and number with no decimals)
    alert(123456789.67392.toMoney() + '\n' + 123456789.67392.toMoney(3) + '\n' + 123456789.67392.toMoney(0) + '\n' + (123456).toMoney() + '\n' + (123456).toMoney(0) + '\n' + 89.67392.toMoney() + '\n' + (89).toMoney());
    
    // Some tests (do not forget parenthesis when using negative numbers and number with no decimals)
    alert((-123456789.67392).toMoney() + '\n' + (-123456789.67392).toMoney(-3));
    

较小的变化是：

1.  移动一点`Math.abs(decimals)`只有当不是时才能完成`NaN`。
    
2.  `decimal_sep`不能再是空字符串（某种小数点分隔符是必须_的_）
    
3.  我们[按照如何最好地确定参数是否未发送到 JavaScript 函数中的](https://stackoverflow.com/questions/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function)`typeof thousands_sep === 'undefined'`建议使用[](https://stackoverflow.com/questions/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function)
    
4.  `(+n || 0)`不需要，因为它`this`是一个`Number`对象
    

[JSFiddle](https://jsfiddle.net/9kvrndfu/)

JavaScript相关问题