写页面问题&考核中未掌握知识

最新推荐文章于 2024-09-30 15:42:36 发布

多多米1005

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量575

点赞数 22

文章标签：前端 javascript ajax

本文链接：https://blog.csdn.net/2302_80244686/article/details/136595377

版权

学习总结

一、全选、正反选

//全选
function select() {
    let pickbtn = document.querySelector("#pickbtn");
    //获取所有多选按钮
    let tbody = document.querySelector('tbody');
    let trs = tbody.querySelectorAll('input');
    pickbtn.onclick = function () {
        //遍历tbody中的每个多选框并把checked（默认选中属性）赋值为true
        for (var i = 0; i < trs.length; i++) {
            trs[i].checked = this.checked;
        }
    }
    for (var i = 0; i < trs.length; i++) {
        trs[i].onclick = function () {
            let count = 0;
            for (var j = 0; j < trs.length; j++) {
                if (trs[j].checked) {
                    count++;
                }
            }
            if (count == trs.length) {
                pickbtn.checked = true;
            } else {
                pickbtn.checked = false;
            }
        }
    }
}

二、数组

常用的数组方法

1.array.forEach()

循环遍历每一项

let arr = [1,2,3]
array.forEach((item.index)=>{
  //数组操作，不能return值
})

2.array.map()

map方法和forEach每次执行匿名函数都支持三个参数，参数分别是item(当前每一项)、index(索引值）、arr（原数组），但是map返回一个新数组，原数组不影响

let arr = [1,2,3];
let arr2 = arr.map((item,index)=>{
  if(item == 1){
    return true;
  }else{
    return false;//通过return返回想要的东西
  }
})
//结果：
arr2 = [true,false,false],arr = [1,2,3]

3.array.filter()

筛选数组中符合条件的项，返回一个新数组

let arr = [1,2,4];
let result = arr.filter((item,index)=>{
  return item>2;
})
//结果：return为[4]

4.array.some()和array.every()

想执行一个数组是否满足什么条件，返回一个布尔值，这时forEach和map就不行了，可以用一般的for循环实现，或者用array.every()或者array.some()
1)array.some()类似于"或"
some()方法用于检测数组中的元素是否有满足条件的，若满足返回true否则返回false
注意：1、不会对空数组检测 2、不会改变原始数组

let arr = [1,2,4];
let result = arr.some((item,index)=>{
  return item>2;
})
//结果reslut为true

2）array.every()类似于"与"
用于检测数组中所有元素是否都满足条件，若满足返回true,否则返回false

let arr = [1,2,4];
let result = arr.every((item,index)=>{
  return item>2;
})
//结果result为false

5.array.find()
find()方法只会找第一个符合的，找到之后就会直接返回

let arr = [1,1,2,4];
let result = arr.find((item,index)=>{
return item>=2;
})
//结果result为2

增删查改数组

增

● arr.push()向数组末尾添加元素
● arr.unshift()向数组头部添加元素
● arr.concact()拼接数组

删

● arr.pop()删除数组末尾元素
● arr.shift()删除数组头部元素

查

● arr.some()判断数组中是否有符合要求的元素,返回值为boolean
● arr.every()判断数组是否每个元素都符合要求,返回值为boolean
● arr.find()返回符合要求的第一个元素
● arr.indexOf()返回符合要求的第一个元素下标
● arr.lastIndexOf()返回符合要求的最后一个元素下表,从后往前
● arr.foreach()遍历数组
● arr.fliter()创建一个新数组.新数组元素是通过检查指定数组中符合条件的所有元素
● arr.slice()从已有数组中返回选定元素

改

● arr.sort()排序
● arr.reverse()颠倒数组
● arr.toString()把数组变换成字符串
● arr.splice()向数组添加或者删除元素,并返回删除元素
● arr.join()方法把数组中所有元素放入一个字符串,字符串以特定符号连接
● includes()判断字符串中是否包含特定字符串

var let const 区别

1.作用域区别
let和const具有块级作用域，var不存在块级作用域（是全局作用域，但不能跨函数访问）
let和const可以跨块访问， var不能跨函数访问
2.变量提升
var存在变量提升，let和const不存在变量提升
(变量提升：变量提升即将变量声明提升到它所在作用域的最开始的部分)
（暂时性死区：在es6中，代码块内，使用let/const声明之前，该变量都是不可用的，在变量声明之前属于该变量的“死区”、在语法上，称之为“暂时性死区”也叫临时性死区）
3.重复声明
var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的变量。const和let不允许重复声明变量。let和const在同一作用域下不能重名，报错
4.初始值设置
var和let可以不用设置初始值，const声明变量必须设置初始值

Ajax

type类型

GET POST DELETE PUT

GET&POST区别

1、语义化的区别:qet偏向于获取,post偏向于提
交数据
2 、携带给后端的信息位置不一样
get直接在地址后面拼接查询字符串Q
post在请求体内进行信息的查询
3 、携带的数据格式不一样
get:因为携带的数据是直接拼接在地址后面,只能使用ur编码
post:因为在请求体内,所以可有多种形式,但是
需要提前说明
4、携带的数据大小不一样
get:因为拼接在地址后面,大小在2kb左右
post:因为在请求体内,数据大小不受限制,除非
服务器有显示
5、安全性能
get:明文发送,不安全post:相对安全

元素与节点

节点（换行、空格、制表符）元素—>元素节点
节点包含元素

setAttribute()方法

setAttribute(string name,string value)：增加一个指定名称和值的新属性，或者把一个现有属性设定为指定的值
setAttribute(class,value)中class’是指改变class这个属性，要加引号

local Storage 和session Storage的区别

两者的区别在于生命周期与作用域的不同。
生命周期：Local Storage 是持久化的本地存储，存储在其中的数据是永远不会过期的，使其消失的唯一办法是手动删除；而 Session Storage 是临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放。
作用域：Local Storage、Session Storage 和 Cookie 都遵循同源策略。但 Session Storage 特别的一点在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 Session Storage 内容便无法共享。

promise

Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
1）Promise构造函数：Promise（excutor）{ }
2）Promise.prototype.then 方法
then方法的返回结果是 Promise 对象，对象状态由回调函数的执行结果决定
a.如果回调函数中返回的结果是非Promise 类型的属性，状态为成功，返回值为对象的成功值
b.
3）Promise.prototype.catch 方法

特点

1.对象的状态不受外界影响处理异步操作 三个状态 Pending（待定） Resolved（成功） Rejected（失败）
2.一旦状态改变，就不会再变，任何时候都可以得到这个结果

推送本地项目至远程仓库

$ git init    //初始化仓库
$ git add .   //添加到缓存区
$ git status  //查看
$ git commit -m "注释"  //从缓存区上传至本地仓库
$ git remote add origin 仓库地址  //与仓库建立连接
$ git remote   //查看   （origin）
$ git push -u origin master   //推送至远程仓库