JavaScript基础

JS

变量提升

js代码执行之前会先解析一遍 会进行代码解析会进行变量提升（就有点类似全局变量）

所以使用前最好先申明列：var name；或者用let

typeof 查看数据类型

const 和 let 暂时性死区

当使用let申明你必须在申明之后使用 （这就是和java很像）；

如果在函数内函数外有申明对象，函数内申明同样的对象那么需要在使用前先申明

let web = "web";

    function func() {
        let web = "web1"; //正确
        console.log(web)
        let web = "web1"; //错误
    }

当不考虑兼容时候最好使用let 和 const ；let 和const不可以重复申明相同的变量

变量使用时是先使用最近的，有私有变量先使用私有变量

JS的严格模式

"use strict";

使用严格模式的话所有使用的变量必须申明且在同一作用域中不可重复定义

严格模式可以随意放它所起的的效果就在它对应得作用域类似与let的作用域

写程序的时候最好也使用严格模式

Object.freeze冻结变量

 const HOST = {
        url: "http://locahost",
        port: 443
    }
    Object.freeze(HOST)
    HOST.port = 58
    console.log(HOST.port)

冻结变量无法修改变量 当使用了使用严格模式则会直接报错

输入弹窗prompt

 let set = prompt('请输入性别')
    console.log(set) ///set就是弹窗中输入的值

replace内容替换和RegExp

"use strict"
let name="my name is kun {{k}}"
let k=k;
name.replace(new RegExp("{{" + k + "}}", "g"),"kun")
//将所有的{{k}}全部替换为kun
//g是全部
//RegExp函数的第一个参数可以使用正则表达式

阻止默认事件event.preventDefault()

"use strict"    
(function() {
        window.query = function query(name) {
            return document.querySelector(`[class='${name}']`)
        }
    })()
    query("kun").addEventListener("submit",
            function(event) {
                event.preventDefault();//阻止默认事件
            })

取消字符串两边空格trim()

"use strict"   
(function() {
        window.query = function query(name) {
            return document.querySelector(`[class='${name}']`)
        }
    })()
    query("kun").value.trim()//取消输入框字符串的两边空白

事件监听器addEventListener

  "use strict"
    (function() {
        window.query = function query(name) {
            return document.querySelector(`[class='${name}']`)
        }
    })()
    query("kun").addEventListener("click",
        function(event) {
         alert("我被点击了")
        })

input 文件和图片预览和发送

图片在线预览

   let image = document.querySelector(dom)
        let imgs = document.querySelector(img)
        image.addEventListener("change", function() {
            if (image.files.length != 0) {
                let file = (image.files)[0]
                let reader = new FileReader();
                reader.onload = function() {
                    fileURL = this.result
                    imgs.src = fileURL
                }
                reader.readAsDataURL(file)
            }
        })

input 有个files文件api

input.files[0] 来获取选择的文件

FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

1.检测浏览器对FileReader的支持

if(window.FileReader) {
    var fr = new FileReader();
    // add your code here
}
else {
    alert("Not supported by your browser!");
}
//无论成功或失败，实例的 result 属性都会被填充  
//获取数据就是 this.result

FileReader事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g5Xb8QN6-1637717700992)(C:\Users\kun\AppData\Roaming\Typora\typora-user-images\image-20210307194225853.png)]

处理事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0mmfxETl-1637717700994)(C:\Users\kun\AppData\Roaming\Typora\typora-user-images\image-20210307194305352.png)]

FormData Ajax方式文件上传

DOM元素的所有的事件

一般事件

事件	事件效果
onclick	鼠标点击时触发此事件
ondblclick	鼠标双击时触发此事件
onmousedown	按下鼠标时触发此事件
onmouseup	鼠标按下后松开鼠标时触发此事件
onmouseover	当鼠标移动到某对象范围的上方时触发此事件
onmousemove	鼠标移动时触发此事件
onmouseout	当鼠标离开某对象范围时触发此事件
onkeypress	当键盘上的某个键被按下并且释放时触发此事件.
onkeydown	当键盘上某个按键被按下时触发此事件
onkeyup	当键盘上某个按键被按放开时触发此事件
onabort	图片在下载时被用户中断
onbeforeunload	当前页面的内容将要被改变时触发此事件
onerror	出现错误时触发此事件
onload	页面内容完成时触发此事件
onmove	浏览器的窗口被移动时触发此事件
onresize	当浏览器的窗口大小被改变时触发此事件
onscroll	浏览器的滚动条位置发生变化时触发此事件
onstop	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload	当前页面将被改变时触发此事件
animationend	监听css动画完成事件

