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 相关文章推荐
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 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-Java-Bridge使用笔记
2014/09/22 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
js表头排序实现方法
2015/01/16 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python字符串与url编码的转换实例
2018/05/10 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
pycharm 安装JPype的教程
2019/08/08 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python和go语言的区别是什么
2020/07/20 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
小学生期末自我鉴定
2014/01/19 职场文书
应用英语专业自荐信
2014/01/26 职场文书
精彩广告词大全
2014/03/19 职场文书
初中生评语大全
2014/04/24 职场文书
高中教师考核方案
2014/05/18 职场文书
预备党员转正材料
2014/12/19 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
数学复习课教学反思
2016/02/18 职场文书
python flask框架快速入门
2021/05/14 Python
pytorch 实现变分自动编码器的操作
2021/05/24 Python