废话不多话,在本文中,列出了一些比较常用或者实用的的 javascript 代码片段,希望对你们有所帮助。
1.三元运算符let somethingtrue = trueif(somethingtrue){ handletrue()}else{ handlefalse()}****** 以下是简短版本 ******let somethingtrue = truesomethingtrue ? handletrue() : handlefalse()复制代码
2.短路或运算const defaultvalue = somedefaultvaluelet somevaluenotsureofitsexistance = nulllet expectingsomevalue = somevaluenotsureofitsexistance || defaultvalueconsole.log(expectingsomevalue) // somedefaultvalue复制代码
3. 条件成立let somevalue = trueif (somevalue) { console.log('条件成立!')}复制代码
4. for 循环for (let i = 0; i < 1e2; i++) { // 代替 i<100 是不是有点酷}复制代码
let somevalues = [1, 2, 4]for (let val in somevalues) { console.log(val)}let obj = { 'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}for (let key in obj) { console.log(key)}复制代码
5. 值到对象的映射let x='x',y='y'let obj = {x,y}console.log(obj) // {x: "x", y: "y"}复制代码
6. object.entries()const credits = { producer: '大迁世界', name: '前端小智', rating: 9}const arr = object.entries(credits)console.log(arr)*** 输出 ***[ [ 'producer', '大迁世界' ], [ 'name', '前端小智' ], [ 'rating', 9 ] ]复制代码
7. object.values()const credits = { producer: '大迁世界', name: '前端小智', rating: 9}const arr = object.values(credits)console.log(arr)*** 输出 ***[ '大迁世界', '前端小智', 9 ]复制代码
8. 模板字面量let name = '前端小智'let age = 20var somestringconcatenatesomevariable = `我是 ${name},今年 ${age} 岁`console.log(somestringconcatenatesomevariable)复制代码
9. 解构赋值import { observable, action, runinaction } from 'mobx';复制代码
10.多行字符串let multilinestring = `some string\nwith multi-line of\ncharacters\n`console.log(multilinestring)复制代码
11.array.find 简写const pets = [{ type: 'dog', name: 'max' }, { type: 'cat', name: 'karl' }, { type: 'dog', name: 'tommy' }]pet = pets.find(pet => pet.type === 'dog' && pet.name === 'tommy')console.log(pet) // { type: 'dog', name: 'tommy' }复制代码
12.默认参数值早期的做法
function area(h, w) { if (!h) { h = 1; } if (!w) { w = 1; } return h * w}复制代码
es6 以后的做法
function area(h = 1, w = 1) { return h * w}复制代码
13.箭头函数的简写let sayhello = (name) => { return `你好,${name}`}console.log(sayhello('前端小智'))复制代码
简写如下:
let sayhello = name => `你好,${name}`console.log(sayhello('前端小智'))复制代码
14.隐式返回let somefuncthatreturnsomevalue = (value) => { return value + value}console.log(somefuncthatreturnsomevalue('前端小智'))复制代码
简写如下:
let somefuncthatreturnsomevalue = (value) => ( value + value)console.log(somefuncthatreturnsomevalue('前端小智'))复制代码
15.函数必须有参数值function musthavepatammethod(param) { if (param === undefined) { throw new error('hey you must put some param!'); } return param;}复制代码
以像这样重写:
musthavecheck = () => { throw new error('missing parameter!')}methodshoudhaveparam = (param = musthavecheck()) => { return param}复制代码
16.charat() 简写'samplestring'.charat(0) // s// 简写'samplestring'[0]复制代码
17.有条件的函数调用function fn1() { console.log('i am function 1')}function fn2() { console.log('i am function 2')}/*长的写法*/let checkvalue = 3;if (checkvalue === 3) { fn1()} else { fn2()}复制代码
简短的写法:
(checkvalue === 3 ? fn1 : fn2)()复制代码
17.math.floor 简写let val = '123.95'console.log(math.floor(val)) // 常规写法console.log(~~val) // 简写复制代码
18.math.pow 简写math.pow(2, 3) // 8// 简写2 ** 3 // 8复制代码
19.将字符串转换为数字const num1 = parseint('100')// 简写console.log(+100)console.log(+100.2)复制代码
20.&& 运算let value = 1;if (value === 1) console.log('value is one')//or in short value && console.log('value is one')复制代码
21.tostring 简写let somenumber = 123console.log(somenumber.tostring()) // 123// 简写console.log(`${somenumber}`) // 123复制代码
22.可选的链运算符(即将发布 以上就是2021高频实用的 javascript 片段的详细内容。
