js原生的DOM Math Date操作以及数组的全局方法和字符串的全局方法

北冥神功。

已于 2022-05-07 10:14:24 修改

阅读量407

点赞数

分类专栏：我的笔记文章标签： javascript

于 2021-03-25 10:44:56 首次发布

本文链接：https://blog.csdn.net/weixin_49281361/article/details/115200306

版权

我的笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

常用的Math内置对象

//Math内置对象
			Math.abs()//返回绝对值
			Math.ceil()//向下取整
			Math.floor()//向下取整
			Math.round()//四舍五入
		    Math.max(x,y)//取最大
			Math.min(x,y)//取最小
			Math.pow(x,y)//值为x的y次方
			Math.random()//随机数0-1
			Math.PI //π

Date对象

			var a = new Date()
			// 实例化一个Date对象:返回的时间点是此时此刻，并且不随着时间的移动和自动更新。
			a.getFullYear()// 返回年份
			a.getMonth() + 1// 返回月份:从0开始
			a.getDate()// 返回日
			a.getDay()// 返回星期几:星期天会返回0
			a.getHours()// 时
			a.getMinutes()//分
			a.getSeconds()//秒
			//计算两个时期相隔时期

document的内置对象

			getElementById(id名) //根据id寻找元素，并返回Node节点
			getElementsByTagName(标签名)//根据标签获取元素，并返回NodeList节点列表
			getElementsByClassName()//根据类名获取元素,返回NodeList
			querySelectorAll()//根据css选择器返回元素,返回NodeList
			querySelector()//根据css选择器返回元素,返回Node
			createElement("标签")//创造并返回一个页面中不存在的Node节点

Node节点

       		className//设置或返回元素的class属性的属性值
			innerHTML//设置或返回元素的开始标签与结束标签之间的内容
			value//设置或返回文本框与文本域的内容
			setAttribute(key,value)//设置元素的自定义属性
			getAttribute(key)//获取元素的自定义属性的属性值
			getElementsByTagName()
			getElementsByClassName()
			nextElementSibling//返回下一个紧邻的兄弟节点
			previousElementSibling//返回上一个紧邻的兄弟节点
			parentNode//返回父级节点
			children//找子级元素
			firstElementChild//返回第一个元素子节点
			lastElementChild//返回最后一个元素子节点
			nodeType//节点类型：1元素节点，3文本节点，8注释节点，9document
			nodeName//返回该元素节点的标签名（大写字符串）
			remove()//删除元素
			appendChild()//插入到结束标签之前
			insertBefore(插入的元素,参照物)
			cloneNode(true)//复制一个元素的副本
			style//设置/获取一个元素的行内样式

计时器

           //只执行一次
			setTimeout(function(){
				},3000)
			setTimeout(fn,3000)
			document.getElementById("start").onclick、= function(){
				time = setTimeout(function(){
				},3000)
			}
			document.getElementById("stop").onclick = function(){
				clearTimeout(time)
			}
			// setInterval(function,时间)  每个时间参数的毫秒数就调用一次参数1的函数
			document.getElementById("start").onclick = function(){
				time = setInterval(function(){
				},1000)
			}
			document.getElementById("stop").onclick = function(){
				clearInterval(time)
			}

事件

			//帮助用户触发某个元素的事件:Node.去on的事件名()
			onclick//点击
			onmouseenter//当鼠标划上的时候
			onmouseleave//当鼠标离开的时候
			onfocus//获得焦点
			onblur//失去焦点
			onmouseover//点击时内部的元素也会被触发
			onmouseout//鼠标离开时执行			
			onmousedown//鼠标按下时执行
			onmouseup//鼠标松开时执行
			onmousemove//鼠标滑过时执行
			which //检测触发事件的建码 ，1左3右2中
			onkeydown//用户按下一个键盘键时触发(全键)
			onkeyup//用户松开键盘时触发
			onkeypress //忽略掉功能键版的onkeydown 
			onchange //每次改变的时候出发的事件
			oninput //文本框输入东西触发
			window.onscroll//滚动条改变的距离
			selectedIndex//下拉选择菜单的Node节点独有的属性，代表当前选择项对于其他项所处的下标
			keycode //keycode绑定键盘
			document.body.clientWidth //获取页面的宽度：
		  	document.body.clientHeight //获取页面的高度：
		  	clientY clientX//相对于游览器左上角的距离
			offsetY offsetX //相对于绑定事件的左上定点
			offsetTop offsetLeft//当前的位置相对于屏幕的位置
			screenY screenX//相对于屏幕的左上角
			return false//阻止浏览器默认行为事件处理函数里
监听
 window.addEventListener()

目标的css中加：pointer-events: none; 防止抖动

数组的全局方法

