js编码优化

为了提高个人的工作能力与职业前景，需要具有扎实的基础知识，目前自己基本功薄弱，缺乏自己的知识体系与工作方法论，需要尽快提高自己能力，

如何打造自己的知识体系

zhuanlan.zhihu.com/p/100004400

js脑图调研

2 js脑图 blog.csdn.net/weixin_4465…

3 js思维导图 www.cnblogs.com/xhb-bky-blo… //导图与JavaScript高级程序呼应

4.JavaScript高级程序（设计第四版）

js知识结构

本周学习目标

js基础知识

1 ECMASCript严格区分大小写

2标识符规则

第一个字符必须为字母，下划线或者灭缘符号

剩下的可以多一个数字

标识符要使用驼峰大小写形式 firstSecond myCar等

关键字，保留字 true false null 不能作为标识符

声明风格及最佳实践

不使用var const优先 let次之，

使用const十浏览器在运行时强制变量不变，另一方面，让静态代码分析工具提前发现不合法的操作，代码可读性强

3 变量

var	声明作函数作用域，声明提升，会全局声明
let	声明块作用域，let不允许重复声明，声明不会提升，不会全局声明
const	行为同const类似，必须声明时赋值，

• 函数作用域和块作用域的区别

函数作用域：变量在声明他的函数体中以及这个函数体嵌套的任意函数体内都是有定义的

块作用域：在一个代码块({})中定义的所有变量在代码块外部是不可见的

• 暂时性死区

在let声明之前的执行瞬间被称为暂时性死区，在这个阶段引用任何后面才声明的变量都会抛出 ReferenceError

• let不能依赖条件声明模式，因为条件判断对let也是属于块级作用域({}),只在{}中存在
• for循环中变量的使用

使用var 循环里的变量会渗透到循环体外部，使用let可以避免这个问题

• const的声明限制只适用于它指向的引用地址，修改对象内部的属性不违背const 的限制

4 数据类型

数据类型分为基本数据类型和引用数据类型

基本数据类型有null undefined 字符串 数字 布尔 symbol，引用数据，引用数据有普通对象，数组，正则，日期，数学函数

• • null

• • • 表示一个空对象的指针
    • typeof 会返回 null

• • undefined

• • • 使用var或者let 声明了变量但是没有赋值，typeof 会返回 undefined
    • null==undefined null!==undefined
    • 没必要显性的声明undefined

• • 字符串

• • • 特性：由0个或者多个16位点Unicode字符序列，单双引号不能互用
    • 字符串一旦被创建，其值就无法改变，改变需要销毁原有字符串
    • 转换为字符串， toString() String , +‘’

• • • • null和undefined没有toString
      • 如果你确定一个值是不是null和undefined，使用String (),

• • 数字

• • • 科学计数法 3.12e5 =312000
    • Number使用了双精度值，不同的数据类型对应不同的数据字面量格式
    • NaN，含义 不是数值，特性，任何涉及NaN的操作始终返回NaN，NaN不等于任何数值
    • 数值转化，Number，parseInt ，parseFloat

• • 布尔

• • • 只有2个字面值，true和false
    • false null ‘’ undefined 0 转布尔会转成fasle

• • symbol

• • • 含义：symbol，符号是原始值，且符号的实例是唯一的，用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险
    • 符号需要使用Symbol()函数去初始化，
    • Symbol函数不能与new关键字一直作为构造函数使用，是为了避免创建符号包装对象
    • Symbol.for()：全局注册，符号共享和重用，对每个字符串都值行幂等操作(任意多次执行与一次执行影响相同)
    • Symbol.keyFor()查询全局注册表

• • 对象

• • • 定义： 一组数据或者功能的集合
    • 声明：var o =new Object（）
    • 所有的Object都有的属性和方法

• • • • constructor 保存用于创建当前对象的函数
      • hasOwnProperty(propertyName) 检测给定属性在当前对象实例中是否存在
      • isPrototypeOf(object) 检测传入的对象是否是另一个对象的原型
      • propertyIsEnumerable(propertyName) 检测给定属性是否能用for-in语句枚举
      • toLocaleString() 返回对象的字符串表示，该字符串与执行环境的地区对应
      • tostring 返回对象的字符串表示
      • ValueOf 返回对象的字符串、数值或布尔值表示；通常与toString()的值相同

//isPrototypeOf -- 检测传入的对象是否是另一个对象的原型
function A () {};
function B ()  {}
var a = new A();
(A.prototype).isPrototypeOf(a) // true
  (B.prototype).isPrototypeOf(a) // false
  (Object.prototype).isPrototypeOf(a) // true
  (Object.prototype).isPrototypeOf(A.prototype) // true
//  propertyIsEnumerable -- 检测给定属性是否能用for-in语句枚举
var o = {};
var a = [];
var c=[]
o.prop = 'is enumerable';
a[0] = 'is enumerable';
o.propertyIsEnumerable('prop');  //true
a.propertyIsEnumerable(0);        //true
c.propertyIsEnumerable(0);     //false
//toLocaleString --该字符串与执行环境的地区对应
let num = 12034.456;
num.toLocaleString(); //2,000   千分符的基本用法
num.toLocaleString('zh-u-nu-hanidec');// "二,〇八九"   阿拉伯数字转成中文数字
num.toLocaleString('zh',{style:'percent'});  //208,900%    数字转百分比
num.toLocaleString('zh',{style:'percent',useGrouping:false});//208900%    数字转百分比 (去除分隔符)
num.toLocaleString('zh',{style:'currency',currency:'CNY',useGrouping:false});  //¥2089.00   转货币
num.toLocaleString('zh', { minimumIntegerDigits: 5 }); //01,234.456
num.toLocaleString('zh', { minimumFractionDigits: 4, useGrouping: false }); //1234.4560

js编辑技巧

1 使用 == 和 === 的表达式可以直接给变量赋值：

//bad
handleFormChange(e) {
  let isUpload;
  if (e.target.value === 'upload') {
    isUpload = true;
  } else {
    isUpload = false;
  }
}
//good
handleFormChange(e) {
const isUpload =(e.target.value === 'upload');
}

2 有条件地向对象(数组)添加属性

//对象
//使用展开运算符来有条件地向对象中添加属性：
const condition = true;
const person = {
  id: 1,
  name: "dby",
  ...(condition && { age: 12 }),
};
//数组
// 通过filter过滤fasle
const condition =false
const arr=[
  {name:'小敏'},
 condition&&{sex:'男'}
].filter(Boolean)

3 结构赋值

深度结构赋值

let obj = {name: "dby",a: {b: 1}}

//bad
const {a}=obj
const{b}=a

//good
const{a:{b}}=obj

console.log(b); // 1

解构时使用别名和默认值

const obj = {
  // 这个键名太长了，我们希望把它换掉
  aaa_bbb_ccc: {
    name: "dby",
    age: 12,
    sex: true
  }
}
const{aaa_bbb_ccc: user={}} =obj
console.log(user); // { name: "dby", age: 12, sex: true }

使用短路避免报错

const {a,b,c,d,e} = obj || {};

4 检查属性是否存在对象中

ES2022新特性有一个新的提案 Object.hasOwn() ，相当于 Object.prototype.hasOwnProperty.call() 的别名：

let preson ={salary:'300'}
preson.hasOwnProperty('salary') //true
Object.hasOwn(person, "salary"); // true