ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

对我来说,一些比较新的特性。

2022-07-20 17:31:08  阅读:135  来源: 互联网

标签:console log age db 特性 ycc 来说 config 比较


对象扩展

Object.keys( ) 获取对象的所有键

let obj = {
  name: 'ycc',
  age: 20
}
console.log(Object.keys(obj)) // ['name','age']

Object.values( ) 获取对象的所有值

let obj = {
  name: 'ycc',
  age: 20
}
console.log(Object.values(obj)) // ['ycc',20]

Object.entries( ) 获取对象键值对数组

let obj = {
  name: 'ycc',
  age: 20
}
console.log(Object.entries(obj)) // [['name','ycc'],['age',20]]
/*
其实就是个二维数组
  [
    [键,值],
    [键,值]
  ]
*/

对象的rest参数 和 扩展运算符

function fun({a,b,...more}){
  console.log(more) // {c:3,d:4}
}

fun({a:1,b:2,c:3,d:4})

展开对象

let obj = {
  name: 'ycc',
  age: 20
}
// ...obj => name: 'ycc', age: 20
let obj2 = {
  sex: '男',
  phone: '123123'
}

let result = {...obj,...obj2}

console.log(result) // {name: 'ycc', age: 20, sex: '男', phone: '123123'}

ES10

Object.fromEntries(二维数组) -- 将 二维数组 转换为 对象
Object.entries(对象) -- 将 对象 转换为 二维数组    ( ES8 )

str.trim( ) -- 去除字符串前后空格
str.trimStart( ) -- 去除字符串前的空格
str.trimEnd( ) -- 去除字符串后的空格

let str = '  ycc  '; // 字符串前后都有两个空格
console.log(str) // '  ycc  '
console.log(str.trim()) // 'ycc'
console.log(str.trimStart()) // 'ycc  '
console.log(str.trimEnd()) // '  ycc'

tips:
trimStart( ) 与 trimLeft( ) 功能相同
trimEnd( ) 与 trimRight( ) 功能相同

ES11

class的私有属性

class Person{
  name // 公共属性  
  #age // 私有属性前面加上 # 
  #weight // 私有属性

  constructor(name,age,weight){
    this.name = name
    this.#age = age
    this.#weight = weight 
  }

  print(){
     console.log(name, #age, #weight)
  }
}

let p = new Person('ycc',20,'52kg') // 实例化对象
console.log(p.name) // 'ycc'
console.log(p.#age) // 报错因为#age是这个Person类的私有属性
// 类的私有属性只能在类中读取,实例对象无法读取,可以添加一个方法打印。如上:print()方法
p.print() // 'ycc' , 20 , '52kg'

可选链操作
本人觉得这个新特性还挺好用的,刚学完感觉不错,目前还没有实际使用过。
语法:   ?.
举个栗子:

function main(config){
  const db = config && config.db 
  // 这里要拿到config里的db要先判断这个config有没有传过来
  // 如果要拿的数据有点深那就有点麻烦了,比如db里面还有一个host我要拿
  const dbHost = config && config.db && config.db.host
  // 先判断有没有config ,有 ,再判断config里有没有db,有 ,最后才能拿到 host
}

main({
  db:{
    host: '127.0.0.1',
    username: 'root'
  }
})

ok,上面这个 && 逻辑与 判断有点麻烦,现在举个栗子怎么使用 可选链操作这个新特性

function main(config){
  const db = config?.db
  // ? 前的数据存在就 . 拿里面的数据

  const dbHost = config?.db?.host
  // config?.db          config存在 就拿数据config.db
  // config.db?.host     config.db存在 就拿数据config.db.host
}

main({
  db:{
    host: '127.0.0.1',
    username: 'root'
  }
})

动态import

先来看看静态import
import * as m from 'url'
这样,不管开发者会不会用到这个模块从一开始就已经引入了,如果后边还用不到这个模块的话,就会浪费首次加载页面的资源。

再来看看动态import
import('url').then(module=>{})
这样,只要在用到的该模块的时候才会引入,加载页面速度会变快,节省资源。

import('url') // 返回了一个promise对象,有then方法
// then方法中对应成功的回调(第一个回调)的形参 封装了所有暴露的数据

import('url').then(m => {
  // 这个m.xxx 可以调用暴露的数据
  // 如果是默认暴露的模块 m.default.xxx 调用
})

BigInt

ES11引入的 新数据类型 BigInt 大整形

let n = 520n // 给普通整形后面加上n 表示大整形
console.log(n, typeof n) // 520n 'bigint'

// BigInt()函数
let num = 99
console.log(BigInt(num)) // 99n 其实就是给整形后面加了个n

let max = Number.MAX_SAFE_INTEGER // max = 最大安全整数
console.log(max) // 9007199254740991
console.log(max + 1) // 9007199254740992
console.log(max + 2) // 9007199254740992
// 加1还行,加2的话就加不上了

// 转换为bigint就可以往上加,但是bigint只能和bigint类型数据相加。与其他数据类型相加 报错
BigInt(max) + BigInt(2) === 9007199254740993n // true

globalThis

顾名思义 global(全局) This(this)
globalThis 始终 指向全局对象

浏览器环境下 globalThis 也就是 window
nodejs环境下 globalThis 也就是 global

标签:console,log,age,db,特性,ycc,来说,config,比较
来源: https://www.cnblogs.com/imycc/p/16498897.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有