表单相关事件

事件	解说
onblur	当前元素失去焦点时触发此事件
onchange	当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus	当某个元素获得焦点时触发此事件
onreset	当表单中RESET的属性被激发时触发此事件
onsubmit	一个表单被递交时触发此事件

滚动字幕事件

事件	解说
onbounce	在Marquee内的内容移动至Marquee显示范围之外时触发此事件
onfinish	当Marquee元素完成需要显示的内容后触发此事件
onstart	当Marquee元素开始显示内容时触发此事件

编辑事件

事件	解说
onbeforecopy	当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecut	当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
onbeforeeditfocus	当前元素将要进入编辑状态
onbeforepaste	内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate	当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy	当页面当前的被选择内容被复制后触发此事件
oncut	当页面当前的被选择内容被剪切时触发此事件
ondrag	当某个对象被拖动时触发此事件 [活动事件]
ondragdrop	一个外部对象被鼠标拖进当前窗口或者帧
ondragend	当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter	当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave	当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover	当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart	当某对象将被拖动时触发此事件
ondrop	在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture	当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste	当内容被粘贴时触发此事件
onselect	当文本内容被选择时的事件
onselectstart	当文本内容选择将开始发生时触发的事件

数据绑定事件

事件	解说
onafterupdate	当数据完成由数据源到对象的传送时触发此事件
oncellchange	当数据来源发生变化时
ondataavailable	当数据接收完成时触发事件
ondatasetchanged	数据在数据源发生变化时触发的事件
ondatasetcomplete	当来子数据源的全部有效数据读取完毕时触发此事件
onerrorupdate	当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onrowenter	当前数据源的数据发生变化并且有新的有效数据时触发的事件
onrowexit	当前数据源的数据将要发生变化时触发的事件
onrowsdelete	当前数据记录将被删除时触发此事件
onrowsinserted	当前数据源将要插入新数据记录时触发此事件

外部事件

事件	解说
onafterprint	当文档被打印后触发此事件
onbeforeprint	当文档即将打印时触发此事件
onfilterchange	当某个对象的滤镜效果发生变化时触发的事件
onhelp	当浏览者按下F1或者浏览器的帮助选择时触发此事件
onpropertychange	当对象的属性之一发生变化时触发此事件
nreadystatechange	当对象的初始化属性值发生变化时触发此事件

switch使用注意事件

"use strict";
let name="kun";
switch(name){
    case "k":
        console.log("hello")
        break;
    case "erro":
    case "roor":
        cosnole.log("两个都执行")
        break;
    case "kun":
        console.log("ok");
        break;
    default:
        conole.log("都执行完了")
}

document.write()的用法

就有点趋向于jsp的用法不过操作都在js中

    document.write("<input value='123'/>123")
    document.write("<table>")
    document.write("<tr>")
    let a = 0;
    while (a < 10) {
        console.log(a)
        a++;
        document.write("<td style:width:'50px'>")
        document.write(a)
        document.write("</td>")
    }
    document.write("</tr>")
    document.write("</table>")

for-in与for-of的使用

let hd = [{
        title: "one"
    }, {
        title: "two"
    }, {
        title: "three"
    }, {
        title: "four"
    }, ]
    for (let i in hd) {
        console.log(i)
        //这个获取的是数组的每个元素的引号
    }
    for (let i of hd) {
        console.log(i)
        //这个是获取数组中得每一个元素
    }

prototype 原型链

k instanceof Array 判断k是否在Array得原型链上

//实现 (5).add(3).minus(2) 输出结果为6
function(){
    //每一个方法执行完，都要返回Number这个类的实例，这样才可以继续进行链式调用
    function check(n){
        n=Number(n);
        return isNaN(n)?0:n
    }
    function add(n){
        n=check(n);
        //this 是不可以被赋值的
        return this + n
    }
    function minus(n){
        return this - n
    }
    ["add","minus"].forEach(item=>{
        Number.prototype[item]=eval(item);
    })
    
    //or
    Number.prototype.add=add;
    Number.prototype.minus=minus;
    console.log((5).add(3).minus(2))
}()

AjAx

