2024年一文带你走进JS语法（最全笔记）_nodes，【设计思想解读开源框架

大家好，欢迎来到IT知识分享网。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

• 获取数组长度

使用函数：数组名.length

范例：

arr.length; 

• 数组复制

语法：数组1 = [...数组2];

范例：

let a = [1,2,3]; let b = [...a];//数组b内容也是1,2,3 

• 数组合并

语法：数组1 = [...数组2,数组3];将数组2和3合并到1

范例：

let a = [1,2,3]; let b = [4,5,6]; let c = [...a,...b];//数组c内容是1,2,3,4,5,6 

• 字符串转数组

语法：数组 = [...字符串];

范例：

let s = "lxq"; let a = [...s];a数组内容是l,x,q 

9.函数

• JavaScript中的函数类似于Java中的方法
• 普通函数

语法：

function 方法名(参数){    方法体;    return 返回值; } 

注意：如果不需要返回值则不用写return语句，参数不用写类型

• 可变参数

语法：

function 方法名(...参数){    方法体;    return 返回值; } 

• 匿名函数

语法：

function(参数){    方法体;    return 返回值; } 

DOM

1.概述

• DOM指document object model，即文档对象模型
• 将HTML文档各个组成部分封装为对象，借助这些对象可以对HTML文档进行增删改查的动态操作
• 相关对象：
  1. Document，表示文档对象
  2. Element，元素对象
  3. Attribute，属性对象
  4. Text，文本对象

2.元素对象的操作

• 根据document文档对象来获取元素对象

• 根据当前元素对象获取父元素对象

子元素对象.parentElement

• 通过文档对象创建新元素对象

document.createElement(标签名);

• 将指定子元素对象添加到父元素中

父元素对象.appendChild(子元素对象);

• 父元素删除指定的子元素

父元素对象.removeChild(子元素对象);

• 父元素用新子元素替换旧子元素

父元素对象.replace(新元素,旧元素);

3.元素内属性操作

• 给元素设置属性

setAttribute(属性名,属性值);

• 根据属性名获取属性值

getAttribute(属性名);

• 根据属性名移除属性

removeAttribute(属性名);

• 为元素添加样式

方式一：

元素对象.style.样式=值;

如：

let ele = document.getElementById("a"); ele.style.color = "red"; 

方式二：

元素对象.className = "类选择器名";

4.元素内文本操作

• 设置文本内容，不解析标签

元素对象.innerText="文本内容";

注意：不解析标签是指文本内容如果有HTML标签也不会解析，只会当成文本

• 设置文本内容，解析标签

元素对象.innerHTML="文本内容";

注意：这里的文本内容会被解析标签

事件

• 事件是某些组件完成某些操作时会触发的代码
• 常用事件

• 绑定事件的方式
  1. 通过标签中事件属性进行绑定

  范例：

  <button οnclick="触发的操作"></button> 

  2. 通过DOM元素进行绑定

  let b = document.getElementById("btn"); b.οnclick=function(){//使用匿名方法    触发的操作; } 

面向对象

1.定义类的方式

• 方式1

语法：

class 类名{    //构造方法    constructor(变量列表){        变量赋值;   }    //普通方法    方法名(参数列表){        方法体;        return 返回值;   } } 

用法：

let 对象名 = new 类名(实际变量值); 对象名.变量名; 对象名.方法名(); 

• 方式2

语法：

//在定义类的时候已经创建了对象 let 对象名 = {    变量名 : 变量值,    变量名 : 变量值,        方法名 : function(参数列表){        方法体;        return 返回值;   },    方法名 : function(参数列表){        方法体;        return 返回值;   } }; 

用法：

对象名.变量名; 对象名.方法名(); 

2.继承

• JS中顶级父类是Object
• 继承需要使用extends关键字

语法：

class 子类 extend 父类{} 

• 继承范例

class Person{    constructor(name,age){        this.name = name;        this.age = age;   } ​    show(){        document.write(this.name+","+this.age+"<br/>");   } } ​ class Worker extends Person{   constructor(name,age,salary){       //使用super()调用父类构造方法        super(name,age);        this.salary = salary;   } ​   show(){        document.write(this.name+","+this.age+","+this.salary);   } } ​ let worker = new Worker("张三",23,15000); worker.show(); 

内置对象

1.Number对象

• parseFloat(s)方法，将字符串浮点数转为浮点数
• parseInt(s)方法，将字符串整数转为整数

2.Math对象

• ceil(x)方法，向上取整
• floor(x)方法，向下取整
• round(x)方法，四舍五入
• random()方法，返回0到1之间的随机数，不含1
• pow(x,y)方法，x的y次方

3.Data对象

• 构造方法

• 常用方法

4.String对象

• 构造方法

• 常用方法

5.RegExp对象

• 构造方法

• 匹配方法：test(字符串)方法，用于查看字符串是否符合匹配规则

6.Array对象

• 常用方法

7.Set对象

• 元素唯一，存取顺序一致
• 构造方法：Set()
• 常用方法

• Set集合遍历范例

let set = new Set(); set.add("a"); set.add("b"); let st = set.keys(); for(let i = 0;i < set.size;i++){ document.write(st.next().value); } 

8.Map对象

• key唯一，存取顺序一致
• 构造方法：Map()
• 常用方法

• Map集合遍历范例

let map = new Map(); map.set(1,"a"); map.set(2,"b"); let et = map.entries(); for(let i = 0;i < map.size;i++){ document.write(et.next().value); } 

9.JSON对象

• JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
• 它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
• 简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效提升网络传输效率
• 常用方法

• 范例

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效提升网络传输效率

• 常用方法

• 范例

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取