如何在html使用js

外部导入

 <script src="ts0.js"></script>
 <script src="ts1.js"></script>

内部插入

<script>
let a = ()=>{
    alert('1')
}
</script>
直接在script标签内写就行

语言基础 很重要

关键字

break		do			in     		typeof 
case		else		instanceof	var 
catch		export		new 		void
class		extends		return 		while
continue	for			switch 		yield
debugger	function 	this		
delete		import 		try

变量

提示

有三种定义关键字：var, let, const js中的变量是没有类型的概念，它可以是任意类型

var定义

作用域当前函数块，因为在函数内定义会自动提升到最上一行定义，还可以多次定义多一个变量名，它还可以冗余定义，其他的关键字不行

定义方式

var a;声明但没赋值，但会默认为零值（可看做初始化的值，变量的初始值为undefined）

var a = "hi";有初始化

a = "hi";也是有效的，默认没加关键字就是let（猜测），需要初始化

冗余定义

js引擎用合并重复定义，以最后定义的变量且赋值的为准（如果有的话）

var a = 1;
var a = "1";
console.log(typeof a);// string
------------------------------
var a = 1;
var a;
console.log(typeof a); // number

var的声明提升

它会把当前var定义的变量声明提升到作用域^[1]的最前面

在浏览器的环境下，在顶部域定义的变量会成为window的属性

console.log(a); // undefined
var a = 1;

上方等价于

var a;
console.log(a);
a = 1;

提升到函数作用域顶部

function f(){
    console.log(a);
    {
        var a = 1;
    }
}

上方等价于

function f(){
    var a;
    console.log(a);
    { 
        a = 1;
    }
}

let定义

与var不同的时，作用域为块级作用域

{
    let a = 1; <==> a = 1;
    // 等价且没有声明提升，所以我觉得没关键字默认是let
}
console.log(a);// 报错
// let定义的不会成为window的属性

const定义

必须被初始化

基本类型

const a = 1;
a = 2;// 报错

引用类型

const a = new Object();// 存入的只是对象的引用，
a.name = 1;// 改变其属性并没有改变对象的引用，所以不报错

数据类型

检测数据类型：typeof 变量

基本类型

1. undefined

   当使用var或let声明变量时不赋初始值时，相当于赋值为undefined

   特殊的如果变量未声明也会是undefined

2. null

   undefined的是null的派生出来的,==下两者相同

   特殊的null指空对象指针，一般用在声明对象变量上

   与undefined差别主要是一个是未赋值，一个是空对象引用，语义的区别吧

3. boolean

   不同类型与布尔值的转换规则

   数据类型	转换为true的值	转换为false的值
   boolean	true	false
   string	非空字符串	""（非空字符串）
   number	非零对象（包括无穷值）	0、NaN
   Object	任意对象	null
   undefined	N/A	undefined

4. number

   数字即为number，不分整数还是浮点数

   特殊值

   1. NaN：Not a Number

      用于当遇到数字类操作出现错误时，返回的值，而不是抛出异常

5. string

   特点，一旦赋值不能修改

   使用单引号''或双引号""都行，但前后要一致

   let a = "1";
   // 不能通过a[0] = '2'修改，只能重新赋值，但能通过a[0]访问字符串下标为0的字符

   1. 模板字面量，会保留换行符，和空格，还可以使用${表达式}进行插值，本质使用的是表达式的toString，在一些如要想完全的复制一份html代码，但又不想折成一行，就可以用它，有奇效

      var a = `
      <div> a </div>
      	<a>
      	${表达式}
      `;
      // 只能用``包裹
      // 上面长啥样显示就是啥样
      // 符号是波浪线的按键，不是单引号

   2. 标签函数

      不明白，就是一种可以通过``代替()去调用函数

      function f(a, b, c){
          console.log(a);// [ '', ',', '' ]
          console.log(b);// 1
          console.log(c);// 2
      }
      f`${1},${2}`// 传入的参数就像上方那样

