前言 初衷： 在面试中，面试官经常问到说一下Es5和Es6的数组方法有哪些，有很多同学老是分不清楚，今天笔者就来分享一下。 适合人群： 前端初级开发 Es5系列 indexOf 用途： 用于查找数组中是否存在某个值，如果存在则返回某个值的下标，否则返回-1
|
1 2 3 4 |
let list = [1, 2, 3]; console.log(list.indexOf(2)) // 1 console.log(list.indexOf("蛙人")) // -1 |
map 用途： map是一个数组函数方法，接收三个参数，value，index，self，返回值是处理完的结果。
|
1 2 3 4 5 6 7 8 9 |
let list = [1, 2, 3]; const res = list.map((value, key, self) => { console.log(value) // 1 2 3 console.log(key) // 0 1 2 console.log(self) // [1, 2, 3] return value * 2 }) console.log(res) |
forEach 用途： 用于遍历一个数组，接收三个参数，value，index，self，返回值为undefined
|
1 2 3 4 5 6 7 8 9 |
let list = [1, 2, 3]; const res = list.forEach((value, key, self) => { console.log(value) // 1 2 3 console.log(key) // 0 1 2 console.log(self) // [1, 2, 3] return 123 }) console.log(res) // undefined |
splice 用途： 用于数组删除或替换内容，接收三个参数： 第一个参数是，删除或添加的位置 第二个参数是，要删除的几位，如果为0则不删除 第三个参数是，向数组添加内容
|
1 2 3 4 5 6 7 8 9 10 |
let list = [1, 2, 3]; list.splice(0, 1) // 把第0个位置，给删除一位 console.log(list) // [2, 3] list.splice(0, 1, "蛙人") // 把第0个位置，给删除一位，添加上一个字符串 console.log(list) // ["蛙人", 2, 3] list.splice(0, 2, "蛙人") // 把第0个位置，给删除2位，添加上一个字符串 console.log(list) // ["蛙人", 3] |
slice 用途： 用于截取数组值，接收两个参数，第一个参数是要获取哪个值的下标，第二个参数是截取到哪个下标的前一位。
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.slice(1, 3) // 从第一位下标开始截取，到第三位下标的前一位，所以截取出来就是 [2, 3] console.log(res) // [2, 3] |
filter 用途： 用于过滤数组内的符合条件的值，返回值为满足条件的数组对象
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.filter(item => item > 1); console.log(res) // [2, 3] |
every **用途：**用于检测数组所有元素是否都符合指定条件，返回值为Boolean , 该方法是数组中必须全部值元素满足条件返回true，否则false
|
1 2 3 4 5 6 7 |
let list = [1, 2, 3]; let res = list.every(item => item > 0) console.log(res) // true let res1 = list.every(item => item > 1) console.log(res1) // false |
some 用途： 用于检测数组中的元素是否满足指定条件，返回值为Boolean , 该方法是只要数组中有一项满足条件就返回true，否则false
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.some(item => item > 0) console.log(res) // true |
reduce 用途： 该方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。该方法回调函数接收四个参数 第一个参数：初始值, 或者计算结束后的返回值 第二个参数：当前元素 第二个参数：当前元素的索引 第四个参数：当前元素所属的数组对象，本身 我们一般只用前两个就行，reduce第一个参数回调函数，第二个参数是初始值
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.reduce(( prev, cur ) => prev += cur, 0) console.log(res) // 6 |
reverse 用途： 用于数组反转
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.reverse(); console.log(res) // [3, 2, 1] |
join 用途： 用于数据以什么形式拼接
|
1 2 3 4 5 6 7 |
let list = [1, 2, 3]; let res = list.join("-"); console.log(res) // 1-2-3 let sum = eval(list.join("+")) console.log(sum) // 6 |
sort 用途： 用于将数组排序，排序规则看返回值 返回值为正数,后面的数在前面 返回值为负数,前面的数不变,还在前面 返回值为0,都不动
|
1 2 3 4 |
let list = [1, 2, 3]; let sort = list.sort((a, b) => b - a) console.log(sort) // [3, 2, 1] |
concat 用途： 用于合并数组原始
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.concat([1, 2, 3]) console.log(res) // [1, 2, 3, 1, 2, 3] |
push 用途： 向数组后面添加元素，返回值为数组的length
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.push(1) console.log(res) // 4 |
pop 用途： 用于删除数组尾部的元素，返回值为删除的元素
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.pop() console.log(res) // 3 |
shift 用途： 用于删除数组的头部，返回值为删除的元素
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.shift() console.log(res) // 1 |
unshift 用途： 向数组的头部添加元素，返回值为数组的length
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.unshift(1) console.log(res) // 4 |
toString 用途： 用于将数组内容转换为字符串 […]
View Details毋庸置疑：善用在线资源和工具可以加速开发，提高质量、让生活更 Chill 😎~ 本篇为前端工友们带来 10 个棒棒哒免费的 Web 资源，收藏⭐等于学会 (๑•̀ㅂ•́)و✧ 1. Undraw 如果你的网站需要免费的 SVG 插图，一定不要错过 Undraw 这个网站！ SVG 插图资源是海量的，本瓜下拉了十几、二十次都拉不完（当然，搜索功能也是有的）；并且，你还可以自定义插图的配色，简直不要太 NICE~ 海量资源，支持搜索🔍 随意更改配色🌈 2. Error 404 不知道你一般会去哪找 404 页面素材~ 现在你又多了一个选项：Error 404 酷酷酷~ 把本瓜一个切图仔的审美都拉上来了👆 3. Squoosh 压缩图片！! 对比 tinypng 有【更好的】压缩效果： tinypng 压缩 Squoosh 压缩 压缩效果：前者是 80%，后者是 95%；最终效果也不错~👍 Why not try ? 4. DevDocs DevDocs 见名思意，是 Web 开发技术文档，是非常不错的学习手册！ 别的不说，就这 UI 本瓜就挺喜欢！还支持添加常用技术文档、更换主题等~ 5. iHateRegex 如果你讨厌正则，那么一定不要错过这个网站？(ˉ▽ˉ；)… 不仅如此，还有细节图示！可恶，做的真好啊 ╮(╯▽╰)╭ 6. Carbon 经常有人问，“这种好看的代码片段如何生成”，答案就在 Carbon！ 你可以生成各种主题、各种语言的代码片段，并导出为图片或复制到其它平台，真滴好用👌 舒服了~~ 7. Dribbble 寻找网页设计灵感，认准 Dribbble!!! 看到人家的管理后台设计，就想马上回去把自家的管理后台“撕”了🐶 8. Animista Css 动画，复制代码就能用！免安装，它不香嘛？ 9. Shape […]
View Details㈠fetch的简单介绍 fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。 fetch不是ajax的进一步封装，而是原生js。 Fetch函数就是原生js，没有使用XMLHttpRequest对象。 ㈡XMLHttpRequest API 的缺点 ⑴ 不符合关注分离（Separation of Concerns）的原则 ⑵ 配置和调用方式非常混乱 ⑶ 基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。 ⑷具体示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var xhr = new XMLHttpRequest(); xhr.open('GET',url); xhr.responseType = 'json'; xhr.onload = function(){ console.log(xhr.response); } xhr.onerror = function(){ console.log('xhr error'); } xhr.send(); |
㈢Fetch 的出现就是为了解决 XHR 的问题 ⑴使用fetch做请求后：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
fetch(url).then(function(response){ return response.json(); }).then(function(data){ console.log(data); }).catch(function(e){ console.log('error' + e); }); |
⑵es6写法：
|
1 2 3 4 5 |
fetch(url).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e)); |
⑶处理text/html响应：
|
1 2 3 4 5 |
fetch(url).then(response=>response.text()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e)); |
⑷获取头信息：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
fetch(url).then((response)=>{ console.log(response.status); console.log(response.statusText); console.log(response.headers.get('Content-Type')); console.log(response.headers.get('Date')); return response.json(); }).then(data=>console.log(data)) .catch(e=>console.log('error' + e); |
⑸设置头信息
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
fetch(url,{ headers:{ 'Accept': 'application/json', 'Content-Type': 'application/json' } }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e); |
⑹提交表单
|
1 2 3 4 5 6 7 8 9 10 11 |
fetch(url,{ method: 'post', body: new FormData(document.getElementById('form')) }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e); |
⑺提交json数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
fetch(url,{ method: 'post', body: JSON.stringify({ username: document.getElementById('username').value, password: document.getElementById('password').value }) }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e); |
⑻fetch跨域的处理 fetch中可以设置mode为"no-cors"（不跨域）
|
1 2 3 4 5 |
fetch('/users.json', { method: 'post', mode: 'no-cors', data: {} }).then(function() { /* handle response */ }); |
这样之后我们会得到一个type为“opaque”的返回。 需要指出的是，这个请求是真正抵达过后台的， 所以我们可以使用这种方法来进行信息上报，在我们之前的image.src方法中多出了一种选择， 另外，我们在network中可以看到这个请求后台设置跨域头之后的实际返回，有助于我们提前调试接口（当然，通过chrome插件我们也可以做的到）。 ㈣Fetch 优点 ⑴语法简洁，更加语义化 ⑵基于标准 Promise 实现，支持 async/await ⑶同构方便，使用 isomorphic-fetch ㈤Fetch 的兼容问题： ⒈fetch原生支持性不高，引入下面这些 polyfill 后可以完美支持 IE8+ ： ⑴由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham […]
View Details错误的原因，npm版本问题； 解决办法： 1》更新到最新版本：npm install npm -g 要记住全局更新 2》回退版本：npm install -g npm@5.4.0 用cnpm 会快一些 from:https://www.cnblogs.com/hou-yuan-zhen/p/11703722.html
View Details解决办法参考：https://github.com/babel/babel-preset-env/issues/186 即在命令行输入命令安装模块：npm install babel-preset-env from:https://blog.csdn.net/acoolgiser/article/details/88814071
View Details第一步
|
1 |
npm install vue-signature |
第二步 main.js
|
1 2 |
import vueSignature from "vue-signature" Vue.use(vueSignature) |
vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<template> <div id="app"> <vueSignature ref="signature" :sigOption="option" :w="'800px'" :h="'400px'" :disabled="disabled" :defaultUrl="dataUrl" ></vueSignature> <vueSignature ref="signature1" :sigOption="option"></vueSignature> <button @click="save">Save</button> <button @click="clear">Clear</button> <button @click="undo">Undo</button> <button @click="addWaterMark">addWaterMark</button> <button @click="handleDisabled">disabled</button> </div> </template> <script> export default { name: "app", data() { return { option: { penColor: "rgb(0, 0, 0)", backgroundColor: "rgb(255,255,255)", }, disabled: false, dataUrl: "https://avatars2.githubusercontent.com/u/17644818?s=460&v=4", }; }, methods: { save() { var _this = this; var png = _this.$refs.signature.save(); var jpeg = _this.$refs.signature.save("image/jpeg"); var svg = _this.$refs.signature.save("image/svg+xml"); console.log(png); console.log(jpeg); console.log(svg); }, clear() { var _this = this; _this.$refs.signature.clear(); }, undo() { var _this = this; _this.$refs.signature.undo(); }, addWaterMark() { var _this = this; _this.$refs.signature.addWaterMark({ text: "mark text", // watermark text, > default '' font: "20px Arial", // mark font, > default '20px sans-serif' style: "all", // fillText and strokeText, 'all'/'stroke'/'fill', > default 'fill fillStyle: "red", // fillcolor, > default '#333' strokeStyle: "blue", // strokecolor, > default '#333' x: 100, // fill positionX, > default 20 y: 200, // fill positionY, > default 20 sx: 100, // stroke positionX, > default 40 sy: 200, // stroke positionY, > default 40 }); }, fromDataURL(url) { var _this = this; _this.$refs.signature.fromDataURL( "data:image/png;base64,iVBORw0K..." ); }, handleDisabled() { var _this = this; _this.disabled = !_this.disabled; }, }, }; </script> |
from:https://blog.csdn.net/XLL20001022/article/details/101548655
View Details原因是https页面去发送http请求报错(浏览器阻止https发送http请求) 解决方法：页面中的http换成https from:https://www.cnblogs.com/nonsec/p/13177387.html
View Details原文地址：5 CSS Practices To Avoid as a Web Developer 原文作者：Alexey Shepelev 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：霜羽 Hoarfroster 校对者：KimYang、Chorer 有人认为 CSS 很难学习，觉得 CSS 有很多的坑，甚至还有一点儿魔幻，难以理解，很容易会搬起石头砸自己的脚。对此我感到难过，毕竟，我可不这么认为。 在考虑了可以做什么之后，我提出了五个我挺讨厌的 CSS 的做法，希望帮助大家避免这些习惯。 1. 设置内外边距，然后将其重置 我经常看到人们为所有元素设置内外边距，然后为第一个元素或者最后一个元素清除刚刚写的边距。我不知道为什么你非要在一条规则就可以解决问题的情况下写两条规则。一次为所有必需的元素设置边距明显容易得多！ 为简化 CSS，你可以选用以下几种选择器：nth-child 或 nth-of-type 选择器，还有 :not() 伪类或相邻元素组合器（即 +）。 不要这么写：
|
1 2 3 4 5 6 7 |
.item { margin-right: 1.6rem; } .item:last-child { margin-right: 0; } |
你可以这么写：
|
1 2 3 |
.item:not(:last-child) { margin-right: 1.6rem; } |
或这样写：
|
1 2 3 |
.item:nth-child(n+2) { margin-left: 1.6rem; } |
或者用：
|
1 2 3 |
.item + .item { margin-left: 1.6rem; } |
2. 为 position 为 fixed 或 absolute 的元素添加 display:block 你知道吗？其实你无需为 position 为 fixed 或 absolute 的元素添加 display:block，因为这是默认发生的。 另外，如果你在这些元素上使用 inline-* 值，它们将按以下方式更改： inline、inline-block -> block inline-flex -> flex inline-grid -> grid inline-table -> table 因此，对于 position 为 fixed 或 absolute 的元素，你只需在要使用 flex 布局或者 grid 布局的时候设置 […]
View Details最近写小程序，new Date(‘2018-12-17 13:12’)在电脑上显示正常,用开发者工具进行真机调试的时候也正常,放到手机上就报错,开始还以为是时分秒都必须有. 过了一会才想起来ios的时间格式必须为 2018/12/17 ios不支持2018-12-17的写法,所以-必须都替换为/
|
1 2 3 |
var date = '2018-12-17 13:33' Date.parse(new Date(date.replace(/-/g, '/'))); |
这个问题隔一段时间都会遇到一次,每次自己都忘了这个点…. ———————————————— 版权声明：本文为CSDN博主「__朝朝」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_37514029/article/details/85052064
View Details问题描述： 自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图： 当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比 图一：使用npm run dev命令访问 图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg，而实际在dist目录下，图片路径是这样的，如下图 解决办法： 解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。
|
1 |
publicPath:'../../' |
添加位置为如下图： 然后重新执行 npm run build 命令，即可成功显示图片 from:https://www.cnblogs.com/libo0125ok/p/9361038.html
View Details