每日小记--前端

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

• 1. 三元运算符
• 2. 短路评估
• 3. 空值合并运算符
• 4. 模板文字
• 5. 对象属性赋值简写
• 6. 可选链接
• 7. 对象解构
• 8. 扩展运算符
• 9. 对象循环
• 10. Array.indexOf 使用按位运算符的简写
• 11. 使用 !! 将值转换为布尔值
• 12. 箭头/lambda 函数表达式
• 13. 使用箭头函数表达式的隐式返回
• 14. 双位非运算符
• 15. 指数幂速记
• 16.TypeScript构造函数简写

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

2. 短路评估

   // 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 运算符||当预期值为虚假时，为变量分配默认值。

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

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

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

4. 模板文字

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!`

5. 对象属性赋值简写

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

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

6. 可选链接

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'

7. 对象解构

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

8. 扩展运算符...
   多用于访问数组和对象的内容，还可以用来替换数组函数（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}

9. 对象循环

三种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]}` )
}

10. 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!')

11. 使用！！将值转为布尔值

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

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

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

12. 箭头/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!')

13. 使用箭头函数表达式的隐式返回

// 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)

14. 双位非运算符
    应用按位 NOT 运算符两次 ~~ 允许我们获得一个值的 Math.floor()

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

// Shorthand  ~~可直接使用
const num = 4.5
const floorNum = ~~num // 4

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

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

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

16. TypeScript速记（不太懂）

// 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[]
  ) {}
}