30+实用的JS简写技巧

声明变量

不友好写法：

let x;
let y;
let z = 3;

友好写法：

let x, y, z=3;

使用三元运算符

不友好写法：

const age = 26;
let eligibility;
if(age > 18){
  eligibility = "Allowed";
}
else{
  eligibility = "Not Allowed";
}

友好写法：

let eligibility = (age > 18) ? "Allowed" : "Not Allowed";

你还可以像这样嵌套 if 语句：


let eligibility = age > 10 ? "greater than 10" : (age < 5 ? "less than 5" : "between 5 and 10");

JavaScript For 循环

不友好写法：

const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

友好写法：


for (let fruit of fruits)

如果你只想访问索引，请执行以下操作：

for (let index in fruits)

如果你想访问文字对象中的键，这也适用：

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
  console.log(key) // output: continent, country, city

Array.forEach 的简写：

function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[5, 7, 2].forEach(logArrayElements);
// a[0] = 5
// a[1] = 7
// a[2] = 2

数组查找

如果你曾经负责用纯 JavaScript 编写 find 函数，你可能会使用 for 循环。在 ES6 中，引入了一个名为 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];
    }
  }
}

友好写法：

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

If Presence

这可能是微不足道的，但值得一提。在进行“if 检查”时，有时可以省略赋值运算符。

不友好写法：

if (isLovely === true)

友好写法：

if (isLovely)

另外，请注意，这两个示例并不完全相等，因为只要 isLovely 是一个真值，它检查就会通过。

这是另一个例子。如果 a 不等于 true，则执行某些操作。

不友好写法：

let a;
if ( a !== true ) {
// do something...
}

友好写法：

let a;
if ( !a ) {
// do something...
}

箭头函数

经典函数以其简单的形式易于阅读和编写，但是一旦你开始将它们嵌套在其他函数调用中，它们就会变得有点冗长和混乱。

不友好写法：

function sayHi(name) {
  console.log('Hello Rax', name);
}
setTimeout(function() {
  console.log('Loaded')
}, 2000);
list.forEach(function(item) {
  console.log(item);
});

友好写法：


sayHi = name => console.log('Hello Rax', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

需要注意的是，箭头（类似于 Java Lambda 表达式）函数中 this 的值与普通函数的确定方式不同，因此，这两个示例并不严格等效。

多行字符串(模板字符串)

如果你发现自己需要在代码中编写多行字符串，你可以这样编写：

不友好写法：

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

但是，有一个更简单的方法。只需使用反引号` …`。

友好写法：

const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

你是否厌倦了使用 ‘ + ‘ 将多个变量连接成一个字符串？难道没有更简单的方法来做到这一点吗？如果你能够使用 ES6，那么，你很幸运。你需要做的就是使用反引号和 ${} 来包含你的变量。

不友好写法：

const welcome = 'You have logged in as ' + firstName + ' ' + lastName + '.'
const db = 'http://' + host + ':' + port + '/' + database;

友好写法：

const welcome = `You have logged in as ${firstName} ${lastName}`;
const db = `http://${host}:${port}/${database}`;

十进制指数

你可能已经看到了这个。它本质上是一种不带尾随零的数字书写方式。例如，1e5 实质上意味着 1 后跟 5 个零。它表示一个等于 1,00,000 的十进制基数（JavaScript 将其解释为浮点类型）。

不友好写法：

for (let i = 0; i < 10000; i++) {}

友好写法：

for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

短路评估

如果预期的参数为空或未定义，则无需编写五六行代码来分配默认值，我们可以简单地使用短路逻辑运算符并仅用一行代码完成相同的事情。

不友好写法：

let dbHost;
if (process.env.DB) {
  dbHost = process.env.DB;
} else {
  dbHost = '127.0.0.1';
}

友好写法：


const dbHost = process.env.DB || '127.0.0.1';

如果你想从数组的末尾取元素，你可以使用带有负整数的切片方法。

let array = [0, 1, 2, 3, 4, 5, 6, 7] 
console.log(array.slice(-1));
>>>[7]
console.log(array.slice(-2));
>>>[6, 7]
console.log(array.slice(-3));
>>>[5, 6, 7]

对象属性

在 JavaScript 中定义对象字面量让生活变得更轻松。ES6 提供了一种更简单的方法来为对象分配属性。如果变量名称与对象键相同，则可以利用速记符号。

不友好写法：

const x = 2020, y = 2021;
const obj = { x:x, y:y };

友好写法：

const obj = { x, y };

隐式回报

return 是我们经常使用的关键字，用于返回函数的最终结果。带有单个语句的箭头函数将隐式返回其计算结果（该函数必须省略大括号 ({}) 以省略 return 关键字）。

要返回多行语句（例如对象字面量），必须使用 () 而不是 {} 来包装函数体。这确保代码被评估为单个语句。

不友好写法：

function calcCircumference(diameter) {
  return Math.PI * diameter
}

友好写法：

calcCircumference = diameter => (
  Math.PI * diameter;
)

解构赋值

如果你正在使用任何流行的 Web 框架，你很有可能会使用对象文字形式的数组或数据在组件和 API 之间传递信息。一旦数据对象到达一个组件，你就需要解压它。

不友好写法：

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

友好写法：

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;

你甚至可以分配自己的变量名称：

const { store, form, loading, errors, entity:contact } = this.props;

大多数情况下，Visual Studio 代码编辑器提供用于自动导入或自动完成的插件。

展开运算符

ES6 中引入的扩展运算符有几个用例，可以使 JavaScript 代码使用起来更加高效和有趣。它可用于替换某些数组函数。展开运算符是用三个点表示的。

不友好写法：

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

友好写法：

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

与 concat() 函数不同，你可以使用扩展运算符在另一个数组内的任何位置插入一个数组。

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

你还可以将扩展运算符与 ES6 解构符号结合使用：

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

默认参数值

你可以使用 if 语句来定义函数参数的默认值。在 ES6 中，你可以在函数声明本身中定义默认值。

不友好写法：

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

友好写法：

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

指数幂

它对数学指数幂函数很有用：

不友好写法：

Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64

友好写法：


2**3 // 8
2**4 // 4
4**3 // 64

将字符串转换为数字

有时你的代码会接收到字符串格式的数据，但需要以数字格式进行处理。这没什么大不了的，我们可以进行快速转换。

不友好写法：

const num1 = parseInt("100");
const num2 =  parseFloat("100.01");

友好写法：

const num1 = +"100"; // converts to int data type
const num2 =  +"100.01"; // converts to float data type

Object.entries()

这是 ES8 中引入的一项功能，允许你将文字对象转换为键/值对数组。请参阅下面的示例：

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);
/** Output:
[ [ 'producer', 'John' ],
  [ 'director', 'Jane' ],
  [ 'assistant', 'Peter' ]
]
**/

