Javascript中0 == ""的判断结果为true $(function() { console.log("0 == ' ':" + (0 == '')); console.log("0 === '':" + (0 === '')); console.log("0 == null:" + (0 == null)); console.log("0 === null:" + (0 === null)); console.log("1 == true:" + (1 == true)); console.log("1 === true:" + (1 === true)); console.log("0 == false:" + (0 == false)); console.log("0 === false:" + (0 === false)); console.log("null == undefined:" + (null == undefined)); console.log("null === undefined:" + (null === undefined)); })先来说一下 === 吧1、首先是判断两值的类型是否一样，不一样就不相等。2、字符串为例，需要两个字符串的长度一致和每个字符的位置都一致才相等。3、如果两都是引用，比较引用是否一致。4、从上面的运行结果可以看出 null === undefined 是 false的，因为两个值的类型不一样。其实，js的 === 有点类似 Java 里面的 equals 方法。最后就是 js 的 == 了1、如果两值的类型一样，然后就进行 === 比较。2、如果两值的类型不一样，就先转为相同的类型再进行比较。【1】从上面的运行结果可以看到 null == undefined 为 true 的，null == undefined 比较时是不进行转换的，并且规定 null 等于 undefined。【2】如果不同类型与 true 或者 false 进行比较时，会先把true转成 1 ，false 转成 0 ，再进行比较。这就解释了为什么 0 == false 和 1== true 为 true 了。【3】如果一个是基本数据类型一个是对象，那会先把对象先转成基本数据类型，再进行比较。【4】本文的重点：0 == ' ' 为 true，因为0可以为 false，空格或空值也为 false，所以它们相等。我们 if 判断 if(null) 是false，那么为什么 0 == null 是 false呢，是因为null 和 undefined 和 NaN 是特殊值，不进行转换的。NaN == null ，NaN == undefined 都为 false，无论 NaN == 啥都为 false。

