黑马程序员技术交流社区

标题: [广州前端]10个 JavaScript 有用的简写技术(一） [打印本页]

---

作者: 黑黑黑黑黑黑    时间: 2018-1-4 12:04
标题: [广州前端]10个 JavaScript 有用的简写技术(一）


1.三元操作符

当想写if...else语句时，使用三元操作符来代替。

[JavaScript] 纯文本查看 复制代码

const x = 20;

let answer;

if (x > 10) {

    answer = 'is greater';

} else {

    answer = 'is lesser';

}

简写：

[JavaScript] 纯文本查看 复制代码

const answer = x > 10 ? 'is greater' : 'is lesser';

也可以嵌套if语句：

[JavaScript] 纯文本查看 复制代码

const big = x > 10 ? " greater 10" : x

2.短路求值简写方式

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。

[JavaScript] 纯文本查看 复制代码

[mw_shl_code=javascript,true]if (variable1 !== null || variable1 !== undefined || variable1 !== '') {

     let variable2 = variable1;

}

[/mw_shl_code]

或者可以使用短路求值方法：

[JavaScript] 纯文本查看 复制代码

const variable2 = variable1 || 'new';

3.声明变量简写方法

[JavaScript] 纯文本查看 复制代码

let x;

let y;

let z = 3;

简写方法：

[JavaScript] 纯文本查看 复制代码

let x, y, z=3;

4.if存在条件简写方法

[JavaScript] 纯文本查看 复制代码

if (likeJavaScript === true)

简写：

[JavaScript] 纯文本查看 复制代码

if (likeJavaScript)

只有likeJavaScript是真值时，二者语句才相等

如果判断值不是真值，则可以这样：

[JavaScript] 纯文本查看 复制代码

let a;

if ( a !== true ) {

// do something...

}

简写：

[JavaScript] 纯文本查看 复制代码

let a;

if ( !a ) {

// do something...

}

5.JavaScript循环简写方法

[JavaScript] 纯文本查看 复制代码

for (let i = 0; i < allImgs.length; i++)

简写：

[JavaScript] 纯文本查看 复制代码

for (let index in allImgs)

也可以使用Array.forEach：

[JavaScript] 纯文本查看 复制代码

function logArrayElements(element, index, array) {

  console.log("a[" + index + "] = " + element);

}

[2, 5, 9].forEach(logArrayElements);

// logs:

// a[0] = 2

// a[1] = 5

// a[2] = 9

更多精彩前端资源请看：

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2