- 块级变量 (){} 只能在{}生效
函数作用域作用
- 隔离变量,不同作用域下同名变量不会有冲突
- 变量有一个坑,特殊情况
- 如果函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐
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)
- 判断是否有符合规则的字符串
结尾
正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
结尾
正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。