前端笔记2
2021-11-11 10:49:26 1 举报AI智能生成
涵盖了前端所有面试题和js阶段的详细笔记的前端笔记2来啦，继1以来的第二个作品，希望可以入君囊中
作者其他创作
大纲/内容
<h>标题标签
<p>段落标签
<ul>无序列表
<ol>有序列表
<dl>自定义列表
列表标签
<div>标签
<table>表格
<form>标签
<hr>标签
<pre>标签预格式化文本
<marquee>标签
<blockquote>标签
块级元素
<a>标签
<button>标签
<label>绑定标签
<select>下拉列表
<textarea>多行文本
<span>标签
《br》换行标签
<sup>上标
<sub>下表
<b>、<string>加粗
<i>、<em>倾斜
<u>、<ins>下划线
<del>、<s>删除线
行内元素
<img>标签
type=\"text\"单行文本输入框
type=\"password\"密码输入框
type=\"radio\
type=\"checkbox\"复选框
type=\"submit\"value=\"提交\"提交按钮
type=\"reset\"value=\"重置\"重置按钮
type=\" image\" src=\"\"图像形式的提交按钮
type=\"hidden\"隐藏域
type=\"file”文件域
<input>标签
行/块元素
行内元素会在一条直线上排列，都是同一行的，水平方向排列。块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
行内元素与块级元素属性的不同，主要是盒模型属性上。行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
行元素与块元素区别
哪些是行元素，哪些是块元素，行元素与块元素有什么区别？
行内式>内嵌式>外部样式
id选择器>class选择器>标签选择器>通配符
优先级
class页面上可以重复，id页面上唯一，不能重复
一个标签可以使用多个class，用空格隔开，但是id只能有id
id与class区别
常用的选择器有哪些？id与class的区别？并说明其优先级？
可继承的属性: color、text-开头的、line-开头的、font-开头的
哪些属性是可以被继承的？
1、脱标:脱离文档流。
2、字围:浮动效果有字围效果.
3、收缩:一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度(这点非常像行内元素)。
浮动带来的影响
1、设置高度(简单页面可以使用)。缺点:内容不固定，需要重新计算高度。
2、overflow: hidden(超出隐藏)，缺点:具有定位属性不可用。
3、隔墙法:需要在两个div之间加标签并设置clear: both;，相当于加一堵墙隔开，防止重叠。
.clearfix:after{ content:''; display: block; clear: both;}
4、clearfix，谁浮动了给谁的父元素添加类名。
清除浮动的方法
给父级增加高度
清除浮动的目的
浮动
外边距、边框、内边距、内容
标准的CSS的盒子模型
不会出现脱离文档标准流
仅仅是位置发生改变，但没有脱标。形影分离
相对定位的参考点，自己本身
相对定位:relative
绝对定位：absolute
固定定位会脱标
固定定位参考点是浏览器 一直固定在浏览器可视区的某个位置
固定定位：fixed
定位属性有
定位属性有哪些？请说一下区别
不给div设置宽高，其中一个边框设置颜色，其余边框设置透明(transparent)
如何用纯CSS创建一个三角形？
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
行高是指一行文字的高度，具体说是两行文字间基线的距离。 CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。 单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。 多行文本垂直居中：需要设置display属性为inline-block。
你对line-height是如何理解的？
1、设置内边框：box-sizing:border-box
2、给父元素设置display：flex; 弹性盒子
边框为1，宽度50%并排显示
1、图片的display:block（转成块元素）
2、vertical-align:middle(改变他的垂直居中方式)
取消元素两像素问题
1、使用绝对定位left与top设置为50%，margin-left与margin-top值为负数 宽度、高度的一半
2、使用绝对定位top、right、bottom、left值为0，margin：auto
4、父元素：display:flex 水平对齐方式和垂直对齐方式设置为center
水平垂直居中方法
css面试题
1、数字类型：number
2、布尔类型：boolean
3、字符串类型：string
基本数据类型
1、数组：Array
2、对象：object
3、function：函数
复合/引用数据类型
null 空值
undefined 没有赋值
NaN 不是数字
特殊数据类型
数据类型有
返回变量数据类型
1、typeof 变量
检查是不是数组类型，如果是返回true，若不是返回fasle
2、Array.isArray()
3、isNaN()
判断数据类型的方法
数据类型有哪些？怎么判断数据类型
parseInt(参数)转整型*
Number(参数)转数字*
.toString()转字符串*
String(参数)转字符串*
parseFloat(参数)转小数
Boolean(参数)转布尔值
toFixed(2) 保留几位小数
数据类型转换
相同点：都是对原有的变量进行+1
i++与++i区别
= 给变量赋值== 比较的是值（不严谨）===比较值并且比较数据类型
①算数运算符 + - * / %
操作符=、== 、=== 区别
表达式1(判断条件)？表达式2：表达式3
三元运算符
while：只有条件成立才会执行do while:无论怎么样，都先执行一次然后判断条件是否成立，条件成立再次执行 不成立循环结束。
while与do while区别？
break 终止循环 看到break后面的代码就不执行了continue 跳出当前循环，开始下一次
break与continue区别？
for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ document.write(j+\"*\"+i+\"=\"+j*i+\" \
九九乘法表
什么是局部变量?什么是全局变量?
直接或间接调用函数本身，则该函数称为递归函数。
公司里明文规定禁止使用递归 循环能做的事情 递归也能做 必须等待最后一次运行结果的出现
不常用 公司里明文规定禁止使用递归
递归函数会经常用吗？
这个函数必须等待最后一次程序处理结果出现才能完成逻辑执行 违背内存管理机制/垃圾回收机制
缺点
知不知道递归函数？递归函数经常会用吗？递归函数的缺点是什么？
for循环、for in循环、for ...of循环、forEach循环
方法
for循环与forEach区别:
for in返回的是索引 for ...of返回的是值
for in与for ...of区别？
数组遍历方法，及区别
.push() 将元素添加到数组的结尾，并返回数组的长度*
.unshift()将元素添加到数组的开头，并返回数组的长度
.splice() 删除数组的某一项*
.shift()删除数组最前面的元素
.pop()删除数组的最后一项*
concat()合并数组返回新的数组
.sort()对数组正序*
.reverse()对数组倒叙
String()、.toString()数组转字符串*
.split()分割，将字符串分割成数组*
数组的常用方法
排序注意：排序把数字类型转成了字符串类型进行比较（每个字符比较大小）
冒泡排序 从小到大排序 两层循环嵌套 外层循环 循环多少次 内层循环 比较相邻的两个值得大小 如果前一个值比后一个值大 交换位置 每一次循环的时候找到最大的值放到最后
冒泡思想:
冒泡排序
.includes() 在字符串中查询是否有这个字符*
.startsWith() 检测开头的字符串
.endsWith() 检测结尾的字符串
查找字符串方法：
.substring()*
.substr()
.slice()
功能：用newStr将oldstr替换掉 生成新的字符串 (把旧数据替换成新数据)
.replace()替换字符串*
功能：用分隔符对原数据进行分割返回的是一个数组
.split()分隔符分割*
字符串提取操作方法？
功能：将字符串中的某几个字符提取出来生成一个新字符
通过id获取元素节点
document.getElementById()
通过标签名字获取一组元素节点
document.getElementsByTagName()
通过name获取一组元素节点
document.getElementsByName
通过类名获取一组元素节点
document.getElementsByClassName()
document.querySelector() 获取单个节点
document.querySelectorAll() 获取全部节点
.nextElementSibling 获取下一个兄弟节点
.previousElementSibling 获取上一个兄弟节点
.children 直接获取子节点·
.firstElementChild 获取首个子节点
.lastElementChild 获取最后一个子节点
.parentNode() 获取父节点
通过事件委托获取
获取dom节点的方法有哪些
通过选择器获取dom元素
创建一个li标签
document.createElement(\"li\")
创建元素节点
添加到最后 .appendChild()
父节点.appendChild(子节点)
insertBefore() 在指定的节点之前插入
添加节点
增
var uls=document.querySelector(\"ul\")uls.removeChild(uls.children[0])
父节点.removeChild(父节点的子节点)
lis.remove() //获取要删除的节点删除 uls.lastElementChild.remove() //获取要删除节点的父元素节点通过获取子元素删除节点
要删除的节点.remove()
移除子节点
删
replaceChild() 用一个节点将某一个节点替换
修改元素节点
参数： true:深度克隆 克隆了当前元素的所以子节点 false:浅克隆 不会克隆子节点(默认浅克隆)
父节点.cloneNode(true/false)
克隆节点
改
//获取内容及标签名
.innerText
//获取的只是内容
.innerHtml
获取的元素.innerText=\"how are you\"
获取的元素.innerHTML=\"<h2>我是h标签</h2>\"
再页面中添加内容
相同的:获取/设置文本
不同点： innerText：以文本形式设置/获取 innerHtml： 以html结构设置/获取
两个方法的异同点
文本节点
查
Dom的增删改查
给绑定元素添加事件委托e.stopPropagation()
给触发事件冒泡的函数加一个e.cancelBubble=true
阻止事件冒泡
给元素添加e.preventDefault()
阻止标签的默认行为
什么是事件冒泡?怎样避免事件冒泡?阻止标签的默认行为?
文件的外部引用
减少冗余代码，将代码进行封装
事件委托替代dom获取，减少dom操作
图片的懒加载
压缩文件
怎样提升浏览器的速度
绑定事件：addEventListener
解除绑定事件：removeEventListener
事件绑定/解绑
JSON.parse( 字符串名字 )
eval( (' + 字符串名字 + )' )
json字符串转对象
JSON.stringify( 对象名 )
.toString()、String()
json对象转字符串
json转换
浅拷贝：浅拷贝是按位拷贝对象，它会创建一个新对象这个对象有着原始对象属性值的一份精确拷贝。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)。( 就是b复制了a，当修改a时，b中的子元素不会随着a的改变而发生改变，但是子对象中的元素会跟着a的改变而改变。源数据和复制后的数据第一层不会改变，第二层会改变 )
即儿子后代不变，孙子后代变
深拷贝：创建一个新的对象和数组，将原对象的各项属性的\"值\"( 数组的所有元素 )拷贝过来。就是b复制了a，修改a时，b不会发生变化( 包括所有子对象 )。拥有了独立的内存
区别
slice()
concat()
es6剩余运算符( ... )
实现浅拷贝方法
JSON.parse()、JSON.stringify
通过Query的extend方法实现
通过递归函数去拷贝所有层级实现
实现深拷贝方法
实现浅/深拷贝
用过浅拷贝、深拷贝吗？有什么区别？怎样实现浅拷贝和深拷贝？
概念：闭包就是能够读取函数内部变量的函数
1，可以读取函数内部的变量
2，可以使这些变量始终保存在内存中
3，由于闭包会使函数中的变量被保存在内存中，内存消耗大。所以经常使用闭包函数会出现网页性能问题，所以不建议使用
用途
什么是闭包函数？用途？
一种是通过call或者apply继承
一种是通过原型prototype继承
对象继承的方法
console.log(window.navigator.appName)
判断当前浏览器是什么浏览器？
概念：面向对象就是一种思想，是由属性和方法组成的。面向对象的语言最基本的标志就是类的概念。类的实例即对象。
抽象：把主要的特征、跟问题相关的特征抽出来
封装：看不里面的对象，用好表面的功能就可以了
继承：遗传，从父类继承出一些方法属性，子类又有自己的特性
特点
什么是面向对象？面向对象特点
在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。
什么是构造函数？
数组转字符串 join()、toString()、String()
对象转字符串 JSON.stringify()
字符串转对象 JSON.parse()
字符串截取: substring()、replace()
数组、字符串和对象的相互转换
内存泄漏：由于疏忽或错误造成程序未能释放已经不再使用的内存的情况
1，非静态内部类创建静态实例造成的内存泄漏：将该内部类设为静态内部类或将该内部类抽取出来封装成一个单例即可
2，Handler造成的内存泄漏：将Handler类独立出来，或者使用静态内部类
3，复合容器中的内存泄漏：在退出程序之前，将集合里的东西clear，然后置为null，再退出程序
4，webView造成的内存泄漏：为webView另外开启一个进程，通过AIDL与主线程进行通信，webView所在的进程可以根据业务需要选择合适的时机进行销毁。从而达到内存的完整释放
解决
什么是内存泄漏，内存泄漏的解决方法？
window对象即BOM：Window对象封装了窗口标题，状态按钮，地址栏，状态栏等。这些窗口的组成部分，也被定义为浏览器对象，都是window的成员对象。一次，构成一种层次结构，也就是浏览器对象模型BOM
document即DOM：Document对象代表整个HTML文档，可用来访问页面中的所有元素，Document对象是Window对象的一部分
什么是window对象？什么是document对象？
预解析中，变量的提升，智慧提升到当前作用域的提升，提升到当前作用域的最上面，函数中的变量只会提升到函数作用域的最上面
什么是预解析？
第一:创建ajax对象
第三:发送http请求
第四:获取返回的数据
实现ajax局部刷新，创建ajax步骤
http:是一种网络传输协议浏览器的作为http客户端通过ur1向http服务器发送请求服务器根据接收的请求向客户端 发送响应信息
http:的概念
1、客户端向服务器发送请求
2、服务器接收到请求需要进行核对操作发送的请求服务端能不能接收到，如果接收到，就向客户端返回接收到的请求信息
3、客户端拿着服务器返回成功接收到的这个信息，再去向服务器请求两者才能建立关系/链接
http的三次握手
安全性问题：get请求参数会拼接到接口地址上信息会暴露.post参数不可见．
数据传输量：get有长度限制，post没有
缓存问题：get数据会缓存下来，post不会
get与post的区别
js面试题
简单来说，js就是运行在浏览器中的一种解释性的编程语言，是单线程
什么是js？js是单线程还是多线程
同步交互：指发送一个请求，需要等待返回，然后才能发送下一个请求，有个等待的过程
异步交互：指发送一个请求，不需要等待返回，随时可以发送下一个请求，即不需要等待
区别：一个需要等待，一个不需要等待，在部分情况下，项目开发一般选择不需要等待的异步交互
什么是同步和异步？哪种执行方法更好？
200：请求成功
301：资源（网页等）被永久转移到其他URL
400：指出客户端请求中的语法错误
401：表示发送的请求的请求需要认证
403：表示请求的访问被服务器拒绝
404：表示服务器上找不到指定资源
500：表示服务器端在执行请求时发生了错误
502：服务器网关错误
503：表示服务器超负荷或者正在停机维护，无法执行请求
常见的HTTP状态码有哪些
回流：当页面中的元素改变了宽高、布局、显示或隐藏，或者元素内部文字结构发生变化导致需要重新构建页面的时候，回流就诞生了
重绘：重绘是在一个元素的外观发生改变，但没有改变布局的情况下发生的
结论：回流必定触发重绘，而重绘不一定触发回流
什么是页面的回流和重绘
网站从http升级到https，需要ca机构申请的ssl证书，将ssl证书部署到服务端，就可以实现https网站
网站从http协议切换到https协议需要对代码做哪些处理？
跨域：指的是浏览器不能执行其他浏览器的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript添加的安全机制
解决方法：1，JSONP：后端处理，但需要注意JSONP只支持GET请求，不支持POST请求--2，代理
什么是跨域？如何解决跨域问题？
300ms延迟
原因：双击放大显示功能
解决：<meta user-scalable=no width=device-width>
移动端点击事件会有多少秒的延迟，什么原因造成的？如何解决？
都保存在浏览器里面
相同点
cookies会在浏览器和服务器间来回传递数据，sessionStorage、localStorage不会自动把数据发给服务器，仅在本地保存
存储大小不一样，cookies存储数据不能超过4k，sessionStorage、localStorage存储容量大，5M左右
数据的有效期不同，sessionStorage数据仅在当前浏览器窗口关闭之前有效，localStorage始终有效，除非手动清除信息，否则信息一直存在，cookies窗口或者浏览器关闭之前也一直保存，只在设置的cookies过期时间之前有效
作用域不同，sessionStorage不在不同浏览器中共享，即使是同一页面，localStorage、cookies所有同源窗口共享
不同点
sessionStorage、localStorage、cookies三者的区别
var定义的是全局变量，属于window，是在全局范围内有效。var定义的变量可以修改，可以声明多次，如果不初始化会输出undefined，不会报错
let只能在块级作用域中使用即{}，不存在变量提升，要先声明后使用，let变量只能声明一次，不能重复声明。let变量有暂时性死区，只要在作用域内存在let变量，它所声明的变量会绑定在作用域内，不受外界影响
const声明的是一个常量，声明之后不允许改变，而且必须初始化。const定义的基本数据类型不能改变，但是定义的对象或数组可以通过属性或索引来改变
var、let、const的区别
const指针指向的地址不可以改变，但是指向地址的内容可以改变
为什么const可以修改对象或者数组
Array.prototype.slice.call()
Array.from
伪数组转数组的方法
this代表它的直接调用者
在默认情况下this没有直接调用者，则this指向的是window
在严格模式下没有直接调用者的函数this是undefined
普通函数中的this
默认情况下指向的是定义它时所在的最大对象，而不是执行时的对象
特殊情况，在函数作为对象属性的情况下，this指向的是window
箭头函数中的this
普通函数和箭头函数中this的区别
js补充
M：后端传递的数据
V：视图
VM：视图模型
MVVM
M：模型
C：控制器
MVC
什么是MVVM、MVC？简单说一下MVVM、MVC
数据的驱动
数据的双向绑定
组件化开发
vue的特点及功能
vue.js采用的是数据劫持结合发布者订阅模式的方式通过Object.defineProperty()来劫持seter、geter，在数据变动的时候发布给订阅者，触发响应的监听回调
vue的双向绑定原理，vue的响应式原理
v-model
v-if
v-show
v-for
v-text
v-html
v-bind
v-on
vue里面常用的指令有哪些
v-if与v-show实际都是判断条件是否成立所显示或者隐藏
本质区别：v-if判断是否加载，减轻了浏览器的压力，在需要的时候加载。v-show一定会加载，改变的只是display的显示隐藏样式
v-if与v-show的区别
key：表示唯一，不加key会报警告，渲染数据时会出现逻辑错误，渲染错位。key的作用主要是为了高效的渲染虚拟DOM，其目的是为了让vue能够区分它们并且key属性有利于代码的优化，减少资源消耗
v-for里面key的作用
不能，因为v-for的优先级比v-if高，带来性能方面的浪费( 每次渲染都会先循环再进行判断 )
v-if和v-for能在一起使用吗？为什么
事件委托：stopPropagation()
.stop
事件委托：preventDefault()
.prevent
阻止默认行为
vue阻止事件冒泡及默认行为的方法
vue实例从创建到销毁的过程就叫vue的生命周期
vue生命周期有10个，废弃了两个（组件重新加载，组件重新加载完成），剩下8个分别是：实例创建前，实例创建后，DOM加载前，DOM加载后，数据更新前，数据更新后，实例销毁前，实例销毁后，而实际开发中最重要的两个是实例创建后created和DOM加载后mounted
第一次页面加载会触发4个钩子函数：实例创建前、实例创建后、DOM加载前、DOM加载后
什么是vue的生命周期，生命周期的作用？生命周期有哪些，第一次加载页面会触发哪几个钩子函数？
js原生的ajax、vue-resource( $http )、axios、qs、这些都是通过ajax和promise封装而来的插件
异步请求的方法有哪些
过滤器( filters )：在这个对象中定义方法，在不改变原始的数据的情况下，对数据进行处理，然后显示。是在原数据的基础上产生新的数据
主要用于处理时间日期格式
什么是过滤器？主要应用场景
解决方法：this.$set( 要修改的数组/对象，要修改的下标/属性，要修改的值 )
改变数组的某一项
解决方法：数组.splice( 0，数组的长度 )
清空数组
watch两种监听不到的情况及解决方法
计算属性computed，支持缓存，不支持异步，只有在依赖数据发生变化时，才会重新进行更新计算使用场景：购物车
监听器watch：支持异步，不支持缓存，调用时返回两个参数，第一个是新数据，第二个是旧数据使用场景：监听天气，根据数据变化更改背景图等
什么是计算属性computed？什么是监听属性watch？两者有什么区别？使用场景
因为不适用函数和return包裹的变量会在项目内全局可见，会造成变量污染，使用return包裹的变量只在当前组件中生效，不会影响其他组件
vue组件为什么要使用return？为什么data是个函数？
父传子：给子组件绑定自定义属性，到子组件内部用props方法进行接收渲染
子传父：给子组件绑定自定义方法，利用形参将值到子组件内部使用this.$emit()进行发送
什么是父传子？什么是子传父？
css：层叠样式表
sass：是一种动态样式语言，新增变量、嵌套、运算等、更容易阅读
scss：sass引入的新语法，完全兼容css3，并且继承sass
less：是一门css预处理语言，解析时会比sass/scss慢一些
css、sass、scss、less的区别
解决组件的样式污染：在style标签加入scoped
深度监听：在类名后面加上::v-deep
怎么解决组件的样式污染，怎么深度监听？
parmas跳转：使用this.$roter.push()通过路由的name进行跳转，接收时通过this.$route.parmas进行接收
query跳转：使用this.$roter.push()通过路由的path进行跳转，接收时通过this.$rouute.query进行接收
params传参不会地址栏显示，并且刷新页面数据会丢失
query传参会在地址栏中显示，刷新页面数据不会丢失
路由传值的方式
单页面开发首次加载时会白屏、卡顿
解决：路由懒加载
单页面开发和多页面开发的优缺点，解决方法
全局守卫：用于用户的登录验证
进入路由前的守卫：用于登录、是否登录
路由更新的守卫：用于面包屑
路由离开的守卫：用于未支付、答题界面是否保存等
局部守卫
路由守卫的分类
state：存储公共状态或数据
actions：用来处理异步数据
mutations：用来处理同步数据和修改state里的数据
getters：相当于计算属性
modules：导入子模块
状态
工作流程
vuex的状态类型及工作状态
vue
面试题
js就是行为，有些效果是css实现不了的，就是可以说是万能的，不光可以写页面、动画、样式、脚本还可以写视频脚本等，跟java没有关系
什么是js
1、行内式 <button onclick=\"alert('弹出你好行内式')\">点击</button>
2、页内式 <script type=\"text/javascript\" > </script>
3、外联引入 <script type=\"text/javascript\" src=\"index.js\"> // 不能写逻辑代码 </script>
js的引入方式
1、js代码不要写在页面最上方
2、代码中会出现多个script标签，其中没一个script里面都有一段逻辑，如果第一个script里面的代码出现错误，直接跳过去只执行下一个
3、用做外联引入的script不能在里面书写代码
js注意事项
*1、alert('') 一些基本的弹出框提示操作 代码调试 查看结果
*2、console.log('') 代码调试 查看结果 (推荐这种)
3、confirm(\"\") 带取消的弹出框
4、prompt(\"\") 带输入框的弹出框
弹出框
页面输出
定义方式： var 变量的名字=值
js变量含义 :用来存储一个值，这个值是可以改变的 首先我定义一个变量，然后把这个值赋值给这个变量
变量的名子开头必须是字母或者下标符号\"_\"或者\"$\"为开头，其中不能包含其他特殊字符，比如说空格、*、%等
变量名区分大小写，也就是说A与a是两个不i一样的名字
var定义变量的时候不能是js的关键字，比如说var、name、class、style、html
不要出现相同的变量名字，容易重复顶替前面的变量
驼峰式命名，有小(大)写字母开始，后面每个单词首字母都要大写
命名规范
变量
typeof 变量 返回变量数据类型
Array.isArray() 检查是不是数组类型，如果是返回true，若不是返回fasle
判断数据类型
2、布尔类型：boolean true/false 多数用于判断语句结合使用
4、数组：Array
5、对象：object
6、函数：function
7、空值: null
8、没有赋值： undefind
9、不是数字： NaN
数据类型
返回NaN因为开始没有找到数字所有返回不是数字
1、转整型：parseInt(参数) 会把字符串转换成数字类型并且是整数
2、转小数：parseFloat(参数) 会把字符串转成数字，保留小数
3、转数字：Number(参数) 将字符串当成一个整体去转换，如果里面有一个不是数字就返回NaN
4、转布尔：Boolean(参数)
变量.toString(进制) 当前方法除了null和undefined以外其他类型都可以转字符串
String(参数) 可以把所有的类型转成字符串
5、转字符串
Math.floor(参数) 向下取整(去掉小数点)
Math.round(参数) 四舍五入
变量.toFixed(几位小数) 保留几位小数
6、补充内容
类型转换
正常的加法运算
字符串拼接(最终返回的是一个字符串)
加法运算 +
减法字符串减字符串返回结果时减法运算，并且返回数字类型
数字类型减去一个字符串类型返回结果是减法运算，并且返回结果数数字类型
数字减数字返回结果是减法运算结果，并且返回结果数字类型
减法运算 -
乘法运算 *
除法运算 /
模除运算 %(取余)
算数运算符
+= num+=10相当于num=num+10
-=
*=
/=
%=
复合赋值运算符
关系运算符 >、 <、 >=、 <=、 ==、 ===、 !=、 !==、
单个字符比较直接比较编码值
多个字符比较 逐位比较 比较大小直接出结果
2、两个如果是字符串比较的是对应的编码值
遵循的规则
=是赋值给某个变量赋值 ==判断两个数据是否相等。只要等于结果返回true ===全等于不仅判断数值相等&&还会判断类型是否相等 !=出现一个隐式转换，会把数据类型转换成相同的类型进行比较 !==比较内容&&比较数据数据类型
关系运算符
逻辑运算符&&与、||或、!非
用来判断多个条件。 只要有一个条件返回false，整个结果都是false 只有两个条件都是true结果才是true
&&与运算
如果只要有一个条件是true整个结果都是rue 只有两个或多个条件都返回false结果返回false
||或运算
!非 取反
逻辑运算符
一元运算符 i++、++i、i--、--i
相同点：都是对原有的变量加一（减一)
i++(i--)：先取i的值，作为表达式i++(i--)的结果，然后在对i进行加1(减一)(先赋值在后加一)
++i(--i): 先对i进行加一(减一)，在取i的值作为++i表达式的结果(先加一后赋值)
一元运算符
初识js
1、顺序结构 2、分支结构 3、循环结构
三大流程控制语句
if(表达式/判断条件){ 条件成立的时候需要执行的代码 }
单分支语句
if(表达式/判断条件){ 条件成立的时候需要执行的代码 }else{ 条件不成立的时候需要执行的代码 }
双分支语句
if(表达式){ 条件成立时执行的代码 }else if(表达式){ 条件成立时执行的代码 }else{ 以上都不成立时执行的代码 }
多分支语句
分支语句
主要用于判断条件
switch(表达式/条件){ case 值1:执行的代码 break； case 值2:执行的代码 break； case 值3:执行的代码 break； default: 上述所有的case都不正确 }
switch语句
表达式1的结果如果是true的时候执行表达式2 表达式1的结果如果是false的时候执行表达式3
表达式1(判断条件)?表达式2:表达式3
while循环可以处理未知循环次数
while (循环条件){ 循环体(每一次循环执行的代码) 计数 变量+ 执行：如果条件成立执行语句，如果条件不成立终止 }
while循环
无论怎么样都先执行一次然后判断条件是否成立 条件成立再次执行 不成立循环结束
do{ 循环体 }while(表达式)
do while循环
表达式1：定义变量计数器
表达式2：循环条件
表达式3：计数器++
for(表达式1;表达式2;表达式3){ 循环体 }
for循环已知次数
for循环
终止循环 看到break后面的代码就不执行了
break
跳出当前循环 开始下一次循环
continue
流程控制语句
函数就是函数方法 将重复的代码封装起来，在需要的时候调用 函数在创建过程叫封装，在使用的时候叫调用
1、使程序简洁而清晰 2、有利于程序维护 3、可以提高开发效率 4、提高代码重复性
函数的作用:
函数定义不要使用相同的名字，如果定义了多个相同的命名函数，没有重载，最后一个覆盖了上面的函数只执行最后那个函数
注意的地方
函数简介
function 函数的名字(){ 函数体(具体执行的代码) }
语法
函数的名字()
调用
命名函数(有名字的函数)
无需单独调用
(function(){ 函数体(具体执行的代码) })();
匿名函数(没有名字的函数)
var 变量=function(){ 函数体(具体执行的代码) }
函数表达式(带变量的函数)
函数的分类：
形式上的参数(相当于定义了一个没有值的变量)
形参：
实际的参数(要给形参赋值的具体的值)
实参：
function 函数名(形参1，形参2，.....){ 函数体 } 调用函数： 函数名(实参1.实参2....);
格式
1、形参和实参的长度保持一致 2、位置一一对应的
注意：
函数的参数
函数运行的结果 任何函数都有返回值 默认情况下返回值都是undefined return 关键字 返回数据 return 后面跟着什么 函数的结果就是什么 哪怕后面跟着一个毫无逻辑关系的东西 return 不要随便乱写 必须跟着有用的值 返回实际函数运行结果 return 后面的代码不会执行
注意
函数的返回值:
函数整体外部声明的变量叫做全局变量 在函数体内能够重新赋值的情况下也可以使用(函数内部外部·都可以使用)
全局变量：
在函数体内声明的变量叫做局部变量，只能在函数内部使用
局部变量：
所有不用var声明的变量都视为全局变量，不管是在函数体内部还是外部
作用域
违背代码规范，优先使用形参
每一个函数内部都有一个arguments 系统内部用来存储实参
arguments.length 返回的是存储参数的个数(参数的长度)
arguments[下标] 取某一个值下标是从零开始
属性:
arguments它是一个对象，不是数组，但是可以使用数组的方式取值
arguments
js解析器 预解析过程 会将声明的函数进行提示 变量提升：通过var声明的变量在代码执行之前被js引擎提升到了作用域上面 但是变量的赋值不会被提示 最好不要用这个规则 注意:将可能会使用到的所有变量统一定义在作用域的最前面
变量提升
可以在函数创建之前调用
函数变量
直接强制给一个变量赋值
这个变量会被js强制声明为全局变量
注:不建议 属于语法错误
省略var变量
1、函数自己调用自己 2、一般情况下都是带有参数 3、一般情况带有return 注：可以写出来但是根本不知道为什么是对的 基本上没有代码可读性
递归函数需要满足三个条件
1 首先找到临界点 不需要计算 直接知道结果 2 找到这一次和上一次的关系 3 假设当前函数可以使用 调用自身计算上一次
编写的原则：
函数递归
函数
通过一个变量存储多个数据，并且是有顺序位置的
一次性存储多个数据
数组的作用
1、var 数组名 = new Array; 构造函数定义数组 2、var 数组名 = []; 字面形式定义数组(看到[]就知道是一个数组)
本质上并没有区别 都是定义数组 只是构造函数定义数组读取速度会快一些 和后台交互：通常后台给前端的数据放在一个大对象里面{} 格式上基本相同的数据会存放在数组里面
定义数组的方法：
简介
数组名.length 返回数组的长度(个数)
数组的属性：
数组的每一项都叫数组的元素
元素
备注：数组与循环是天生的一对 循环数组/遍历数组 取到数组的每一项
访问数组的元素：
数组的取/赋值
就是循环取数组的每一项
for循环(循环这个数组 拿到这个数组的每一项)
语法： for(var 变量名 in 数组名){}
for in循环 得到的是索引/下标
语法： for(var 变量名 of 数组名){}
for of(默认取得是每一项的值) 在数组后面加上keys()方法会得到索引值
扩展：for of遍历得到索引
数组名字.entries()取得是每一项的索引及每一项的值
即得到索引值又得到每一项的值
for of 得到的是每一项的值
第一个参数：数组每一项的值，第二个参数:数组的索引下标，第三个参数数组
forEach循环
forEach没有返回值(return返回undefined)，并且break是不起作用的
for循环与forEach区别
数组遍历
数组.push(添加到数组后面的元素，用逗号隔开)
将元素添加到数组的开头，并返回数组的长度
数组.unshift(添加到数组前面的元素，用逗号隔开)
数组.shift()删除数组最前面的元素，并返回该元素，同时数组前移
数组3=数组1.concat(数组2) 合并数组返回新的数组
数组.sort()对数组排序，正序从小到大排序
数组.reverse()对数组倒序
String(数组名)
数组.toString()
将数组转成字符串
数组.join(\"拼接的符号\")
将字符串分割成数组
数组.split(\
返回某个字符串在字符中的首次出现的位置，如果找不到返回-1 严格区分大小写
数组名.indexOf(\"查询的字符\")
数组方法
要想排序必须位数一致，要么都是个位要么都是十位等
与join()结合使用的话需要和join()里面的分隔符一样
并不是js提供的专业名词 认为起的 二维数组说白了就是数组里面嵌套数组 如果遇到这种问题 说明后台同时很懒
二维数组取值：数组名[ ][ ]
二维数组
规则：前后两个数进行比较 如果符合某种条件 交换两个数的位置 规律每一轮比较 都会找到一个比较大的值放在后面
规则
for(var i=0; i<arr.length-1;i++){ for (var j=0;j<arr.length-1-i;j++) { if(arr[j]>arr[j+1]){ var tmp=arr[j] arr[j]=arr[j+1] arr[j+1]=tmp } } }
思想: 冒泡排序 从小到大排序 两层循环嵌套 外层循环 循环多少次 内层循环 比较相邻的两个值得大小 如果前一个值比后一个值大 交换位置 每一次循环的时候找到最大的值放到最后 因为每一次循环都会找到最大的值 那下一次循环我可以少循环一次
冒泡排序：
数组
字符串也是有下标的，访问的是单个字符，下标从0开始
访问字符串的个数
字符串.length
认识字符串
功能：在字符串中查询出要查找的字符串第一次出现的位置
参数：subStr：要查找的字符 start：从哪个下标开始查找，如果不写默认从零开始
返回值：如果找到返回对的下标，如果找不到返回-1
功能：在字符串中查询是否有这个字符
参数： subStr：要查找的字符 start：从哪个下标开始查找，如果不写默认从零开始
返回值：如果找到就返回true，如果找不到就返回false
参数：subStr 检测开头的字符串
返回值：如果一致返回true 如果不一致返回false
字符串.startsWitch(subStr)
参数：subStr 检测结尾的字符串
字符串.endsWitch(subStr)
参数：subStr 检测字符串
返回值：如果一致返回对应的索引 如果不一致返回-1
字符串.search(subStr)
功能：返回的是字符串对应下标的字符编码值(ascll)
字符串.charCodeAt(下标)
字符串查找方法
参数：start:从第几个开始截取 end:截取的长度
返回值：生成的新字符串
参数：start:从第几个开始截取 length:截取的长度
返回值：生成新的字符串
字符串提取方法
理解 不常用
参数：oldstr:要替换的内容(旧数据) newstr:想替换的内容(新数据)
length:分割多长 不会用到
注意： 1 分隔符应选取字符串中存在的分隔符 2 如果分隔符为空字符 直接将每一个字符单独创建一个数组中
split()分隔符分割字符串.split(\"分割符\
字符串.toLowerCase()全小写字符串.toUpperCase()全大写
字符串.concat()字符串拼接
字符串操作方法
字符串方法
字符串
对节点进行增删改查
DOM操作 (节点操作)
元素节点 标签 属性节点 标签的属性 文本节点 标签的文本
节点类型
1、先获取需要操作元素的节点 2、明确需要添加什么操作 3、书写逻辑代码
对节点增删改查的步骤：
获取id的名 .id
注意要把原有的类名给加上不然只会显示js设置的类名把原有的类名给替换掉了
添加类名.className=\"smllbox active\"
获取类名 .className
只能获取行内式
如果样式带-，那么去掉-并且-后面第一个字母大写
获取样式 .style.fontSize(样式名)
认识DOM
document 节点操作的关键字(文档html页面)get 获取Element 元素节点By 通过Id id选择器
document.getElementsByName()
类名需要配合后代选择器使用
可以通过id名、类名、选择器名来获取
.nextElementSibling
会获取到文本节点 文字 空格(局限性太大)
.nextSibling
获取下一个兄弟节点
.previousSibling
获取上一个兄弟节点
兄弟节点
直接获取子节点·
.children
.firstElementChild 获取首个子节点
获取子节点 会获取到换行 空格 (局限性太大)
.childNodes
.firstChild:获取首个子节点 会获取到文本节点 文字 空格等
.lastChild:获取最后一个子节点 会获取到文本节点 文字 空格等
子节点
父节点
DOM节点元素获取
增加子节点 在谁里面添加一个新的子节点 1、加到哪里需要获取这个位置 2、加一个什么东西 3、怎么加进去
新建子节点思想
//0 获取父节点 var url=document.querySelector(\"ul\") //1 document.createElement(\"li\") 创建元素 var lis=document.createElement(\"li\") //2 可有可无 设置li里面的内容 lis.innerHTML=\"<h3>我是最后一行</h3>\
外框
新建子节点步骤
新建子节点
节点.getAttribute(\"标签的属性名\") 获取属性
节点.setAttribute(\"想要设置的属性\
dom获取的属性是已知的，标签有的属性能够获取，标签没有的属性获取不到getAttribute可以获取任意属性，随便添加的属性
dom获取的属性与getAttribute获取的属性的区别
属性操作
要获取的元素.currentStyle[\"样式\"] 只有IE兼容的方法
getComputedStyle(要获取的元素)[\"样式\"] 谷歌、火狐等兼容
获取当前有效样式
范围 0-1 有小数
随机数 Math.random
clearInterval(需要清除的定时器变量)
定时器
DOM
dom元素.on事件名称 = function(){}
调用事件：dom元素.事件名()
绑定事件
概念：只要是封装好的函数都会内置一个叫this的变量，this变量存储的就是当前函数主人的地址
注：this永远指向当前函数的主人，函数的主人会通过上下文判断如果this的指向发生了改变 var that = this
t h i s
onclick：单击事件
ondblclick：双击事件
onmouseover：鼠标指向时
onmousemove：鼠标移动时
onmouseout：鼠标移出时
onmousedown：鼠标按下时
onmouseup：鼠标抬起时
鼠标事件
onkeydown：键盘按下
onkeyup：键盘抬起
键盘事件
onload：页面加载时
onresize：窗口发生改变时
onscroll：页面滚动时
window事件
onblur：失去焦点时
onfocus：获取焦点时
onselect：选中文本时
onchange：对输入框的文本进行修改并失去焦点时
onsubmit：点击submit按钮时
onreset：点击reset按钮时
表单事件
注：必须加在form表单里
HTML事件
事件类型
阻止事件冒泡的方法：事件委托对象.stopPropagation()
阻止标签默认事件：事件委托对象.preventDefault()
事件冒泡
1，e.target：找到标签
2，e/target.tagName：找到标签名字(大写)
3，e.target.tagName.toLowerCase()将标签名转为小写
步骤
因为在JS当中，逻辑处理中，dom操作是不可避免的，如果一个元素有100个甚至上千个不同的子元素，然后每一个子元素都需要添加点击事件，按照以往的写法，得获取到每一个，每一个都得添加点击事件。首先代码量上代码过于臃肿，其次频繁的获取添加事件，这些事件会对浏览器性能上产生影响导致页面速度变慢，因为不断与dom节点进行交互，访问dom的次数越来越多引起浏览器重绘或者重排的次数越来越多，会延长整个页面的交互时间
事件委托的好处？为什么会有事件委托？
事件委托
鼠标点击的位置距离当前body可视区的X、Y轴坐标(可视区左上角为原点)
clientX、clientY
对整个页面来说，包括滚动条body部分内容的坐标(页面左上角为原点)
pageX、pageY
当前位置距离电脑屏幕的坐标
screenX、screenY
相当于具有定位父元素的点击位置距离当前元素的x、y轴坐标
offsetX、offsetY
浏览器可视区的宽、高
clientWidth、clientHeight
dom元素的宽、高
offsetWidth、offsetHeight
事件对象
offsetTop：偏离顶部的位置
offsetLeft：偏离左侧的位置
offset
事件
事件函数：window.onload
执行条件：页面加载完成之后执行代码
格式：window.onload = function() {}
加载事件
_blank：在新窗口打开
_self：在当前窗口打开
打开方式
打开：window.open(\"想要打开的链接地址\
关闭：window.close()
window打开和关闭
注意：必须产生了历史记录才能使用
history属性：历史记录
history。forward()
history.go( 1 )
前进
history.go( -1 )
history.back()
后退
history
appCodeName：返回浏览器的代码名
appName：返回浏览器名称
appVersion：返回浏览器的平台和基本信息
platfrom：返回运行浏览器的操作系统平台
userAgent：返回由客户机发送服务器user-agent头部的值
cookieEnable：返回浏览器中是否启用cookie的布尔值
属性
console.log( window.naigent.appName )
判断浏览器的基本信息
浏览器的基本信息( .navigator )
location.assign( \" 地址 \" )：在当前窗口进行跳转，产生历史记录
location.replace( \" 地址 \" )：替换当前窗口地址，达到跳转的作用，不产生历史记录
location.reload()：刷新当前窗口，重新加载，页面闪烁
location.href
location地址
location.href：获取当前地址
location.href = \"\"：设置跳转地址
跳转传参一般不用#，#是专门给锚点链接使用的跳转传参用？隔开，多个参数用&拼接
location.href = \"地址?参数名称=\" + 变量 + \"&参数名称=\" + 变量
拼接参数方法
var userName = \"user1\"var passWord = \"123456\"window.location.href=\"01-认识BOM.html?name=\"+userName+\"&password=\"+passWord
案例
location.href属性
将乱码转成汉字
decodeURI( \"要转换的乱码值\
解决中文传参乱码问题
window.inner Width/Height
document.Element.clent Width/Height
document.body.client Width/Height
获取window宽高
获取可视区宽高
特点：返回数字类型，没有长度单位
获取目标元素宽度：offsetWidth
获取目标元素高度：offsetHeight
获取盒子的宽高
定时器(可以执行多次)：以固定的时间间隔重复调用同一个函数或者代码
setInterval(\"执行的代码/函数\"，毫秒)
清除定时器
clearInterval(清除哪一个定时器)
延时器(只执行一次):延迟一段时间在进行某项操作
setTimeout(\"执行的代码/函数\
清除延时器
clearTimeout(清除哪一个延时器)
延时器
定时器/延时器
BOM
var obj = { name:\
对象.属性名
对象[\"属性名\"]
json对象取值
json对象
var str = '{\"name\":\"孙怡凡\
json字符串
JSON.parse(字符串名字)
eval('('+字符串名字+')')
json字符串转对象方法
JSON.stringify(对象名)
.toString() Sting()
对象转字符串
var json2={ name:\"王山\
json2.showName()
调用/触发
json对象中的this指向的是整个对象
this指向
json对象/函数
var zns={}zns.common={ name:\"张三\
zns={common: {name: \"张三\
相当于
zns.name=\"你好\"
在空对象里面加一个属性和值
zns.common.show()
json命名空间
Math.PI 圆周率
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入
Math.max() 取最大值
Math.min() 最小值
Math.random() 随机数
Math
var now = new Date() 获取时间日期之前必须要先new有个Date对象
now.getFullYear() //获取年份
now.getMonth()+1 //获取月份 需要加一 获取的月份从零开始的
now.getDate() //获取天数
now.getDay() //获取星期
now.getHours() //获取小时
now.getMinutes() //获取分
now.getSeconds() //获取秒
用来表达时间的一串数字
var time = now.getTime() console.log(time) console.log(now.setFullYear(2021))
获取时间戳 将日期转成毫秒
now.setTime(1630135942368) console.log(now)
将毫秒转换成日期
时间戳
Date
for (i in obj) { //获取的属性 console.log(i) //获取的值 console.log(obj[i]) }
for in
for of直接使用会报错
for (var i of Object.keys(obj)) { console.log(i) }
获取属性下标
for (var val of Object.values(obj)) { console.log(val) }
获取值
for( var x of Object.entries(obj)){ console.log(x) }
获取属性和值
for of
对象遍历
特点 当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。 (就是a复制了b，当修改a时，b也随着a的改变而改变，原数据和复制后的数据都会改变)
直接赋值
1、slice()方法2、concat方法3、es6剩余运算符4、自己封装函数实现for in...
浅拷贝
就是b复制了a，修改a时，b不会发生变化(包括所有的子对象)。拥有了独立的内存。
1、通过JSON.parse()、JSON.stringify实现深拷贝。2、通过jQuery的extend方法实现深拷贝。3、通过递归去拷贝所有层级属性
深拷贝
深拷贝浅拷贝
json
js对象是由属性和方法组成的 万物皆可对象
对象的概念
抽象:把主要的特征 跟问题相关的特征抽出来封装:看不到里面的对象 用好表面的功能就可以了继承:遗传 从父类继承出一些方法属性 子类又有自己的特性
对象的特点
a就是属性/索引 自定义的
为arr添加一个为a的属性 值为12
arr.a=12
属性就是对象里的属性/索引
等价于var obj={ name:\"王山\" age:\"18\"}
var obj = new Object() //变量-属性 obj.name=\"王山\" obj.age=\"18\"
例子
面向对象 属性
obj.getName = function(){ console.log(obj.name) console.log(this.name) }
就是事件 可以自己定义
调用obj1.getName()obj1.getAge()
//函数-方法 obj1.getName=function(){ console.log(\"我的名字叫\"+this.name) } obj1.getAge=function(){ console.log(\"我的年龄\"+this.age) }
面向对象 方法
this指向的是函数的调用者 拥有者
this就是代表当前作用域对象的引用 如果在全局范围内this就代表window对象如果在构造函数内 就代表当前构造函数所声明的对象
面向对象的this
在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写
什么时构造函数？
在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。
为什么要使用构造函数？
构造函数执行过程
(1) 没有手动添加返回值，默认返回 this(2) 手动添加一个基本数据类型的返回值，最终还是返回 this(3) 手动添加一个复杂数据类型(对象)的返回值，最终返回该对象
构造函数的返回值
创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型；属性和方法被加入到this引用的对象中；隐式返回this对象（如果没有显性返回其他对象）
用new调用构造函数 函数内部发生的变化
https://blog.csdn.net/sinat_21742529/article/details/83659459
构造函数讲解链接
构造函数
1 创建空白的对象2 添加属性3 方法4 return 出厂
封装代码步骤
方法1 createPreson(\"张三\
方法2var obj1 = createPreson(\"张三\
调用方法
封装代码例子
创建不同的对象其中的属性方法会重新建立 消耗内存 函数识别问题 并且函数调用new 因此出现了构造函数
工厂模式 封装代码
1 替我们创建了一个空白对象2 替我们偷偷返回了对象
在 函数中添加一个new 系统会偷偷帮我们做了两件事
构造函数用new运算符调用 否则就是普通函数
构造函数和普通函数的区别
1 添加属性2 添加方法 （ 添加属性和方法都用this.属性/方法）
构造函数封装代码步骤
var obj1=new createPreson(\"张三\
构造函数例子
console.log(obj1.getName==obj2.getName)//false
函数比较
工厂模式 构造函数
什么是原型链？
使用prototype的好处是不会产生额外的内存 所有实例化后的对象都会从原型上继承这个方法，也就是需要一个子类拥有父类的某种特性(这个特性是可以覆盖的)，又可以添加自己的特性，并且不会影响父类
什么时候使用？
prototype通常来解决一个问题：对象创建比较耗费资源，比如对象创建的时候需要访问数据库，需要读取外部文件 这些比较耗费时间和内存的 如果使用原型来解决 就方便多了 当需要创建很多拥有相同属性的对象的时候就用到了prototype
原型链的好处
添加方法时this变成 函数名.prototype
添加方法
//数组类.原型prototype即class
Array.prototype.sum=function(){ var result = 0 for (var i=0;i<this.length;i++) { result+=this[i] } return result } console.log(arr1.sum())//数组一的和 console.log(arr2.sum())//数组二的和
原型数组求和
原型链 构造函数
闭包就是能够读取函数内部的变量的函数
概念
1 可以读取函数内部的变量2 可以使这些变量始终保存在内存中
用途
由于闭包会使函数中的变量被保存在内存中 内存消耗大 所以经常使用闭包会出现网页性能问题 所以不建议使用
注意事项
function f1() { var n = 999 nAdd = function() { n += 1 } function f2() { console.log(n) } return f2 }//result相当于闭包函数f2 var result = f1() result()//999 nAdd() result()//1000
闭包函数
第一种 使用call或者apply方法 将对象的构造函数绑定在子对象上
//动物 function Animal() { this.species = \"动物\
第一种方法例子
// 这个原型还可以有他自己的原型 依次类推 会形成一个链式结构 // 查找属性的时候我们先去对象里面找 如果没有就去他的原型找 如// 果还没有就去原型上的原型去找 这个操作过程委托在整个原型链上 这就是所谓的原型链
第二种方法 原型链 每一个对象都有一个prototype
//动物function Animal() { this.species = \"动物\
第二种方法例子
继承的方法
继承
(1) 创建一个新对象；(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） ；(3) 执行构造函数中的代码（为这个新对象添加属性） ；(4) 返回新对象。
作用
new的好处
new 的作用
面向对象
这两个对象具有相同的功能 但是不能共用一个方法 每new一次 系统就会创建一个内存 这两个对象各自执行各自的。所以不相等 这样会消耗内存如果想共用一个方法则需要使用原型链
1，为要执行动画或与之关联的元素添加事件函数
2，添加定时器，将单次执行时间设置短一些，达成视觉连贯效果
3，设置每次执行的代码，改变元素的状态
4，判定每次执行完，内部判定元素是否达成预设效果，如果到达效果，则内部清除定时器（完成动画）
动画步骤
理念：将动画步骤定为函数，将要执行动画的元素和目标效果的值作为实参传进函数的形参中
动画封装
当目标达成中间条件时，改变动画的参数值
变速动画
scrollTop：获取滚动条的高度（被卷曲内容的高度）
scroll
语法：getComputedStyle(dom元素)[\"要获取的属性\"]
获取css样式
动画
定义：由一个字符序列自称的搜索模式 就是定义一段好的规则 用来验证是否符合这个规则
功能：查找位置，有的话返回下标 没有返回-1
语法：字符.search(subStr)
参数：subStr 检测字符串
search()
第一种方法：var name=new RegExp('表达式内容')
第二种办法：var name=/表达式内容/属性( 常用 )
g：代表全局匹配，正则会从开始位置检索到结束的位置
i：代表不区分大小写匹配
m：代表多行匹配 只对^(以什么开头)和$(以什么结尾)
创建正则表达式
功能：检测一段字符串是否符合这个正则表达式 符合返回true，不符合返回false
语法：正则表达式.test(字符串)
test()
功能：把所有匹配的结果返回出来 返回数组
语法：字符串.match(正则表达式)
match()
概念：在全局匹配模式下，可以指定要查询的字符串执行多次匹配，每次匹配使用当前正则对象的lastindex属性值作为在目标字符串中开始查找的起始位置，lastindex属性的初始值为0，找到匹配项后lastindex的值被重置为匹配内容的下一个字符的索引位置，用来标识下次执行时的开始查找位置
\\d：全局匹配数字并返回找到的第一个数字
[ 0-9 ]：全局匹配0--9之间的数字并返回第一个找到的结果
[ a-z ]：全局匹配a--z之间的字符并返回第一个找到的结果
[ A-Z ]：全局匹配A--Z之间的字符并返回第一个找到的结果
\\w：全局匹配出现的字母、数字、单词与下划线并返回第一个找到的结果
全局匹配
配合属性g可返回出现的所有匹配的结果，找不到则返回false
定义：限定单个字符出现在中括号区间内，查找中括号之间的任意单个字符
举例：var reg=/[abc]fa/g （ afa/bfa/cfa ）
在[ ]内是取非的意思
在[ ]外是排除的意思
^限定符
限定字符
^在[ ]外面是以后面的什么字符开头
var reg=/^[a-z][0-9]\\d/ 以a--z之间的任意字母开头，0--9之间的任意一个数字，数字
边界
正则表达式
概念：在无需加载(刷新)整个网页的情况下更新部分网页及数据的技术
ajax：操作数据，网络交互(客户端向服务器端发起请求)
客户端：用户端普通的电脑（发送和接收请求（数据））
服务器：存储数据文件的电脑
配置
ajax
js阶段
前端笔记2
0 条评论
回复 删除
下一页