Object.values()

这也是 ES8 中引入的一个新特性，它执行类似于 Object.entries() 的功能，但没有关键部分：

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);
/** Output:
[ 'John', 'Jane', 'Peter' ]
**/

按位索引

使用数组执行查找时，indexOf() 函数用于检索你要查找的项目的位置。如果未找到该项目，则返回值 -1。在 JavaScript 中，0 被认为是“假的”，而大于或小于 0 的数字被认为是“真”的。因此，必须像这样编写正确的代码。

不友好写法：

if(arr.indexOf(item) > -1) { // Confirm item IS found
}
if(arr.indexOf(item) === -1) { // Confirm item IS NOT found
}

友好写法：


if(~arr.indexOf(item)) { // Confirm item IS found
}
if(!~arr.indexOf(item)) { // Confirm item IS NOT found
}

按位（~）运算符将返回除 -1 以外的任何值的真值。否定它就像！~一样简单。或者，我们也可以使用 includes() 函数：

if(arr.includes(item)) { // Returns true if the item exists, false //if it doesn't
}

交换两个变量

为了交换两个变量，我们经常使用第三个变量。但是它可以通过数组解构赋值轻松完成。

不友好写法：


let x = "rakshit", y = "shah";
const temp = x;
x = y;
y = temp;

友好写法：

[x,y] = [y,x]

将任何东西转换为布尔值

在开发任何代码时，你可能会遇到需要布尔值来比较或进行真/假检查的情况。这种方法在这种情况下会很有用！

const foo = 'some string lines';
const toBool = !!foo
console.log(toBool) // true

将任何东西转换为数字

通过使用 + 运算符，你可以实现它。

const foo = '522'
const toNumber = +foo
console.log(toNumber) // 522
const toNegativeNumber = -foo
console.log(toNegativeNumber) // -522

将数组转换为对象

const arr = [ 'foo', 'bar', 1]
const obj = { ...arr }
console.log(obj) // {0: "foo", 1: "bar", 2: 1}

删除Array中的重复项

Set 对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。


const arr = ['a', 'b', 'c', 'b', 'd']
const newArr = [... new Set(arr)]
console.log(newArr) // ["a", "b", "c", "d"]

站内部分资源由网友投稿或收集于网络，若侵犯了您的合法权益，请联系我们删除

THE END

Javascript

30+实用的JS简写技巧

声明变量

使用三元运算符

JavaScript For 循环

数组查找

If Presence

箭头函数

多行字符串(模板字符串)

十进制指数

短路评估

对象属性

隐式回报

解构赋值

展开运算符

默认参数值

指数幂

将字符串转换为数字

Object.entries()

Object.values()

按位索引

交换两个变量

将任何东西转换为布尔值

将任何东西转换为数字

将数组转换为对象

删除Array中的重复项

1免流流控破解脚本 FAS 青云快云 VPNS 博雅dalo最新集合

2MT管理器v2.8.0vip破解版

3网站爱心飘落特效js

4QQ官方相关API接口，直接调用QQ信息

5elementUI图片上传前端及后端写法例子

6悟饭游戏厅破解金手指功能

30+实用的JS简写技巧

声明变量

使用三元运算符

JavaScript For 循环

数组查找

If Presence

箭头函数

多行字符串(模板字符串)

十进制指数

短路评估

对象属性

隐式回报

解构赋值

展开运算符

默认参数值

指数幂

将字符串转换为数字

Object.entries()

Object.values()

按位索引

交换两个变量

将任何东西转换为布尔值

将任何东西转换为数字

将数组转换为对象

删除Array中的重复项

1免流流控破解脚本 FAS 青云 快云 VPNS 博雅dalo最新集合

2MT管理器v2.8.0vip破解版

3网站爱心飘落特效js

4QQ官方相关API接口，直接调用QQ信息

5elementUI图片上传前端及后端写法例子

6悟饭游戏厅破解金手指功能

1免流流控破解脚本 FAS 青云快云 VPNS 博雅dalo最新集合