function ajax (options) {
	// 默认值
	var defaults = {
		type: 'get',
		url: '',
		async: true,
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function () {},
		error: function () {}
	}
	// 使用用户传递的参数替换默认值参数
	Object.assign(defaults, options);
	// 创建ajax对象
	var xhr = new XMLHttpRequest();
	// 参数拼接变量
	var params = '';
	// 循环参数
	for (var attr in defaults.data) {
		// 参数拼接
		params += attr + '=' + defaults.data[attr] + '&';
		// 去掉参数中最后一个&
		params = params.substr(0, params.length-1)
	}
	// 如果请求方式为get
	if (defaults.type == 'get') {
		// params+=+ Math.random();
		// 将参数拼接在url地址的后面
		defaults.url += '?' + params;
	}

	// 配置ajax请求
	xhr.open(defaults.type, defaults.url, defaults.async);
	// 如果请求方式为post
	if (defaults.type == 'post') {
		// 设置请求头
		xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
		// 如果想服务器端传递的参数类型为json
		if (defaults.header['Content-Type'] == 'application/json') {
			// 将json对象转换为json字符串
			xhr.send(JSON.stringify(defaults.data))
		}else {
			// 发送请求
			xhr.send(params);
		}
	} else {
		xhr.send();
	}
	// 请求加载完成
	xhr.onload = function () {
		// 获取服务器端返回数据的类型
		var contentType = xhr.getResponseHeader('content-type');
		// 获取服务器端返回的响应数据
		var responseText = xhr.responseText;
		// 如果服务器端返回的数据是json数据类型
		if (contentType.includes('application/json')) {
			// 将json字符串转换为json对象
			responseText = JSON.parse(responseText);
		}
		// 如果请求成功
		if (xhr.status == 200) {
			// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
			defaults.success(responseText, xhr);
		} else {
			// 调用失败回调函数并且将xhr对象传递给回调函数
			defaults.error(responseText, xhr);
		} 
	}
	// 当网络中断时
	xhr.onerror = function () {
		// 调用失败回调函数并且将xhr对象传递给回调函数
		defaults.error(xhr);
	}
}

	 ajax({
            type:'post',
            url: 'http://localhost:3000/responseData',
            data:{
				content:content
			},
            success: function (data, xhr) {
                console.log("这里是success函数的");
                console.log(data);
            },
            error: function (data, xhr) {
                console.log('这里是error函数' + data);
                console.log(xhr);
            }
        });

字符串相应的函数

let name=“wangkun”

函数	使用	效果
toupperCase()	name.toupperCase()	字符串全部大写
toLowerCase()	name.toLowerCase()	字符串全部小写
trim()	name.trim()	清除字符串两边的空白
charAt()	name.charAt(0)	获取字符串的第一个字符
slice()	name.slice(0,3)	从字符串的第一个字符开始截取到第三个
substring()	name.substring(0,3)	从字符串的第一个字符开始截取到第三个
substr()	name.substr(0,3)	从字符串的第一个字符开始截取到第三个
indexOf()	name.indexOf(“k”,0)	从第一个字符串开始查找是否包含该字符串返回-1为未找到
includes()	name.includes(“k”,0)	从第一个字符串开始查找是否包含该字符串返回布尔类型
lastIndexOf()	name.lastIndexOf(“k”,10)	表示从后向前查找
startsWith()	name.startswith(“w”)	字符串是否是以w开头的
endsWith()	name.endsWith(“k”)	字符串是否是以k结束的
replace()	name.replace(“k”,“123”)	将字符串中的k替换为123
repeat()	name.repeat(2)	将字符串重复两次返回值为：wangkunwangkun
String()	String(name)	将name转换为string类型
Number()	Number(name)	将name转换为number类型
split()	name.split(“k”)	将字符串从k分割为两个数组

数字保留小数点后两位 toFixed(2)

let a=1.556;

a.toFixed(2)

parseInt(a)//保留整数

Math数学的计算和随机数

Math.min(1,2,3,5)//获取最小值
Math.max(1,2,3,5)//获取最大值
//进行数组时
    let a = [1, 22, 33, 21, 10]
Math.max.apply(null,a)//获取数组中的最大的
Math.ceil(5.01)//向上取整为6
Math.floor(5.9)//向下取整
Math.round(5.56)//进行四舍五入
///随机数
//范围为0~1
Math.floor(Math.random()*6)//随机范围为0~5

NaN类型

