前言 初衷： 在面试中，面试官经常问到说一下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页面去发送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俗话说得好，工欲善其事必先利其器。本文阿宝哥将介绍一些优秀的开源项目，利用这些开源项目，你将能能轻松应对以下十个工作场景：文件上传、图片处理、文档处理、网络请求、数据存储、微前端、表单设计器、H5 页面设计器、文档管理和 API 管理。 阅读阿宝哥近期热门文章（感谢掘友的鼓励与支持🌹🌹🌹）： 77.9K Star 的 Axios 项目有哪些值得借鉴的地方（1018+ 个👍） 使用这些思路与技巧，我读懂了多个优秀的开源项目（724+ 个👍） 这些高阶的函数技术，你掌握了么 （629+ 个👍） 文件上传 uppy The next open source file uploader for web browsers 🐶 github.com/transloadit… uppy 是一个体验顺滑、模块化的 JavaScript 文件上传器，可以无缝地与任何应用程序集成。它速度快，使用方便，可以让你专注比构建文件上传器更重要的问题。该库拥有以下特性： 支持 I18n 及可访问性； 轻量，基于模块化的插件架构，可按需加载； 通过开放的 tus 标准，可恢复文件上传，可以解决上传过程中网络故障的问题。 filepond 🌊 A flexible and fun JavaScript file upload library github.com/pqina/filep… filepond 是一个 JavaScript 库，可以上传你扔给它的任何内容，优化图像以加快上传速度，并提供出色的，可访问的，柔滑的用户体验。该库拥有以下特性： 接受目录，文件，Blobs，本地 URL，远程 URL 和 Data URIs； 图像优化，自动调整图像大小，支持裁剪，过滤和修复 EXIF 方向； 支持拖拽文件，从文件系统选择文件，复制和粘贴文件或使用 API 添加文件； 使用 AJAX 进行异步上传，支持分块上传，可以将文件编码为 base64 数据，并可以通过表单提交。 ✨ 扩展阅读 ✨ 玩转前端文件上传 大规格文件的上传优化 关注「全栈修仙之路」阅读阿宝哥原创的 3 本免费电子书（累计下载近2万）及 50 几篇 “重学TS” 教程。 图片处理 tui.image-editor 🍞🎨 Full-featured […]
View Details阿宝哥第一次使用 TypeScript 是在 Angular 2.x 项目中，那时候 TypeScript 还没有进入大众的视野。然而现在学习 TypeScript 的小伙伴越来越多了，本文阿宝哥将从 16 个方面入手，带你一步步学习 TypeScript，感兴趣的小伙伴不要错过。 一、TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系： 1.1 TypeScript 与 JavaScript 的区别 TypeScript JavaScript JavaScript 的超集用于解决大型项目的代码复杂性 一种脚本语言，用于创建动态网页 可以在编译期间发现并纠正错误 作为一种解释型语言，只能在运行时发现错误 强类型，支持静态和动态类型 弱类型，没有静态类型选项 最终被编译成 JavaScript 代码，使浏览器可以理解 可以直接在浏览器中使用 支持模块、泛型和接口 不支持模块，泛型或接口 社区的支持仍在增长，而且还不是很大 大量的社区支持以及大量文档和解决问题的支持 1.2 获取 TypeScript 命令行的 TypeScript 编译器可以使用 npm 包管理器来安装。 1.安装 TypeScript
|
1 |
$ npm install -g typescript |
2.验证 TypeScript
|
1 2 |
$ tsc -v # Version 4.0.2 |
3.编译 TypeScript 文件
|
1 2 |
$ tsc helloworld.ts # helloworld.ts => helloworld.js |
当然，对刚入门 TypeScript 的小伙伴来说，也可以不用安装 typescript，而是直接使用线上的 TypeScript Playground 来学习新的语法或新特性。通过配置 TS Config 的 Target，可以设置不同的编译目标，从而编译生成不同的目标代码。 […]
View DetailsDate.parse() 方法解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数，如果该字符串无法识别，或者一些情况下，包含了不合法的日期数值（如：2015-02-31），则返回值为NaN。 不推荐在ES5之前使用Date.parse方法，因为字符串的解析完全取决于实现。直到至今，不同宿主在如何解析日期字符串上仍存在许多差异，因此最好还是手动解析日期字符串（在需要适应不同格式时库能起到很大帮助）。
|
1 2 3 4 5 6 7 8 |
const unixTimeZero = Date.parse('01 Jan 1970 00:00:00 GMT'); const javaScriptRelease = Date.parse('04 Dec 1995 00:12:00 GMT'); console.log(unixTimeZero); // expected output: 0 console.log(javaScriptRelease); // expected output: 818035920000 |
语法 显式调用：
|
1 |
Date.parse(dateString) |
隐式调用：
|
1 |
new Date(dateString).getTime() |
参数 dateString 一个符合 RFC2822 或 ISO 8601 日期格式的字符串（其他格式也许也支持，但结果可能与预期不符）。 返回值 一个表示从1970-1-1 00:00:00 UTC到给定日期字符串所表示时间的毫秒数的数值。如果参数不能解析为一个有效的日期，则返回NaN。 描述 parse 方法接受一个日期字符串（例如 "Dec 25, 1995"），并返回从1970-1-1 00:00:00 UTC到该日期字符串所表示日期的毫秒数。该方法在基于字符串值设置日期值时很有用，例如结合使用setTime() 方法和 Date() 构造函数。 parse 方法接受一个表示时间的字符串，返回相应的时间值。该方法可以接受符合 RFC2822 / IETF 日期语法 (RFC2822 Section 3.3) 的字符串，如 "Mon, 25 Dec 1995 13:30:00 GMT"。该方法能够理解美国大陆时区的缩写，但是为了更通用，应该使用时区偏移，如 "Mon, 25 Dec 1995 13:30:00 +0430" （格林威治的子午线向东偏移4小时30分钟）。如果没有指定时区，默认使用本地时区。 GMT 和 UTC 被看作相等。 如果 RFC2822 Section 3.3 格式中不包含时区信息时，会以本地时区来解析日期字符串。 由于在解析日期字符串时存在偏差会导致结果不一致，因此推荐始终手动解析日期字符串，特别是不同的ECMAScript实现会把诸如“2015-10-12 12:00:00”的字符串解析为NaN，UTC或者本地时间。 ECMAScript 5 ISO-8601 日期格式支持 另外，日期时间字符串也可以使用 ISO 8601 格式。例如，"2011-10-10" （仅日期）或 "2011-10-10T14:48:00" （日期和时间）能够作为参数被传递和解析。 如果参数字符串只包含日期格式，那么将会使用UTC时区来解析该参数。而如果是ISO 8601 格式中规定的时间加日期的格式，则将会被作为本地时区处理。 虽然在日期字符串解析过程中会使用时区修饰符，但返回值总会是从由NaN表示的1970-1-1 00:00:00 UTC到该日期字符串所表示日期的毫秒数。 由于 parse() 是 Date 的一个静态方法 , 所以应该使用 Date.parse() 来调用，而不是作为 Date 的实例方法。 默认时区的区别 当输入为 "March 7, 2014" 时， parse() 将默认使用本地时区。但如果使用 ISO 格式如 "2014-03-07" ，则会被默认为 […]
View Details