6. Symbol

   let a = Symbol('描述');// 会获得一个唯一的Symbol，这玩意主要用来保证唯一性
   let b = Symbol();
   console.log(a == b)// false
   // 如要使两者相等，可以使用Symbol.for()方法
   // 该方法会返回指定键的Symbol，这是一样的
   a = Symbol.for('ff');
   b = Symbol.for('ff');
   console.log(a == b);// true
   // 可以认为使用Symbol.for(键)得到的Symbol只要键相同两者就相同
   a = Symbol('ff');
   console.log(a == b);// false
   // 可以通过Symbol.keyFor(变量) 来查询用Symbol.for()全局注册的符号键值

引用类型

1. Object

   let a = new Object();// 跟java中的对象类似

操作符

大部分跟其他语言类似

1. in

   枚举顺序不一定按照该对象的原来顺序枚举，就像c++使用for-in枚举map一样

   所以主要用于无序

   for (接收变量 in 可迭代对象){
   }

2. of

   用于有序对象，使用对象的next进行取值

   for (let a of 可迭代对象)

3. 标签语句

   多见于嵌套循环

   可以在方法体内任意地方使用continue 标签，break 标签

   如continue就是就是从标签那个循环继续开始循环

   如break就是break标签那个循环，然后父层循环继续

   f1 : for (let i = 0;i < 10;i += 1){
       f2 : for (let j = 0;j < 10;j += 1){
           f3 : for (let k = 0;k < 10;k += 1){
               console.log(i, j, k)           
               if(k == 5) continue f1;
           }
       }
   }

4. with

   设置内部的代码的变量作用域

   就是加了前缀，别用，不好用，严格模式下不能使用

   let a = "1"
   with(a: Object){
       let b = toString()
       // 相当于a.toString()
       console.log(b)// 1
   }

5. function

   定义函数

   函数也是一种类型，function类型（和Object都是引用类型），可以赋值给变量

   a = function 函数名（参数1， 参数2,...）{
      // 函数体
   }
   console.log(typeof a);// function

6. ??

   就长上面那样，名称为先定义

   let a = b ?? c ?? 0;
   // 这段代码的意思是，如果b不是null或undefined，就赋值给a，
   // 如果是，对c执行一样的操作,一般最后写一个保底的
   // 虽然未定义的变量的类型是undefined，但是后面的是定义了的

7. delete

   删除变量或属性：delete 变量或属性，严格模式下不能删除对象

8. use strict

   使用严格模式，在这个模式下有些东西会被禁用，如上面的with，该语句得位于最上面，不然就会当做字面量处理

基本引用类型

跟类相似，有属性和方法

let a = new 引用类型();
let a = new Date();
var a = Date();// 虽然存在这样的写法，但这只是调用了函数

1. Date

   跟时间相关的属性和方法都封装在这个引用类型中

2. RegExp

   正则相关

3. 原始值的包装类型

   1. Number

   2. String

   3. Boolean

      let a = new String("111");
      // 三者都是引用类型，相当于有对应属性类型的对象
      // 我们可以这样使用
      let a = '1'
      console.log(a.toString());// 1
      // 为啥能这样呢，原因是当原始值使用方法时，会自动创造一个对应的包装类型
      // 但与new一个不同的时，该对象仅执行那个语句有用，下一个语句就销毁了
      let s1 = '1'
      s1.a = '2'
      console.log(s1.a)// undefined

4. Global

   在全局定义的变量和函数都会变成Global的属性

   还有一些自带的函数都是其属性，如String，Number之类的

   1. window

      浏览器中Global的代理人

      let a = 1;
      console.log(window.a);// 1

   2. eval

      eval("console.log(1);"); // 能够解析js语句

集合引用类型

1. Object

   创建方式

   var a = new Date();
   // 或使用对象字面量
   var a = {
       name: "1"
   }// 不会调用对象的构造函数

2. Array

3. Map

4. Set

对象，类，面向对象

对象

1. 创建对象

   let a = new Object();
   a.属性 = ..
   ...
   
   let a = {属性和方法};
   // 两者一致

工厂模式