let name=123
console.log(Number.isNaN(2/"houd"))//判断是否是nan
Object.is()//和上同理

脚本执行时间console.time(“object”)

console.time("k")
for(let i =0;i<10;i++){
    
}
console.timeEnd('k')

时间戳的转换

new Date(时间戳)

new Date().getTime()//获取时间戳

数组和数组API

length//获取长度

let arr=new Array(6)//创建长度为6的数组数组内容为空
let arr=new Array.of(1,2,3,4,5,6)//创建数组时添加对应的内容数组长度为6
//多维数组,
 let arry = [
     [123, [1, 2, 3, 00]]
 ]
 alert(arry[0][1][2])
function fnc(...arry){
    console.log(arry);
    for(let key of arry ){
        console.log(key)//传过来的每个参数
    }
}
console.table(arry)//通过表格的格式打印数组
//清除数组所有的内容
let arr=[12,1,21,3]
let hd=arr;
arr=[]//这样清除数组只是改变arr在内存中指向的地址，数组内容还在
arr.length=0;//这样清除数组才是将数组的内容清空

函数	操作	解释
Array.isArray()	Array.isArray(arry)	判断arry是不是数组，返回为布尔型
toString()	arry.toString()	将数组转换为字符串
join()	array.join("-")	将数组内容按-来连接成字符串：1-3-4
Array.from()	Array.from(string，function(item){})	将string转换为数组,第二个参数是对数组的每一个参数进行使用
…array展开语法	…arry	将数组arry展开可以进行数组的组合如：[123,…arry]多个参数也可以用展开语法进行接收
map()	arry.map((item,inde,arr)=>{item=“kun+‘item’+”}return item)	获取数组中的每个元素,可以对每个元素进行操作并且返回一个新数组,该新数组为所修改的元素组成为修改的元素不会在新数组中, .。就是return所返回的相应的没有元素所组成的数组。。，有return时不会对原数组进行修改
push	arry.push(“123”)	向数组中追加元素”123“可以同时最加多个，也可也通过…展开追加数组
pop()	arry.pop()	移除数组中的最后一个元素返回值是移除的元素
concat()	arry.concat(arry2)	将两个数组拼接组合
unshift()	arry.unshift(“123”)	从数组前面追加元素和push操作一样
shift()	arry.shift()	从数组前面移除一个元素返回的值是移除的元素
fill()	arry.fill(“kun”，0，2)	将数组从第一个元素到第三个元素都填充为kun
slice()	arry.slice(0,2)	从数组的第一个元素开始截取三个元素返回值为截取的元素，原数组不发生改变
splice()	arry.splice(0,2)； 替换arry.splice(1,1,“kun”) 追加元素 arry.splice(2,0,“kun”,“123”)	对数组进行截取和slice()操作一样但是，原数组的元素会被截取掉原数组发生改变,可以替换元素，第三参数就是替换元素的新值,将第2个元素替换为kun，还可以增加元素操作和push相似
copyWithin()	arry.copyWithin(3,0,3)	从第四个元素开始将第一到第三个复制的元素替换3个
indexOf()	arry.indexOf(2)	返回元素为2的所在数组中的索引位置，只能查找一个元素不存在就返回-1,操作可以和字符串函数中的indexOf操作一样
includes()	arry.includes(2)	数组中是否含有为2的元素返回布尔型操作同上
find()	arry.find(（item,i）=>{return item==2)})	展示数组中的所有元素,item为数组中的元素，i为元素的索引号,返回的值为对应的数组元素，可以用find来遍历数组
findIndex()	arr.findIndex((item,i)=>{return item==2})	操作和find一样不过返回的是索引值
sort()	arry.sort((a,b)=>{return a-b})	将数组进行排序，b-a从大到小，a-b从小到大返回新数组,最好自己先尝试下，a和b都为数组中的元素可以进行a.age-b.age 这样则是通过a.age来进行排序,可以不用a-b直接返回正负数，正就是从小到大，负数则是相反
forEach()	arry.forEach((item,i)=>{})	数组循环item为元素，i为索引
every()	arry.every((item,index,arr)=>{return item==2})	这是检测数组内的所有元素是否满足要求，返回布尔值 判断数组所有内容是否都是2
some()	arry.every((item,index,arr)=>{return item==2})	这是检测数组内的所有元素是否有一个满足要求，返回布尔值 判断数组所有内容是否都是2
filter()	arry.filter((item,index,arr){return item.js>50})	循环数组，返回js大于50的数组，返回值为数组，是返回数组内所有大于50的元素组成的新数组
reduce()	arry.reduce((pre,value,index,array)=>{return 99},0)	**pre为上一次的返回值,第一次的值为数组的第一个值，value则是第二个值，**第二个参数是设置pre的初始值为0，当设置了pre的初始值，则value的值又为数组的第一个元素

