JavaScript简介
JavaScript 是 Web 的编程语言。
特点：轻量级 很容易使用
JavaScript 是可插入 HTML 页面的编程代码。
js的注释
单行注释： // ctrl+/
多行注释： /**/ ctrl+shift +/
用法
HTML 中的脚本必须位于 标签之间
js如何嵌入到网页里面
1.内嵌 （在head或者body里面内嵌都是可以的 要注意代码是否可能会报错）
2.外部引入 (引入外部文件 在head或者body)w1
通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
JavaScript 会在页面加载时向 HTML 的 写文本：
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
输出
使用 window.alert() 弹出警告框。
使用 document.write() 方法只是仅仅向文档输出写内容。
使用 document.getElementById(id) 方法来从 JavaScript 访问某个 HTML 元素，将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。请使用id属性来标识html元素。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
使用 console.log() 输出变量到控制台。
语法
字面量在编程语言中，一般固定值称为字面量。
- 数字字面量可以是整数或者是小数，或者是科学计数(e)。3.14或1001或123e5
- 字符串字面量可以使用单引号或双引号。‘John Doe’ 或"John Doe"
- 表达式字面量用于计算。5 + 6
- 数组字面量[40, 100, 1, 5, 25, 10]
- 对象字面量{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
- 函数字面量function myFunction(a, b) { return a * b;}
变量
- 变量是用于存储信息的”容器“。变量是存放可变化值的量。常量存放不可变化值的量。
- JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值。
- 定义规则： var 名称=值；
- 命名规则： 以字母开头，或者$ _开头 。严格区分大小写 (驼峰 帕斯卡)；
- var 可定义任意类型的变量。
- 变量是一个名称。字面量是一个值。只定义变量 不赋值。
- 变量在没有赋值 会报错。js里面要注意在使用变量之前先定义变量。
- js可以定义多个变量，可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可。
- 声明变量：使用 var 关键词来声明变量。
var carname;变量声明之后，该变量是空的（它没有值）。
carname=“Volvo”;在声明变量时对其赋值。
声明可横跨多行。
var lastname=“Doe”,
age=30,
job=“carpenter”;
一条语句中声明的多个不可以赋同一个值。
var x,y,z=1;
x,y 为 undefined， z 为 1。 - 重新声明变量，该变量的值不会丢失。
- js里面的变量有作用域区分：1）全局变量 2）局部变量
js里面定义变量可以不写关键字，不写关键字声明的变量为全局变量。
怎么区分全局和局部？
1）根据代码块来区分作用域
2）这些概念属于相对理论 在代码块的外部叫全局（直属window） 内部的叫局部
3）颜色区分：全局是紫色 局部灰色 (webstrom)
全局变量在任何地方可以使用。
局部变量只能在当前作用域内部使用。
变量的生命周期：
全局变量生命周期 从定义开始 --当前网页关闭之后结束
局部变量的声明周期 从定义开始—当前函数执行完成结束 - 使用var 定义的变量不可删除，不使用var 声明的变量 可删除。delete m1;
数据类型
- js里面的数据类型
number 数字型 boolean 真假（true/false） string 字符串类型 undefined 未定义类型 null 空值 Object 对象型 - 检测变量的数据类型 typeof
console.log(typeof num); //number
console.log(typeof bool); //boolean
console.log(typeof str); //string
console.log(typeof not); //undefined
console.log(typeof noval); //object
console.log(typeof obj); //object
-
js里面的数据类型
1）值类型 存储在栈里面的 使用空间固定 复制的是本身 number 数字
boolean 布尔（逻辑）只能有两个值：true 或 false
string 字符串
undefined 未定义
null 对空
typeof 检测值
2）引用类型 存储在堆上的 使用空间不固定 使用指针来引用 复制该元素复制的是引用类型的指针
object 对象
array 数组
function 函数
instanceof 检测引用类型 -
字符串是存储字符的变量，字符串可以是引号中的任意文本。
-
向变量赋的值是文本时，可以使用单引号或双引号。
-
向变量赋的值是数值时，不要使用引号。如果使用引号包围数值，该值会被作为文本来处理。
函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
- 关键字： function
- 定义规则：function 名称(){}
//定义函数
function fun(){
/*
* 函数体内部写的是可执行代码
* */
console.log("该函数被调用");
}
//执行函数 函数名称()
fun();
- 常规函数也存在声明提前。console.log(fun1);//undefined 变量的声明提前
- 匿名函数 --没有名称的函数，自执行函数 。匿名函数是没有声明提前的
- 调用带参数的函数，可以发送任意多的参数，由逗号 (,) 分隔。
- 带有返回值的函数，使用 return 语句时，函数会停止执行，并返回指定的值。
- 函数的参数问题：
参数分为形参及实参（传入的值）
函数的形参是名称，隔开
//匿名函数传参
var params1=function (a,b,c,d){
console.log(a,b,c,d);
}
params1(10,"bcd",false,undefined);
//自执行函数传参
(function (a,b,c,d){
console.log(a,b,c,d);
})(1,2,3,4);
运算符
运算符 = 用于赋值
运算符 + 用于加值
- 算数运算符： + - * / % ++ –
功能是运算(数字)
自增++ 自减–
分为前置和后置 前置是先自增或者自减在运算 后置先运算在自增或者自减 指当前变量 - 赋值运算符： = += -= *= /= %=
功能是给变量赋值 - +运算符：用于把文本值或字符串变量加起来（连接起来）。要想在两个字符串之间增加空格，需要把空格插入一个字符串之中，或者把空格插入表达式中。
- 对字符串和数字进行加法运算：两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串。注意：如果把数字与字符串相加，结果将成为字符串！
比较运算符
- 比较运算符在逻辑语句中使用，以测定变量或值是否相等。可以在条件语句中使用比较运算符对值进行比较。
比较运算符 > < >= <= !=
= 等于 (赋值)
= = 等于（两边值一致类型可以不同）
= = = 绝对等于（两边值和类型都一致）（判断两边相等）
!= 不等于
!== 不绝对等于（值和类型有一个不相等，或两个都不相等） - 逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
运算符 描述 例子
&& 与 (x < 10 && y > 1) 为 true
|| 或 (x= =5 || y= =5) 为 false
! not !(x==y) 为 true - 条件运算符
基于某些条件对变量进行赋值的条件运算符
条件语句
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码。请使用小写的 if。
- if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码。
- if…else if…else 语句- 使用该语句来选择多个代码块之一来执行。
- switch 语句 - 使用该语句来选择多个代码块之一来执行。
break 跳出当前结构。
default 关键词来规定匹配不存在时做的事情：
如果条件语句后边只有一句话可以简写 ，不写{}。
循环
- for - 循环代码块一定的次数
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
//语句 1 （代码块）开始前执行
//语句 2 定义运行循环（代码块）的条件
//语句 3 在循环（代码块）已被执行之后执行
- for/in - 循环遍历对象的属性
- while - 当指定的条件为真时循环指定的代码块 。while是先判断后执行。
while (条件)
{
需要执行的代码
}
//如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。
- do/while - 同样当指定的条件为真 时循环指定的代码块。do while 是先执行在判断，至少执行一次。
do
{
需要执行的代码
}
while (条件);
- 怎么使用代码调试
1.到浏览器的控制台
2.点击sources栏
3.在当前栏位左边项目文件点击当前页面
4.想要看哪一行代码执行 在当前行之前单击 出现蓝色的锚标 在刷新页面
右边的调试按钮
第一个 为F8 为直接运行终止
第二个按钮 F10 运行下一行（遇到方法直接执行完成不会进方法）
第三个按钮为F11 和F10功能一样 （遇到方法会进方法）
5.调试完成把 定的锚标去掉
break 和 continue 语句
- break语句
用于跳出循环
break 语句（不带标签引用），只能用在循环或 switch 中。通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。 - continue 用于跳过循环中的一个迭代。
continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）。
continue 语句（带有或不带标签引用）只能用在循环中。
闭包
变量有局部变量 和全局变量。
私有变量可以用到闭包。
闭包 ：形成私有的作用域 保护私有变量的机制 让其不收外界影响。让私有变量存到内存里面。
弊端： 不建议大量使用闭包 闭包的变量存到内存里面 会导致内存泄露
JavaScript HTML DOM
dom全称是document object model (文档对象模型) , 简称dom元素
dom就是html元素。
JS获取DOM元素的方法（8种）
- 通过ID获取（getElementById）
- 通过name属性（getElementsByName）
- 通过标签名（getElementsByTagName）
- 通过类名（getElementsByClassName）
- 获取html的方法（document.documentElement）
- 获取body的方法（document.body）
- 通过选择器获取一个元素（querySelector）
- 通过选择器获取一组元素（querySelectorAll）
//四种动态获取dom元素的方法
//document.getElementsByClassName()//通过class 类名称获取元素 返回的是一个集合
//document.getElementsByName() //通过元素的name属性获取元素 返回的是一个集合
//document.getElementById() //通过元素的id获取 返回的是一个对象
//document.getElementsByTagName() //通过元素名称获取 返回的是一个集合
//5)通过选择器获取一个元素querySelector
// document.querySelector();//返回的是一个单个对象
//6).通过选择器获取一个元素querySelectorAl
//document.querySelectorAll() //返回的是一个列表
//还有两个 固定对象获取
//7) 获取body
// console.log(document.body);
//8）获取整个html
//console.log(document.documentElement);
获取dom元素的时候需要注意什么？
需要注意dom元素是否初始化（是否已经存在）。
// 使用类获取li 进行遍历
var lilist=document.getElementsByClassName("list");
console.log(lilist.length);
//使用for
for(var i=0;i<lilist.length;i++)
{
console.log(lilist[i]);
}
console.log(lilist);
//for in 遍历对象
// key 键
//根据键 去对象里面获取值
for(var key in lilist)
{
//这里可以进行过滤 元素
console.log(lilist[key]);
}
//同上 ，其他两个集合也是一样的遍历
js操作dom ：不能操作一堆 ，只能单个操作 ，不能进行隐式迭代。记住：转化为单个对象进行操作。
dom操作：
- 文本值操作 ：修改或者设置 文本
btn.innerText=“修改文本”; //操作的文本
btn.innerHTML=“修改文本”; //获取元素里面的子内容 - 样式属性操作 ：这个属性指的是元素的行内样式
btn.style.color；//行内样式的获取方式
btn.style.width=“200px”;
btn.style.backgroundColor=“pink”;
//一次性设置多个样式
btn.style=“color:red;width:100px;height:30px;line-height:30px”;
dom节点
console.log(menu.childNodes[i].nodeName);//获取节点名称
console.log(menu.childNodes[i].nodeType);//获取节点类型 标签类型
console.log(menu.childNodes[i].nodeValue);//获取节点值
console.log(menu.firstChild); //获取元素的第一个子节点
console.log(menu.firstElementChild);//获取元素的第一个子元素
console.log(menu.lastChild); //获取元素的最后一个子节点
console.log(menu.lastElementChild);//获取元素的最后一个子元素
console.log(menu.parentNode);//获取当前元素的父节点
console.log(menu.parentElement);//获取的是当前元素的父元素
toLowerCase() 大写转化为小写
toUpperCase() 小写转大写
dom事件
事件属于对象的被动行为。
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户敲击按键时
主动行为称方法 ；被动的行为称事件。
事件绑定方式：1） 普通方式 2）动态绑定方式 3）监听的方式
鼠标事件： mouseover / mouseup / mousedown / click / dbclick /mouseleave / mouseout /mousemove /mouseenter/ mousewheel（滚轮）
键盘事件：keypress/ keydown /keyup
表单事件：focus/ blur/ submit /change / input(获取用户输入事件)
浏览器事件 scroll/ load/ error /resize/ contentmenu(右键打开浏览器菜单)
剪贴版事件 cut（剪贴） / copy（复制） / paster(粘贴) /selectstart 选择事件
在js里面写事件 全部带on
dom事件的监听
addEventListener()方法，即为事件监听；可以使用removeEventListener()方法来移除事件的监听。
语法： element.addEventListener(event,function,useCapture);
其中这三个参数分别是事件的类型 监听的函数 事件的冒泡和捕获。
注意：监听的时候不要使用“on”前缀。
事件的冒泡原理是 ：由里向外进行冒泡；
事件的捕获原理是 ：由外向里执行。
事件的执行参数
event 代表事件的执行参数对象
鼠标事件输出参数是mouseevent对象
event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
clientx clienty 指的是当前点击的位置相对浏览器的坐标
layerx layery 指当前的点击位置相对元素的偏移量
offsetx offsety 指当前点的位置相对元素的偏移量
pagex pagey 当前的位置相对浏览器的坐标
screenx screeny 当前的位置相对屏幕的坐标
returnValue true/false 当前事件执行成功之后是否返回结果
srcElement target toElement 触发的目标元素
timeStamp 触发的事件 ms单位
type 触发的事件类型
which 值是ascii 鼠标事件全是1
BOM
window
1)document—>html–>head 和 body
2)history
3)location
bom 浏览器对象模型（Browser Object Model (BOM)）
window
1）window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
- window转码解码方法：
atob() 转码—解码一个 base-64 编码的字符串。
btoa() 解码—创建一个 base-64 编码的字符串。
不能直接对汉字进行转码解码
escape() 对字符串进行编码。
unescape() 对由 escape() 编码的字符串进行解码。 - getComputedStyle() 方法用于获取指定元素的 CSS 样式
- getSelection()返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
- innerheight 返回窗口的文档显示区的高度
- innerwidth 返回窗口的文档显示区的宽度
- screen 对象指屏幕尺寸
- availWidth 返回屏幕的宽度
- availHeigth 返回屏幕的高度
- documentElement(dom元素) 获取实际的宽和高使用offset
- clientheight 获取不包含边框的高
- clientwidth 获取不包含边框的宽
2）window尺寸
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
- window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5： - document.documentElement.clientHeight
- document.documentElement.clientWidth
document.body.clientHeight
document.body.clientWidth
3）其他window方法 - window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
Window Screen
- screen.availWidth - 可用的屏幕宽度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。 - screen.availHeight - 可用的屏幕高度
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
Window Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 （80 或 443）
- location.protocol 返回所使用的 web 协议（http: 或 https:）
- location.href 属性返回当前页面的 URL
- location.pathname 属性返回 URL 的路径名
- location.assign() 方法加载新的文档
- location.reload()重新加载
- location.replace()替换路径 加载页面
Window History - history.back() 与在浏览器点击后退按钮相同
- history.forward() 与在浏览器中点击向前按钮相同
- history.go(数字)go 方法里面的数字为几就代表几个路径
JavaScript 弹窗
三种消息框：警告框、确认框、提示框。
- alert() 警告框
当警告框出现后，用户需要点击确定按钮才能继续进行操作。 - prompt() 带输入框的提示框 点击确定 ，该方法的返回值是输入的值或者默认值；点击取消，则返回值为 null。
- confirm() 提示信息框 返回时true false
弹窗使用 反斜杠 + “n”(\n) 来设置换行
alert(“Hello\nHow are you?”);
Hello
How are you?
JavaScript 计时事件 - setInterval() - 间隔指定的毫秒数不停地执行指定的代码
setInterval() 第一个参数是函数（function），第二个参数间隔的毫秒数.
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。创建计时方法时必须使用全局变量。 - setTimeout() - 在指定的毫秒数后执行指定代码。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串，第二个参数指示从当前起多少毫秒后执行第一个参数。
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。必须在创建超时方法中（setTimeout）使用全局变量。
一次性计时器 ： setTimeout 延迟多长时间去执行 返回值是数字
JavaScript Cookie
Cookie 用于存储 web 页面的用户信息。
document.cookie 属性来创建 、读取、及删除 cookie。
懒加载
懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成同一张图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
懒加载的原理是什么？
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置。
json
json 是JavaScript 对象表示法 是存储和交换文本信息的语法
后端的接口返回给前端的数据格式-- json
json类型是 对象型 数组型
json对象可以包含多个 key/value（键/值）对
json数据的书写格式是：名称/值对
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值。
//字符串json 转化为json 对象
// json对象转化为json字符串
var str=JSON.stringify(list);
console.log(JSON.parse(str));
字符串
JavaScript 字符串用于存储和处理文本。
length 属性返回字符串的长度
字符串类型和数字类型相互转化
如果待转化的值是前数字后字符串 也能转化出其中的数字
parseFloat() 解析一个字符串并返回一个浮点数
parseInt() 解析一个字符串并返回一个整数
数字类型转字符串类型
toString() 把数字转换为字符串，使用指定的基数
在字符串检测字符的方法
- indexOf() 返回某个指定的字符串值在字符串中首次出现的位置
indexOf用法有两种（从左-右查找）
1)一个参数
2)两个参数：1要找的字符 2.其实查找的索引位置
如果存在 ，返回该字符的索引位置； 反之 -1
-lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
lastindexOf 从右-左 功能同上
查找字符方法
search() 方法搜索特定值的字符串，并返回匹配的位置：
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）
拼接字符的方法
1.可以使用+ 进行字符串拼接
2.使用concat()连接两个或多个字符串
字符的替换方法
1.要替换的字符
2.替换的值
replace() 直接使用智能替换字符串里面 相同字符中的一个。 replace() 方法不会改变调用它的字符串，它返回的是新字符串。
提取字符串字符
charAt() 方法返回字符串中指定下标（位置）的字符串
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码
ascii 值和 字符之间的相互转化
charCodeAt 参数当前字符的索引 字符转化为ascii
fromCharCode ascii 值转化为字符
字符串转换为数组
split() 将字符串转换为数组，参数是以什么符号隔开
split(",");// 用逗号分隔
字符串里面的街区方法
- slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
slice(start, end) 参数是索引 取小不取大 - substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。
substring(start, end) 参数是索引 取小不取大 - substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。
substr(start, length) 参数是起始索引 + 截取的长度
字符串去空的方法
trim() 默认只能去除一个空格 ，该方法无参数。如果要全去除 使用正则。
大小写字符串转化
toUpperCase() 把字符串转换为大写
toLowerCase() 把字符串转换为小写
js内置对象-String
String 对象用于处理文本（字符串）
String 对象创建方法： new String()
instanceof 这个方法其实是检测类对象的构造函数（函数）
js内置对象-Array
Array 对象用于在变量中存储多个值
使用new 创建数组
length 设置或返回数组元素的个数
建立完数组之后如何往数组里面赋值
在对象的括号里面直接写的值 （ 注意参数的个数）
写一个值 指数组的长度
写多个值 才是数组里面的值
数组的取值 数组里面存储值 是按照 key：value
对象方法
-
join() 把数组的所有元素放入一个字符串。参数是符号
-
reverse() 反转数组的元素顺序
数组翻转的方法 翻转之后对原数组有影响 -
数组的截取方法 slice （） splice（）
1）slice() 选取数组的的一部分，并返回一个新数组
slice 截取数组 返回截取的值 参数是索引 取小不取大 对原数组没有影响
2）splice() 从数组中添加或删除元素
splice 截取数组 参数 起始索引 截取几个长度 返回值是截取的结果 对原数组有影响 -
concat 拼接数组 连接两个或更多的数组，并返回结果
-
将数组里面某一个拷贝到另一个位置
copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中
copyWhithin(target, start, end)
target 放的位置 start 起始复制位置 end 终止复制位置 -
entries()方法 返回的是数组的迭代器（可迭代对象）
-
every() 检测数组里面的值是否都满足条件，检测数组里面的每一位是否满足条件 满足true 不满足就是false
-
fill()使用固定值来填充数组中的某一位
fill()方法的参数 1.要填充的值 2.start 3.end
如果只写一个参数 ，默认全部填充。 -
数组的过滤
filter() 检测数值元素，并返回符合条件所有元素的数组
filter 参数 1.必须 回调函数2、可选 传递给回调函数的this ，如果不写 this undefine -
find（）根据条件找满足条件的数组元素
检测每一个元素值 ，遇到满足条件的一个值 ，直接返回 ，不会再执行 -
findIndex（）根据条件找返回满足条件的第一个元素值的索引， 返回值是满足条件的索引
-
数组的遍历
- for
- for in
- forEach 数组每个元素都执行一次回调函数
-
includes()检测数组里面是否包涵某个值 true false
-
indexOf 检测数组里面的某个值 返回索引
找不到该值 返回-1 和字符串的indexOf 方法功能一致
lastindexOf 也一致 -
检测当前的对象是否是数组
- isArray() 判断对象是否为数组 是数组类对象的方法
- t2.isArray() 报错 isArray is not a function
- 返回值 true false
-
map()通过指定函数处理数组的每个元素，并返回处理后的数组
映射方法map 将一个数组映射为一个新的数组
map 功能写一半就是数组遍历 -
累计方法
- totle是数组的第一位
- reduce 从左-右累计
- reduceRight 从右-左 累计
-
删除数组里面元素
- pop 删除数组中的最后一位 该方法返回值是删除的值
- shift 删除数组中的第一个元素 该方法返回的是删除的值
-
给数组里面添加值
- push 追加到数组之后
- unshift 追加到数组之前
-
sort() 对数组的元素进行排序
- sort 默认排序方法是从小到大排序
- sort 方法也可以调整排序方式底层源码是根据值差 -1 1 排序的
-
some() 检测数组元素中是否有元素符合指定条件
返回值是true false
Math（算数） 对象
Math（算数）对象的作用是：执行常见的算数任务
- 取绝对值
console.log(Math.abs(-1)); - 弧度= 角度 * Math.PI / 180;
- 角度 = 弧度 * 180 / Math.PI;参数 不能直接写角度 转化为弧度
- 向上或向下取整
console.log(Math.floor(4.9));
console.log(Math.ceil(4.1)); - 四舍五入
console.log(Math.round(4.4)); - 返回最大最小值的方法
console.log(Math.max(1, 2, 3, 4));
console.log(Math.min(1, 2, 3, 4)); - 随机数方法 0-1 取小不取大
console.log(Math.random()); - 幂方法
console.log(Math.pow(2, 3)); - 开平方方法
console.log(Math.sqrt(4)); - call apply 替换对象 传递值
call 和 apply 传递参数的区别
call 传递参数列表为序列
apply 传递参数列表为集合
不想替换原方法的this 可以null
Date（日期） 对象
日期对象用于处理日期和时间。
创建 Date 对象： new Date()
Date方法 set** get** to*** 转化时间的
var nowtime = new Date();
nowtime.setDate(12); //设置日期
//nowtime.setFullYear(2021,2,12); //使用该方法设置的时候注意月 月份+1
//设置时间除了set
//var gotime=new Date(2020,5,8,15,0,0);//这种设置 跟你设置的月少1
nowtime.setYear(2021);//设置年的
nowtime.setMonth(2);//设置月 +1
nowtime.setHours(20);//设置小时
nowtime.setMinutes(59);//设置分钟
nowtime.setSeconds(59);//设置秒的
nowtime.setMilliseconds(999);//设置毫秒的
console.log(nowtime);
//将时间对象转化 时间格式
console.log(nowtime.toDateString());//Sat Jun 12 2021
console.log(nowtime.toISOString());//获取的时间是iso时间 中国时间-8时差
console.log(nowtime.toLocaleDateString()); //2021/3/12
console.log(nowtime.toLocaleString());//2021/3/12 下午8:59:59
console.log(nowtime.toLocaleTimeString());//下午8:59:59
console.log(nowtime.toTimeString());//20:59:59 GMT+0800 (中国标准时间)
console.log(nowtime.toUTCString());//Fri, 12 Mar 2021 12:59:59 GMT 也是减8个时差
var stime = new Date();
console.log(stime.getFullYear());//2020
console.log(stime.getYear());//120 1900 +120 2020 从1900年开始计算的
console.log(stime.getMonth());//5 使用的时候+1
console.log(stime.getDate());//日
console.log(stime.getDay());//0 周几
console.log(stime.getHours());//小时
console.log(stime.getMinutes());//分钟
console.log(stime.getSeconds());//秒
console.log(stime.getMilliseconds());//毫秒
console.log(stime.getTime());//获取的是当前时间到1970年1月1日的总毫秒数
//下面写字符串的格式时直接写当前设置时间
var gotime = new Date("2020-6-8 15:00:00");
正则表达式
正则表达式代码 regex、regexp或RE
正则的作用 ：测试文本 、匹配文本的
正则表达式可用于所有文本搜索和文本替换的操作
- 正则的写法 ：
/正则表达式主体/修饰符(可选)
var patt = /runoob/i；
i 忽略大小
g 全局查找
m 执行多行匹配
\1 反向引用 前面字表达式的内容 - 正则验证方式两种：
- 一个是对象验证 regexp对象
- test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false
- exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
- 一个是字符串验证 match 验证 如果匹配成功 返回匹配值 如果匹配不成功 返回null
- 在js种， 正则表达式通常用于两个字符串方法 : search() 和 replace()
- search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
- replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
- 在js种， 正则表达式通常用于两个字符串方法 : search() 和 replace()
- 一个是对象验证 regexp对象
* 非打印字符
* \cx 匹配键盘的 c 代表 A-Z a-z 子符
* \f 匹配换页符
* \n 匹配换行符
* \r 匹配回车符
* \t 匹配制表符
* \s 匹配的是任何空白字符 等价[\f\r\n\v\t]
* \S 匹配任何非空白字符 等价[^\f\r\t\n\v]
* 特殊字符 (具有特殊含义的字符 要查特殊字符 就得转义)
* $ 匹配表达式的结尾 如果套匹配$符号 \$
* () 标记子表达式的开始和结尾 如果要匹配（） \( \)
* * 指匹配前面的子表达式 0次或者多次 如果要匹配* \*
* + 指匹配前面的字表达式 1次或者多次 要匹配+ \+
* 。 匹配除\n 之外的任何单字符 匹配. \.
* [] 匹配中括号的结束和开始 匹配[ \[
* ? 匹配前面的子表达式 0次或者1次 匹配问号 \?
* \ 匹配一些转义或者单字符 或者原义字符 匹配\ \\
* ^ 输入字符串的开始位置 在中括号中使用表示非 匹配自身 \^
* {} 表示限定表达式的开始和结束 匹配{} \{
* | 或者 匹配| \|
* 限定符
* * 匹配子表达式0次或者多次
* + 匹配子表达式1次或者多次
* ？ 匹配子表达式0次或者1次
* {n} n代表非负整数 匹配前面的表达式n次
* {n,} n代表非负整数 匹配前面的子表达式n次或者多次
* {n,m} n,m代表非负整数 匹配前面的子表达式n次或者m次
* 定位符
* ^ 字符串表达式的开始
* $ 字符串表达式的结尾
* \b 匹配单词的边界 匹配的是字与空格间的位置
* \B 匹配的是非单词边界
* \d 匹配的是数字字符 等价于[0-9]
* \D 匹配的是非数字 等价于[^0-9]
* \w 匹配的是 字母 数字 下划线 等价于 [A-Za-z0-9_]
* \W 匹配的是 非字母数字下划线 等价于 [^A-Za-z0-9]
对象
JavaScript 对象是拥有属性和方法的数据。
JavaScript 对象是变量的容器。
对象也是一个变量，但对象可以包含多个值（多个变量）。
对象概念—比较简单的话 世间万物都是对象。
对象具有三大特征：继承 封装 多态。
JavaScript 提供多个内建对象，接触过的对象String Array Math Date 这几个对象都是js自带的对象。
现在开发里面 java 前端 C# php 面向对象开发（简单）。
对象只是一种特殊的数据，对象具有属性和方法。
如何自己定义对象?
//使用new关键字 创建一个新的对象 对象都是引用类型
var person = new Object();
//设置属性
person.name = "张三";
person.age = 8;
//设置对象的方法
person.eat = function () {
return this.name + "吃饭";
}
console.log(person);
//使用的对象的属性和方法
console.log(person.name);
//console.log(person.eat());
console.log(person.eat());
//简单版定义对象
var cat = {
name: "小花",
age: 2,
sex: "母",
eat: function () {
return this.name + "吃鱼";
}
};
console.log(cat);
/*
* 这个是第三种创建对象的方式 里面涉及到继承
* Object.create
* 参数写成 null 无_proto_属性
* 参数如果写成一个对象 就是当前对象 的_proto_ 属性指向参数对象
* */
/* var dog=Object.create(null);
var dog=Object.create({});
console.log(dog);*/
在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）。
概括js里面的this 形态 1.this指向window 2.事件的this 指向当前事件的执行对象 3.自定义对象里面的this 指向当前对象。
JavaScript for…in 循环遍历对象的属性。for…in 循环中的代码块将针对每个属性执行一次。
移动端触屏
touch三种状态 start move end
触屏的坐标点在 e参数上面
如何使用touch？
- 绑定事件：element.addEventListener(‘touchstart’,function () { });
- 事件对象：
TouchList------触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合
changedTouches 改变后的触摸点集合
targetTouches 当前元素的触发点集合
touches 页面上所有触发点集合 - 触摸点集合在每个事件触发的时候会不会去记录触摸
changedTouches 每个事件都会记录
targetTouches，touches 在离开屏幕的时候无法记录触摸点
分析滑动实现的原理：
- 让触摸的元素随着手指的滑动做位置的改变（需要当前手指的坐标）
- 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
clientX clientY 基于浏览器窗口（视口）
pageX pageY 基于页面（视口）
screenX screenY 基于屏幕
事件类型：
touchstart : 触摸开始（手指放在触摸屏上）
touchmove : 拖动（手指在触摸屏上移动）
touchend : 触摸结束（手指从触摸屏上移开）
touchenter ：移动的手指进入一个dom元素
touchleave ：移动的手指离开一个dom元素
touchcancel：是在拖动中断时候触发
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
