作用域
- 全局作用域
- 局部作用域（函数里）也称函数作用域
- 块级作用域 {}包裹的 例如
if for括号（）也算
变量
- 全局变量 谁都能用，在函数内也可以
- 局部变量，只能在该函数内用，如果这个函数嵌套了子函数，那么父函数定义的变量，子函数也能用，不能颠倒，父亲的钱就是儿子的钱，儿子的钱不是父亲的钱
- 块级变量 （）{} 只能在{}生效
函数作用域作用
- 隔离变量，不同作用域下同名变量不会有冲突
- 变量有一个坑，特殊情况
- 如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
function fn(){ num = 10 } console.log(num)// 10 // 函数里面的形参是局部变量
作用域链：就近原则
//具名函数: function fn(){ // fn 是函数名 } //匿名函数 let sum = function(){ // sum 不是函数名，只是一个变量 }
立即执行函数
立即执行，无需调用 避免全局变量之间的污染
//写法一： function(形参){ })(实参) function fn(形参){ //可写函数名，可不写 })(实参) //写法二： (function(形参){ }(实参))
多个立即执行函数必须加结束符，否则报错
(function(){ console.log(111) })()； (function(){ console.log(222) })()；
当函数没有设置形参，而调用时传递了实参，会在函数内默认用arguments这个伪数组来存储实参，说他是伪数组是因为没有 pop push等方法，但是有length属性
原生js
document.querySelector('css选择器') 返回匹配的第一个元素 得到的都是一个DOM对象 document.querySelectorAll('css选择器') 返回所有匹配的元素，放在一个伪数组里
let box = document.querySelector('div') box.className = 'active' // 原生js增加类，active 是类名但是会覆盖之前的类，当要修改很多样式时，可以将之前的类也写在=‘’里面
通过classList操作类控制CSS
为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名语法:
- 追加一个类
元素. classList.add('类名') - 删除一个类
元素.classList.remove('类名') - 切换一个类
元素. classList.toggle('类名')
定时器--间歇函数
- 返回值
intervalID是一个非零数值，用来标识通过setInterval()创建的定时器，这个值可以用来作为clearInterval()的参数来清除对应的定时器。 - 一般let 一个变量来存储返回值，方便后续清除定时器 //
clearInterval（存储返回值的变量）
开启定时器
//写法一：函数代码写在里面 setInterval（function（）{ console.log('你好啊') }，1000）//每间隔1s ,就会调用这个函数一次 //写法二：在外面定义一个函数，在setInterval（函数名，1000），只写函数名，不写（），因为一写就是调用，会立即执行，定时器就失去作用 function show（）{ console.log('你好啊') } setInterval（show，1000）
定时器--延迟函数
let qq = setTimeout（function（ console.log(111) ）{ }10000） // 会在10s后调用这个函数，只会执行一次 //清除延时 clearTimeout（qq）
实例化时间对象
new Date() //获取当前本地时间 let operateTime = new Date().toLocaleString()
时间格式化
<div> {{item.date | format('yyyy-MM-dd hh-mm-ss')}} </div> Vue.filter('format',function(value,arg){ function dateFormat(date,format){ if(typeof date === "string"){ var mts = date.match(/(\/Date\((\d+)\)\/)/); if(mts && mts.length >= 3){ date = parseInt(mts[2]); } } date = new Date(date); if(!date || date.toUTCString() == "Tnvalid Date") { return ""; } var map = { "M":date.getMonth() + 1, // 月份 “d”：date.getDate(), // 日 “h”：date.getHours(), // 小时 “m”：date.getMinutes(), // 分 “s”：date.getSeconds(), // 秒 “q”：Math.floor((date.getMonth() + 3) / 3), // 季度 “S”：date.getMilliseconds(), // 毫秒 }； format = format.replace(/([yMdhmsqS])+/g,function(all,t){ var v = map[t]; if(v !== undefined) { if(all.length > 1) { v = '0' + v; v = v.substr(v.length - 2); } return v; }else if (t == 'y'){ return (date.getFullYear() + ' ').substr(4 - all.length); } return all; }); return format; } })
判断类型
instanceof
- 只能判断对象的具体类型（判断对象里面的属性和方法）
- 其中instance 是实例 例子的意思
- 能用===判断类型的只有两种
null undefined，因为这两个类型只有一个值
typeof
- 返回数据类型的字符串表达式
- typeof 判断不了
null 与 object，object与array - 可以判断
undefined /字符串/数值/Boolean/function - null 和undefined 没有
toString()方法 - undefined是变量定义了但未赋值
- null 是
var a = null定义赋值了，值为null - 初始赋值为 null，表明将要赋值为变量
- 结束前，赋值为null,是为了让对象成为垃圾对象，被垃圾回收器回收
console.log(typeof null) // 'object'
- 数据类型分为 基本类型 和 对象类型
- 变量类型分为 基本类型和引用类型（变量内存值的类型）
- 基本类型：保存的就是基本类型的数据
- 引用类型：保存的是地址值
var c = {}, c 保存的是这个对象的地址值，c准确的说是引用类型，{}这个数据，也是对象c
正则表达式
- 设定规则
- 进行检测匹配
let reg = /前端/ let str = '我要学前端'
检测方法一：reg.test(str)
- 判断是否有符合规则的字符串
- 要么是true 要么是false
检测方法二：reg.exec(str)
- 检索(查找)是否有符合规则的字符串 找到返回数组 否则返回null
- 普通字符：数字和英文字母
- 元字符：
[a-z] ,[0-9]// 相当于abcdefg......xyz 规定用户只能输入0-9 - 边界符
^ 以什么开头
console.log(/^哈/.test( '二哈')) // false console.log(/^哈/.test('我开心的哈哈大笑')) //faLse
& 以什么结尾
// 当 ^& 一起用时，表示精确查找 /^哈$/ 被查找的字符串只能是哈 console.log(/^哈$/.test('我开心的哈哈大笑")) // false console.log(/^哈$/.test('哈哈')) // false console.log(/^哈$/.test('哈'))/ /true 精确匹配
- 量词
{n,m}只能出现n到m次 - 字符类
[ ] - 连字符 - 表示一个范围
[a-z] ,[0-9] [a-zA-Z]只选其中一个
constructor 构造函数
- 所有在class里面的函数都不用写
function //constructor(){}是用来接收new实例化时传递的参数
// 创建类 class class Star { constructor(uname,age){ this.uname = uname； this.age = age； } sing（）{ console.log("我唱歌") } }
- 多个函数方法之间，不需要逗号分隔
// 利用类创建对象 new let dh = new Star('刘德华'，18)
- in 运算符 ，检查某个属性是否在对象中，返回true 和 false
console.log("age" in ldh)// true
- 基本数据类型变量在栈内存中，保存的就是值，引用数据类型保存的是内存地址
获取元素子节点
元素.getElementsByTagName()元素.childNodes子节点不是子元素，子节点有空白childNodes会返回包括文本节点在内的所有的节点，标签间的空白（换行）也当做是文本节点，但是在IE8及以下版本不会将空白计算到文本节点中元素.firstChild子节点不是子元素，子节点有空白文本节点元素.lastChild子节点不是子元素，子节点有空白文本节点
子元素
- 元素.children 只包含标签
- 元素.firstElementChild 不兼容IE8 及以下
其他元素
- 获取body
document.body - 获取html
document.documentElement - 所有元素
document.all
读取样式
- 通过 style 设置和读取的都是内联样式，优先级较高，读不到样式表
div.style.width
- currentStyle 可以读取正在显示的样式
div.currentStyle.width //只有IE 浏览器支持
- 常用 getComputedStyle() 传递两个参数，第一个参数是目标元素，第二个一般是null
getComputedStyle(div,null) // 返回的是一个对象，所有样式都在这个对象obj中 getComputedStyle(div,null).width // 不支持IE8 及以下
getComputedStyle(div,null) 与 currentStyle 区别
- 在没有设置值时，
getComputedStyle（）会返回真实的值，而不是默认值，比如width，后者会返回auto，前者返回真实值 currentStyle和getComputedStyle()获取的 样式都只是可读的，不能修改