play() failed because the user didn't interact with the document first 问题：在浏览器加载完毕后，自动播放视频：出现错误 play() failed because the user didn't interact with the document first.解决方法：给video标签加入 静音即可。Chrome 66为了避免标签产生随机噪音。声音无法自动播放这个在IOS/Android上面一直是个惯例，桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播放，也就是说 在桌面版浏览器也将失效。最开始移动端浏览器是完全禁止音视频自动播放的，考虑到了手机的带宽以及对电池的消耗。但是后来又改了，因为浏览器厂商发现网页开发人员可能会使用GIF动态图代替视频实现自动播放，正如IOS文档所说，使用GIF的带宽流量是Video(h264)格式的12倍，而播放性能消耗是2倍，所以这样对用户反而是不利的。又或者是使用Canvas进行hack，如Android Chrome文档提到。因此浏览器厂商放开了对多媒体自动播放的限制，只要具备以下条件就能自动播放：（1）没音频轨道，或者设置了muted属性（2）在视图里面是可见的，要插入到DOM里面并且不是display: none或者visibility: hidden的，没有滑出可视区域。换句话说，只要你不开声音扰民，且对用户可见，就让你自动播放，不需要你去使用GIF的方法进行hack.桌面版的浏览器在近期也使用了这个策略，如升级后的Safari 11的说明：这个策略无疑对视频网站的冲击最大，如在Safari打开tudou的提示：添加了一个设置向导。Chrome的禁止更加人性化，它有一个MEI的策略，这个策略大概是说只要用户在当前网页主动播放过超过7s的音视频（视频窗口不能小于200 x 140），就允许自动播放。对于网页开发人员来说，应当如何有效地规避这个风险呢？Chrome的文档给了一个最佳实践：先把音视频加一个muted的属性就可以自动播放，然后再显示一个声音被关掉的按钮，提示用户点一下打开声音。对于视频来说，确实可以这样处理，而对于音频来说，很多人是监听页面点击事件，只要点一次了就开始播放声音，一般就是播放个背景音乐。但是如果对于有多个声音资源的页面来说如何自动播放多个声音呢？首先，如果用户还没进行交互就调用播放声音的API，Chrome会这么提示： DOMException: play() failed because the user didn't interact with the document first. Safari会这么提示： NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. 　　Chrome报错提示最为友善，意思是说，用户还没有交互，不能调play。用户的交互包括哪些呢？包括用户触发的touchend, click, doubleclick或者是 keydown事件，在这些事件里面就能调play　　所以上面提到很多人是监听整个页面的点击事件进行播放，不管点的哪里，只要点了就行，包括触摸下滑。这种方法只适用于一个声音资源，不适用多个声音，多个声音应该怎么破呢？这里并不是说要和浏览器对着干，“逆天而行”，我们的目的还是为了提升用户体验，因为有些场景如果能自动播放确实比较好，如一些答题的场景，需要听声音进行答题，如果用户在答题的过程中能依次自动播放相应题目的声音，确实比较方便。同时也是讨论声音播放的技术实现。　　原生播放视频应该就只能使用video标签，而原生播放音频除了使用audio标签之外，还有另外一个API叫AudioContext，它是能够用来控制声音播放并带了很多丰富的操控接口。调audio.play必须在点击事件里面响应，而使用AudioContext的区别在于只要用户点过页面任何一个地方之后就都能播放了。所以可以用AudioContext取代audio标签播放声音。　　我们先用audio.play检测页面是否支持自动播放，以便决定我们播放的时机。1.页面自动播放检测方法很简单，就是创建一个audio元素，给它赋一个src，append到dom里面，然后调用它的play，看是否会抛异常，如果捕获到异常则说明不支持，如下代码所示：function testAutoPlay () { // 返回一个promise以告诉调用者检测结果 return new Promise(resolve => { let audio = document.createElement('audio'); // require一个本地文件，会变成base64格式 audio.src = require('@/assets/empty-audio.mp3'); document.body.appendChild(audio); let autoplay = true; // play返回的是一个promise audio.play().then(() => { // 支持自动播放 autoplay = true; }).catch(err => { // 不支持自动播放 autoplay = false; }).finally(() => { audio.remove(); // 告诉调用者结果 resolve(autoplay); }); }); }这里使用一个空的音频文件，它是一个时间长度为0s的mp3文件，大小只有4kb，并且通过webpack打包成本地的base64格式，所以不用在canplay事件之后才调用play，直接写成同步代码，如果src是一个远程的url，那么就得监听canplay事件，然后在里面play.在告诉调用者结果时，使用Promise resolve的方式，因为play的结果是异步的，并且库函数不推荐使用await.2. 监听页面交互点击如果当前页面能够自动播放，那么可以毫无顾忌地让声音自动播放了，否则就得等到用户开始和这个页面交互了即有点击操作了之后才能自动播放，如下代码所示：let audioInfo = { autoplay: false, testAutoPlay () { // 代码同，略... }, // 监听页面的点击事件，一旦点过了就能autoplay了 setAutoPlayWhenClick () { function setAutoPlay () { // 设置自动播放为true audioInfo.autoplay = true; document.removeEventListener('click', setAutoPlay); document.removeEventListener('touchend', setAutoPlay); } document.addEventListener('click', setCallback); document.addEventListener('touchend', setCallback); }, init () { // 检测是否能自动播放 audioInfo.testAutoPlay().then(autoplay => { if (!audioInfo.autoplay) { audioInfo.autoplay = autoplay; } }); // 用户点击交互之后，设置成能自动播放 audioInfo.setAutoPlayWhenClick(); } }; audioInfo.init(); export default audioInfo;　　上面代码主要监听document的click事件，在click事件里面把autoplay值置为true。换句话说，只要用户点过了，我们就能随时调AudioContext的播放API了，即使不是在点击事件响应函数里面，虽然无法在异步回调里面调用audio.play，但是AudioContext可以做到。　　代码最后通过调用audioInfo.init，把能够自动播放的信息存储在了audioInfo.autoplay这个变量里面。当需要播放声音的时候，例如切到了下一题，需要自动播放当前题的几个音频资源，就取这个变量判断是否能自动播放，如果能就播，不能就等用户点声音图标自己去播，并且如果他点过了一次之后就都能自动播放了。　　那么怎么用AudioContext播放声音呢？3. AudioContext播放声音先请求音频文件，放到ArrayBuffer里面，然后用AudioContext的API进行decode解码，解码完了再让它去play，就行了。我们先写一个请求音频文件的ajax：function request (url) { return new Promise (resolve => { let xhr = new XMLHttpRequest(); xhr.open('GET', url); // 这里需要设置xhr response的格式为arraybuffer // 否则默认是二进制的文本格式 xhr.responseType = 'arraybuffer'; xhr.onreadystatechange = function () { // 请求完成，并且成功 if (xhr.readyState === 4 && xhr.status === 200) { resolve(xhr.response); } }; xhr.send(); }); }这里需要注意的是要把xhr响应类型改成arraybuffer，因为decode需要使用这种存储格式，这样设置之后，xhr.response就是一个ArrayBuffer格式了。接着实例化一个AudioContext，让它去解码然后play，如下代码所示：// Safari是使用webkit前缀 let context = new (window.AudioContext || window.webkitAudioContext)(); // 请求音频数据 let audioMedia = await request(url); // 进行decode和play context.decodeAudioData(audioMedia, decode => play(context, decode));play的函数实现如下：function play (context, decodeBuffer) { let source = context.createBufferSource(); source.buffer = decodeBuffer; source.connect(context.destination); // 从0s开始播放 source.start(0); }这样就实现了AudioContext播放音频的基本功能。如果当前页面是不能autoplay，那么在 new AudioContext的时候，Chrome控制台会报一个警告：这个的意思是说，用户还没有和页面交互你就初始化了一个AudioContext，我是不会让你play的，你需要在用户点击了之后resume恢复这个context才能够进行play.假设我们不管这个警告，直接调用play没有报错，但是没有声音。所以这个时候就要用到上一步audioInfo.autoplay的信息，如果这个为true，那么可以play，否则不能play，需要让用户自己点声音图标进行播放。所以，把代码重新组织一下：function play (context, decodeBuffer) { // 调用resume恢复播放 context.resume(); let source = context.createBufferSource(); source.buffer = decodeBuffer; source.connect(context.destination); source.start(0); } function playAudio (context, url) { let audioMedia = await request(url); context.decodeAudioData(audioMedia, decode => play(context, decode)); } let context = new (window.AudioContext || window.webkitAudioContext)(); // 如果能够自动播放 if (audioInfo.autoplay) { playAudio(url); } // 支持用户点击声音图标自行播放 $('.audio-icon').on('click', function () { playAudio($(this).data('url')); });调了resume之后，如果之前有被禁止播放的音频就会开始播放，如果没有则直接恢复context的自动播放功能。这样就达到基本目的，如果支持自动播放就在代码里面直接play，不支持就等点击。只要点了一次，不管点的哪里接下来的都能够自动播放了。就能实现类似于每隔3s自动播下一题的音频的目的：// 每隔3秒自动播放一个声音 playAudio('question-1.mp3'); setTimeout(() => playAudio(context, 'question-2.mp3'), 3000); setTimeout(() => playAudio(context, 'question-3.mp3'), 3000);这里还有一个问题，怎么知道每个声音播完了，然后再隔个3s播放下一个声音呢？可以通过两个参数，一个是解码后的decodeBuffer有当前音频的时长duration属性，而通过context.currentTime可以知道当前播放时间精度，然后就可以弄一个计时器，每隔100ms比较一下context.currentTime是否大于docode.duration，如果是的话说明播完了。soundjs这个库就是这么实现的，我们可以利用这个库以方便对声音的操作。这样就实现了利用AudioContext自动播放多个音频的目的，限制是用户首次打开页面是不能自动播放的，但是一旦用户点过页面的任何一个地方就可以了。AudioContext还有其它的一些操作。4. AudioContext控制声音属性例如这个CSS Tricks列了几个例子，其中一个是利用AudioContext的振荡器oscillator写了一个电子木琴：这个例子没有用到任何一个音频资源，都是直接合成的，感受如这个Demo：Play the Xylophone (Web Audio API).还有这种混响均衡器的例子：见这个codepen：Web Audio API: parametric equalizer.最后，一直以来都是只有移动端的浏览器禁掉了音视频的自动播放，现在桌面版的浏览器也开始下手了。浏览器这样做的目的在于，不想让用户打开一个页面就各种广告或者其它乱七八糟的声音在播，营造一个纯静的环境。但是浏览器也不是一刀切，至少允许音视频静音的播放。所以对于视频来说，可以静音自动播放，然后加个声音被关掉的图标让用户点击打开，再加添加设置向导之类的方法引导用户设置允许当前网站自动播放。而对于声音可以用AudioContext的API，只要页面被点过一次AudioContext就被激活了，就能直接在代码里面控制播放了。以上可作为当前网页多媒体播放的最佳实践参考。参考链接：https://juejin.im/post/5af7129bf265da0b8262df4c转载于:https://www.cnblogs.com/Neilisme/p/9412315.html