function createPerson(name, age){
    let o = new Object();
    o.name = name;
    o.age = age;
    o.toString = function(){
        console.log(this.name + this.age);
    }
    return o;
}
// 调用该函数
let person = createPerson("zhangsan", 20);

构造函数模式

function Person(name, age){
    this.name = name;
    this.age = age;
    this.toString = function(){// 每次都是创造新的function对象
        console.log(this.name + this.age);
    }
}
let a = new Person("John", 20);
// 与工厂模式差别只是没有return和显式的创建对象，得使用new关键字

原型模式

每个函数在创建的时候都会存在一个prototype属性，该属性所有实例共用

function Person(){
    Person.prototype.name = "zhangsan";
    Person.prototype.age = 20;
    Person.prototype.getName = function(){
        return this.name;
    }
}
a = new Person();

属性：

1. __proto__：每个实例都有的属性，能够访问对应的原型

2. 对象解构

   let {属性或方法 ：变量名1， 属性或方法 ：变量名2..} = 对象
   let person = { name: '1', age: 2};
   let {name: a1, age: a2} = person;
   // 这样会把对象的属性和方法按照指定的属性或方法名赋值给对应变量
   // 也可以直接使用对象中的属性名
   let {name, age} = person;

3. 属性的访问

   对象的属性访问

   let o = {x : 1, y : 2};
   o["x"]; // 1 通过中括号访问
   o.x;// 通过点属性名访问

   数组的属性访问

   a = [1, 2, 3, 4, 5];
   a[0];
   a["0"]; // 都行会自动转换成数字

   条件式访问属性

   // 如果有这样的变量
   let a = null; 或 let a = undefined;
   // 假设我想这样做
   a.x;// 报错
   a?.x;// undefined，没有报错，所以当不知是否有该属性的时候，最好使用?.
   // 如果不是上面的两种，其实下面的也不会报错，但你怎么就确定就不是上面的，
   // 为了狗命还是使用条件访问，除非你头铁

   条件式调用函数

   // 因为可以把函数赋值给变量，所以也会存在上面的那两种可能性，可能会给你一个👍
   let a = ()=>{};
   let b;
   a?.();// 这样写
   b?.();// 不报错

4. 为对象添加计算属性

   let o = {};
   // 如果我想给它添加一个我给的的变量名作为其属性名，那么就可以这样做
   let a = "name";
   o[a] = "zhangsan";
   // 还可以
   o[a + "是name"] = "张三";
   o[(()=>{return "name"})()] = "wangwu";
   // 实际是[]中的进行求值后的结果

5. 为对象复制其他对象的属性

   let o1 = {a: 1, b : 2};
   let o2 = {...o1};// 使用扩展操作符，就可以复制其他对象的所有属性
   o2.a;// 1
   o2.b;// 2

类

类定义

class 类名{
 
    constructor(){
        // 构造器，当创建实例时，会被调用
    }
    get name(){}// 通过.name访问，如果设置值会走下面那个
    set name(){}
}// 声明类
class Person{
    
}
let a = new Person();

类继承

class people extends Person{}

代理与反射

代理

定义代理

// 代理的对象，处理程序对象
const proxy = new Proxy(target, hander);

定义捕获器

触发捕获器得通过代理对象去访问被代理对象

const hander = {
    get(target, key){
        // target就是被代理的对象，key是想获取的属性名
        return target[key];// 需要返回，不然获取不到
    },
    set(target, key, value) {// 代理对象，属性名，设置的值
        console.log(target, key, value)
    }
    ...
}

简化捕获器

const hander = {
    get(target, key){
       return Reflect.get(target, key);// 实际做的和上面一样
    },
    set: Reflect.set//这样也行
}
// 更简单的就是捕获器直接传入Reflect

撤销代理

对于使用new创建的好像没办法

const {proxy, revoke} = Proxy(target, {});
revoke();// 调用撤销方法

捕获的操作

1. get(target, p, receiver)：获取值
   • target：被代理的对象
   • p：访问的属性
   • receiver：代理对象
   • 返回值：没限制
