单行if-else语句

如果if-else语句中只有一条语句，那么可以使用三目运算符代替。
例如：

const AGE = 10;
let ageGroup;
// before
if (AGE > 18) {ageGroup = 'An adult';
} else {ageGroup = 'A child';
}
// after
ageGroup = AGE > 18 ? 'An adult' : 'A child';

相较于简单的if-else语句，三目运算符可能会增加代码的阅读难度，因此需要选择简单的表达式进行替换。

从数组中删除重复项

利用ES6中新增的集合Set

Set是一个集合，集合中的值不能重复

const NUMBERS = [1, 1, 2, 3, 5, 5, 8, 9, 9];
const UNIQUE = [...new Set(NUMBERS)]; // → [ 1, 2, 3, 5, 8, 9 ]

原理：

首先将NUMBERS中数据存储在Set中，创建Set会删除数组中重复值
利用展开运算符号...将任意可迭代对象转换为数组，将集合转换为数组。

利用??空值合并操作符

空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。

判断数据是否为null或undefined

let temp;
let demo = 1;
console.log(temp ?? "Not found"); // → Not found
console.log(demo ?? "Not found"); // → 1

给变量设置初始值

const DEMO = null ?? 'DEFAULT STRING';
console.log(DEMO); // → DEFAULT STRING
const DEMO1 = 0 ?? 'DEFAULT STRING';
console.log(DEMO1); // → 0
const DEMO2 = "" ?? 'DEFAULT STRING';
console.log(DEMO2); // → ""

利用?.可选链操作符防止错误

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值

let DEMO = {name: "kai",age: 24,gender: "boy"
}
console.log(DEMO?.age); // → 24
console.log(DEMO.age); // → 24
DEMO = null;
console.log(DEMO?.sex); // → undefined
console.log(DEMO.sex); // → 报错 TypeError: Cannot read property 'sex' of null

短路计算

const DEMO = null;
let x = 0;
const RES = DEMO?.[x++];
console.log(x);  // → 0

当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算

在没有第三个变量的情况下交换两个变量

在 JavaScript 中，可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个：

let x = 1, y = 2;
// before
let temp;
temp = x;
x = y;
y = temp;
// after
[x, y] = [y, x]

使用!!将内容转换为布尔值

在JavaScript中，可以使用!!将任何内容转换为布尔值，例如：

console.log(!!true); // → true
console.log(!!2); // → true
console.log(!![]); // → true
console.log(!!"Test"); // → true
console.log(!!-1); // → true
console.log(!!false); // → false
console.log(!!0); // → false
console.log(!!""); // → false

扩展运算符

使用扩展运算符合并两个数组…：

const DEMO1 = [1, 2, 3];
const DEMO2 = [4, 5, 6];
// before
const DEMO3 = DEMO1.concat(DEMO2);
// after
const DEMO4 = [...DEMO1, ...DEMO2];
let DEMO = [];
// before
DEMO.push(1);
DEMO.push(2);
// after
DEMO = [...DEMO, 3, 4];

传播解构

使用扩展运算符将剩余元素分配给变量：

const student = {name: "kai",age: 24,city: "beijing",state: "university",
};
// before
const name = student.name;
const age = student.age;
const address = {city: student.city, state: student.state};
// after
const {name, age, ...address} = student;

使用 && 进行短路评估

不必用if语句检查某事是否为真，使用&&运算符：

const TEMP = true;
function DEMO() {console.log("Yay!");
}
// before
if (TEMP) {DEMO();
}
// after
TEMP && DEMO();

模板字符串

通过将字符串包装在反引号内并${}用于嵌入值，从而在字符串之间插入变量。

const SOMETHING = '白菜';
const MOOD = '高兴';
const STR = `我买了${SOMETHING}很${MOOD}` // → 我买了白菜很高兴

从数组中查找特定元素

使用find()方法查找匹配特定条件的元素：

const STUDENT = [{name: "kai", age: 24},{name: "hui", age: 23}
];
let name;
// before
for (let i = 0; i < STUDENT.length; ++i) {if (STUDENT[i].age === 23) {name = STUDENT[i].name;}
}
// SHORTHAND
name = STUDENT.find(item => item.age === 23);

对象属性赋值

对象赋值的时候省略键名称使得键值保持一致

const name = 'kai', age = 24;
// before
const PERSON = {name: name,age: age
};
// after
const PERSON = {name, age};

使用forEach代替For循环

