1、过滤唯一值 Set类型是在ES6中新增的，它类似于数组，但是成员的值都是唯一的，没有重复的值。结合扩展运算符（...）我们可以创建一个新的数组，达到过滤原数组重复值的功能。 const array = [1, 2, 3, 3, 5, 5, 1]; const uniqueArray = [...new Set(array)];console.log(uniqueArray); // [1, 2, 3, 5]在ES6之前，我们如果想要实现这个功能的话，需要的处理代码要多很多。 这个技巧的适用范围是数组中的数值的类型为：undefine...
前言 这篇文章主要记录一下平时自己实践得到的, 博客中学习的以及在一些项目源码中看到的 javascript 技巧。有些东西可以说是奇淫技巧，有些可能是 ES6+ 中一些比较具有实用性的新语法。 && 和 || 的妙用有时候我们需要在某个函数或变量为 true 时执行另外一个函数。例如:const task1 = () => {console.log(执行 task1);return Math.random() >= 0.5; }const task2 = () => console.log(task1 执行成功后执行 task2); if (task1())...
内容基本是今年从其他大神的文章学习到的东西。分享给大家： 1 Array.includes 与条件判断一般我们判断或用 || // condition function test(fruit) {if (fruit == "apple" || fruit == "strawberry") {console.log("red");} } 如果我们有更多水果 function test(fruit) {const redFruits = ["apple", "strawberry", "cherry", "cranberries"];if (redFruits.includes(fruit)) {console.log("red");} }2 Set 与去重ES6 提供了新的数...
写在前面在最近的 Vue 项目中，为了完成需求使用了一些小技巧，做个笔记，或许也能帮到道友。阅读重点需求一：为路径配置别名在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS等，为了避免写很长的相对路径（../），我们可以为不同的目录配置一个别名。找到 webpack.base.config.js 中的 resolve 配置项，在其 alias 中增加别名，如下： 创建一个 CSS 文件，随便写点样式：.avatardisplay: flex;justify-content: center;...
在使用 JavaScript 时，我们常常要写不少的条件语句。这里有五个小技巧，可以让你写出更干净、漂亮的条件语句。 1. 使用 Array.includes 来处理多重条件 举个栗子 ： // 条件语句 function test(fruit) {if (fruit == apple || fruit == strawberry) {console.log(red);} }乍一看，这么写似乎没什么大问题。然而，如果我们想要匹配更多的红色水果呢，比方说『樱桃』和『蔓越莓』？我们是不是得用更多的 || 来扩展这条语句？我们可以...
cookie的安全保护基于cookie来验证用户状态的系统中，如何提高cookie的安全级别是首要因素，最简单直接的方式就生成的cookie值随机而且复杂。一般使用uuid来生成cookie，生成的随机串在复杂度上已满足需求，但是如果真被攻击者尝试到一个可用的值，那怎么防范呢？使用signed的cookie设置，如下所示： app.keys = ["token"];...ctx.cookies.set("jt", "abcd", {signed: true, }); 在设置 jt 这个cookie的时候，koa会以 jt 的值 abcd...
在上次的 “Chrome DevTools 你可能不知道的小技巧” 文中，得到很多开发朋友的反馈确实不知道这些小技巧。今天，我们来聊一聊在 EcmaScript5/6+ 中的一些小技巧，欢迎评论区讨论下更多技巧。 JSON.stringify 我们平时经常会用到JSON 对象，比如当我们要实现对象的深拷贝时，我们可以用JSON 对象的JSON.stringify和JSON.parse 来拷贝一个完全一样的对象，而不会对原对象产生任何引用关系。在使用localStorage 时，也会用到它，因为...
1. 类型强制转换 1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN，或者使用 a !== a 来判断是否为NaN，因为 NaN !== NaN 32 * 1 // 32 ds * 1 // NaN null * 1 // 0 undefined * 1 // NaN 1 * { valueOf: ()=>3 } // 3常用： 也可以使用+来转化字符串为数字 + 123 // 123 + ds // NaN + // 0 + null // 0 + undefined // NaN + { valueOf: ()=>3 } // 31.2 obje...
日常开发中，我们会常常把一些功能提取出来，包装成一个公共模块或者组件，供不同地方使用，但是随着项目不断变大，项目目录不断变深，我们引用公共组件的路径越来越长！ 例如：引用一个公共模块 import Menu from ../../../../../components/Menu; // 这里路径太深，很容易写错我们该怎么优化尼？ 解决方案1：使用webpack的resolve.alias属性先配置webpack module.exports = {...resolve: {alias: {"@commModule": path.resolve(_...
译者按： 技巧虽好、重在掌握并使用起来！ 原文: Learn these neat JavaScript tricks in less than 5 minutes译者: Fundebug为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。 1. 删除数组尾部元素 一个简单的用来清空或则删除数组尾部元素的简单方法就是改变数组的length属性值。 const arr = [11, 22, 33, 44, 55, 66]; // truncanting arr.length = 3; console.log(arr); //=> [11, 22, 33...
在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~ 1. 多图表resize事件去中心化 1.1 一般情况 有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写： mounted() {setTimeout(() => window.onresize = () => {this.$refs.chart1.ch...
前言 Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。 # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap，而Bootstrap又是依赖于jQuery的，在使用npm安装时，可能会出现一系列的错...
导航一直是App开发中比较重要的一个组件，ReactNative提供了两种导航组件供我们使用，分别是：NavigatorIOS和Navigator，但是前者只能用于iOS平台，后者在ReactNative0.44版本以后已经被移除了。 好在有人提供了更好的导航组件，就是我们今天要讲的react-navigation，并且ReactNative官方更推荐我们使用此组件。 本篇文章只讲解基础用法，如果你想了解更多，请戳这里->戳我。 简介 react-navigation主要包括导航，底部tab，顶部ta...
前言对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；alert弹出框需要点击确认比较麻烦，而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑。最重要的是alert只能输出字符串，不能输出对象里面的结构，console.log()可以接受任何字符串、数字和JavaScript对象，可以看到清楚的对象属性结构，在ajax返回json数组对...
以下只为记录自己工作常用的片段和心得, 如有问题请指正, 多谢~ jQuery/zepto判断元素是否存在 // 判断长度是否存在, 正确 if ($elem.length) { }// 错误, 因为空数组也是true if ($elem) { }合理判断数据类型 先看代码: function case(str) {return str.match(/reg/); } 看着没问题, 但当 str 为空(false, null等)时就挂了, 适当的检查让代码更健壮, 如: function case(str) {return "string" === typeof str ? str.match(/reg/) ...