2. set(target, p, newValue, receiver)：设置值
   • target：被代理的对象
   • p：访问的属性
   • newValue：要设置的新值
   • receiver：代理对象
   • 返回值：true：表示成功， false：表示失败
3. has(target, p)：使用in操作符的时候
   • target：被代理的对象
   • p：检测的属性名
   • 返回值：布尔值，表示属性是否存在
4. defineProperty(target, p, des)：给对象设置属性
   • target：被代理的对象
   • p：设置的属性名
   • des：设置的值
   • 返回值：布尔值，是否设置成功
5. getOwnPropertyDescriptor(target, p)：获取指定p的值
   • target：被代理的对象
   • p：属性名
   • 返回值：返回对象，或不存在返回undefined
6. deleteProperty(target, p)：删除属性时
   • target：被代理的对象
   • p：属性名
   • 返回值：布尔值，表示是否删除成功
7. ownKeys(target)：获取自有属性时
   • target：被代理的对象
   • 返回值：必须返回包含字符串或对象的可枚举的对象
8. getPrototypeOf(target)：获取原型
   • target：被代理的对象
   • 返回值：对象或null
9. setPrototypeOf(target, v)：设置原型
   • target：被代理的对象
   • v：要设置的新原型
   • 返回值：布尔值，表明是否设置成功
10. isExtensible(taget)：验证是否能扩展时
    • target：被代理的对象
    • 返回值：布尔值，是否能被扩展
11. preventExtensions(targer)：验证是否已经不能扩展
    • target：被代理的对象
    • 返回值：布尔值，是否已经不能扩展
12. apply(target, thisArg, argArray)：调用函数时
    • target：被代理的函数
    • thisArg：调用函数时的this参数
    • argArray：调用时的的参数
    • 返回值：无限制
13. construct(target, argArray, newTarget)：使用new时
    • target：目标的构造函数
    • argArray：构造时传入的参数
    • newTarget：最初被调用的构造函数
    • 返回值：必须要返回个对象

反射

跟java反射差不多，都是能获得一个对象的属性，然后还能操作

函数

定义函数

1. 函数声明

   function 函数名(参数列表){}

2. 函数表达式

   let f = function (参数列表){}

3. 箭头函数

   let a = (参数列表)=>{
   // 变量名a相当于函数名
   }
   // 参数列表的括号仅当只有一个参数可以不用括号！！！，其他都要括号，保险起见都用括号

4. 使用Function构造函数

   let f = new Funtion("参数1", "参数2",..,"语句");// 不推荐

5. 当函数作为对象的属性可以简写

   let o = {
       f : function(){} ====>> f(){};// 同名的话就可以这样
   }

参数列表

当传入的参数个数超过了参数列表元素个数，会舍弃多余的

默认有个arguments对象，这个里面存入的是传入的参数， 即使函数没定义参数，只要调用的时候传入参数，就会存进去

使用function定义的有，箭头函数定义的没有这玩意！！！！！

1. 默认参数值

   let a = (a1 = 1, a2, a3 = 1, a4 = 2){
       // 参数可以传递任意个，按顺序赋值给上方变量,如果参数个数不够，
       // 带有默认值的会赋值为默认值，否则就是undefined
   }

2. 扩展参数

   function sum(){
       let sum = 0;
       for (let i = 0;i < arguments.length;i ++){
           sum += arguments[i];
       }
   }
   a = [1, 2, 3];
   console.log(sum(...a));
   // ...a相当于把数组a的每一个元素拎出来，作为一个参数传入
   // 等价于sum(a[0], a[1], a[2]);

3. 收集参数

   东西还是那样，只是

   // 与扩展参数不一样的是，扩展参数是传入的是一个整体，想要拆分
   // 而收集参数，则是先将前面的参数满足后，剩余的参数变成整体，
   // 切记得放在最后，不然后面定义的参数无法收到值，无意义
   function f1(a, ...a1){
    	return a1;
   }
   console.log(f1(1, 2, 3));// [2, 3]

函数声明提升

f1();// 不报错，这仅限于函数使用函数声明定义的函数
function f1(){}

