正常我们实现数组去重大多都是通过双层遍历或者indexOf的方式。
function unique(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
function unique(arr) {
if (!Array.isArray(arr)) {
console.log("type error!");
return;
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array.indexOf(arr[i]) === -1) {
array.push(arr[i]);
}
}
return array;
}
但其实有一种更简单的方式:利用Array.from与set去重
function unique(arr) {
if (!Array.isArray(arr)) {
console.log("type error!");
return;
}
return Array.from(new Set(arr));
}
这种代码的实现是不是很简洁
数组转化为对象,大多数同学首先想到的就是这种方法:
var obj = {};
var arr = ["1","2","3"];
for (var key in arr) {
obj[key] = arr[key];
}
console.log(obj)
Output:
{0: 1, 1: 2, 2: 3}
但是有一种比较简单快速的方法:
const arr = [1,2,3]
const obj = {...arr}
console.log(obj)
Output:
{0: 1, 1: 2, 2: 3}
一行代码就能搞定的事情为什么还要用遍历呢?
有些场景我们需要针对不同的条件,给变量赋予不同的值,我们往往会采用下面这种方式:
const isGood = true;
let feeling;
if (isGood) {
feeling = 'good'
} else {
feeling = 'bad'
}
console.log(`I feel ${feeling}`)
Output:
I feel good
但是为什么不采用三元表达式呢?
const isGood = true;
const feeling = isGood ? 'good' : 'bad'
console.log(`I feel ${feeling}`)
Output:
I feel good
这种也就是所谓的Single line(单行)思想,其实就是代码趋向于简洁性。
这种是很常见的,大家用的比较多的可能是parseInt()、Number()这种:
const age = "69";
const ageConvert = parseInt(age);
console.log(typeof ageConvert);
Output: number;
其实也可以通过+来实现转换:
const age = "69";
const ageConvert = +age;
console.log(typeof ageConvert);
Output: number;
转换为字符串一般会用toString()、String()实现:
let a = 123;
a.toString(); // '123'
但也可以通过value + ""这种来实现:
let a = 123;
a + ""; // '123'
如果你想测试一段js代码的执行耗时,那么你可以尝试下performance:
let start = performance.now();
let sum = 0;
for (let i = 0; i < 100000; i++) {
sum += 1;
}
let end = performance.now();
console.log(start);
console.log(end);
两个对象合并大家用的比较多的可能就是Object.assign了:
const obj1 = { a: 1 }
const obj2 = { b: 2 }
console.log(Object.assign(obj1, obj2))
Output:
{ a: 1, b: 2 }
其实有一种更简洁的方式:
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const combinObj = { ...obj1, ...obj2 }
console.log(combinObj)
Output:
{ a: 1, b: 2 }
也就是通过展开操作符(spread operator)来实现。
我们可以通过&&或||来简化我们的代码,比如:
if (isOnline) {
postMessage();
}
// 使用&&
isOnline && postMessage();
// 使用||
let name = null || "森林";
数组的扁平化,我们一般会用递归或reduce去实现
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flatten(arr[i]));
} else {
result.push(arr[i]);
}
}
return result;
}
console.log(flatten(arr));
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
return arr.reduce(function (prev, next) {
return prev.concat(Array.isArray(next) ? flatten(next) : next);
}, []);
}
console.log(flatten(arr));
但是es6提供了一个新方法 flat(depth),参数depth,代表展开嵌套数组的深度,默认是1
let arr = [1, [2, 3, [4, [5]]]];
arr.flat(3); // [1,2,3,4,5]
平时我们实现指数运算,用的比较多的应该是Math.pow(),比如求2^10:
console.log(Math.pow(2, 10));
在ES7中引入了指数运算符**,**具有与Math.pow()一样的计算结果。
console.log(2 ** 10); // 输出1024
我们一般将浮点数转化为整数会用到Math.floor()、Math.ceil()、Math.round()。但其实有一个更快的方式:
console.log(~~6.95); // 6
console.log(6.95 >> 0); // 6
console.log(6.95 << 0); // 6
console.log(6.95 | 0); // 6
// >>>不可对负数取整
console.log(6.95 >>> 0); // 6
也就是使用~, >>, <<, >>>, |这些位运算符来实现取整
如果你有修改数组长度为某固定值的需求,那么你可以试试这个
let array = [0, 1, 2, 3, 4, 5];
array.length = 3;
console.log(array);
Output: [0, 1, 2];
通常,获取数组最后一项,我们用的比较多的是:
let arr = [0, 1, 2, 3, 4, 5];
const last = arr[arr.length - 1];
console.log(last);
Output: 5;
但我们也可以通过slice操作来实现:
let arr = [0, 1, 2, 3, 4, 5];
const last = arr.slice(-1)[0];
console.log(last);
Output: 5;
日常开发中,我们会经常用到JSON.stringify,但大家可能并不大清楚他具体有哪些参数。
他有三个参数:
而我们恰恰可以指定第三个参数space的值去美化我们的JSON
在vue和Vuex的源码中,作者都使用了Object.create(null)来初始化一个新对象。为什么不用更简洁的{}呢?
我们来看下Object.create()的定义:
Object.create(proto, [propertiesObject]);
我们对比分别通过Object.create(null)和{}创建对象的不同:
从上图可以看到,通过{}创建的对象继承了Object自身的方法,如hasOwnProperty、toString等,在新对象上可以直接使用。
而使用Object.create(null)创建的对象,除了自身属性a之外,原型链上没有任何属性。
也就是我们可以通过Object.create(null)这种方式创建一个纯净的对象,我们可以自己定义hasOwnProperty、toString等方法,完全不必担心会将原型链上的同名方法覆盖掉。
日常开发中,数组的拷贝是一个会经常遇到的场景。其实实现数组的拷贝有很多骚技巧。
const arr = [1, 2, 3, 4, 5];
const copyArr = arr.slice();
const arr = [1, 2, 3, 4, 5];
const copyArr = [...arr];
const arr = [1, 2, 3, 4, 5];
const copyArr = new Array(...arr);
const arr = [1, 2, 3, 4, 5];
const copyArr = arr.concat();
开发中有时会遇到多个条件,执行相同的语句,也就是多个||这种:
if (status === "process" || status === "wait" || status === "fail") {
doSomething();
}
这种写法语义性、可读性都不太好。可以通过switch case或includes这种进行改造。
switch (status) {
case "process":
case "wait":
case "fail":
doSomething();
}
const enum = ["process", "wait", "fail"];
if (enum.includes(status)) {
doSomething();
}
在 Vue 的文档中介绍数据绑定和响应时,特意标注了对于经过 Object.freeze() 方法的对象无法进行更新响应。
Object.freeze() 方法用于冻结对象,禁止对于该对象的属性进行修改。
正是由于这种特性,所以在实际项目中,他有很多的适用场景。
像一些纯展示类的页面,可能存在巨大的数组或对象,如果这些数据不会发生更改,那么你就可以使用Object.freeze()将他们冻结,这样Vue就不会对这些对象做setter或getter的转换,可以大大的提升性能。
一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧
小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。
前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...
本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。
使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing
禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素
为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站
清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略。Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的
为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!