108原稿

article/2025/10/19 20:03:50

108事件委托

·就是把我要做的事情委托给别人来做
·因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
·我们就可以把子元素的事件委托给父元素来做
//减少多个函数的绑定的性能损耗
//动态添加li，也会有事件处理

109正则表达式

//1字面量//
var reg = /abc/
console.log(reg)
//2．内置构造函数
var reg2 = new RegExp("abc")
console.log(reg2)mytext.onblur = function(){
console.log(mytext.value)//检验是否含有reg中的内容
console.log(reg.test(mytext.value))

110元字符-基本元字符

\d一位数字（0-9)

var reg =/\d\d/
console.log(reg.test( "abc"))
console.log(reg.test( "123"))
console.log(reg.test( "1"))//false
  1. \D一位非数字
  2. \s 1位空白(包括：空格 缩进 换行)
  3. \S 1位非空白
  4. \w字母数字下划线
  5. \W非字母数字下划线
  6. ．任意内容(换行不算)
  7. .\转义字符

111元字符-边界符

//^开头
var reg = /^\d/
//$结尾边界
var reg =/d$/

112元字符-限定符

//1.*0~多次
var reg= /\d*/
//2.+ 1～多次
var reg= /\d+/
//3.?0~1
var reg=/\d?/
//4.{n}指定次数
var reg=/\d{3}/
//4. {n,} >=n
var reg=/\d{3,}/
//5. {n,m}
var reg=/\d{3,5}/

113 元字符-特殊符号

// 1.() 整体
var reg2=/(abc){2}/
// 2．|或 .
var reg = /a|b/
//3 []代表1个
var reg =/[abcde]/
//4 [^abc]取反
var reg2 =/[^abc]/

114正则表达式-捕获exec

// 2029/01/01将-替换成了/
var reg = /d{4}-\d{1,2}-\d{1,2}/
var newdatestr = reg.exec(datestr)
console.log(newdatestr[0].split("-").join("/"))
//标识符 g（全局） i(忽略大小写)

115-正则表达式的两大特性

1.懒惰，解决使用全局标识符g
2.贪婪
3.非贪婪（加？往最小取）
var reg = /d{1,4}?/

116正则与字符串方法

//replace替换
var str = "adearfa"
var newstr = str.replace(/a/g, "*")
console.log(newstr)
//search查找有几个
console.log(str.search("a"))
console.log(str.search(/a/))// match捕获内容多个

118-this指向

//this关键字
//this 谁调用我， this就指向谁(es6箭头函数)

119-改变this指向

// call apply bind

//call 执行函数，并改变this执行为函数的第一个参数
//支持多个参数
obj1.getName.call(obj2,1,2,3)
// apply执行函数，并改变this执行为函数的第一个参数
//两个参数，第二个参数是一个数组
obj1.getName.apply(obj2,[1,2,3])
//bind改变this指向为函数的第一个参数，不会自动执行函数
//支持多参数

120-ES6定义变量

let与var区别
1．必须先定义再使用
2．变量重名会报错
3．块级作用域，只存在于{ }中
let 变量
Const常量，初始时必须赋值

122-ES6的箭头函数

1.(只有一个形参的时候)可以省略（）
2.{ }可以省略只有一句代码，只有返回值的时候
3.没有arguments
4.箭头函数没有this
箭头函数this是父级作用域的，

//1.(只有一个形参的时候)可以省略（）
var test = (a,b) =>{
console.log( 111,a,b)
}
test( "kerwin",100)
//2.{ }可以省略只有一句代码，只有返回值的时候
var test = a => 100*a
console. log(test(10))

123-ES6的解构赋值

var arr2 =[1,2,[3,4,[5]]]//多维度数组
var [q,w,[e,r,[t]]] = arr2
console.log(t)var obj2 = {
name : "kerwin",
age :100,
location:{
province: "liaoning",
city: "dalian"
},
hobby: [111,222,333]
}
var {
name,
age,
location:{
province,
city
},
hobby : [m,n,k]
}=obj2

125-ES6的展开运算符

合并数组
(1)

var a = [1,2,3]var b = [4,5,6]
console.log(a.concat(b))