1. 函数声明

   使用函数名定义的函数，没有赋值给变量，该函数会自动提升到该方法块的最前面

回调函数

将函数作为参数传入另一个函数，这个函数就叫回调函数

function f2(f){
    f();// f：回调函数
}
function f3(){}
f2(f3);

函数自带属性

1. name：函数名称
2. length：定义的参数数量
3. prototype：指向原型（不太明白）
4. apply(this, args)：调用该函数，但携带一些配置：this：指定函数内的this值，args：传入的参数
5. call(this, arg1, arg2..)：与apply相同，只是参数得一个一个列出来
6. bind(this)：一样不过是赋值给变量，函数内this指向参数+

函数内部对象

1. arguments：类数组对象，包含调用函数传入的所有参数，仅限使用function定义的函数

   • 数组属性：可以对其像数组一样使用
   • callee：指向arguments对象所在的函数指针，跟使用函数名一样，主要是不需要与函数同名，进行了一定的解耦

2. this

   1. 在function定义的函数内使用

      window.color = "red";
      let o = {
          color: "blue"
      };
      function f(){
          console.log(this.color);
      }
      f();// red
      o.f = f;
      o.f();// blue
      // 所以使用function定义的函数使用this，它指的是调用该方法时的上下文

   2. 箭头函数定义的函数使用

      window.color = "red";
      let o = {
          color: "blue"
      };
      let f = ()=> console.log(this.color);
      f();// red
      o.f = f;
      o.f();// blue
      // 所以用箭头函数定义内使用，this指向的是创建该函数时的上下文

3. caller

   通过函数名.caller访问，指向的是调用该函数的函数

   function f2(){
      console.log(f2.caller.toString())
      /*
          function f3(){
              f2();
          }
      */
   }
   function f3(){
      f2();
   }
   f3();

4. new.target

   检测一个函数是不是通过new调用的，因为可以使用new调用函数，只不过会当做构造函数

    function f2(){
        console.log(new.target)// 指向新建的对象，如果有的话
    }
    new f2();

闭包

函数与作用域绑定（即一组变量绑定）这种机制？

如下面的f2就与name和age绑定，访问这两个值，都会是f1中的变量值

一般这样可以防止里面的定义的函数被全局变量污染

let name = "111";
function f1(){
    let name = "zhangsan";
    let age = 20;
    return function f2(){
        console.log(age); 
        console.log(name);// f2()调用始终会是"zhangsan"，这也是闭包的一种特性
    }
}
// 函数f2引用函数f1的变量

期约与异步函数

期约Promise

貌似是有两个执行方向的对象，成功执行一份代码，错误执行另一份代码，常用于异步函数的执行

期约状态

只能切换一次状态， 从pending => fulfilled或pending => rejected

• pending：未执行或正在执行
• fulfilled：兑现，即达到了需要的结果
• rejected：拒绝，没得到想要的结果

定义Promise

let p = new Promise((resolve,reject)=>{这是待执行的函数})

• resolve(value)：成功回调
• reject(value)：拒绝回调

实例方法

1. then(fun1(value), fun2(reson))：接受两个函数，第一个为兑现执行，第二个拒绝执行，有一个参数就是Promise执行对应函数带来的值（兑现时）或理由（拒绝时），返回解决值的包装期约
2. catch((reson)=>{})：等价于then(null, fun2(reson))
3. finally(()=>{})：当状态发生变化时触发，没有传入值，一般处理两种状态的冗余代码，返回值和上面一样都是包装期约

期约连锁

在处理的函数中再创建的新的期约对象，就可以实现异步的串行执行，这玩意如果画个图就是二叉树一样，一边是兑现一边是拒绝

p = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000);
    console.log(1)
})
p.then((res) => new Promise(resolve => {
    setTimeout(resolve, 1000)
    console.log(2)
}))
.then((res) => new Promise(resolve => {
    setTimeout(resolve, 1000)
    console.log(3)
}))
.then((res) => new Promise(resolve => {
    setTimeout(resolve, 1000)
    console.log(4)
}))
// 依次为1, 2, 3, 4

