JavaScript Part1 ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第3天。

前言

今日跟着月影老师学习了JavaScript相关知识，其中一些相关元素属性或函数等之前没学过，导致整体学习相对困难，所以今日笔记主要记录不太熟悉的课程知识。

HTML中新知识

• label for
  • <label> 标签为 input 元素定义标注（标记），无特殊效果，只是为了提升交互体验

    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
  

  • <label> 的for属性可将label标定到表单控件上，前提是for属性的值和表单控件的id选择器的属性值相同。（关联方式分为显式关联和隐式关联）

    

JavaScript中新知识

• CustomEvent
  • CustomEvent是自定义事件函数，相较于自定义时间函数Event,CustomEvent可创建能附带数据的更高度自定义事件。
  • CustomEvent用法new CustomEvent(eventName, params);

    const event =new CustomEvent('slide',{bubbles:true,detail})
    //其中detail存放了事件索引，可以触发时调用
    const detail ={index: idx}
  

• dispatchEvent
  • Event、CustomEvent和dispatchEvent都是自定义事件函数，dispatchEvent作用为触发自定义事件。
  • dispatchEvent用法element.dispatchEvent(eventName)
  • 补充：删除自定义事件函数removeEventListener、detachEvent。
• constructor
  • constructor作用：创建和初始化类中创建的对象
  • constructor用法constructor(params) ，一个类中只能有一个constructor

   class Animal {
     constructor(birdname) {
     //将birdname提供给 Animal的animalname
       this.animalname = birdname;
     }
     present() {
       return 'I have a ' + animalname;
     }
   }
  

• 私有属性
  • 对于很多编程语言，把以下划线_作为前缀的属性作为私有属性，外部不能访问此类型的属性和方法。
  • 补充：除了使用下划线，js还可基于闭包、基于强引用散列表、基于WeakMap的方式实现私有属性。
• 位操作符

操作符名称	符号	结果	示例
按位非	~	对数值取反减一	~25 //26
按位与	&	按位一一执行与操作	25&3 //1
按位或	竖线(markdown表格加竖线太难了)	按位一一执行或操作	`25	3` //27
按位异或	^	按位一一执行或操作（只在一位上是1的时候返回1）	25^3 //26
左移	<<	将数值所有位左移动要求的位数（符号不变）	2<<5 //64
有符号右移	>>	将数值所有位右移动要求的位数（符号不变）	64>>5 //2
无符号右移	>>>	若整数，同有符号右移，若负数，先取补码，符号位不变右移动要求的位数，空位补零，完成后，符号位不变，其余为按位取反加1	-64>>>5 //134217726

• 扩展运算符**...**

  • 将可迭代对象展开

  • 用法：...变量名 必须放在参数列表的末尾，否则出错 ``

    

总结

JS的知识很多且很重要，听了老师的课程以后才发现自己还有许多不懂的地方，需要多练多学；以上笔记内容参考了mdn文档、现代 JavaScript 教程等，若有错误，请批评指正，谢谢。