千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip
JS的三大组成？
1. ECMAScript
基本的语法：变量，数据类型，if，for，函数， 对象，数组 ，String，Math，Date
1. 基本数据类型的种类： 数值类型 字符串类型 布尔类型 .空类型 .未类型
2. 类型转换：
转数字类型（Number(x),parseInt(x),parseFloat(x)），
转字符串类型(String(x), x.toString())，
转布尔(Boolean(x))
0 NaN undefined null false '' 转false
3. 检测基本数据类型的方法 ： typeof(n)
4. 检测是否是非数字： isNaN(x)
5. == 和 === 的区别？
==判断等号前后值是否相等 ==只比较值，不比类型
===判断等号前后值和数据类型是否都相同 === 即比较值，又比类型
6. ++a和a++的区别？
++a:a先+1，再操作
a++：先操作，再a+1
分支语句： if语句和switch语句
if(条件表达式){}
switch(key){
case "常量"
语句体；
break；
...
default
break;
}
循环语句： for和while的区别？
for循环多用于循环次数明确的循环，while循环循环次数不明确
break和contiue：
break终止本层循环，不再循环
contiue终止本次循环，继续下一次循环
函数：
1. 函数的定义方式有几种？
声明式定义函数 （function fn(){}）
赋值式定义函数 (var fn = function(){})
区别：声明式定义函数 调用可以在函数的上面或下面
赋值式定义函数 调用的时候只能函数的下面
2. return的作用：
1. 终止函数的执行
2. 返回函数的计算结果
3. 一次只能带出来一个值
4. 写在函数的最底部，尽量不要写在循环内
5. 任何函数都有return，
3. 参数：
作用域：
局部变量和全局变量的区别：
1. 定义位置：
全局：script内部，函数外部
局部：函数内部，函数的参数上
2. 生效范围:
全局：任何位置都可以访问
局部：只能在定义的函数内部访问，外部访问不到
3. 生命周期：
全局变量：打开页面即产生，关闭页面即销毁
局部变量：调用函数就产生，调用完毕就销毁
function move(){
var timer = null;
clearInterval(timer);
timer = setInterval(function(){},100)
}
预解析：
js引擎在执行js代码时，先把声明部分提升当前作用域最顶端，然后代码依次从上向下执行。提升：变量提升（var a）和函数提升(function fn(){})
对象：
增： obj.属性名= "属性值" obj["属性名"]= "属性值 " obj中不存在属性名就是增 var obj = {} obj.username = "张三" ele.timer =1
改： obj.属性名= "属性值" obj["属性名"]= "属性值 " obj中存在属性名就是改
删除： delete obj.属性名
查看： console.log(obj.属性名) console.log(obj['属性名'])
对象的遍历：
var obj = {width:100,height:100,left:100}
setInterval(function(){
for(let key in obj){
1. 获取属性当前所在的位置
var oattr = parseInt(window.getComputedStyle(oDiv)[key]); //
2.
oattr+= 5;
3.
oDiv.style[key] = oattr+"px"
}
},15)
键的唯一性： 去重
访问对象中不存在的键 结果为 undefined
数组 ，
改变原数组：
push===arr.push(元素)，数组尾部增加元素，返回增加后数组的长度
pop====arr.pop(元素)，驻足尾部删除一个元素，返回被删除的元素
unshift====arr.unshift(元素)，数组头部删除一个元素，返回被删除的元素
shift====arr.shift(元素)，数组头部增加元素，返回增加后数组长度
splice====arr.splice(i,n,元素1)，从下标为i的元素开始删除n个元素，并插入元素1，以数组形式返回被删除的元素
sort=====arr.sort(),根据ASCII表进行排序，返回排序后的函数
=====arr.sort(function(a,b){return a-b})
a-b=====从小到大排列
b-a=====从大到小排列
reverse===arr.reverse()翻转,返回翻转后的数组
不改变数组：
concat()=====arr.concat(arr1),拼接数组，返回拼接好的数组
indexOf()=====arr.indexOf(元素)，根据元素从前往后查找元素首次出现对应的下标，找到了返回下标，找不到返回-1
lastIndexOf()====arr.lastIndexOf(元素)，根据元素从后往前查找元素首次出现对应的下标，找到了返回下标，找不到返回-1
join("=")====arr.join("以符号")，将数组以操作符号形式拼接成字符串，返回拼接好的字符串
slice(开始下标,结束下标)====arr.slice(i,n)从下标为i的元素开始截取，截取到n停止，并不包含n，返回截取出的数据
es5新增的：
map(function(item,index){})，映射，返回映射后的新数组
filter(function(item,index){})，过滤，返回过滤后的新数组
reduce(function(sum,item,index){},0)，遍历数组求和，返回和
some(function(item,index){})，数组中只要有一个元素满足条件就返回true，都不满足返回false
every(function(item,index){})，数组中所有元素满足条件返回true，有一个不满足条件返回false
forEach()，等同于for循环，循环遍历，返回遍历后的数组
es6新增的：
find()查找第一个满足条件的元素，返回查找到的元素
findIndex()查找第一个满足条件的元素的下标，返回元素下标
封装函数，判断任意数组中是否包含n，返回true和false、
String，
1. concat()
2. indexOf()
3. lastIndexOf()
4. slice(开始下标,结束下标)
5. substring(开始下标,结束下标)
6. substr(开始下标,长度)
7. toUpperCase()转大写
7. toLowerCase()转小写
7. trim()去除字符串前后空格
8。 split(",")
8。 replace("旧字符","新字符")
9. str.charAt(下标)
9. str.charCodeAt(下标)
Math，
Math.max()最大值
Math.min(m，n)最小值
Math.sqrt(b)对b开根号
Math.pow(m,n)m的n次方
Math.random()随机数
Math.round(n)四舍五入
Math.abs(n)取绝对值
Math.floor(n)向下取整
Math.ceil(n)向上取整
Date:
var date = new Date()
var date = new Date("2023/09/09")
2. BOM
window对象的属性和方法
window.innerWidth 浏览器可视宽（包含滚动条）
window.innerHeight 浏览器可视高（包含滚动条）
window.location.href = '' 跳转到目标路径
window.location.href 当前页面路径
window.location.reload() 刷新
window.history.go(1) 前进一个页面
window.history.go(-1) 后退一个页面
window.history.go(0) 刷新页面
window.localStroage.setItem("key","value") 设置数据库内容 =========== 值要求是一个字符串类型
window.localStroage.getItem("key") 从数据库获取
window.localStroage.removeItem("key") 从数据库删除
window.localStroage.clear() 清除数据库数据
window.alert() 弹出框
window.confirm() 确认框
window.prompt()
window.open('url','_blank')
window.open('url','_blank','width:300px;height:300px')
window.close()
window.setInterval()
window.setTimeout()
window.onscroll = function(){}
window.onresize = function(){}
window.onload = function(){}
3. DOM：
DOM上: 获取元素
操作元素：
内容：
获取内容: ele.innerHTML（获取所有元素）
ele.innerText（获取文本）
ele.value（表单元素获取内容）
设置内容: ele.innerHTML= ele.innerText= ele.value=
样式：
获取样式：
window.getComputedStyle(ele).属性名
window.getComputedStyle(ele)['属性名']
var x = '属性名' window.getComputedStyle(ele)[x]
设置样式： ele.style.属性名= '' ele.className ='' ele.classList.add("")
属性:
固有属性的设置:ele.属性名 = ‘’
固有属性的获取： ele.属性名
自定义属性的设置: ele.setAttribute("属性名","属性值")
自定义属性的获取：ele.getAttribute("属性名")
h5属性： ele.dataset.属性名= 值 ele.dataset.属性名
行内显示方式 data-属性名=属性值
DOM下：
节点：
元素节点
注释节点
文本节点
属性节点
节点的遍历： ele.firstChild ele的第一个节点 ele.nextSibling ele的下一个元素
元素节点的遍历： ele.firstElementChild ele的第一个元素节点
ele.nextElementSibling ele的下一个元素节点
ele.previousElementSibling ele的上一个元素
ele.children ele的所有元素
节点的操作：
1. document.createElement("标签名") 创建节点
2. 追加 ： 父节点.appendChild(子节点)
3. 插入 父节点.insertBefore(新旧点,谁的前面)
4. 删除 节点.remove()删除自身 父节点.removeChild(子节点)删除父节点下的子节点
5. 克隆 节点.cloneNode(true、false) true：克隆节点所有内容，false：克隆节点本身
事件上:
1. 事件的三要素
事件源，事件类型，事件处理函数
2. 事件的绑定：DOM0 DOM2 DOM0的缺点
3. 事件的解绑：ele.onclick = null ele.removeEventListener("事件类型",fn,true)
4. 事件类型:
window的三个事件
表单事件： onfocus onblur onchange oninput onsubmit onreset
鼠标事件： oncontextmenu， 鼠标右击
mouseover（移入到子元素上会触发父元素的移入事件
mouseenter（移入到子元素上不会触发父元素的移入事件）
onmousedown 按下
onmousemove 移动
onmouseup 抬起
键盘事件： keydown 任意键盘按下
keypress 功能键
keyup 键盘抬起
5. 事件对象：
事件发生时，事件对象上记录了一系列跟该事件的相关信息
鼠标事件对象的属性： e.clientX 相对于浏览器可视窗口的X坐标 e.pageX 相对于文档的X坐标 e.offsetX 相对于触发事件事件源的X坐标
键盘事件对象的属性： e.keyCode 数字型键码 e.ctrlKey 返回布尔值，同时按下ctrl和其他任意键返回true，其他返回false
ele.onclick = function(e){
e.clientX
e.pageX
e.offsetX = e.clientX - oDiv.offsetLeft
}
oIpt.onkeyup = function(){
e.keyCode
e.ctrlKey 返回一个布尔值 按下ctrl的同时还按下了其他的键
}
e.stopPropagation() ： 阻止冒泡
e.preventDefault()： 阻止默认行为
事件下:
事件流(事件传播)：
ie支持 事件冒泡： 事件发生时，执行顺序从具体触发元素开始沿着结构父级向上传播到DOM的最顶级元素
网景支持 事件捕获： 事件发生时，执行顺序从DOM的最顶级元素开始沿着结构父级向下传播到具体触发元素
w3c: 先捕获，目标，冒泡
如何阻止冒泡： e.stopPropagation() ： 阻止冒泡
如何阻止默认行为： e.preventDefault()
DOM0之支持冒泡
DOM2支持冒泡，也支持捕获
ele.addEventListener("", function(){}, true)捕获
ele.addEventListener("", function(){}, false)冒泡
事件委托： 利用事件冒泡，将原本绑定在子元素上事件委托给父元素，使用e.target来表示具体点击的元素
好处：减少绑定次数，提高系统性能，新增的子元素会自动获取父元素上所有的事件
"zahngsan" 普通字符串
'{"username":"zahngsan"}' JSON字符串 JSON.parse(obj) 转对象 {username:"zahngsan"}
'[{"username":"zahngsan"},{"username":"zahngsan"}]' JSON字符串 JSON.parse(obj) 转数组对象 [{"username":"zahngsan"},{"username":"zahngsan"}]
var obj = {name:"zs"}
JSON.stringify(obj) ==== '{"name":"zs"}'
localStroage.setItem("key","username")
var obj = {name:"zs"}
localStroage.setItem("key", JSON.stringify(obj) )
ES6新增的语法：
1.定义变量的关键字
定义变量的语法：let，var
区别：
1.是否支持同一作用域变量同名 var支持，let不支持
2.是否支持预解析 var支持，let不支持预解析
3.是否挂载在window上 var支持，let不支持
4.是否存在暂时性死区（定义之前的区域是死区，不能在这个死区中操作）var没有死区，let有死区
5.是否存在块级作用域 let存在，var不存在
let定义的变量只能在块级作用域里面访问，外部访问不到
定义常量的语法： const 常量名=值；
常量：定义完毕之后不能被更改
const和let的共同点：
1.不支持同一作用域常量/变量同名
2.不支持预解析
3.不会挂载在window对象上
4.存在暂时性死区
5.存在块级作用域
不同点：
1.let定义的变量值，值能被修改。const定义的常量值，值不能被修改
2.let定义变量时，可以先申明，后赋值。const定义常量时，必须声明即赋值
2.箭头函数：是对匿名函数的一些改造
var fn=function（）{}========var fn=（）=>{}
1.箭头函数的参数只且只有一个参数时，（）可以省去
2.函数体只有一行代码时{}可以省
3.只有一行代码和return，需要把{}和return同时省
4.箭头函数中不绑定this，他的this指向的是该箭头函数上一级函数所在作用域的this
3.字符串：模板字符串
includes（判断字符串是否包含某个字符或小字符串，返回布尔值），
repeat（让字符串重复n次，返回重复后的字符串），
startsWith，endsWith（判断是否以什么开始，以什么结束，返回布尔值）
4数组和对象：解构赋值
将数组或对象中需要的元素或键快速从数组或对象中解构出来
对象可以给对象的键名重命名
document.onclick=function(e){
var{clientX,clientY}=e
console.log(clientX);
console.log(clientY);
}
5.map集合set集合
set集合：一种类似于数组的数据结构，会将元素自动去重
定义语法：var set=new set{[1,2,3,4,3,2,1,3,4,7,6]}
map集合：一种类似于对象的数据结构
定义的语法：var map=new Map（）
添加：map.set（"key","value")
6.for。。。of
可以遍历map集合，item是数组形式['key','value']
for...of与for...in的区别：
1.对于数组的遍历，两个都可以,for...of遍历数组的元素，for...in遍历数组的下标，
2.对于对象遍历，只能for...in遍历
7class类
8.函数：默认参数
用户没有传递实参时，使用的是默认参数，传递了参数使用传递的参数
9.数组中find和findIndex
10.模块化开发
11.扩展运算符：...
1。数组元素，对象元素的展开
var arr=[1,2,3,4]
consule.loag(...arr)
2.合并数组，合并对象
3.将伪数组转化为数组
4.将函数的实参合并成数组
function getSum（...arge）{数组形式的实参
console.log(args)
}
// 01-es6中新增了哪些内容
// 1. 定义变量的关键字
// 2. 函数： 箭头函数
// 3. 字符串：模版字符串
// 4. 数组和对象： 解构赋值
// 5. map集合set集合
// 6. for...of
// 7. class类
// 8. 函数: 默认参数
// 9. 数组中：find 和findIndex()
// 10. 模块化开发
// 02-基本数据类型和引用数据类型的区别
// 基本数据类型：Number。String。Boolean。Null，Undefined
// 引用数据类型： function Object、Array、Math、Date等
// 相同点： 变量名字都在栈内存存储
// 不同点：
// 1. 基本数据类型的变量存储的就是一个值
// 引用数据类型的变量存储的是一个地址值，
// 这个地址值在堆内存中是有一个对应的地址
// 2. 基本数据类型的变量存储的值 在栈内存中存储
// 引用数据类型的变量存储的值 在堆内存中存储
// 、
// 3. 基本数据类型的值和值之间相互不影响
// 引用数据类型和引用数据类型 在公用同一个地址的情况下，
// 其中一个的值发生变化，另外一个也跟着变