期约合成

1. Promise.all([Promise1, Promise2])
   • 只有一个期约为pending，该合成期约就是pending
   • 只有一个为reject，该期约就是reject，合成期约的失败回调只会传入第一个拒绝的理由，其他期约会被静默处理（剩下的期约如果拒绝，不会影响最终的拒绝理由）
   • 全部为兑现，传入then()中第一个参数就是包含所有期约的解决值的数组
2. Promise.race([Promise1, Promise2])：与上方的区别在于，只把第一个完成的期约作为最终结果，其他都会静默处理

异步函数

在函数前使用async声明，异步函数返回的就是期约对象

async function a(){
    // 如果有return，那么会被Promise.resolve()包装成Promise对象
    // 如果throw抛出异常，那么会被Promise.reject()包装
}

1. async

   用于函数，声明其为异步函数。返回值会包装成期约对象

2. await

   用于在异步函数中，实现同步，等待一个实现了thenable接口的对象

   其他值会被当做已经解决的期约，不等待直接往后执行

   async function f1(){
       await new Promise(resolve => setTimeout(resolve, 5000));
       console.log(1);// 5秒后输出1
       await setTimeout(()=>{
           console.log(3);
       }, 5000);
       console.log(2);// 立刻输出2
   }

BOM

浏览器对象模型，关于浏览器的一切都能通过该对象访问，如打开新窗口

当前窗口大小

window对象

表示浏览器实例，相当于把浏览器包装成一个对象，通过它可以获取和设置浏览器的信息

Global作用域

window是Global的实例对象

在顶层域定义的变量或函数都会成为window的属性或方法

window对象自带属性

• top：指向最上层窗口
• parent：指向父级窗口，估计这类在窗口里嵌套iframe的时候用的
• this：始终指向window
• innerWidth：页面视窗宽度大小，就是你真正能看到网页内容的大小，就算被控制台遮住了，视窗就是还没遮住的大小
• innerHeight：页面视窗高度大小
• outerWidth：这才是整个网页宽度大小（不包括浏览器边框和工具栏），被控制台遮住的部分也会算大小
• outerHeight：整个网页高度大小

自带不常见函数

• scroll()、scrollTo()、scrollBy()：控制页面滚动的坐标，如果页面有滚动条，就可以使用该方法，基于x，y进行定位，滚动到指定的位置

• open(url, target, features)：导航或打开新窗口，返回对应的window对象

  • 无参：打开一个空白的窗口

  • url：要打开的url

  • target：如果当前窗口有指定的target就会将网页内容显示在哪，相当于a标签的target一样，如果没指定，就打开新一个新窗口

  • features：自定义打开的窗口（会跳出单独的一个窗口，就是弹窗😄）的样式，以,隔开，如大小，地址栏显不显示，注意，不是打开新的窗口，这个参数会被忽略

    以下部分在google浏览器可能有用，淦😄

    设置	值	说明
    height	数值	窗口的高度
    left	数值	窗口x轴坐标
    width	数值	窗口宽度
    Menubar	yes或no	是否显示菜单栏，默认no
    resizeable	yes或no	是否可以拖动改变窗口大小，默认no
    scorllable	yes或no	是否可滚动，默认no
    status	yes或no	是否显示状态栏
    toolbar	yes或no	是否显示工具栏
    top	数值	窗口的y轴坐标

• close()：那个window对象调用就关闭谁的窗口

自带常见函数

• setTimeout()：定时器，执行一次回调函数，返回的是一个id
• clearTimeout()：取消定时任务，传入id即可
• setInterval()：定时循环执行任务，返回值也是一个id
• clearInterval()：你懂的
• alert()：看谁不爽，弹个警告框，不点都不行
• confirm()：确认框，有返回值，布尔值
• prompt()：提示框，有返回值，输入的内容
• print()：调用打印显示
• find()：里面输入你要找的内容，返回值为布尔值，就像按下ctrl+F进行查找一样

location对象

提供了当前窗口中加载文档的信息，如主机名，协议，查询字符串等等

主要用于获取URL中的信息