* 往后插 Array.push(新元素)
* 往前插 Array.unshift(新元素)
* 删除/添加 Array.splice(起始位置，被删除的数量，新增的元素)
* 删除开头的 Array.shift()
* 删除最后一位 Array.pop()
* 颠倒数组 Array.reverse()
* 数组拼接 Array.concat()
* 将数组转换为字符串 Array.join(分隔符) 
* 切割数组 Array.slice(起始下标，终止下标)
ES6新增
*find()传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。
*findIndex()传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。
 // every 数据方法 会遍历 会接受回调函数，每个回调函数都为true。那么every方法返回true
    // 如果是空数据调用every就是true
    const allChecked=cart.length?cart.every(v=>v.checked):false
    this.setData({

字符串的全局方法

* 根据下标返回字符 charAt()
* 字符串拼接 concat()
* 根据字符找下标 indexOf() lastIndexOf()
* 替换字符 replace()  如果要全局匹配 `String.replace(/被替换字符/g,替换的新字符)`
* 根据起始和终止下标切割字符串 slice() substring()
* 根据起始位置和个数切割字符串 substr()
* 根据字符将字符串切割成长度若干的数字 split()

面向对象

面向对象:OOP :分析解决问题的步骤，使用函数的方式一步步实现，使用的时候依次调用即可

把大象关进冰箱分为几步

1.分析步骤

（1）打开冰箱

（2）大象放进去

（3）关门

oop与现面向过程区别

面向过程

优点性能比oop高

缺点没有面向对象在后期方便维护扩展性不高

oop

优点后期方便维护扩展性高

缺点性能比面向过程低

类与对象

类：就是对有相同的属性和行为的对象的集合

对象：就是根基类的属性和行为的实例化（真是存在的）

总结

面向对象：就是传造出一个机器用这个机器快速的创建出一个有属性（变量）有方法（函数）的对象

创建对象的方式？

（1）字面量方式

   // 1.字面量
        let user={
            uname:"huanghuang",
            uage:42,
            sex:"男",
            love:"女",
            showname(){
                console.log("我是一个方法");
            }
        }
        console.log(user.uage)

缺点：字面量方式是定义对象的简写形式，在创建多个的时候非常麻烦

（2）Object构造器

    let demo=new Object()
        demo.name="宝贝";
        demo.home=()=>{
            console.log("跪下给我换拖鞋");
        }
        console.log(demo.name)

缺点如果我像创建对各对象那么必须每一次都需要new 然后在逐一添加属性和方法会有大量的冗余代码。

(3) 工厂函数创建对象

      // 3工厂函数方式创建
        // 1.创建工厂
        function sicong(){
            // 2.创建出一个空对象
            let obj={}
            obj.name="sicong",
            obj.tedian=()=>{
                console.log("有钱");
            }

            // 3返回
            return obj
        }

        let demo=sicong()
        console.log(demo.name)

缺点：不够灵活每次都是相同属性和方法的内容

（4）构造函数方式创建

  // (4)构造函数
        // 特点1：函数的首字母大写（用来区分普通函数）
        function CreateUser(name){
            // 特点2：this指向 指向的创建实例化之后的变量（new 之前的变量）
            this.name=name
        }
        // 怎么使用构造函数？
        // 特点3 必须使用new关键字来创建
       let demo= new CreateUser("LV")
       console.log(demo.name)

特点：灵活我们可以使用工造函数按照需要创建出指定的对象

什么是构造函数

构造函数的目的

可以非常方便的创建出一个有属性有方法的对象

特点

1.首字母大写

2.内部的this指向的是生成出来的对象

3.必须使用new关键字创建

（3-1）注意不使用new会怎么样？


        function CreateUser(name){
         
            this.name=name
        }
    
        // 不使用new关键字 是构造函数错误的使用方式  硬要不用new只会出现undefined
       console.log(CreateUser("LV"))

特点延续

注意：构造函数创建出来的内容是什么？实例对象

注意2：在创建实例对象的过程叫什么？实例化

注意3：构造函数中不能有return？可以有但是写了没有用白写

       function CreateUser(){
         
            return "我是构造函数return的字符串"
        }
    
        console.log(new CreateUser())

注意4 我们每次实例化的时候 new 构造函数的名字() 来创建但是注意如果不传参数的时候()可以省略

  function CreateUser(){}
    
        console.log(new CreateUser)

ajax实现异步通信

ajax是什么？

异步的(async) javascript and xml ：就是利用javascript和xml实现实现客户端与服务器之间进行异步的数据交换。

什么是异步什么是同步？

同步：阻塞代码

异步：非阻塞代码

为什么学习ajax？

1.无刷新不会刷新曾哥页面而是指刷新指定区域

2.可以给用户提供连续的使用感受

传统的web应用和ajax有什么差异？

1.发送请求方式的不同

（1）传统的:只能发送同步请求

（2）ajax的：使用ajax引擎进行异步操作的发送

2.服务器响应不同

（1）传统的:就是会响应一个完整的页面

（2）ajax的：给我们响应的是我们需要的数据

3客户端处理不同

（1）传统的:等待着服务器相应给我们的页面我们进行加载处理

（2）ajax的:通过各种数据的操作进行数据展示

ajax创建流程

          // 1.实例化ajax对象
          let xhr = new XMLHttpRequest();
          // 2.设置连接配置（设置请求参数信息）
            // xhr.open(“请求方式（get post put delete patch）”,请求地址,是否异步 默认是true异步 false同步)
            	xhr.open("GET","http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187")
           // 3.send()发送请求
            xhr.send()

4.监听请求状态

4-1：readyState 状态值：判断XMLHttpRequest对象的状态信息（浏览器和服务器之间交互到哪一步了）

状态值：0-4共计5步

0：请求还没有开始（未初始化）

1：服务器已经建立了连接

2：请求已经接收

3：请求处理中

4：请求处理完毕并且响应已经就绪

    // 1.实例化ajax对象
          let xhr = new XMLHttpRequest();
            // 2.设置连接配置（设置请求参数信息）
            // xhr.open(“请求方式（get post put delete patch）”,请求地址,是否异步 默认是true异步 false同步)
            xhr.open("GET","http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187")
            // 3.send()发送请求
            xhr.send()

            // 4.监听请求状态
            // onreadystatechange他会在状态值2 3 4步的时候执行
            // xhr.onreadystatechange=()=>{
            //     console.log(xhr.readyState)
            // }

            // onprogress他会在状态值 3 步的时候执行
            // xhr.οnprοgress=()=>{
            //     console.log(xhr.readyState)
            // }
            // onload他会在状态值 4 步的时候执行
            xhr.onload=()=>{
                console.log(xhr.readyState)
            }

status状态码

就是一个请求过程中的各种状态的提示信息

        // 1.实例化ajax对象
          let xhr = new XMLHttpRequest();
            // 2.设置连接配置（设置请求参数信息）
            // xhr.open(“请求方式（get post put delete patch）”,请求地址,是否异步 默认是true异步 false同步)
            xhr.open("GET","http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187")
            // 3.send()发送请求
            xhr.send()

            // 4.监听请求状态
            // onreadystatechange他会在状态值2 3 4步的时候执行
            // xhr.onreadystatechange=()=>{
            //     console.log(xhr.readyState)
            // }

            // onprogress他会在状态值 3 步的时候执行
            // xhr.οnprοgress=()=>{
            //     console.log(xhr.readyState)
            // }
            // onload他会在状态值 4 步的时候执行
            xhr.onload=()=>{
                console.log(xhr.readyState)
                if(xhr.status==200){
                    console.log(xhr.responseText)
                }
            }
        }

兼容性

低版本IE 6 IE5 低版本没有办法使用XMLHttpRequest（）

在低版本IE中需要使用 ActiveXobject(“Microsoft.XMLHTTP”)

    // 兼容性配置
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest(); 
            }else{
                xhr=new ActiveXObject("Microsoft.XMLHTTP")
            }

