JavaScript巧学巧用

前言

由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来,感谢大家一直以来的关注和支持。

本文主要给大家分享一下在编写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); // 给数组每一项乘以10console.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,即为trueconsole.log(newArr5); // true

6.every()

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

let arr6 = [{result: true}, {result: false}];let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为falseconsole.log(newArr6); // false

7. ~~运算符

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

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

8. ||运算符

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

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

9. …运算符

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

let [num1, ...nums] = [1, 2, 3];console.log(num1); // 1console.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点提升编码效率的方法进行了简单地阐述,当然每一个知识点都可以进行相应的展开与探究,希望大家在巧学的同时达到巧用的效果。

时间: 2024-10-13 01:34:53

JavaScript巧学巧用的相关文章

System V三种IPC编程巧学巧记

转载请保留原文地址http://blog.csdn.net/guodongxiaren/article/details/43876207 概述 System V("系统五")系统上发明了三种IPC机制(消息队列.信号量和共享内存),通常称为System V IPC.又因为后来被收录到Unix的XSI标准之中故又称为XSI IPC.所以当你看到System V IPC 和 XSI IPC的时候实际上指的是同一种东西. C语言是一门面向过程的语言,与OO(面向对象)语言不同,它没有做到数据

WriteableBitmap 巧学巧用

分享一下我老师大神的人工智能教程吧.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.net WriteableBitmap我想大家并不陌生吧,它是一个基于内存的图像管理类,大家可以把它认为图像是一堆存储在内存中的数据,这些数据可由WriteableBitmap管理和分配. 这里我就给大家讲一些关于WriteableBitmap的一些使用技巧: 实现自绘 众所周知,目前为止,微软还没有开放自绘接口,如果你真的想在界面上自已绘

Javascript思学笔记(一)

理论知识点一 一个完整的javascript实现应该由下列三个不同的部分组成1.核心(ECMAScript)2.文档对象模型(DOM)3.浏览器对象模型(BOM) 二.HTML4.01的Script有6个属性,了解一下1.async:表示应该立即下载脚本,但不应妨碍页面中的其他操作,比较下载其他资源或等待加载其他脚本.只对外部脚本文件有效2.charset:代码的字符集.大多数浏览器忽略它的值 ,很少有人用3.defer:表示脚本可以延迟到文档完全被解析和显示之后再执行.4.language:已

总结目前为止JavaScript所学的知识点以及问题

目前为止JavaScript所学的知识点以及问题 第一章: 1.1 JavaScript的应用 1)  通过学习鼠标的事件:onclick(点击事件).onmouseover(鼠标放上).onmouseout(鼠标移走)来操作动画特效. 2)   通过学习JS语法控制页面元素CSS样式. JavaScript 能够直接写入 HTML 输出流中. JavaScript 能够对事件作出反应. JavaScript 能改变 HTML 元素的内容.样式. 1.2 JavaScript的特点 1)    

巧学DBhelper

这几天在教我很重要的人学习,她属于那种超级小白,很超级的那种. 教她的过程中 发现有的知识点 不管这么教都不会.DBhelper就是不知道怎么记. 当时我就想到 杰哥(程杰)的出的大话系列,和他写书的一些思想. 我也学着试了一下 1 private:私有的 表示 只能在本类中访问的,想想什么是类. 2 3 public:公有的 表示在同一个命名空间下才能使用的,想想什么是命名空间 4 5 static:静态的 表示只要在同一个命名空间下被static 不用实例化类 就可以通过 类.属性 或 类.

巧学教育公益速记课第十期第一组作业2016年3月31号

一号:刘健凤 总学时52分钟 1.数字编码1-10制作完 2.完成36计1-5 表扬自己:坚持早起晨读和运动,不但拥有一个健康的体魄,同时拥有一个高大的灵魂!表扬别人:我们住院部主任做事雷厉风行,但是对病人如沐春风,对病人像家人一样,凡事从病人角度出发,是真正的医者仁心!我要多跟主任学习专业知识和做为医者父母心的高尚情操 3.学习后的感受:发现速记采用图像后,真的很快.以后学习可以节省好多时间了.自己不足之处是绘画技巧不足,相信以后多加练习会越来越好的,能跟大家一起学习很开心,感恩! 二号蒋文静

Javascript我学之五对象的创建与使用

本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘. 对象的创建 JavaScript对象有两种类型 1).Native:在ECMAScript标准中定义和描述,包括JavaScript内置对象(数组,日期对象等)和用户自定义对象. 2).Host:在主机环境(如浏览器)中实现并提供给开发者使用,比如windows对象和所有的DOM对象 对象的含义 Object is an unordered collection of properties each of which contains

Javascript我学之二函数定义

本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘 函数 几个要点: a).函数是javascript中的一等公民 (重要性) b).函数是一个对象 c).函数定义了一个独立的变量作用域 定义方式 a)命名函数:           除非在另一个函数内部定义,否则,命名函数是全局的. 1 // 全局的命名函数 2 function add(x, y) { 3 return x + y; 4 } 5 console.info(add(100, 200)); //300 b)匿名函数: 匿名函

JavaScript我学之八善变的this---函数执行上下文

本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘. 函数执行上下文 当函数运行时,通过this,函数可以获取它运行所需的外界环境的相关信息(比如某变量的值,另一个对象的引用等). this引用的对象会”变的”! 每次对函数的调用都有一个上下文对象,this关键字引用它.如果函数归属于某个对象,则this关键字将引用此对象,它就是本次函数调用的上下文. 1 var obj = { 2 func: function () { 3 console.info("func():this="