location对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

navigator对象

提供浏览器的信息，如什么浏览器，版本之类

screen对象

提供显示器的信息

history对象

历史记录，如前进和后退页面

DOM

文档对象模型，提供当前页面的所有信息

页面中的标记组成了一个树，通过DOM可以对其进行操作

类型

Node类型

Node节点

每个节点都实现了该接口，标记都属于Node

节点关系图

1. 属性
   • nodeName：节点名称，始终为标签名
   • nodeValue：节点信息，始终为null
   • childNodes：子节点数组
2. 方法
   • appendChild(newNode)：添加节点，会放在子节点的最后
   • insertBefore(newNode, refNode)：插入在参照节点的前面
   • replaceChild(newNode, oldNode)：替换老节点
   • removeChild(childNode)：移除子节点
   • cloneNode(isDeep)：传入布尔值，表示是否复制孩子节点

Document类型

document对象

表示整个文档，是Document的实例

方法

• getElementById(id)：根据id获取对应元素，id就是标签内的id属性值<p id="p1></p>这个元素的id就是p1
• getElementByTagName(tagName)：根据标签名去获取元素
• getElementByName(name)：根据标签name属性获取元素
• createElement(tagName)：创造元素用的，可以传给Node类型中添加节点的方法添加到文档中
• createTextNode(text)：创造文本节点，text里面也可以包含html标签（不会进行解析）

Element类型

就是html中的元素类型，每个标签都是Element类型

方法

• getAttribute(attrName)：获取一个属性值
• setAttribute(attrName, value)：设置一个属性的值
• removeAttribute(attrName)：移除一个属性

Text类型

• nodeValue：就是文本的内容

Comment类型

你写的代码中使用了注释，那么就会成为一个Comment类型

• nodeValue：注释的内容

CDATASection类型

使用<![CDATA[ 内容 ]]> 这样写的就是该类型

DocumentType类型

存在document.doctype属性中，就是一些文档的信息（应该是吧）

DocumentFragment类型

就是可以组装节点的仓库一样，其本身永远不会插入到文档树中，自然也不会被渲染

当其内容作为节点的添加子节点的参数时，会一起把，仓库内其他节点一起插入到对应节点

内容插入到文档时，只会有一次更新操作

Attr类型

见名知意，就是属性类型，每一个写在标签内的属性都是该类型

上面类型之间的关系

Dom扩展

Selectors API

• querySelector()：接受css的选择符参数，返回那个元素，只会取到第一个匹配的元素，还区别与被谁调用，如果由document调用那就是从文档开始找，如果是元素调用，那就是找子代元素
• querySelectorAll()：这个所有匹配的都会返回，但NodeList是静态的，也是说，当查询的时候里面是什么，之后就算dom里改动了，也是这些元素
• matches()：检测会不会被上面那个选择到
• getElementsByClassName()：你懂的

自定义属性

以data-开头

<p data-mydata="我的自定义属性"></p>
// js
let a = querySelector("p");
a.dataset.mydata;// 我的自定义属性

• data-：后面添加的会被作为dataset的键，通过.加上后面的键就可以访问到

插入标记

JSON

支持三种类型，简单值，数组，对象

网络请求（AJAX）

XMLHttpRequest对象

发送请求的对象

let xhr = new XMLHttpReqest();
xhr.open("get", "localhost:8080", false);
//      请求方法   请求路径         是否异步
// 上面还不会发送请求
xhr.send(null);
//     这里填入的是请求体，不需要的时候必须置为null

1. 跨域问题

   // 上面的请求路径得是域名，端口，协议都相同才是同域，其他是跨域，会报错

2. 请求相应后，以下属性会被赋值

   1. responeText：作为相应体返回的文本
   2. responeXML：如果相应的类型是XML的就会赋值给他
   3. status：请求状态码
   4. statusText：响应的状态描述

3. 常见的请求方式

   1. get

      xhr.open("get","请求路径",false);//这样就行

   2. post

      xhr.open("post","请求路径", true);
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      let form = 一个表单
      xhr.send(serialize(form));// 类似JSON

