web前端 - 10 个很酷、很实用JavaScript特性

1、空运算符

如果左侧为空或未定义，则此运算符返回右侧值。

const data= null ?? ‘data’;

console.log(data);

// expected output: “data”

const data1 = 1 ?? 4;

console.log(data1);

// expected output: 1

逻辑 OR (||) 运算符执行相同的操作，但是，当将 0 作为值传递时，它将视为 false，这使得它容易用于数字。

function add(a, b) {

val1 = a || 1;

val2 = b || 1;

sum = val1 + val2;

return sum;

}

console.log(add(0, 0)); //output:2

当我们使用 Nullish 运算符时，同样的事情

function add1(a, b) {

val1 = a ?? 1;

val2 = b ?? 1;

sum = val1 + val2;

return sum;

}

console.log(add1(0, 0)); //ouput:0

2、Switch 语句优化

如果你想优化你的 switch 语句，那么，这个语句会有所帮助。

// Longhand

switch (data) {

case 1:

data1();

break;

case 2:

data2();

break;

case 3:

data();

break;

// And so on…

}

// Shorthand

var data = {

1: data1,

2: data2,

3: data

};

const val = 1

dataval;

function data1() {

console.log(“data1”);

}

function data2() {

console.log(“data2”);

}

function data() {

console.log(“data”);

}

3、控制台样式

您是否厌倦了使用相同的控制台？现在我们可以设计我们的控制台。

console.log(%cabc, ‘font-weight:bold;color:red’);

4、AND (&&) 运算符

如果我们想避免一个 if 语句，那么这个速记会很有帮助。

//Longhand

if (test1) {

callMethod();

}

//Shorthand

test1 && callMethod();

5、短函数调用

我们可以使用三元运算符来实现这些功能。

// Longhand

function data1() {

console.log(‘data1’);

};

function data2() {

console.log(‘data2’);

};

var data3 = 1;

if (data3 == 1) {

data1();

} else {

data2();

} //data1

// Shorthand

(data3 === 1 ? data1 : data2)(); //data1

6、返回简写

这将有助于避免大量代码专门返回到基于返回语句的调用方法。

// Longhand

let value;

function returnMe() {

if (!(value === undefined)) {

return value;

} else {

return callFunction(‘value’);

}

}

var data = returnMe();

console.log(data); //output value

function callFunction(val) {

console.log(val);

}

// Shorthand

function returnMe() {

return value || callFunction(‘value’);

}

7、 If… else 简写

当我们有 if-else 语句时，这会有所帮助（确保您有最多 2-3 个 if…else 语句，因为多于这些会降低代码的可读性）。

// Longhand

let mychoice: boolean;

if (money > 100) {

mychoice= true;

} else {

mychoice= false;

}

// Shorthand

let mychoice= (money > 10) ? true : false;

//or we can use directly

let mychoice= money > 10;

console.log(mychoice);

嵌套条件如下所示：

let salary = 300,

checking = (salary > 100) ? ‘greater 100’ : (x < 50) ? ‘less 50’ : ‘between 50 and 100’;

console.log(checking); // “greater than 100”

8、可选链

有时，访问未定义的属性会出错，我们需要为所有嵌套对象属性添加空检查。可以使用可选链接来减少它。

const data = {

a: 1,

b: ‘atit’,

d: {

test1: {

test2: ‘patel’,

},

},

};

console.log(data.val.test1); // here val is not present in object which leads the error

Error: Cannot read properties of undefined (reading ‘test1’)

console.log(data?.val); // using this we can check if the val is present in the data or not

9、对象属性赋值

当我们想从两个字符串创建对象并保持与字符串相同的键时，可以使用这个技巧来完成。

let data1 = ‘abcd’;

let data2 = ‘efgh’;

//Longhand

let data = {data1: data1, data2: data2};

//Shorthand

let data = {data1, data2};

10、延迟

当 JavaScript 代码量增加时，可能会导致浏览器必须等到所有脚本都执行完后再加载 DOM，从而增加了等待时间。

通过使用这个属性，我们可以告诉浏览器不要等待脚本；相反，它将继续构建 DOM，并在后台加载脚本。

heading before loads

heading after loads

今天爱创课堂小编的分享就到这里了，有想学习前端，了解前端更多知识的同学，欢迎大家私信小编领取前端学习资料，也可以关注，点赞加分享，多多支持小编！！！