第二阶段的问题和总结

做酒店管理系统时遇到的问题

在写代码的时候，遇到在输入内容的时候，点击搜索，并没有把搜索到的内容渲染出来 主要原因是因为我的filterArr过滤数组是空的，循环不了，而我是要去我的列表里面去查询内容，所以我在循环的时候应该是在orderArr数组里面去遍历找到符合条件的然后放在过滤后的数组里面，然后渲染出来

let orderArr = [
  {
    orderName: "空调",
    orderState: "完成",
    finishTime: "上午8:20",
    remark: "无",
    id: 1,
  },
  {
    orderName: "被套",
    orderState: "进行中",
    finishTime: "下午3:00",
    remark: "无",
    id: 2,
  },
  {
    orderName: "行李柜",
    orderState: "完成",
    finishTime: "下午13:20",
    remark: "无",
    id: 3,
  },
  {
    orderName: "小冰箱",
    orderState: "未开始",
    finishTime: "下午18:20",
    remark: "无",
    id: 4,
  },
  {
    orderName: "电视机",
    orderState: "完成",
    finishTime: "上午10:20",
    remark: "无",
    id: 5,
  },
  {
    orderName: "茶几",
    orderState: "未开始",
    finishTime: "下午17:20",
    remark: "无",
    id: 6,
  },
];

错误代码

// 点击搜索的时候
searchBut.addEventListener("click", function () {
  let filterArr = [];
//搜索框里面的值
  let str = searchCon.value;
  for (let i = 0; i < filterArr.length; i++) {
    if (orderArr[i].orderName.includes(str)) {
      //符合条件
      filterArr.push(orderArr[i]);
    }
  }
  render(filterArr);
});

正确代码

// 点击搜索的时候
searchBut.addEventListener("click", function () {
  let filterArr = [];
  let str = searchCon.value;
  for (let i = 0; i < orderArr.length; i++) {
    if (orderArr[i].orderName.includes(str)) {
      //符合条件
      filterArr.push(orderArr[i]);
    }
  }
  render(filterArr);
});

在做添加功能的时候，并没有把内容渲染到页面，原因是因为获取错了保存按钮里面的类名，获取到了其他地方的，并且刚开始做的时候把新增和保存分开写了点击事件，实际上在我新增订单的时候，我就该给新增订单里面的保存添加点击事件，当我点击保存的时候，就该把内容渲染出来，而不是在点击新增按钮的时候渲染页面内容，在看代码的时候看混了代码，把编辑保存的按钮和新增订单的按钮绑定到了一起，在做编辑功能的时候，也没有把内容渲染出来，和新增按钮绑定到了一起，所以编辑功能也没有实现，最后把他们的按钮重新获取了一遍，分别给他们加了对应的事件，两个按钮的功能就都实现了。

错误代码

//点击新增订单的时候
saveEdit.addEventListener("click", function () {
  orderArr.push({
    orderName: addOrderName.value,
    orderState: addOrderStatus.value,
    finishTime: addFinish.value,
    remark: addRemark.value,
    id: ++id,
  });
  render(orderArr);
});

//点击保存的时候
saveEdit.addEventListener("click", function () {
  let json = {
    id: editID,
    orderName: editOrderName.value,
    orderState: editOrderStatus.value,
    finishTime: editFinish.value,
    remark: editRemark.value,
  };
  for (let i = 0; i < orderArr.length; i++) {
    if (orderArr[i].id == editID) {
      orderArr.splice(i, 1, json);
    }
  }
  render(orderArr);
});

正确代码

//点击新增订单保存的时候
saveEdit.addEventListener("click", function () {
  orderArr.push({
    orderName: addOrderName.value,
    orderState: addOrderStatus.value,
    finishTime: addFinish.value,
    remark: addRemark.value,
    id: ++id,
  });
  render(orderArr);
});

//点击编辑保存的时候
saveEdit2.addEventListener("click", function () {
  let json = {
    id: editID,
    orderName: editOrderName.value,
    orderState: editOrderStatus.value,
    finishTime: editFinish.value,
    remark: editRemark.value,
  };
  for (let i = 0; i < orderArr.length; i++) {
    if (orderArr[i].id == editID) {
      orderArr.splice(i, 1, json);
    }
  }
  render(orderArr);
});

还有就是在写项目的时候，出现了很多逻辑错误，能想到怎么写，但是实际操作的时候却不知道，写法，还是上网查了用法，在写登录页面的时候，没有获取到部门列表（下拉列表里面的值），导致了登录页面点击登录的时候一直没执行那个条件
正确代码