客户端存储

Cookie

我不知道

模块

下面是ES6中的模块

HTML导入模块

<script type="module"> // 需要把类型定义为module，不然不能使用export和import
....
</script>

模块导出

导出的对象是常量，不能在导入该模块的js中修改其值

NodeJs中的模块

导出

// 将要导出的属性，设置为exports的属性，该对象时全局对象
let a = 1;
let b = 2;
// 对于一个或多个，可以这样设置为exports的属性
exports.a = a; <===> module.exports.a = a; // exports与module.exports等价
// 对于只想导出一个的,导出一个对象就行
moudule.exports = {a, b};

• 注意：真正导出的是moudule.exports，虽然它们相等，但是如果exports这个变量被赋值的话，那就有问题了

  exports.a = 1;
  exports = 3;
  moudule.exports.b = 2;
  // 其他地方导入上面
  import {b} from "a.js";
  import {a} from "a.js";// 报错

导入

let a = require("express");// 这是内置的，也就是放在node_modules文件下
let b = require("./a.js");// 导入自己的

ES中的模块

默认导出

只有一个导出对象的时候，好用？

const a = "1";
export default a; // 这个得是你要导出的内容
// 另一个js
import aa from './ a.ts' // aa是你自己任意起的，它指向a
console,log(aa);// 1
// 默认导出一个模块只能有一个
// export 导出内容1; 这个可以有很多个

具名导出

在｛｝中写入导出的内容

export {a as ta, b, c ..};// 使用别名
// 另一个js
import {a, b,..} from '';// 这里的就得用{},且名字得一样,进行解构

导入再导出

当需要把多个模块的功能抽出一部分作为新的模块时

import {a} from 'a.js';
import {b} from 'b.js';
export {a, b};
// 或下面的
export {a} from 'a.js';
export {b} from 'b.js'; // 既导入了，又导出了

模块导入

import

import {a} from 'a.js';

在html使用

<scrpit type=module src=""></scrpit>
要加上type=module才会运行

API

• JSON类型

  JSON.

  • stringify(o)：JSON内置函数，接收可序列化变量，返回string
  • parse(s)：解析JSON

• 控制台API

  console.

  • log(var)：输出对应信息
  • table(var)：尝试以表格大的形式显示参数内容
  • count(s)：接收一个string，记录其被调用的次数，也就是使用多少次count(s)这个函数且参数是相应的stirng
  • time(s)：和上面差不多，也是接收一个string，但是记录时
  • timeLog(s)：打印上次调用time(s)的时间差，可多次调用
  • timeEnd(s)：效果跟timeLog(s)一样，但是会把time(s)的调用记录清空，如果之后不再次调用time(s)，就调用timeLog(s)就会报错

• URL API

  let url = new URL();// 实现了url的对应需要的属性，使用它更方便创建URL对象

• 计时器

  • setTimeout(function, time)：第一个是回调函数，第二个是经历多少毫秒
  • setInterval(function, time)：参数与上面一致，只是这个是循环执行

生成器

主要适用于可迭代对象不是某个数据，而是通过计算得到的数据，

就像暂停执行了一样，通过调用next()执行,如果碰到yield，就把yield后面的值当做这次调用的函数返回的值

定义生成器

function* arr(){
    // 计算结果res1
    yield res1;
    // 计算结果res2
    yield res2;
}
let a = arr();
a.next().value;// res1
a.next().value;// res2

• yield：就像return一样，把后面的值返回
• next()：迭代器是实现了next()的可迭代对象，所以可以使用of

yield*

就是少写一点代码而已

function* arr(... arrs){
    for (let arr of arrs){
        for (let i of arr){
            yield i;
        }
    }
}
<==========>
function* arr(... arrs){
    for (let arr of arrs){
        yield* arr;
    }
}

WebSocket

能够与服务器连接，持续的交互

---

1. 作用域：

   • 函数作用域：就是在一个函数内无论在哪个代码块中都能被其他代码块访问
   • 块级作用域：就是用{}包裹的就是一个块级作用域
   ↩︎