一些有效的JS小技巧 -tutorial js-php.cn

一些有效的JS小技巧

零到壹度

Lepaskan： 2018-03-20 13:37:42

asal

1817 orang telah melayarinya

本文主要和大家聊一些有效的JS小技巧,需要的朋友可以参考下，希望能帮助到大家。

1、三元运算符

当你在项目有想写if...else语句是，在不是多重判断的情况下，可以考虑三元操作来代替

let a = 1, answer = null
if( a > 5 ) {
    answer = &#39;大帅比&#39;
}else{ 
    answer = &#39;前端强无敌&#39;
}
简写：answer = a > 5 ?  &#39;大帅比&#39; : &#39;前端强无敌&#39;

Salin selepas log masuk

2、for简化（ES6提供的新方法）

for(let i = 0; i < arr.length; i++){}
简写：for (let [index, item] of arr.entries()) {
        index为下标，item为每一项内容
}

Salin selepas log masuk

3、箭头函数（es6）

function test （）{ console.info（name） }
setTimeout（function() { console.info(&#39;&#39;okay) }， 1500）
arr.forEach(function (item) {    
    console.info(item)
})
简写： let test = （args） => {  console.info(name) }
setTimeout(() => { console.info(&#39;okay&#39;) }, 1500)
arr.forEach(item => console.info(item))

Salin selepas log masuk

看起来更加简便，箭头函数使用时候this是不会改变的 ~！

4、扩展运算符

数组合并：

const a = [1, 3, 5]
const nums = [2, 4, 6].concat(a);

Salin selepas log masuk

数组克隆： //因为数组为引用类型，很多时候需要clone一个单独的进行操作

const arr = [1, 2, 3, 4]
cons arr2 = arr.slice()
简写： const nums = [2, 4, 6,  ...a]  // [2, 4, ...a, 6]

Salin selepas log masuk

a可以插入在任何位置而不是只能尾部追加，比concat更加便捷！

对象中的使用：

const obj =  { a:1 , b:2, c:3,  ...obj2 } =  { a:1 , b:2, c:3,  d:5, e: 6}
obje = {d:5, e: 6}

Salin selepas log masuk

5、对象属性简写

当key value相同时

const obj = {x:x，y:y}
简写：cont obj = {x，y}

Salin selepas log masuk

6、当行字符串简写

const learn = &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
简写：const learn = `study vue react rn nih
                                  study vue react rn nih
                                 study vue react rn nih
                                 study vue react rn nih
                                study vue react rn nih`

Salin selepas log masuk

7、模板字符串

const url = &#39;http://ab.cc.com/&#39; + data + &#39;/beta/info&#39;
简写：const url = `http://ab.cc.com/${data}/beta/info`

Salin selepas log masuk

${}直接放入变量即可，用起来十分顺手~记得是反引号！！！

8、Array.find

想要在某个数组中找到需要的数据，需要循环操作，在ES6中find可以简化其操作

cont data = [
{&#39;type&#39;: &#39;dog&#39;,  &#39;color&#39;: &#39;red&#39;},
{&#39;type&#39;: &#39;cat&#39;, &#39;color: &#39;white&#39;},
{&#39;type&#39;: &#39;bird&#39;, &#39;color&#39;: &#39;blue&#39;}
]
function findeClor(color) {
        for(let i = 0; i < data.length; i ++ ) {
                if(data[i].type== &#39;cat&#39; && data[i].color== color) {
                        return data[i]
                } 
        }
}
简写：let cat = data.find(item => item.type == &#39;cat&#39; && item.color== &#39;red&#39;)

Salin selepas log masuk

9、伪数组转化为真数组（伪数组是没有interator接口）

let p = document.getElementById(&#39;p&#39;)

Salin selepas log masuk

p是一个伪数组，不能使用forEach之类的方法进行遍历，只能使用较为麻烦的for循环

let p = Array.from(p)  或者 let p = [...p]

Salin selepas log masuk

此时的p就是一个真正可遍历的数组

10、数组去重,Set

let a = [ 2, 3, 1, 2]

new Set() 返回的是一个伪数组，需要使用扩展运算符将其转化我真真的数组，Array.from()也是不错的选择

let b = [... new Set(a)] // [2, 3, 1]

11、默认参数

function test(a, b, c = '大帅比'， d = false){

}

test('前端'， '北妈')

没有传入c，d两个参数，这时候c默认就是‘大帅比’，d默认是false

12、强制参数

JS中，函数若没有传递参数，参数会默认为undefined。这时可能会导致程序异常，需要一个异常抛出

function(data) {
        if(data === undefined) {
                throw new Error(&#39;Missing&#39;)   
        } 
        return bar
}
简写:
mandatory = () => {
        throw new Erroe (&#39;Missing&#39;)
}
foo = (bar = mandatory()) => {
        return bar
}

Salin selepas log masuk

Atas ialah kandungan terperinci 一些有效的JS小技巧 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!