const NUMBERS = [1, 2, 3];
// before
for (let i = 0; i < NUMBERS.length; i++) {console.log(NUMBERS[i]);
}
// after
NUMBERS.forEach(number => console.log(number))

使用默认参数

为函数参数提供默认值

// before
function DEMO(params) {if (params === undefined) {params = 'DEFAULT';} else {console.log(params);}
}// after
function DEMO(params = 'DEFAULT') {console.log(params)
}

将对象的键、值收集到数组中

使用Object.keys()收集对象的键

使用Object.values()收集对象的值

const OBJ = {name: 'kai',age: 24
}
const KEYS = Object.keys(OBJ);
const VALUES = Object.values(OBJ);
console.log(KEYS);  // → [ 'name', 'age' ]
console.log(VALUES); // → [ 'kai', 24 ]

检查一个项目是否存在于数组中

使用 includes() 方法来检查元素是否在数组

const NUMBERS = [1, 2, 3];
// before
console.log(NUMBERS.indexOf(1) > -1); // → true
// after
console.log(NUMBERS.includes(1)); // → true

压缩多个条件

避免使用长|| 检查多个条件链，可以使用刚刚在上一个技巧中学到的东西——即，使用 includes() 方法：

const num = 1;
// before
if(num === 1 || num === 2 || num === 3){console.log("Yep");
}
// after
if([1,2,3].includes(num)){console.log("Yep");
}

指数运算符

使用**运算符代替Math.pow()

// before
console.log(Math.pow(4, 2)); // → 16
console.log(Math.pow(2, 3)); // → 8
// after
console.log(4 ** 2); // → 16
console.log(2 ** 3); // → 8

Math.floor() 简写

使用~~运算符代替Math.floor()

// before
console.log(Math.floor(5.25)); // → 5.0
// SHORTHAND
console.log(~~5.25); // → 5.0

用一行代码分配多个值

let demo1, demo2;
// before
demo1 = 1;
demo2 = 2;
console.log(demo1); // → 1
console.log(demo2); // → 2
// after
[demo1, demo2] = [1, 2];
console.log(demo1); // → 1
console.log(demo2); // → 2
const PERSON = {name: "kai",age: 24,
};
// before
let name = PERSON.name;
let age = PERSON.age;
// after
let {name, age} = PERSON;

JavaScript实用代码片段相关推荐

JavaScript实用功能代码片段
JavaScript实用功能代码片段 1.原生JavaScript实现字符串长度截取1 function cutstr(str, len) {2 var temp;3 var icount = 0;4 ...
golang中出于性能考虑的那些实用代码片段 |字符串篇
出于性能考虑的那些实用代码片段 |字符串篇在我们编程时,总是需要考虑性能方面的问题,这既能降低成本,又能提高用户的体验.好的性能的代码总是有好处的. 字符串字符串替换/修改当我们需要修改或替换某 ...
100个直接可以拿来用的JavaScript实用功能代码片段(转)
把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率. 目录如下: 1.原生JavaScript实现字符串长度截取 2.原生Java ...
100个原生的JavaScript实用功能代码片段
把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率. 目录如下: 1.原生JavaScript实现字符串长度截取 2.原生Java ...
C#程序员经常用到的10个实用代码片段
转载地址:http://www.codeceo.com/article/10-csharp-code-spinet.html 如果你是一个C#程序员,那么本文介绍的10个C#常用代码片段一定会给你带来 ...
javascript实用代码大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcEl ...
微信JSSDK javascript 开发代码片段，仅供参考
最全面最专业的微信公众平台开发教程:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html 比较完整的分享教程:http://www.cnbl ...
QT 实用代码片段 (持续更新)
由于项目需要开始转型学习C++,GUI使用QT进行开发,开发过程中踩了不少坑,但是也积累了些宝贵经验,在这儿记录一下,希望能帮到需要的朋友. 1.设置无边框对话框 //设置对话框属性 setWindo ...
H5中JavaScript常用代码片段
/*** 批量替换方法,批量过滤特殊字符,通常用在通过后的各种编辑器添加的内容在App上编辑上使用* james.wang 2016-11-11* 使用方法:ReCont(Content,[" ...
100个直接可以拿来用的JavaScript实用功能代码片段
http://www.cnblogs.com/wxydigua/p/3314274.html 转载于:https://www.cnblogs.com/kevinge/p/3316315.html

JavaScript实用代码片段