(2)…

var c = [...a,...b]
console.log(c)

复制

//...复制
var a =[1,2,3]
var b = [...a]

搜集剩余参数

var test = function(a,b,...arr){
console.log(arr)
}
test(1,2,3,4,5)
//...伪数组转换
function test(){
var arr =[...arguments]
console.log(arr)
}
test(1,2,3,4,5)

126-ES6模块化语法

/模块化1.私密不漏2.重名不怕3.依赖不乱

//导出 JS文件导出
export {
A1,A2,test,A-A
}
//导入 HTML文件导入
<script type="module">
import {A1,A2,test,}from './module/A.js'
</script>
//重名问题test as A_test
import {A1,A2,test as A_test}from './module/A.js'
//在另一个C文件中引入解决依赖
import {A_A}from './A.js'
import {B_B}from './B.js'

127初识面向对象

首先，我们要明确，面向对象不是语法，是一个思想，是一种编程模式

128 创建对象的方式

function createObj(name){
this.name = name
this.material =[]
this.cook = function(){}
}
var obj1 = new createObj()

129-构造函数注意问题

//1.首字母大写
//2.构造函数不写return
//3构造函数能当成普通函数用,但this不适合

var obj1 = new CreateObj( "kerwin ")//对,要加new
var obj1 = CreateObj( "kerwin ")//不可以

130-面向对象的原型

var data1 = {
title: "体育",
list:["体育-1","体育-2","体育-3"]
}
var data2 = {
title:"综艺",
list:["综艺-1","综艺-2","综艺3"]
}function CreateList(title,List){
this.title = title,
this.list = list
}
var obj1 = new CreateList(data1.title,data1.list)
console.log(obj1)

//原型
CreateList.prototype.render = function (){ }
//对象.proto ===构造函数.prototype

132-ES6-class

cLass createobj {
//构造器函数
constructor( name){
this.name =name
}
}

133-面向对象继承

function Person( name , age){
this.name = name
this.age = age
}//Person()Person. prototype.say = function(){
console.log (this.name ,"hello")
}function student( name,age,grade){
Person.call(this,name,age)
this.grade = grade
}var obj = new Student( "kerwin",100, 100)
console.log(obj)

在这里插入图片描述
//构造函数继承–继承属性
//原型继承===继承原型上方法

135-ES6-继承

//父类
class Person {
constructor(name ,age){
this.name = namethis.age = age
}
say(){
console.log(this.name, "hello")
}
}
//子类
// extends原型继承
cLass student extends Person{
constructor(name,age, grade){
super(name ,age)// Person.call(this, name , age)
this.grade = grade
}
}

137-ajax

ajax ==lasync javascript and xml

AJAX的优势
1.不需要插件的支持，原生js就可以使用
2.用户体验好（不需要刷新页面就可以更新数据)
3.减轻服务端和带宽的负担
4.缺点:搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到

//1．创建XHR new XMLHttpRequest()
var xhr = new XMLHttpRequest()console.log(xhr)
//2。配置 open(请求方式，请求地址，是否异步)
// localhost本机域名127.0.0.1本机ip
//baidu.com域名    221...... ip
xhr.open( "GET" , "http://localhost:5500/136-ajax/1.txt")
//3. send
xhr. send()
//4．接受数据，注册一个事件
xhr.onreadystatechange = function(){
if(xhr.readystate===4){
console.log("数据解析完成")
}
}//200 ok
// 404未找到页面。

在这里插入图片描述

139-ajax同步异步

var xhr = new XMLHttpRequest()
xhr.open( "GET", "1.json " ,true)
//true表示异步请求
//false表示同步请求,网速慢会卡

在这里插入图片描述

140

get 偏向获取数据
post偏向提交数据
put偏向更新
delete偏向删除信息
patch 偏向部分修改
header
options
connnect

nodejs - http: / / nodejs.cn/ download/
json-server
-基于一个json文件就可以创建很多的后端模拟接口

145-Promise基础语法

Promise

promise是一个ES6的语法
·承诺的意思，是一个专门用来解决异步回调地狱的问题

