JavaScript 简写技巧
1. 声明变量
//普通写法
let x;
let y = 20; //简写
let x, y = 20;
2. 给多个变量赋值
//普通写法
let a, b, c;
a = 5;
b = 8;
c = 12; //简写
let [a, b, c] = [5, 8, 12];
3. 三元运算符
//普通写法
let marks = 26;
let result;
if(marks >= 30){
result = 'Pass';
}else{
result = 'Fail';
}
//简写
let result = marks >= 30 ? 'Pass' : 'Fail';
4. 多值匹配
//普通写法
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
// Execute some code
} //简写 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
// Execute some code
} //简写 2
if ([1, 'one', 2, 'two'].includes(value)) { // 包含则返回 true,否则返回false。
// Execute some code
}
5. 字符串转数字
//普通写法
let total = parseInt('453');
let average = parseFloat('42.6'); //简写
let total = +'453';
let average = +'42.6';
6. 多次重复一个字符串
//普通写法
let str = '';
for (let i = 0; i < 5; i++) {
str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello //简写
'Hello '.repeat(5); // 想要换行只需加换行符即可(helle\n)
7. 查找数组中最大和最小的数
// 我们可以使用for循环遍历数组的每个值并找到最大值或最小值。我们也可以使用Array.reduce()方法在数组中找到最大和最小数。
//简写
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2
8. Array.find
// 前
const pets = [
{type: 'Dog', name: 'Max'},
{type: 'Cat', name: 'Karl'},
{type: 'Dog', name: 'Tommy'}
] function findDog(name) {
for(let i = 0; i < pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i]
}
}
} // 后
dog2 = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy');
9. AND(&&)短路求值法
如果仅在变量为true的情况下才调用函数,则可以使用AND(&&)短路求值法作为替代方法。 //普通写法
if (isLoggedin) {
goToHomepage();
} //简写
isLoggedin && goToHomepage();
10. 交换两个变量
要交换两个变量,我们经常要用到第三个变量。但是,我们也可以通过数组解构赋值,从而轻松地交换变量。 let x = 'Hello', y = 55;
//普通写法
const temp = x;
x = y;
y = temp; //简写
[x, y] = [y, x];
11. 箭头函数
//普通写法
function add(num1, num2) {
return num1 + num2;
} //简写
const add = (num1, num2) => num1 + num2;
12. 模板字面量
我们通常使用+运算符将字符串值与变量连接在一起。但是,我们也可以使用ES6模板字面量这个更简单的实现方式。 //普通写法
console.log('You got a missed call from ' + number + ' at ' + time); //简写
console.log(`You got a missed call from ${number} at ${time}`);
13. 对象属性赋值
如果变量名和对象键名相同,那么我们只需在对象字面量中提及变量名即可,而不需要键和值。JavaScript会自动给与变量名相同的键设置变量值,例如: let firstname = 'Amitav';
let lastname = 'Mishra';
//普通写法
let obj = {firstname: firstname, lastname: lastname}; //简写
let obj = {firstname, lastname};
14. for循环
为了遍历数组,我们通常使用传统的for循环。我们可以利用for ... of循环遍历数组。要访问每个值的索引,我们可以使用for ... in循环。 let arr = [10, 20, 30, 40];
//普通写法
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//简写
//for of loop
for (const val of arr) {
console.log(val);
}
//for in loop
for (const index in arr) {
console.log(`index: ${index} and value: ${arr[index]}`);
} 我们还可以使用for ... in循环遍历对象属性。 let obj = {x: 20, y: 50};
for (const key in obj) {
console.log(obj[key]);
}
15. 合并数组
let arr1 = [20, 30];
//普通写法
let arr2 = arr1.concat([60, 80]);
// [20, 30, 60, 80] //简写
let arr2 = [...arr1, 60, 80];
// [20, 30, 60, 80]
16. 从字符串中获取字符
let str = 'jscurious.com';
//普通写法
str.charAt(2); // c //简写
str[2]; // c
这些简写技术中有些可能与项目的使用不相关,但是多学一点总不会错。编码愉快!------ 转载于微信公众号前端新世界
JavaScript 简写技巧的更多相关文章
- JavaScript简写技巧总结
在日常工作中,JavaScript一些常用的简写技巧,将直接影响到我们的开发效率,现将常用技巧整理如下: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去 ...
- 10 个超棒的 JavaScript 简写技巧
今天我要分享的是10个超棒的JavaScript简写方法,可以加快开发速度,让你的开发工作事半功倍哦. 开始吧! 1. 合并数组 普通写法: 我们通常使用Array中的concat()方法合并两个数组 ...
- JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读. 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作. 文 ...
- 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- javascript小小技巧
JS的一些小技巧,我主要是做后台的(.NET),前端知识了解得不多,经验非常有限,不过还是经常写JS代码,对前端有着浓厚的兴趣,特喜欢js这门语言,虽然很多人喷它,但还是很喜欢Js.下面说说项目中我经 ...
- 11个不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...
- [转]11个教程中不常被提及的JavaScript小技巧
原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...
- 11个教程中不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...
- 12个十分实用的JavaScript小技巧
12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...
随机推荐
- 6. vue组件详解(一)
主要内容: 1. 组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 父子组件的通信 组件系统是 Vue 的一个重要概念,因为它 ...
- 微信小程序:条件渲染wx:if和hidden
一.条件渲染:wx:if,wx:elif,wx:else 花括号中的true或false可以改成变量从而来动态显示. 二.hidden 只显示hidden2 当标签不是频繁切换显示(控制是否渲染到页面 ...
- 永远不要眼高手低,Vue完整实现一套简单的增删改查CURD操作
1: 永远不要眼高手低,看起来很简单,但是你从来没有去动手试一下,就不知道其中真正需要注意的许多细节, 2:完整code如下: 1 <!DOCTYPE html> 2 <html l ...
- Lua C++交互 应用实例步骤(UserData使用)
一.配置Lua C++交互环境 1.下载Lua 包环境 地址: https://www.lua.org/download.html ,我们这里用的是5.4.2版本. 2.新建C++ 控制台应用程序 3 ...
- MyBatis中模糊查询
接口 // 模糊查询 List<User> getUserLike(String value); Mapper.xml文件 <!-- 模糊查询 --> <select i ...
- Java 并发编程小册整理好了
Java 有并发,并发知识之大,一口吃不下 这曾是我不愿意触碰的知识角 多次一头扎进并发,无功而返 为应对面试,临时苦苦记忆,不成体系 这一次我决定从基础开始,攻克它 12,0000 字 68Mb 高 ...
- 什么是ETL?
一.ETL概念之背景 随着企业的发展,目前的业务线越来越复杂,各个业务系统独立运营.例如:CRM系统只会生产CRM的 数据:Billing只会生产Billing的数据.各业务系统之间只关心自己的数据, ...
- 关于mysql事物和特性
事务的 四个特征(ACID) 事务具有四个特征:原子性( Atomicity ).一致性( Consistency ).隔离性( Isolation )和持续性( Durability ).这四个特性 ...
- 什么是SSR SSR有什么用 如何使用使用SSR
什么是SSR 以下信息来自维基百科: Shadowsocks(简称SS)是一种基于Socks5代理方式的加密传输协议,也可以指实现这个协议的各种开发包.当前包使用Python.C.C++.C#.Go语 ...
- 了解PSexec
PSExec允许用户连接到远程计算机并通过命名管道执行命令.命名管道是通过一个随机命名的二进制文件建立的,该文件被写入远程计算机上的ADMIN $共享,并被SVCManager用来创建新服务. 您可以 ...