1.普通数据类型
(1)普通数据类型有哪些?
字符串型string
数值型number
undefined
null
布尔型boolean
(2如何检测类型?
console.log(typeof data)
instanceof
Array isArry()
(3)如何转换数据类型?
-
转字符串
数据.toString()
String(数据)
隐式转换: 数据+' '
-
转数值
Number(数据) '123aaa'转完之后是NaN parseInt(数据) '123aaa'转完之后是123 parseFloat(数据) 隐式转换:数据*/-
-
转布尔值
Boolean(数据)
布尔值false的有undefined, null, ' ', NaN, 0
2.this
(1)this指向
-
全局中, this 指向 window
-
函数中,严格模式下, this 指向 undefined ;非严格模式下, this 指向 window
-
定时任务中, this 指向 window ( setTimeOut , Interval )
-
绑定事件中, this 指向事件源
-
对象中, this 指向这个对象
对象:无序键值对的集合
a. 对象字面量
var obj = { name: 'wkk', age: 18, skill: function () { console.log('敲代码') } } console.log(obj.name) console.log(obj['age']) //遍历对象 for (var k in obj ) { console.log(k) console.log(obj[k]) }
b. new Object()
var obj = new Object() obj.name = "wkk" obj.skill = function () {}
c.构造函数
-
构造函数中, this 指向 new 出来的实例
//构造函数 function Dog (name, color, voice) { this.name = name //this指向 new 出来的实例 this.color = color this.bark = function (voice) { console.log(voice) } } var wkk=new Dog('wkk','灰色') console.log(wkk) wkk.bark('haha')
-
new关键字执行了哪些过程?
(1) 先创建了一个空对象
(2) 然后让 this 指向这个空对象
(3) 给属性赋值,给方法赋值
(4) 把结果 return 出来
-
(2)改变this的方法及区别
-
call 立即执行,第一个参数修改 this 指向,之后的用 , 隔开
-
apply 立即执行,第一个参数修改 this 指向,第一个之后的用[ ]包裹
-
bind 不会立即执行,第一个参数修改 this 指向,之后的用 , 隔开
3.前端模块化
应用分成了多个模块,就像魔方一样,
如果没有模块化,就会出现文件依赖,命名冲突的问题, JS 本来是没有前端模块化这个概念的
为了解决文件依赖,命名冲突的问题,js社区提出了前端模块化这个概念
主要流行的有 3 个:
前台: AMD (异步模块定义)(代表产品 Require.js) , CMD (通用模块定义) (Sea.js),
后台: CommonJS 规范 (node.js)
比如在 node.js 中规定,一个文件就是一个模块,模块的外部是访问不到内部成员的, exports,module.exports 是导出模块, require 是导入模块
之后 ES6 支持了前端模块化:
每一个js就是一个独立的模块,可以通过 import 导入模块, export.default 导出模块
const a=1
const b="ABC"
//默认导出 001.js
export.default {
a,b
}
//按需导出 001.js
export var c='啦啦啦'
export var d='哈哈哈'
//------------------------------------------------------------------------------------------------------------------------
//默认导入和按需导入 index.js
import m1, {c,d} from '001.js'
console.log(m1) //{a:1,b:'ABC'}
console.log(c) //啦啦啦
4.浏览器私有前缀
为了兼容老版本的写法
-
-webkit- 谷歌(blink),苹果(webkit)
-
-moz- 火狐(gecko)
-
-ms- IE(trident)
-
-o- 欧鹏(presto,现在blink)
5.BFC
块格式化上下文
可以理解为是一个独立的作用域.该区域内所有的布局不会影响到区域外元素的布局
怎么产生一个BFC?
-
float的值不为空
-
position得值为absoult或fixed
-
display的值是inline-block...
-
overflow的值不是visible
6.语义化标签
header, footer, aside, nav, artile, section, address,
易于SEO搜索引擎优化,便于维护
7.数组和字符串的内置方法
数组:
-
翻转(reverse)
-
排序(sort)
-
追加(push后加,unshift前加)
-
删除(pop后删,shift前删)
-
获取索引(indexof,lastindexof)
-
截取(slice(开始,结束),splice(开始,个数))
-
拼接(concat)
字符串:
-
根据元素找索引(indexof)
-
根据索引找元素(charAt)
-
截取(slice(开始,结束) ,substr(开始,个数))
-
拼接(concat)
-
替换(replace)
-
分割为数组(split)
8.js执行机制(宏任务和微任务)
js是单线程的,分为同步任务和异步任务(定时器,ajax,事件绑定),同步任务在执行栈中执行,异步任务在执行队列中执行.
先执行执行栈中的,然后把执行队列中的放到主线程中执行.
异步任务又分为宏任务和微任务。先执行微任务,再执行宏任务,同级别按顺序执行。
宏任务:script (可以理解为外层同步代码), ajax, setTimeOut/setInterval, 文件操作等;
微任务:promise,.then, .catch, .finally, process.nextTick等;
9.事件流
-
三个阶段
1.事件捕获阶段
2.事件执行阶段
3.事件冒泡阶段
阻止事件默认行为(preventDefault)
阻止事件冒泡(stopPropagation)
原生 js 中, return false 只阻止事件默认行为,不阻止事件冒泡; jquery 中, return false 都阻止.
-
事件委托
要给子元素绑定事件时,可以将事件统一绑定给它的父元素带代理完成事件.
-
点透问题
层级较高的定位元素绑定 touchstar 事件,会同时触发层级低的元素,发生堆叠.
解决: fastclick第三方 js 库(还可以解决 300ms 延时)
10.本地存储
-
sessionstorage
5M 存储在浏览器内存中 离开页面消失 只限当前页面使用
-
localstoage
20M 存储在计算机硬盘 永不消失 当前浏览器的所有页面使用
-
.setIetm(k,v) .getIetm(k) .removeItem(k) .clear()
11.web组成,顶级对象,隐式迭代,链式编程
web标准构成: 结构HTML, 表现css, 行为 js
h5: html5, css3 , js
js: ECMAscript , DOM(document), BOM(window)
顶级对象: jquery ($,jquery)
node.js(global)
-
js入口函数: window.οnlοad=function () {} 结构和全部资源执行完成后执行 目的是为了先加载页面再进行