回调地狱

·当一个回调函数嵌套一个回调函数的时候·就会出现一个嵌套结构
·当嵌套的多了就会出现回调地狱的情况·比如我们发送三个ajax请求
.第一个正常发送
.第二个请求需要第一个请求的结果中的某一个值作为参数
.第三个请求需要第二个请求的结果中的某一个值作为参数

146-Promise基础语法

// Promise构造函数
var q=new Promise(function(){
})
//q是promise对象
q.then(function(){//兑现承诺，这个函数被执行
}).catch(function(){//拒绝承诺，这个函数就会被执行
})

// pending执行中
//fulfilled
//reject

147-Promise封装ajax

在这里插入图片描述
在这里插入图片描述

149-async和await语法

ASYNC/AWAIT
async / await是一个es7的语法
·这个语法是回调地狱的终极解决方案
·语法:

async function fn() {
const res = await promise对象
}

// await同步代码/promise对象
var res =await pajax({
url : "http:// localhost : 3000/news "
data:{author : "kerwin"}})
console.log(res)
console.log(2222)}
test()

151-fetch

用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。当遇到网络错误时，fetch() 返回的 promise 会被 reject，并传回 TypeError。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误。

语法

var username = "kerwin"
fetch(` http:// localhost:3000/users111?username=$ {username} `)
.then((res)=>{
console. log(res)
if(res.ok){
return res.json()
}else{
//拒绝
return Promise.reject(
}

156cookie

http协议无状态
localstorage:用户名密码?token钥匙= =〉Nodejs token认证。
cookie 本地存储 sessionID钥匙= = =>Nodejs cookie+session

//存cookie
savebtn.onclick = function(){
document.cookie = "username=xiaoming; "
document.cookie =  "age=18"
}

在这里插入图片描述
设置访问路径

为了安全
内层可访问外层
外层不能访问内层
在这里插入图片描述
过期时间设置

//过期时间设置
var date = new Date()
date.setMinutes(date.getMinutes()+1)
document.cookie = `uername=kerwin;expires=${date.getUTcStr}`
//一分钟过期

读取

getbtn.onclick = function(){
console.log (document.cookie)
}

157jsonp

同源策略:同域名同端口号同协议
不符合同源策略，浏览器为了安全，会阻止请求
解决:
1.cors 由后端设置, Access-Control-Allow-Origin:
2. jsonp
jsonp原理:动态创建script标签，src属性指向没有跨域限制
指向一个接口，接口返回的格式一定是****()函数表达式。

mybtn.onclick = function(){
var oscript = document.createElement( "script")
oscript.src="01.txt”//未来地址
document.body . appendchild(oscript)
}

161闭包

函数内部返回一个函数，被外界所引用。
这个内部函数就不会被销毁向收。
内部函数所用到的外部函数的变量也不会被销毁。

function outer(){
var name = "kerwin"return function(){
return name+"11111111111111"
}
}
var func = outer()
console.log(func())

优点:让临时变量永驻内存
缺点:内存泄漏func = null

function Fetchcontainer(urL){
return function(path){
return fetch(urL+path)
}
}
var fetcha = FetchContainer( "http: //www.a.com")
fetcha("/aaa").then(res=>res.json()).then(res=>console.log(res))
fetcha("/bbb").then(res=>res.json()).then(res=>console.log(res))
fetcha("/ccc").then(res=>res.json()).then(res=>console.log(res))
fetcha("/ddd").then(res=>res.json()).then(res=>console.log(res))
fetcha = null

http://chatgpt.dhexx.cn/article/ZOTGA4nR.shtml

相关文章

JavaOOP面试题（108道）

JavaOOP面试题（108道）

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏&#xff1a;Java面试题…
阅读更多...
108.（cesium篇）cesium初始定位动画

108.（cesium篇）cesium初始定位动画

听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <
阅读更多...
cmd 108个常用命令，看看你知道多少

cmd 108个常用命令，看看你知道多少

背景 一、CMD是什么 在不同的操作系统环境下&#xff0c;命令提示符各不相同&#xff0c;在Windows环境下&#xff0c;命令行程序为cmd.exe&#xff0c;是一个32 位的命令行程序。 cmd是指命令提示符&#xff0c;是在操作系统中&#xff0c;提示进行命令输入的一种工作提示符…
阅读更多...
LeetCode-108

LeetCode-108

将有序数组转换为二叉搜索树 题目 给一个整数数组 nums &#xff0c;其中元素已经按升序排列&#xff0c;请你将其转换为一棵高度平衡二叉搜索树。 高度平衡二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树。 示例 输入&#xff1a;nums [-10,-…
阅读更多...
华为机试108题（C 语言解答)

华为机试108题（C 语言解答)

Nowcoder题库链接&#xff1a;华为机试 HJ1 字符串最后一个单词的长度&#xff08;字符串&#xff09; 输入&#xff1a;hello nowcoder输出&#xff1a;8说明&#xff1a; 最后一个单词为nowcoder&#xff0c;长度为8 示例代码: HJ1.c #include <stdio.h> #include &l…
阅读更多...
米哈游108薪年终奖，假的

米哈游108薪年终奖，假的

记者丨鄢子为 韩璐 编辑丨鄢子为 米哈游年终奖发108个月的工资&#xff1f;假的。 1月12日&#xff0c;针对“年终奖108薪”的消息&#xff0c;米哈游方面回应《21CBR》记者称&#xff0c;消息不实。 之所以有这样的流言传出&#xff0c;或许是因为米哈游现金流充沛&#xff0c…
阅读更多...
【计算机毕业设计】108精品在线试题库系统

【计算机毕业设计】108精品在线试题库系统

一、系统截图&#xff08;需要演示视频可以私聊&#xff09; 摘 要 使用旧方法对作业管理信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在作业管理信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;…
阅读更多...
详细解释数据挖掘的十大算法

详细解释数据挖掘的十大算法

在一份调查问卷中&#xff0c;三个独立专家小组投票选出的十大最有影响力的数据挖掘算法&#xff0c;今天我打算用简单的语言来解释一下。 一旦你知道了这些算法是什么、怎么工作、能做什么、在哪里能找到&#xff0c;我希望你能把这篇博文当做一个跳板&#xff0c;学习更多的数…
阅读更多...
数据挖掘领域十大经典算法之—EM算法

数据挖掘领域十大经典算法之—EM算法

相关文章&#xff1a; 数据挖掘领域十大经典算法之—C4.5算法&#xff08;超详细附代码&#xff09;数据挖掘领域十大经典算法之—K-Means算法&#xff08;超详细附代码&#xff09;数据挖掘领域十大经典算法之—Apriori算法数据挖掘领域十大经典算法之—EM算法数据挖掘领域十大…
阅读更多...
数据挖掘经典十大算法_ID3算法

数据挖掘经典十大算法_ID3算法

一、ID3算法介绍 ID3算法通过自顶向下的方式构建一棵决策树来进行学习&#xff0c;每一次选择的是当前样本集中具有最大信息增益的属性作为测试属性。样本集根据测试属性的属性值进行划分&#xff0c;测试属性有多少取值就能够将样本属性划分为多少子样本集。 构建决策树&…
阅读更多...
常用数据挖掘算法

常用数据挖掘算法

本文对数据挖掘的基础理论&#xff0c;做个框架性的总结概要&#xff0c;罗列一些通用的数据挖掘的算法和思路&#xff0c;对于自己来讲是一个回顾&#xff0c;同时也便于自己以后查阅。 频繁模式挖掘&#xff0c;关系挖掘&#xff0c;以及相互关系挖掘 所谓频繁模式挖掘&…
阅读更多...
【数据挖掘】数据挖掘简介及十大经典算法

【数据挖掘】数据挖掘简介及十大经典算法

数据挖掘十大经典算法系列&#xff0c;点击链接直接跳转&#xff1a; 数据挖掘简介及十大经典算法&#xff08;大纲索引&#xff09; 1. 数据挖掘十大经典算法之——C4.5 算法 2. 数据挖掘十大经典算法之——K-Means 算法 3. 数据挖掘十大经典算法之——SVM 算法 4. 数据挖掘十…
阅读更多...
数据挖掘十大经典算法 整理

数据挖掘十大经典算法 整理

数据挖掘的主要任务是分类、聚类、关联分析、预测、时序模式和偏差分析。 &#xff08;一&#xff09;C4.5 算法 C4.5算法是机器学习中的一种分类决策树算法&#xff0c;其核心是ID3 算法&#xff0c;C4.5算法继承了ID3算法的优点&#xff0c;并在以下几方面对ID3算法进行了改…
阅读更多...
数据挖掘领域十大经典算法之—SVM算法（超详细附代码）

数据挖掘领域十大经典算法之—SVM算法（超详细附代码）

相关文章&#xff1a; 数据挖掘领域十大经典算法之—C4.5算法&#xff08;超详细附代码&#xff09;数据挖掘领域十大经典算法之—K-Means算法&#xff08;超详细附代码&#xff09;数据挖掘领域十大经典算法之—Apriori算法数据挖掘领域十大经典算法之—EM算法数据挖掘领域十大…
阅读更多...
数据挖掘十大算法--Apriori算法

数据挖掘十大算法--Apriori算法

一、Apriori 算法概述 Apriori 算法是一种最有影响力的挖掘布尔关联规则的频繁项集的 算法&#xff0c;它是由Rakesh Agrawal 和RamakrishnanSkrikant 提出的。它使用一种称作逐层搜索的迭代方法&#xff0c;k- 项集用于探索&#xff08;k1&#xff09;- 项集。首先&#xff0c…
阅读更多...
数据挖掘领域十大经典算法之—AdaBoost算法（超详细附代码）

数据挖掘领域十大经典算法之—AdaBoost算法（超详细附代码）

相关文章&#xff1a; 数据挖掘领域十大经典算法之—C4.5算法&#xff08;超详细附代码&#xff09;数据挖掘领域十大经典算法之—K-Means算法&#xff08;超详细附代码&#xff09;数据挖掘领域十大经典算法之—SVM算法&#xff08;超详细附代码&#xff09;数据挖掘领域十大经…
阅读更多...
数据挖掘十大经典算法（包括各自优缺点 / 适用数据场景）

数据挖掘十大经典算法（包括各自优缺点 / 适用数据场景）

本文主要分析皆来自其他资料&#xff0c;借用较为权威的总结来对我已经学习的这些经典算法做一个极为精简的概述&#xff08;根据自身经验有一定修改&#xff09;&#xff0c;另外同时附上机器学习实战中作者对各种算法的评价。另外机器学习实战这本书是本人看了这么多书籍或者…
阅读更多...
一文弄懂数据挖掘的十大算法，数据挖掘算法原理讲解

一文弄懂数据挖掘的十大算法，数据挖掘算法原理讲解

​一个优秀的数据分析师不仅要掌握基本的统计、数据库、数据分析方法、思维、数据分析工具和技能&#xff0c;还要掌握一些数据挖掘的思路&#xff0c;帮助我们挖掘出有价值的数据&#xff0c;这也是数据分析专家和一般数据分析师的差距之一。 数据挖掘主要分为三类&#xff1a…
阅读更多...
数据挖掘领域十大经典算法

数据挖掘领域十大经典算法

一、什么是数据挖掘&#xff1f; 数据挖掘是人工智能和数据库领域研究的热点问题&#xff0c;所谓数据挖掘是指从数据库的大量数据中揭示出隐含的、先前未知的并有潜在价值的信息的非平凡过程。数据挖掘是一种决策支持过程&#xff0c;它主要基于人工智能、机器学习、模式识别、…
阅读更多...
数据挖掘的10大算法

数据挖掘的10大算法

一个优秀的数据分析师，除了要掌握基本的统计学、数据库、数据分析方法、思维、数据分析工具技能之外，还需要掌握一些数据挖掘的思想，帮助我们挖掘出有价值的数据，这也是数据分析专家和一般数据分析师的差距之一。 数据挖掘主要分为分类算法，聚类算法和关联规则三大类，这…
阅读更多...
推荐文章

Copyright @ 2022~2023