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 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
vue写一个组件
Apr 09 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 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
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
js实现进度条的方法
2015/02/13 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
python+mysql实现教务管理系统
2019/02/20 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
2014年感恩节活动策划方案
2014/10/06 职场文书
优秀团支部申报材料
2014/12/26 职场文书
汉语拼音教学反思
2016/02/22 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
HAM-2000摩机图
2021/04/22 无线电
Java SSM配置文件案例详解
2021/08/30 Java/Android