// 获取部门列表当前的值
    let op = p_attr.value;
    // 获取账号里面的值
    let OusernameValue = document.getElementById("exampleInputEmail1").value;

    //获取密码框里面的值
    let OpassValue = document.querySelector(".j_pass").value;

基本数据类型都有哪些
object null number NaN boonlean string function undefined
什么是NaN
NaN是JavaScript中的特殊值，表示“不是一个数字”。当一个数值无法被表示为数字时，就会返回NaN。例如，0除以0或者对非数字值进行数学运算都会返回NaN。NaN是一个全局对象，可以通过isNaN()函数来检测一个值是否为NaN。

  <script>
        let a = 'cc', b = 'aa'
        document.write(a / b); //结果为NaN
             let a = 0, b = 0
        document.write(a / b);//结果为NaN
         document.write(isNaN(a / b));//结果为True
    </script>

什么情况会打印Undefined
声明了变量未定义值
Undefined通常是JavaScript中的一个值，表示一个未定义或不存在的值。在以下情况下，JavaScript会打印出Undefined：

当你声明一个变量但没有给它赋值时，它的值就是Undefined。

当你访问一个对象中不存在的属性时，JavaScript会返回Undefined。

当你调用一个函数但没有返回值时，JavaScript会返回Undefined。

当你使用typeof运算符检查一个声明了变量但未赋值的变量时，JavaScript会返回Undefined。

当你使用void运算符时，它会返回Undefined。

当你使用delete运算符删除一个不存在的属性时，JavaScript会返回Undefined。

   <div>
        <h2 title="zz">223</h2>
    </div>
    <script>
        let a, b;
        // document.write(a);// 结果为未定义
        let json = { a: 1, b: 2 }
        // document.write(json.c)  //结果为未定义
        let q;
        // document.write(typeof (q))  //结果为未定义
        let oh2 = document.querySelector('h2')
        // document.write(oh2.value)  //结果为未定义

        
    </script>

什么是强制类型检测，什么是隐式类型检测 分别都有什么情况
强制类型检测是一种编程语言特性，它要求在编译时或运行时检查变量的类型是否与其声明的类型相匹配。如果类型不匹配，编译器或解释器会发出错误提示，防止程序在运行时出现类型错误。这种类型检测可以帮助程序员在开发过程中发现潜在的类型错误，提高代码的可靠性和稳定性。
隐式类型转换是指在表达式中，如果操作数的类型不同，会自动将其中一个操作数的类型转换为另一个操作数的类型，以便进行运算。例如，在一个表达式中，如果一个操作数是整数类型，而另一个操作数是浮点数类型，那么整数类型的操作数会被自动转换为浮点数类型，以便进行运算。这种类型转换是由编译器自动完成的，程序员不需要显式地进行类型转换。

=== ,!==,+，+=，String(),Tostring(),Boonlean(),Number(),parseInt（），parseFloat()除了这些进行强制类型转换，其他都是隐式类型转换？？？？？？？？？？？？？？？？？？

break和continue的区别是什么?
在JavaScript中，break和continue都是用于控制循环语句的执行流程的关键字。它们的区别在于，break用于立即终止循环语句的执行，而continue则是用于跳过当前循环中的某个迭代，继续执行下一次迭代。

具体来说，当break关键字被执行时，循环语句会立即终止，程序会跳出循环体，继续执行循环语句后面的代码。而当continue关键字被执行时，当前循环中的剩余代码会被跳过，程序会直接进入下一次迭代，继续执行循环体中的代码。

需要注意的是，break和continue只能用于循环语句中，不能用于其他类型的语句中。此外，在嵌套循环中使用break和continue时，它们只会影响当前循环，而不会影响外层循环的执行。

let arr = [1, 2, -3, 4, -5, 6];
let index = -1;

for (let i = 0; i < arr.length; i++) {
  if (arr[i] < 0) {
    index = i;
    break; // 找到第一个负数后立即终止循环
  }
}

console.log(index); // 输出2```