迭代器操作数组

 let arrk = ["kun", "123", "ks"];
 //迭代方法操作数组
 for (let item of arrk.keys()) {
     //  这是操作数组索引
     //  console.log(item)
 }
 for (let item of arrk.values()) {
     //这是操作数组元素
     //  console.log(item)
 }
 let entries = arrk.entries();
 console.log(entries.next())
 for (let [key, value] of arrk.entries()) {
     //  迭代数组的所有元素和上面差不多,这个是两个都包含
     console.log(value)
 }

 "use strict"
 let arrry = [1, 2, 3, 4, 5, 6]
 //移动数组中的元素arry为数组，from为和to都为数组元素的索引号
 function move(arry, from, to) {
     const newArray = [...arry]
     newArray.splice(from, 1, newArray[to])
     newArray.splice(to, 1, newArray[from])
         // 移动数组中的元素
         //  let item= newArray.splice(from, 1,)
         //  newArray.splice(to, 0,...item)
     return newArray;
 }
 console.table(move(arrry, 1, 3))
//copyWithin
 console.table(arrry.copyWithin(3, 0, 1))
//内容复制如下图一
 console.table(arrry.copyWithin(3, 0, 3))
//内容复制如下图二
console.table(arrry.copyWithin(3, 1, 3))
//内容复制如下图三
 console.table(arrry.copyWithin(4, 1, 2))
//内容复制如下图四

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3U588J1u-1637717700995)(C:\Users\kun\AppData\Roaming\Typora\typora-user-images\image-20210204161009089.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hlt2aHc-1637717700996)(C:\Users\kun\AppData\Roaming\Typora\typora-user-images\image-20210204161126685.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b8nbJLHO-1637717700998)(C:\Users\kun\AppData\Roaming\Typora\typora-user-images\image-20210204161311083.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-450Ru4i8-1637717700999)(C:\Users\kun\AppData\Roaming\Typora\typora-user-images\image-20210204161457587.png)]

Symbol唯一标志和对象的key值定义

基础

 //定义标识
    // 产生一个唯一的数据
    let kun = Symbol("mynameiskun");
    let hd = Symbol("我的任务是");
    // 获取标识的内容
    console.log(kun.description)
    let a = Symbol.for("hdcms")
    console.log(a.description)
        // keyFor只能拿到Symbol.for定义的
    console.log(Symbol.keyFor(a))

    // Symbol的使用
    let grade = {
        '李四': {
            js: 100,
            css: 89
        },
        '李四': {
            js: 30,
            css: 89
        }
    }
    console.log(grade) //key的名字相同是这个对象就只会有最后一个
//如果用Sybol来当值时就不会出现这种状态
 let grade = {
        '李四':Symbol(),
        '李四':Symbol()
    }
 console.log(grade)//就两个李四了    //*** 不过这中方法一般用来取key的可以配合最下面来使用***/
// ----------------------------------------------------------
    let user = '李四';
    let user2 = '李四'
    let grad2 = {
        user: {
            js: 100,
            css: 89
        },
        user2: {
            js: 30,
            css: 89
        }
    }
    console.log(grad2);
    // 在中括号中时取得值就是user的值
    // 就可以通过这种方法来让用户自定义对象的key的名称
    let grad3 = {
        [user]: {
            js: 100,
            css: 89
        },
        [user2]: {
            js: 30,
            css: 89
        }
    }
            // 取值时也要通过中括号来:grad3[user]
    console.log(grad3);

Symbol的使用

 class cache {
        static data = {};
        static set(name, value) {
            return (this.data[name] = value)
        }
        static get(name) {
            return this.data[name];
        }
    }
    let us = {
        name: "kun",
        key: Symbol("会员")
    }
    let cart = {
        name: "kun",
        key: Symbol("商品")

    }
    cache.set(us.key, us);
    cache.set(cart.key, cart)
    console.log(cache.get(us.key));
    // 这样就可以排除数据的耦合 应为symbol是永远唯一的
