关于javascript:每日小记前端

所有内容均来自微信公众号文章，记录再次作学习笔记
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. 短路评估

   // Longhandlet str = ''let finalStrif (str !== null && str !== undefined && str != '') {  finalStr = str} else {  finalStr = 'default string'}// Shorthandlet str = ''let finalStr = str || 'default string' // 'default string

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

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

let str = ''let finaStr = str ?? 'default string'   // ''let num = nulllet actualNum = num ?? 0   // 0

4. 模板文字

const name = 'Iby'const hobby = 'to read'// Longhandconst 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. 对象属性赋值简写

// Longhandconst obj = {  x: 1,  y: 2,  z: 3}// Shorthandconst x = 8const y = 10const obj = { x, y }

6. 可选链接

const obj = {  x: {    y: 1,    z: 2  },  others: [    'test',    'tested'  ] }// Longhandif (obj.hasProperty('others') && others.length >= 2) {  console.log('2nd value in others: ', obj.others[1])}// Shorthandconsole.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'}// Longhandconsole.log('Value of z in x: ', obj.x.z)console.log('Value of other: ', obj.other)// Shorthandconst {x, other} = objconst {z} = xconsole.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）

// Longhandconst arr = [1, 2, 3]const biggerArr = [4,5,6].concat(arr)const smallObj = {x: 1}const otherObj = object.assign(smallObj, {y: 2})// Shorthandconst 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应用回调函数对数组元素及其索引执行操作

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

// Longhandconst arr = ['Yes', 'No', 'Maybe']for (let i = 0; i < arr.length; i++) {  console.log('Here is item: ', arr[i])}// Shorthandfor (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 literalsconst 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 = 10const fakeNum = 20const realNumIndex = arr.indexOf(realNum)const noneNumIndex = arr.indexOf(fakeNum)// Longhandif (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!')}// Shorthandconsole.log(realNum + (~realNumIndex ? ' exists!' : ' does not exist!')console.log(fakeNum + (~noneNumIndex ? ' exists!' : ' does not exist!')

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

// Longhandconst simpleInt = 3const intAsBool = Boolean(simpleInt)// Shorthandconst simpleInt = 3const intAsBool = !!simpleInt   //trueconst simpleInt = -1const intAsBool = !!simpleInt   //false

12. 箭头/lambda 函数表达式

// Longhandfunction printStr(str) {  console.log('This is a string: ', str)}printStr('Girl!')// Shorthandconst 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. 应用箭头函数表达式的隐式返回

// Longhandfunction capitalize(name) {  return name.toUpperCase()}function add(numA, numB) {  return numA + numB}// Shorthandconst 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.5const floorNum = Math.floor(num) // 4// Shorthand  ~~可间接应用const num = 4.5const floorNum = ~~num // 4

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

// Longhandconst num = Math.pow(3, 4) // 81// Shorthandconst num = 3 ** 4 // 81

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

// Longhandclass 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  }}// Shorthandclass Person {  constructor(    private name: string,    public age: int,    protected hobbies: string[]  ) {}}