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 相关文章推荐
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
原生js实现购物车功能
Sep 23 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下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
Google韩国首页图标动画效果
2007/08/26 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python制作Windows系统服务
2017/03/25 Python
Python 打印中文字符的三种方法
2018/08/14 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
银行存款证明样本
2014/01/17 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
交通文明倡议书
2014/05/16 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
教你部署vue项目到docker
2022/04/05 Vue.js