let syb=Symbol("name");
let hd={
	name:"kun",
    [syb]:"我是你一般遍历不到的数据"
}
//用到Symbol这样的对象是隐藏的需要特殊方法才能遍历
//这种要遍历syb的需要
for(let key of Object.getOwnPropertySymbols(hd))//这是遍历syb的属性
for(let key of Reflect.ownKeys(hd))//这是遍历对象的所有的属性
    
    

Set类型与Array和Object的对比分析

Set也是定义数组的一种方法不过在Set中元素不可以重复

 let set = new Set();
    set.add(1);
    set.add(1); //错误
    set.add("1"); //可以
// let set = new Set([1,2,3]);
console.log(set.size)//查看set的数量
console.log(set.has("kun"))//查看set里面是否有kun 返回布尔值
set.delete("kun")//删除kun这个元素，返回布尔值
console.log(set.values())//产看set内所有元素
set.clear()//清空所有内容 无返回值
//Set类型的遍历
set.forEach(function(value,key,arr){
    //arr 就是原数组 value和key一样 在set中
    conosle.log(value)
})
for(let key of set){
    console.log(key)
}
/**Set处理搜索关键词**/
  /**Set处理搜索关键词**/
    // 同过这种方法可以提取用户的搜索关键词 ，，看看用户搜索了哪些
    let obj = {
        data: new Set(),
        set keyword(word) {
            this.data.add(word)
        },
        show() {
            let url = document.querySelector('ul');
            url.innerHTML = "";
            this.data.forEach(function(value) {
                url.innerHTML += `<li>${value}</li>`
            })
        }
    }
    let input = document.querySelector("[name='kun']")
    input.addEventListener('blur', function() {
        obj.keyword = this.value //向对象的方法中传值
            // obj.keyword(this.value)
        obj.show()
    })
/********** set的并集 交集 差集的算法实现****************/
//可以用来看两个用户共同拥有的数据等等
 let a = new Set([1, 2, 3, 4, 5, 6])
    let b = new Set([9, 8, 7, 4, 5, 6])
    console.log(new Set([...a, ...b])) //利用set的特性得出两个数组的并集

    //差集
    console.log(new Set([...a].filter(function(item) {
        return !b.has(item); //返回b里面不包含的元素
    })));
    //交集
    console.log(new Set([...a].filter(function(item) {
        return b.has(item); //返回b里面包含的元素
    })));

WeakSet的语法与使用

WeakSet传的值必须是引用类型 操作性质和Set差不多

let set=new WeakSet(“kun”) 这样是错误的 至少需要这样 let set =new WeakSet([“kun”,“2”])

由于js的垃圾回收机制WeakSet又恰巧是弱引用，所以他不具备循环功能即遍历功能也不可以

set.size 这个方法也没有用 就是应为弱引用可能造成影响的属性和方法都不能用

所以就是只能保存数据 ，判断里面有没有该数据

WeakSet的功能

"use strict"

Map类型

 let map = new Map();
        //自我感觉就是有点类型于数本地数据库
        map.set("name", "kun") //添加的内容是键值对的形式// 就是类型对象 
        console.log(map);
/*************Map实现增删改查*************/
let obj={
    name:"kun"
}
let map =new Map([["name","kun"],["key","value"]]);
//add
map.set(obj,"wangkun");
//search
console.log(map.get({name:"kun"}))
//delete
map.delete(obj)
//map.clear()
//判断是否存在
map.has("key") //通过键名查找
//可以使用 迭代循环内容或者forEach来遍历
//可以通过 展开语法将map转换为数组

展示的数据类型图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VrKg6bcw-1637717701000)(C:\Users\kun\AppData\Roaming\Typora\typora-user-images\image-20210206160324900.png)]

WeakMap

和WeakSet性质差不多都是弱引用

Promise

  return new Promise((res, rej) => {
        form.parse(req, (err, fields, files) => {
            if (!err) {
                let file = false;
                if (files.file != undefined) {
                    if (files.file.size != 0) {
                        file = files.file.path.split('src')[1]
                        return res({ file, type: files.file.type, data: fields })
                    }
                } else {
                    return res({ data: fields })
                }

            } else {
                return rej(err)
            }
        })
    })

性能测试

consloe.time('A')//可以测试出一段程序执行的时间
for(let i=0;i<100000,i++){
    
}
console.timeEnd('A')