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 相关文章推荐
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
Jquery Fade用法详解
Nov 06 jQuery
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图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python 在局部变量域中执行代码
2020/08/07 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
材料专业毕业生求职信
2014/02/26 职场文书
倡议书格式
2014/04/14 职场文书
小学生演讲稿大全
2014/04/25 职场文书
行政管理专业求职信
2014/07/06 职场文书
员工保密协议书
2014/09/27 职场文书
苏州园林导游词
2015/02/03 职场文书
党员转正党支部意见
2015/06/02 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers