关于javascript:每日小记前端

31次阅读

共计 4229 个字符，预计需要花费 11 分钟才能阅读完成。

所有内容均来自微信公众号文章，记录再次作学习笔记
2022-05-30
知识点目录

1. 三元运算符
1. 短路评估
1. 空值合并运算符
1. 模板文字
1. 对象属性赋值简写
1. 可选链接
1. 对象解构
1. 扩大运算符
1. 对象循环
1. Array.indexOf 应用按位运算符的简写
1. 应用 !! 将值转换为布尔值
1. 箭头 /lambda 函数表达式
1. 应用箭头函数表达式的隐式返回
1. 双位非运算符
1. 指数幂速记
16.TypeScript 构造函数简写

三元运算符
[condition] ? [true result] : [false result]

短路评估

// Longhand
let str = ''
let finalStr

if (str !== null && str !== undefined && str != '') {finalStr = str} else {finalStr = 'default string'}

// Shorthand
let str = ''let finalStr = str ||'default string'//'default string

此逻辑 OR 运算符 || 当预期值为虚伪时，为变量调配默认值。

空值合并运算符
当预期值是虚伪的但不是空值（null），它将不会应用默认值。

let str = ''let finaStr = str ??'default string'//''

let num = null
let actualNum = num ?? 0   // 0

模板文字


const name = 'Iby'
const hobby = 'to read'

// Longhand
const fullStr = name + 'loves' + hobby // 'Iby loves to read'

// Shorthand 单行
const fullStr = `${name} loves ${hobby}`

// 多行文本
const fullStr2 = `${name} loves ${hobby}.
She also loves to write!`

对象属性赋值简写


// Longhand
const obj = {
  x: 1,
  y: 2,
  z: 3
}

// Shorthand
const x = 8
const y = 10
const obj = {x, y}

可选链接


const obj = {
  x: {
    y: 1,
    z: 2
  },
  others: [
    'test',
    'tested'
  ] 
}

// Longhand
if (obj.hasProperty('others') && others.length >= 2) {console.log('2nd value in others:', obj.others[1])
}

// Shorthand
console.log('2nd value in others:',obj.others?.[1])  //‘tested’console.log('3nd value in others:',obj.others?.[2])  //'undefined'

对象解构


const obj = {
  x: {
    y: 1,
    z: 2
  },
  other: 'test string'
}

// Longhand
console.log('Value of z in x:', obj.x.z)
console.log('Value of other:', obj.other)

// Shorthand
const {x, other} = obj
const {z} = x

console.log('Value of z in x:', z)
console.log('Value of other:', other)

还能够重命名从对象中解构的变量，例子如下：

const obj = {x: 1,y: 2}
const {x:myVar} = object   // 解构时将 x 重命名为 myVar 了

console.log('My renamed variable:', myVar) // My renamed variable: 1

扩大运算符 …
多用于拜访数组和对象的内容，还能够用来替换数组函数（concat）和对象函数（object.assign）

// Longhand
const arr = [1, 2, 3]
const biggerArr = [4,5,6].concat(arr)

const smallObj = {x: 1}
const otherObj = object.assign(smallObj, {y: 2})

// Shorthand
const arr = [1, 2, 3]
const biggerArr = [...arr, 4, 5, 6]

const smallObj = {x: 1}
const otherObj = {...smallObj, y: 2}

对象循环

三种 for 循环简写：
（1）for…of 拜访数组条目
（2）for…in 拜访数组的索引和在对象字面量上的应用时的键
（3）Array.forEach 应用回调函数对数组元素及其索引执行操作

有三个可能的参数：正在进行迭代的数组元素，元素的索引，数组的残缺正本。


// Longhand
const arr = ['Yes', 'No', 'Maybe']

for (let i = 0; i < arr.length; i++) {console.log('Here is item:', arr[i])
}

// Shorthand
for (let str of arr) {console.log('Here is item:',str)
}

arr.forEach((str) => {console.log('Here is item:',str)
})

for(let index in arr){console.log( `Item at index ${index} is ${arr[index]}` )
}

// For object literals
const obj = {a: 1, b: 2, c: 3}

for (let key in obj){conaloe.log( `Value at key ${key} is ${obj[key]}` )
}

Array.indexOf 应用按位运算符的简写（~）


const arr = [10, 12, 14, 16]

const realNum = 10
const fakeNum = 20

const realNumIndex = arr.indexOf(realNum)
const noneNumIndex = arr.indexOf(fakeNum)

// Longhand
if (realNumIndex > -1) {console.log(realNum, 'exists!')
} else if (realNumIndex === -1) {console.log(realNum, 'does not exist!')
}

if (noneNumIndex > -1) {console.log(fakeNum, 'exists!')
} else if (noneNumIndex === -1) {console.log(fakeNum, 'does not exist!')
}

// Shorthand
console.log(realNum + (~realNumIndex ? 'exists!' : 'does not exist!')
console.log(fakeNum + (~noneNumIndex ? 'exists!' : 'does not exist!')

应用！！将值转为布尔值


// Longhand
const simpleInt = 3
const intAsBool = Boolean(simpleInt)

// Shorthand
const simpleInt = 3
const intAsBool = !!simpleInt   //true

const simpleInt = -1
const intAsBool = !!simpleInt   //false

箭头 /lambda 函数表达式


// Longhand
function printStr(str) {console.log('This is a string:', str)
}
printStr('Girl!')

// Shorthand
const printStr = (str) => {console.log('This is a string:', str)
}
printStr('Girl!')

// Shorthand TypeScript (specifying variable type 指定变量类型)
const printStr = (str: string) => {console.log('This is a string:', str)
}
printStr('Girl!')

应用箭头函数表达式的隐式返回


// Longhand
function capitalize(name) {return name.toUpperCase()
}

function add(numA, numB) {return numA + numB}

// Shorthand
const capitalize = (name) => name.toUpperCase()

const add = (numA, numB) => (numA + numB)

// Shorthand TypeScript (specifying variable type)
const capitalize = (name: string) => name.toUpperCase()

const add = (numA: number, numB: number) => (numA + numB)

双位非运算符
利用按位 NOT 运算符两次 ~~ 容许咱们取得一个值的 Math.floor()


// Longhand  Math 必须援用之后能力用
const num = 4.5
const floorNum = Math.floor(num) // 4

// Shorthand  ~~ 可间接应用
const num = 4.5
const floorNum = ~~num // 4

指数幂速记
另一个具备用的技巧是 Math.pow() 函数。应用内置 Math 对象的代替办法是 ** 应用技巧。


// Longhand
const num = Math.pow(3, 4) // 81

// Shorthand
const num = 3 ** 4 // 81

TypeScript 速记（不太懂 <http://>）


// Longhand
class Person {
  private name: string
  public age: int
  protected hobbies: string[]

  constructor(name: string, age: int, hobbies: string[]) {
    this.name = name
    this.age = age
    this.hobbies = hobbies
  }
}

// Shorthand
class Person {
  constructor(
    private name: string,
    public age: int,
    protected hobbies: string[]) {}}

正文完