```javascript
let arr = [1, 2, -3, 4, -5, 6];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] < 0) {
    continue; // 跳过负数，继续下一次迭代
  }
  console.log(arr[i]); // 输出所有正数的值
}

while和do while的区别
while 是在循环中先判断初始值条件满不满足，如果满足就会执行循环体，不满足则不会执行循环体，do while是先执行一次循环体，再去看是否满足初始值条件

    <script>
        var i = 0;
       while (i > 5) {
       i++;
            console.log(i);//没有结果
            
        } 
    </script>

    <script>
        var i = 0;
        do {
            console.log(i); //0
            i++;
        } while (i > 5);


    </script>

数组的字面量声明和New声明有什么区别
数组的字面量声明和New声明的区别在于，字面量声明是在代码中直接定义数组的值，而New声明是通过实例化一个数组对象来创建数组。字面量声明通常更简洁，但是New声明可以更灵活地控制数组的大小和类型。此外，字面量声明只能在声明时初始化数组，而New声明可以在任何时候初始化数组。

写出常见的数组方法，字符串方法，数学方法
在JavaScript中，常见的数组方法包括：

push()：向数组末尾添加一个或多个元素，并返回新的长度。
pop()：从数组末尾删除一个元素，并返回该元素的值。
shift()：从数组开头删除一个元素，并返回该元素的值。
unshift()：向数组开头添加一个或多个元素，并返回新的长度。
splice()：从数组中删除或添加元素，并返回被删除的元素。
slice()：返回数组的一部分，不会修改原数组。

常见的字符串方法包括：

length：返回字符串的长度。
indexOf()：返回指定字符串在原字符串中第一次出现的位置。
lastIndexOf()：返回指定字符串在原字符串中最后一次出现的位置。
substring()：返回原字符串的一部分。
replace()：替换原字符串中的指定字符串。
toUpperCase()：将字符串转换为大写。
toLowerCase()：将字符串转换为小写。
常见的数学方法包括：

Math.abs()：返回一个数的绝对值。
Math.ceil()：向上取整。
Math.floor()：向下取整。
Math.round()：四舍五入。
Math.max()：返回一组数中的最大值。
Math.min()：返回一组数中的最小值。
Math.random()：返回一个介于0和1之间的随机数。
写出常见的获取元素的方法
常见的获取元素的方法包括：

通过ID获取元素：使用document.getElementById()方法，传入元素的ID作为参数，可以获取指定ID的元素。

通过标签名获取元素：使用document.getElementsByTagName()方法，传入标签名作为参数，可以获取指定标签名的所有元素。

通过类名获取元素：使用document.getElementsByClassName()方法，传入类名作为参数，可以获取指定类名的所有元素。

通过选择器获取元素：使用document.querySelector()方法，传入CSS选择器作为参数，可以获取符合选择器条件的第一个元素。

通过选择器获取多个元素：使用document.querySelectorAll()方法，传入CSS选择器作为参数，可以获取符合选择器条件的所有元素。
写出插入元素，删除元素，替换元素，克隆元素的方法
插入元素：可以使用appendChild()方法将一个元素添加到另一个元素的末尾，或者使用insertBefore()方法将一个元素插入到另一个元素的前面。

var newDiv = document.createElement("div");
document.body.appendChild(newDiv);

删除元素：可以使用removeChild()方法从父元素中删除一个子元素。

var myDiv = document.getElementById("myDiv");
myDiv.parentNode.removeChild(myDiv);

替换元素：可以使用replaceChild()方法将一个元素替换为另一个元素。

var oldDiv = document.getElementById("oldDiv");
var newDiv = document.createElement("div");
oldDiv.parentNode.replaceChild(newDiv, oldDiv);

克隆元素：可以使用cloneNode()方法克隆一个元素。

var myDiv = document.getElementById("myDiv");
var clonedDiv = myDiv.cloneNode(true);

**在Js中如何操作元素的样式
要操作元素行间的样式，可以使用JavaScript中的style属性。例如，要更改元素的背景颜色，可以使用以下代码：

document.getElementById("myElement").style.backgroundColor = "red";

也可以操作class
只需要.className=‘’
会把所有的class重新赋值，如果原来有class并且不想删除，还要把原来的class加上
如何操作元素的属性
h5js
.classList.add 追加一个class
.classList.remove 删除一个class
.classList.contains(‘class’) 是否包含某个class 返回true false
.classList.toggle 有就删除没有就添加

3、获取最终的样式
getComputedStyle(节点).样式 低级浏览器不能用

节点.currentStyle.样式 针对IE系列浏览器

在Js中，可以使用以下方法操作元素的属性：

使用setAttribute()方法设置属性值，例如：
javascript
document.getElementById("myElement").setAttribute("class", "myClass");
直接修改属性值，例如：
javascript
document.getElementById("myElement").className = "myClass";
使用getAttribute()方法获取属性值，例如：
javascript
var myClass = document.getElementById("myElement").getAttribute("class");
使用removeAttribute()方法移除属性，例如：
javascript
document.getElementById("myElement").removeAttribute("class");

通过.或者[]
获取
元素.属性
添加、修改
元素.属性=‘xxx’；
.后面不能跟变量
解决办法把去掉换成[变量]
获取
元素[‘属性’]
添加、修改
元素[‘属性’]=属性值
字符串的属性值可以换成变量
删除属性delete 元素.属性 或者 delete 元素[‘属性’]，这里不能用，不能算出系统定义的属性
不管是.函数[] 操作的都是系统自带的标签属性
操作自定义属性
h5js
所有的自定义属性必须加 data- 前缀
获取
元素.dataset.自定义的属性
设置，修改
元素.dataset.自定义的属性=xxx
既可以操作自定义属性也可以操作系统的属性
setAttribute(‘属性名’,‘属性值’)
getAttribute(‘属性名’)
removeAttribute(‘属性名’)
操作表单的属性value只需要.value因为他可以获取用户产生的数据
innerHTML innerText outerHTML区别
innerHTML设置或者获取的是标签内的HTML结构，是包含标签的
InnerText是获取的标签内的内容，不包含标签
outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包含自身）
outerText 设置或获取标签自身及其所包含的文本信息（包括自身）
什么是事件对象，列出常见的事件对象的值
事件对象指的是event 储存这个事件触发时候的详细数据
事件对象常见的值：
1、stopPropagation()阻止传播
2、cancelBubble 阻止冒泡
3、clientX clientY 可视区的xy坐标
4、pageX pageY 页面的坐标 es5里面的
5、screenY screenX 屏幕的坐标
6、keyCode
65 a
1 49
小键盘的1 97
空格 32
回退8
回车13
左上右下 37 38 39 40
7、altKey shiftKey ctrlKey
8、preventDefault() 阻止浏览器的默认行为
复制、右键菜单
事件添加有几种方式，都有什么区别
事件的添加方式
1、 点击
不能批量加事件
和html绑在一起后期修改不灵活

html事件添加方式

解除事件 oBtn.οnclick=null;
2、oDiv.οnclick=function(){}
可以通过循环批量加事件
缺点：一个元素上不能加多个相同的事件

DOM0级事件添加方式
解除事件 oDiv.οnclick=null;
3、DOM2级事件添加方式
现代事件绑定方式，不兼容ie低版本
元素.addEventListener(‘不加on的事件名’,事件触发执行的函数,是否事件下沉)；

解除方式 元素. removeEventListener(‘不加on的事件名’,事件触发执行的函数)；
注意：基础考点，不能写函数体，要写函数名。就算相同的两个函数也不相等。

是否事件下沉 默认是false;也就是事件冒泡

了解
有兼容IE系列的写法
元素.attachEvent(‘加on的事件名’,事件触发执行的函数)
元素.detachEvent(‘加on的事件名’,事件触发执行的函数)
什么是事件流，怎么阻止事件冒泡
事件触发时候，事件的流向，//e.stopPropagation(); //取消传播 高级浏览器
e.cancelBubble=true; //阻止时间冒泡 都可以
列出常见的事件都有哪些
onclick
ondblclick 双击 一个双击等于两个单击
onmousedown 鼠标按下的时候
onmouseup 鼠标抬起的时候
contextmenu 右键事件
onmouseover
onmouseout
onmousemove
触发的频率非常高。
里面不能放大量复杂的计算。在正常使用的时候一般要做优化
onkeydown down的时候输入的值还没有进输入框
onkeyup
shift ctrl alt 16 17 18
针对于组件专门给了一个方案。
shiftKey ctrlKey altKey
onkeypress
触发的时机是在down和up中间
down和up根键有关系 press根值有关系ASCII码有关
写除电话号码的正则
//let reg=/^1[3-9]\d{9}$/**
封装一个函数，判断 一个数字是否在这个数组中

  <script>
        function finInArr(n, array) {
            for (var i = n; i < array.length; i++) {
                if (n==array[i]) {
                    console.log(1)
                }
            }
            console.log(2)

        }
        finInArr(1, [1, 2, 3])//true
        finInArr(4, [1, 2, 3])//false


    </script>