JavaScript一些有用的简写以及日常小技巧

1、三元运算符

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

let a = 1, answer = null

if( a > 5 ) {

    answer = '大帅比'

}else{ 

    answer = '前端强无敌'

}

简写:answer = a > 5 ?  '大帅比' : '前端强无敌'

2、for简化(ES6提供的新方法)

 for(let i = 0; i < arr.length; i++){}

简写:for (let [index, item] of arr.entries()) {

        index为下标,item为每一项内容

}

3、箭头函数(es6)

function test (){ console.info(name) }

setTimeout(function() { console.info(''okay) }, 1500)

arr.forEach(function (item) {    

    console.info(item)

})

简写: let test = (args) => {  console.info(name) }

setTimeout(() => { console.info('okay') }, 1500)

arr.forEach(item => console.info(item))

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

4、扩展运算符

数组合并:

const a = [1, 3, 5]

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

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

const arr = [1, 2, 3, 4]

cons arr2 = arr.slice()

简写: const nums = [2, 4, 6,  ...a]  // [2, 4, ...a, 6]

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

对象中的使用:

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

obj = {d:5, e: 6}

5、对象属性简写

当key value相同时

const obj = {x:x,y:y}

简写:cont obj = {x,y}

6、当行字符串简写

const learn = 'study vue react rn nih\n\t'

                     +  'study vue react rn nih\n\t'

                     +  'study vue react rn nih\n\t'

                     +  'study vue react rn nih\n\t'

                     +  'study vue react rn nih\n\t'

简写: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`

7、模板字符串

const url = 'http://ab.cc.com/' + data + '/beta/info'

简写:const url = `http://ab.cc.com/${data}/beta/info`

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

8、Array.find

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

cont data = [

{'type': 'dog',  'color': 'red'},

{'type': 'cat', 'color: 'white'},

{'type': 'bird', 'color': 'blue'}

]

function findeClor(color) {

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

                if(data[i].type== 'cat' && data[i].color== color) {

                        return data[i]

                } 

        }

}

简写:let cat = data.find(item => item.type == 'cat' && item.color== 'red')

9、伪数组转化为真数组(伪数组是没有interator接口)

let div = document.getElementsByTagName('div')

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

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

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

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('Missing')   

        } 

        return bar

}

简写:

mandatory = () => {

        throw new Erroe ('Missing')

}

foo = (bar = mandatory()) => {

        return bar

}

猜你喜欢

转载自blog.csdn.net/qq_39480597/article/details/79621707