JavaScript 巧学巧用


Posted in Javascript onMay 23, 2017

前言

由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来,感谢大家一直以来的关注和支持。
本文主要给大家分享一下在编写JavaScript代码的时候存在的一些方法和技巧,虽然有时候条条大路都通向罗马,但是也许总会有那么一条最短的路径可走。希望通过以下几点JavaScript技巧让大家的代码“化繁为简,化简为精”。

巧学巧用

1. new Set()

可能有人知道ES6中提供了新的数据结构 Set,但是能够灵活运用的人或许不多。利用Set数据结构我们能够轻松的去重一个数组,比如:

let arr = [1, 2, 2, 3];
let set = new Set(arr);
let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。

console.log(newArr); // [1, 2, 3]

2. Object.assign()

Object.assign()也是ES6中提供的对象的扩展方法,其可以用于对象的合并拷贝,比如:

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = Object.assign({}, obj1, obj2);

console.log(obj3); // {a: 1, b: 2}

3. map()

map方法用于遍历数组,有返回值,可以对数组的每一项进行操作并生成一个新的数组,有些时候可以代替for和forEach循环,简化代码,比如:

let arr3 = [1, 2, 3, 4, 5];
let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10
console.log(newArr3); // [10, 20, 30, 40, 50]

4. filter()

filter方法同样用于遍历数组,顾名思义,就是过滤数组,在每一项元素后面触发一个回调函数,通过判断,保留或移除当前项,最后返回一个新的数组,比如:

let arr4 = [1, 2, 3, 4, 5];
let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模,过滤余数不为0的数
console.log(newArr4); // [2,4]

5. some()

some方法用于遍历数组,在每一项元素后面触发一个回调函数,只要一个满足条件就返回true,否则返回false,类似于 || 比较,比如:

let arr5 = [{result: true}, {result: false}];

let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true,即为true

console.log(newArr5); // true

6.every()

every方法用于遍历数组,在每一项元素后面触发一个回调函数,只要一个不满足条件就返回false,否则返回true,类似于 && 比较,比如:

let arr6 = [{result: true}, {result: false}];

let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为false

console.log(newArr6); // false

7. ~~运算符

~符号用在JavaScript中有按位取反的作用,~~即是取反两次,而位运算的操作值要求是整数,其结果也是整数,所以经过位运算的都会自动变成整数,可以巧妙的去掉小数部分,类似于parseInt,比如:

let a = 1.23;
let b = -1.23;

console.log(~~a); // 1
console.log(~~b); // -1

8. ||运算符

巧妙的使用 || 运算符我们可以给变量设置默认值,比如:

let c = 1;
let d = c || 2; // 如果c的值为true则取存在的值,否则为2

console.log(d); // 1

9. ...运算符

...运算符是ES6中用于解构数组的方法,可以用于快速获取数组的参数,比如:

let [num1, ...nums] = [1, 2, 3];

console.log(num1); // 1
console.log(nums); // [2, 3]

10. 三元运算符

该运算符应该大家都比较熟悉,在默写情况下可以简化if else的写法,比如:

let e = true,
  f = '';

if (e) {
  f = 'man';
} else {
  f = 'woman';
}

// 等同于
e ? f = 'man' : f = 'woman';

结语

本文只列出了JavaScript语法中比较常见的10点提升编码效率的方法进行了简单地阐述,当然每一个知识点都可以进行相应的展开与探究,希望大家在巧学的同时达到巧用的效果。

Javascript 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
JS获取短信验证码倒计时的实现代码
May 22 #Javascript
原生JS实现不断变化的标签
May 22 #Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 #Javascript
Vue实现动态显示textarea剩余字数
May 22 #Javascript
bootstrap栅格系统示例代码分享
May 22 #Javascript
vue+axios实现登录拦截的实例代码
May 22 #Javascript
You might like
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
PHP多态代码实例
2015/06/26 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
javascript实现日期格式转换
2014/12/16 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python 求定积分和不定积分示例
2019/11/20 Python
简单了解django文件下载方式
2020/02/10 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
python如何操作mysql
2020/08/17 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
《小熊住山洞》教学反思
2014/02/21 职场文书
法律进企业活动方案
2014/03/04 职场文书
秸秆管理实施方案
2014/03/15 职场文书
如何写股份合作协议书
2014/09/11 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
Redis实现分布式锁的五种方法详解
2022/06/14 Redis