ui框架

在我们三阶段学的这些vue.js react.js umi.js dva.js node.js 也是框架他们统称js框架

ui框架 bootstrap elementui vantui …

bootstrap

是一个第三方的所以要使用先下载

下载方式今后所有的第三方库希望大家都用npm管理（要使用npm 那么你的电脑上必须要有node）

1.打开cmd 在cmd中cd 你的项目路径（把cmd的路径切换到你的项目上）

2.初始化 npm init -y

3.下载 npm install --save bootstrap@3.3.7 但是下载的时候会发现好慢呀怎么办？可以使用淘宝镜像安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

暂存性死区

primise

<!-- 	js中会有大量的异步操作   但是这些异步操作中可能会出现层层嵌套的问题（回调地狱）   不会有错但是 后期在维护的时候非常的麻烦
	
	使用promise 可以很好的解决回调地狱的问题  让代码的可读性便的非常之高
	
	
	promise 有三个状态    pending 等待状态    resolve成功状态    reject失败状态 -->
	
	<script type="text/javascript">
		
		
		
		
		
	let ajaxDemo=new Promise((resolve,reject)=>{
		// 异步操作放进来\
				$.ajax({
					url:"http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
					type:"GET",
					dataType:"json",//预计返回类型
					success(ok){
						resolve(ok)
					}
				})
		})
		// ajaxDemo 是一个promise对象    当得到这个promise对象之后  我们想取出promise对象的成功返回值
		// Promise对象 的成功返回值是通过then获取的  catch对应的是失败的
		ajaxDemo.then((xiaoming)=>{
			console.log(xiaoming)
		})

事件循环

js在最初设计的时候就是单线程的。但是在处理一些等待事件较长的操作时（比如有:异步请求）
所以js必须要有异步。js通过事件循环来实现异步这也是js的运行机制。

分类

遇到同步任务直接执行

遇到异步任务分类为宏任务(macro-task)和微任务(micro-task)。

什么是宏任务微任务

宏任务(macro-task)：setTimeout，setInterval等

微任务(micro-task)：promise

总结与原理

有微则微，无微则宏
先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

北冥神功。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js原生的DOM Math Date操作以及数组的全局方法和字符串的全局方法

常用的Math内置对象//Math内置对象 Math.abs()//返回绝对值 Math.ceil()//向下取整 Math.floor()//向下取整 Math.round()//四舍五入 Math.max(x,y)//取最大 Math.min(x,y)//取最小 Math.pow(x,y)//值为x的y次方 Math.random()//随机数0-1Date对象 var a = new Date() // 实例化一个Date对象:返
复制链接

扫一扫