ES6常用知识点 1.不定参数function add(...a){ console.log(...a) }这里面 ... 就表示不定参数，该参数为一个数组，a为参数名，具体第几个可以用a[0]等表示，每个函数 最多声明一个 不定参数，而且一定要放在所有参数的 末尾 。不定参数对arguments对象的影响有不定参数，arguments对象包含所有传入的参数function add(b,...a){ console.log(...a) console.log(arguments[0],arguments[1]) }2.展开运算符可以获取数组中的所有数据let values = [3,54,45,23,6453,324] console.log(Math.max(...values)) //6453还可以加参数console.log(Math.max(...values,543545,43,54,23)) //5435453.对象展开复制const obj1 = { a: 10, b: 20 }; const obj2 = { ...obj1, c: 30 }; console.log(obj2); // {a: 10, b: 20, c: 30}合并对象 类似于 Object.assignconst obj1 = {a: 10}; const obj2 = {b: 20}; const obj3 = {c: 30}; // ES2018 console.log({...obj1, ...obj2, ...obj3}); // → {a: 10, b: 20, c: 30} // ES2015 console.log(Object.assign({}, obj1, obj2, obj3)); // → {a: 10, b: 20, c: 30}

跨域请求如何携带cookie 前言最近在参加面试找工作，陆陆续续的面了两三家。其中面试官问到了一个问题：如何解决跨域问题？我巴巴拉拉的一顿说，大概了说了四种方法，然后面试官紧接着又问：那跨域请求怎么携带 cookie 呢？（常规的面试套路，一般都会顺着你的回答往深了问）由于之前的项目都是同源的，不牵涉跨域访问，所以一时没有回答出来，后来研究了下，所以有了这篇文章。阅读本文，你将学到：1.学会`withCredentials`属性； 2.学会`axios`配置`withCredentials`； 3.学会设置`Access-Control-Allow-Origin`属性； 4.学会设置`Access-Control-Allow-Credentials`属性； 5.学会解决跨域请求携带源站cookie的问题；一. 搭建一个跨域请求的环境思路：使用 express 搭建第一个服务A( http://localhost:8000 )，运行在8000端口上；A服务托管index.html(用于在前端页面发送网络请求)文件；在A服务中写一个处理请求的路由，加载index.html页面时，种下 cookie (这里种cookie为了在请求B服务时携带上);使用 express 搭建第二个服务B( http://localhost:8003 )，运行在8003端口上；在A服务托管的index.html页面去请求B服务，然后把 cookie 传过去；先看下代码结构，相对比较的简单：A服务的代码： // src/app1.js const express = require("express"); const app = express(); // `index.html` 加载时会请求login接口 // 设置`cookie` app.get("/login", (req, res) => { res.cookie("user", "jay", { maxAge: 2000000, httpOnly: true }); res.json({ code: 0, message: "登录成功" }); }); // 此接口是检测`cookie`是否设置成功，如果设置成功的话，浏览器会自动携带上`cookie` app.get("/user", (req, res) => { // req.headers.cookie: user=jay const user = req.headers.cookie.split("=")[1]; res.json({ code: 0, user }); }); // 托管`index.html`页面 // 这样的话在`index.html`中发起的请求，默认的源就是`http://localhost:8000` // 然后再去请求`http://localhost:8003`就会出现跨域了 app.use("/static", express.static("public")); app.listen("8000", () => { console.log("app1 running at port 8000"); });index.html的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h2>this is index.html at port 8000</h2> <button id="button">发送同源请求</button> <button id="cross-button">发送跨域请求</button> <script src="https://static.4ce.cn/npm/axios/dist/axios.min.js"></script> <script> const button = document.querySelector("#button"); const crossButton = document.querySelector("#cross-button"); axios.get("http://localhost:8000/login", {}).then((res) => { console.log(res); }); // 发送同域请求 button.onclick = function () { axios.get("http://localhost:8000/user", {}).then((res) => { console.log(res); }); }; // 发送跨域请求 crossButton.onclick = function () { axios({ method: "get", url: "http://localhost:8003/anotherService", }).then((res) => { console.log(res); }); }; </script> </body> </html>B服务的代码：// src/app2.js const express = require("express"); const app = express(); // 定义一个接口，index.html页面请求这个接口就是跨域（因为端口不同） app.get("/anotherService", (req, res) => { res.json({ code: 0, msg: "这是8003端口返回的" }); }); app.listen("8003", () => { console.log("app2 running at port 8003"); });这个时候环境基本就搭建好了。二、解决跨域携带cookie问题首先我们先在A服务的index.html页面中得到一个cookie,运行A服务：npm install express -D node src/app1.js然后打开 http://localhost:8000/static/index.html : 没有问题的话，页面长这样：这个时候F12打开控制台：可以看到发送了一个 login 请求，并且设置了 cookie ,也可以选择浏览器控制台的Application页签，选中cookie，可以看到cookie的信息：然后我们点击页面上的发送同源请求按钮，可以看到发送了一个user请求，并且已经携带上了cookie：接下来刺激的画面来了，我们点击 发送跨域请求 按钮，出现了跨域请求的报错：重点：接下来开始解决跨域携带cookie问题：1.在前端请求的时候设置request对象的属性withCredentials为true;什么是withCredentials？XMLHttpRequest.withCredentials 属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。如果在发送来自其他域的XMLHttpRequest请求之前，未设置withCredentials 为true，那么就不能为它自己的域设置cookie值。而通过设置withCredentials 为true获得的第三方cookies，将会依旧享受同源策略，因此不能被通过document.cookie或者从头部相应请求的脚本等访问。// 修改跨域请求的代码 crossButton.onclick = function () { axios({ withCredentials: true, // ++ 新增 method: "get", url: "http://localhost:8003/anotherService", }).then((res) => { console.log(res); }); };这个时候再去发送一个跨域请求，你会发现依旧报错，但是我们仔细看下报错，意思是需要设置header的 Access-Control-Allow-Origin 属性：2.在服务端设置Access-Control-Allow-Origin我们修改B(app2.js)服务的代码：// 在所有路由前增加，可以拦截所有请求 app.all("*", (req, res, next) => { res.header("Access-Control-Allow-Origin", "http://localhost:8000"); next(); });修改完之后再次发送一个跨域请求，你会发现，又报错了(接近崩溃)，但是跟之前报的错不一样了，意思大概就是Access-Control-Allow-Credentials这个属性应该设置为true，但是显示得到的是个''：3.在服务端设置Access-Control-Allow-Credentials再次修改B服务的代码（每次修改后需要重新运行）：// 在所有路由前增加，可以拦截所有请求 app.all("*", (req, res, next) => { res.header("Access-Control-Allow-Origin", "http://localhost:8000"); res.header("Access-Control-Allow-Credentials", "true"); // ++ 新增 next(); });再发送一个跨域请求：可以看到，这个跨域请求已经请求成功并且返回数据了！而且也携带了A服务的cookie，这个时候已经大功告成了。三、总结前端请求时在 request 对象中配置 "withCredentials": true服务端在 response 的 header 中配置 "Access-Control-Allow-Origin", "http://xxx:${port}"服务端在 response 的 header 中配置 "Access-Control-Allow-Credentials", "true"

SassError: expected selector报错 ::v-deep 替换 /deep/ 今天打开项目npm run dev，发现出现了报错信息如下： ERROR Failed to compile with 1 errors 20:27:22 error in ./src/nzk/components/themeEditor/layout/components/LeftPane.vue?vue&type=style&index=0&id=6985d748&lang=scss&scoped=true& Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected selector. ╷ 74 │ /deep/ .el-drawer.ltr{ │ ^ ╵ G:\nzk\cms-front\src\nzk\components\themeEditor\layout\components\LeftPane.vue 74:3 root stylesheet 搜了一下：尝试用 ::v-deep 或者 ::deep 替换 /deep/ ，成功解决了问题。某些预处理器（例如Sass）可能无法>>>正确解析。在这些情况下，可以用 /deep/ 如果 /deep/ 报错，可以使用 ::v-deep 或者 ::deep组合器-两者都是它们的别名，>>> 并且工作原理完全相同。用法和 /deep/ 完全一样