前端有用JavaScript技巧

数组去重

 var arr = [1, 2, 3, 3, 4];
 console.log(...new Set(arr))
 // [1, 2, 3, 4]

数组和布尔值

有时我们需要过滤数组中值为 false 的值. 例如(0, undefined, null, false)

 var myArray = [1, 0 , undefined, null, false];
 myArray.filter(Boolean);
 //[1]

合并对象

const page = {
 current: 1,
 pageSize: 10
 }
 const form = {
 name: "",
 sex: ""
 }
 const params = {...form, ...page};
 /*
 {
 name: "",
 sex: "",
 current: 1,
 pageSize: 10
 }
 *

获取查询参数

// 假设地址栏中查询参数是这样 "?post=1234&action=edit"
 var urlParams = new URLSearchParams(window.location.search);
 console.log(urlParams.has(‘post‘)); // true
 console.log(urlParams.get(‘action‘)); // "edit"
 console.log(urlParams.getAll(‘action‘)); // ["edit"]
 console.log(urlParams.toString()); // "?post=1234&action=edit"
 console.log(urlParams.append(‘active‘, ‘1‘)); // "?post=1234&action=edit&active=1"

||与&&用法

a() && b() :如果执行a()后返回true,则执行b()并返回b的值;如果执行a()后返回false,则整个表达式返回a()的值,b()不执行;

a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行;如果执行a()后返回false,则执行b()并返回b()的值;

    console.log(0 && 4); //0
    console.log(1 && 4); //4
    console.log(0 || 4); //4
    console.log(1 || 4); //1
    console.log((1 && 3 || 0) && 4); //4
    console.log(1 && 3 || 0 && 4); //3
    console.log(0 && 3 || 1 && 4); //4 

原文地址:https://www.cnblogs.com/lwming/p/11154589.html

时间: 2024-11-08 23:54:34

前端有用JavaScript技巧的相关文章

超有用的JavaScript技巧,窍门和最佳实践

超有用的JavaScript技巧,窍门和最佳实践 1. 首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. [10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 //

冷门却使用的 javascript 技巧

前端已经被玩儿坏了!像用近似乱码的 javascript 拼一个图形,而且可以正常运行等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以jav

45种Javascript技巧大全

原文:45 Useful JavaScript Tips, Tricks and Best Practices 译文:45个有用的JavaScript技巧,窍门和最佳实践 译者:dwqs 在这篇文章中,我将分享一些JavaScript常用的技巧,窍门和最佳实践.不管JavaScript开发者是使用在浏览器/引擎上或者服务器端(SSJS--Service Side JavaScript)JavaScript解释器上,这些他们都是应该知晓的. 需要注意的是,文章中的代码片段均是在最新的Google

85种网站常用JavaScript技巧

40+45种网站常用Javascript技巧转载自网络,地址不详. 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3.

移动平台3G手机网站前端开发布局技巧

本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的 惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程师,如果您不是,可能您会遇见许多不理解或听不懂的专业术语或前端技术(包括 WEB.Mobile).但是

超实用的JavaScript技巧及最佳实践

众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS.Wakanda以及其它实现.此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西. 在这篇文章中,作者将会向大家分享JavaScript开发的小技巧.最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会

21个值得收藏的Javascript技巧

在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率. 1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如下: 1 2 var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; var str = fruits.valueOf(); 输出:a

移动平台3G手机网站前端开发布局技巧汇总

移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程

web开发者需知的45种Javascript技巧大全

web开发者需知的45种Javascript技巧大全 JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是很多新手踏入编程世界的第一个语言.既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人.能够编写结构清晰.性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人. 在这篇文章里,我将分