问题:
javascript 由什么组成:
ECMAScript / DOM / BOM
javascript 原始类型:
string number boolean null undefined object
demo: '11',11,true , null , undefined, let obj = {}
基本类型:
string ,number,boolean,null,undefined
demo: '11',11,true , null , undefined,javascript
复杂类型:
object,
demo: let obj = {}css
javascript undefined null的区别html
undefined:
1.声明变量,没有赋值
demo: var a
cosole.log(a) // undefinedvue
2.函数参数,在调用时,没有带参
demo:
function add (id){
console.log(id) // undefined
}
add() // 调用没有带参
3.对象没有赋值的属性
demo:
let o = {}
console.log(o.p) // undefined
let a = new Object();
console.log(a.x) // undefined
4.函数没有返回值时
demo:
function too(x=11){
console.log(x)
}
let x = too();
console.log(x) // undefined
如下是 一个有返回值的demo
function foo(x=11){
return x
}
let y = foo();
console.log(y) // 11
null:表示被定义了,可是这个值为空
javascript 隐式转换:
false : 0 , true :1 , " " : 0
demo:
let t = true
if(t==1){
alert("我是true可是我转换成1") // 我是true可是我转换成1
}
let t = false
if(t==0){
alert("我是false可是我转换成0") // 我是false可是我转换成0
}java
// 字符串
let b = ""
if(b==0){
alert("我是空可是我转换成0") // 我是空可是我转换成0
}
// 对象和布尔比较
let t = [];
if(t==false){
// 对象转换成空字符串 ,而后再转成数字0 ,false 转换成0再作比较
alert("我是一个对象,可是我先转换为空(' ')在转换成数字") // 我是一个对象,可是我先转换为空(' ')在转换成数字
}
// 对象和字符串比较
let t = [1,2,3]
if(t=="1,2,3"){
alert("对象和字符串比较,先把对象转换成字符串'1,2,3' ,而后再作比较")
}
// 对象和数字比较
let t = [1];
if(t==1){
alert("我是先转成'1'再比较")
}
// 字符串和数字比较
'1' == 1 // true
// 字符串布尔
’1‘ == true // truenode
'0' == false // true
// 特殊比较
undefined == null // truereact
什么事编程面向对象:
面向对象:是一种设计思想,简称:OOP,把公共的事物抽象成属性和方法进行编程
原型链和做用域链有什么区别:
原型链:针对构造函数;例如:咱们建立一个函数,这个函数经过__proto__ 或 prototype 绑定属性,而后经过new这个函数,那么这个被new 出来的新函数就会继承该函数的属性。
经过新函数访问,可是新函数没有这个属性,因此要经过链式向上查找,这就是原型链es6
demo:
function Add () {}
Add.prototype.id = "1111"
let a = new Add()
console.log(a.id) // "1111"
做用域链:是针对变量;分有全局和局部,若是局部没有就向全局查找
demo:
let a = "你这个老头坏滴狠";
function too(){
console.log(a) // "你这个老头坏滴狠";
}web
javascript 多态继承:
同一个事物:发出不一样的形态
继承:同一个事物,继承相同的形态,面试
javascript 闭包:
1.读取其余函数内部变量的函数,
2.子函数调用父函数的变量,变量不会被释放
javascript 类
function Person(name){
// 共用属性
this.name = name;
// 共用实例
this.userName = function(){
console.log(this.name+'是个人爱人');
}
this.totalNum = function(){
console.log("我共用")
}
}
Person.prototype.Add = function(){
console.log(this.name+"我添加了");
}
let b = new Person("LING");
b.userName();
b.Add();
// 想要继承类经过prototype new一个新的类
function ClassNameTest(){}
// 例子
ClassNameTest.prototype = new Person();
const tt = new ClassNameTest();
tt.totalNum();
/**
* 得到的思想
* 建立一个类,首字母要大写
* 能够把共同的可复用性的放在类里面
* 独立状态的可用portotype 点来继承
* 使用类能够用new 一个变量来使用
*
* 子类继承父类能够用经过prototype来实现
* 也要new 一个新的类经过变量调用类的方法
* 缺点:没法继承多个类
*
* **/
javascript 变量提高:
var a = "1";
function foo(){
let a = "44"
console.log(a) // 44
return a
}
foo()
javascript let const var 的区别:
let 是一个块级做用域,在函数内定义,对外部无影响;
demo:
let a = "444";
function foo(){
let a = "我是谔谔"
console.log(a) // "我是谔谔"
}
console.log(a) // "444"
const 是一个常量,定义后不能修改
var 是一个全局,能够修改,不初始化会获得undefined
javascript __proto__ protoType的关系:
function Person (){}
let person = new Person();
console.log(person.__proto__ == Person.prototype); // true
console.log(Person.prototype.constructor==Person); // true
javascript 手写实现一个xhr:
// 建立一个xhr对象
var xhr = new XMLHttpRequest()
xhr.open ("get","文件名地址","布尔,false表示同步请求,true表示异步请求")
xhr.onreadystatechange = function(){
// readystate
// 0 表示未初始化,xhr对象已调用,open方法没有执行
// 1表示初始化,send方法没有执行
// 2表示发送数据,http请求头未知
// 3表示数据发送中,可是http请求头不全,致使responseBody和responseText报错
// 4表示数据接收完毕,responseBody和responseText回应请求的数据
console.log(xhr.readystate)
if(xhr.readystate==4 && xhr.status==200){
// 表示数据接收完毕 ,http状态200
}
}
xhr.send()
post 请求
let xhr = new XMLHttpResquest();
xhr.open('post','aa.text?parmes=1&id=2');
xhr.onreadystatechange = function(){
if(xhr.readystate==4 && xhr.status==200){
alert("成功")
}
}
xhr.setRequsetHeader ('Content-Type','applicaiton/x-www-form-urlencoded');
xhr.send("?parmes=1&id=2");
使用promise 封装ajax
let fetch = (method,url)=>{
rerurn new Promise((reject,resolve)=>{
let xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.responseType = "json";
xhr.setRequsetHeader ("Accept","application/json");
xhr.readystatechange = function(){
if(xhr.readystate==4 && xhr.status==200){
resolve(this.response)
}else{
reject(this.response)
}
}
xhr.send();
})
}
fetch('get','https://www.baidu.com').then(({code,msg,res})=>{
console.log(code,msg,res)
}).catch(()=>{});
http请求状态码:
javascript section cookies localStorage sessionStorage:
/*
* 保存状态:cookie 存在浏览器端,session 存在服务端,
*
* 使用方式:
*
* cookie 分两种:
* 1.若是没有设置过期间,随着浏览器的关闭而消失
* 2.若是设置过时时间,过时时间到,cookie会自动消失
* cookie 是以文本方式保存在客户端,每次请求都带上它
*
* session 有没有sessionId 有这个返回一个session对象,没有这个建立一个新的session对象
* 分三种状况:禁用cookie则重写response.encodeURL(url)
* 不支持cookie 将会重写url把sessionId拼接搭到url后面
* 支持则url不作任何处理
*
*
* 存储内容:
* cookie 以文本格式存储, session 相似hashtable数据格式存储,能够存储多个对象(session)
*
* 存储的大小
* cookie 单个不能超过4kb, session 没有大小限制
*
* 安全性
* cookie 容易被拦截,欺骗, session 的sessionId是保存在cookie里的,因此安全大于cookie
*
* 应用场景:
* cookie 用户登录过,下次能够记住用户信息,方便登录;保存上次的登陆时间;保存上次查看的页面;统计查看次数
*
*缺点:
* cookie 大小限制,不安全
* session 不利于用户量多使用,占服务器内存
*
*
*localStorage:存在本地,永久性存储,大小5mb,没有跟服务器接触
*
*sessionStorage:仅在当前会话,浏览器关闭就结束,大小5mb,没有跟服务器接触
*
*
* */
javascript 重绘和回流,防抖,节流
重绘:不改变布局大小,只改变样式和文本,
回流:改变页面布局,从新计算文档元素
防抖:屡次触发事件,事件之执行一次,而且是在事件结束后执行
应用场景:好比按钮,屡次点击,将屡次操做合并成一次操做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
width: 100%;
height: 80px;
line-height: 80px;
background-color: black;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById("container");
let count = 1;
function add(e){
console.log(e,"getHtml")
container.innerText = count++;
}
function getHtml(func,wait,isflag) {
let time,result;
return function () {
time && clearTimeout(time);
let context = this;
let arg = arguments;
if(isflag){
let callnow = !time;
time = setTimeout(()=>{
time = null
},wait);
if(callnow) result=func.apply(context,arg)
}else {
time = setTimeout(()=> {
func(context, arg)
}, wait)
}
return result;
}
}
container.onclick = getHtml(add,300);
</script>
</body>
</html>
节流:在规定时间内,只执行一次,必定时间内只触发一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节流</title>
<style>
#content{
width:80px;
height: 60px;
background-color: black;
overflow: auto;
}
</style>
</head>
<body>
<div id="content">gggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggg</div>
<script>
let content = document.getElementById('content');
let falg = true;
content.onscroll = function () {
if(!falg) return;
falg = false;
setTimeout(function () {
console.log("函数节流");
falg = true
},300)
}
</script>
</body>
</html>
应用场景:滚动条,缩放页面
javascript DOM有哪些api
nodeType:
html:<div id="container"></div>
let container = document.getEleMentById('container');
container.nodeType // 判断是什么元素
1.表示标签元素
2.表示元素属性
3.表示文本
8.表示注释
9.表示文档 (document)
11.表示轻量级文档 (DocumentFragment)
nodeValue:获取内容
建立api:
createElement 建立标签元素
createTextNode 建立文本
cloneNode 复制一个节点副本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<span>我能够复制哦</span>
</div>
<button id="btn">复制</button>
<script>
let content = document.getElementById('content');
let btn = document.getElementById("btn");
btn.onclick = function () {
let content1 = content.cloneNode(true);
content1.id="content1";
document.body.appendChild(content1);
}
/**
* 获取id
* 经过点击事件触发
* id.cloneNode(true) // 复制节点副本
* 添加id
* 使用appendChild 插入到body
*
*
* **/
</script>
</body>
</html>
createDocumentFragment() 文档片断
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list"></ul>
<input type="button" value="点我" onclick="handleClick()"/>
<input type="button" value="爱我" onclick="handleBtn()"/>
<script>
let listID = document.getElementById("list");
// function handleBtn(){
// console.time("antzone");
// for (let i =0;i<10;i++){
// let lis = document.createElement('li');
// lis.textContent = i;
// listID.appendChild(lis);
//
// }
// console.timeEnd("antzone");
//
// }
let Fragment = document.createDocumentFragment();
function handleClick() {
console.time("antzone");
for(let i =0;i<10;i++){
let list = document.createElement('li');
list.textContent = i;
// 先放进片断
Fragment.appendChild(list)
}
// 后面一次性再加入片断
listID.appendChild(Fragment);
console.timeEnd("antzone"); //antzone:
}
/**
* 获取id
* 经过点击事件处理
* 使用createElement建立元素
* textContent 文本内容
* 性功能要求:
* 第一个方案:每次都会建立一个新的元素,而后添加到文档树中,形成浏览器回流
* 第二个方案:每次先添加到Fragment,而后再一次性添加到ul中
*
*
* **/
</script>
</body>
</html>
appendChild 在后插入
inserBefor 在前面插入
removeChild 删除
replaceChild 替换一个元素
查找api:
getElementById() // 查找id
getElementsClassName()// 查找class
getElementsByTagName()// 查找标签元素
querySelectorAll()// 经过class 查找全部
querySelector() // 查找一个
修改属性:
setAttribute ('name',value) // 修改属性
getAttribute('name') // 获取属性
javascript mvc mvvm mvp的区别
mvc:module-view-controller
用户操做(view)=>业务逻辑处理(controller)=>数据持久化(module)=>用户视图(view)
mvp:module-view-Presenter
用户视图(view)=>Presenter=>数据持久化(module)
应用到:.net
mvvm:module-view-viewModule
用户视图(view)<=>viewModule<=module(数据持久化)
好处:可实现数据绑定
应用到:angular vue
地址参考:https://www.cnblogs.com/guwei4037/p/5591183.html
javascript require 和 import 加载模块的好处
require 是commonJs的语法
const {a,b,c,d} require('fs);
等于:
const _fs = require('fs');
const a = _fs.a
const b =_fs.b
const c = _fs.c
const d = _fs.d
javascript 浅拷贝和深拷贝
javascript alert的调用
javascript 跨域问题
javascript 当在浏览器输入url发生了什么
一、解析url
二、DNS解析(其实是域名和ip对应的数据库)
三、浏览器与tcp创建三次握手
四、请求和传输数据
五、页面渲染
javascript tcp三次握手
一、客户端向服务器发送请求
二、服务器端接收到请求,返回一个指令
三、客户端接收到服务端回复指令并返回确认
浏览器渲染页面:
一、解析html,建立dom树
二、解析css,建立style Rule
三、合并dom树和style Rule,计算每一个节点样式
四、绘制完成显示在屏幕上
渲染优化:
HTML文档结构层次尽可能少,最好不深于六层;
脚本尽可能后放,放在前便可;
少许首屏样式内联放在标签内;
样式结构层次尽可能简单;
在脚本中尽可能减小DOM操做,尽可能缓存访问DOM的样式信息,避免过分触发回流;
减小经过JavaScript代码修改元素样式,尽可能使用修改class名方式操做样式或动画;
动画尽可能使用在绝对定位或固定定位的元素上;
隐藏在屏幕外,或在页面滚动时,尽可能中止动画;
尽可能缓存DOM查找,查找器尽可能简洁;
涉及多域名的网站,能够开启域名预解析
javascript 数组和对象的方法
数组:forEach,map,fillter,find,join,shift,unshift,push,concat,replase,sort,slice,reduer,indexOf,some,reverse(数组反转[1,2,3] =>[3,2,1])
javascript 设计模式有哪些
javascript splice和concat
array.splice(start,deteleCount,item,item1)
let b = ['a','1','b','2','c','3','d','4']
b.splice(1,2) // ["1", "b"]
b // ["a", "2", "c", "3", "d", "4"]
b.splice(4,2) // ["d", "4"]
start 至关于length,
deteleCount 删除多少位
splice 实现删除,替换,插入
concat 将参数添加到数组
slice:
let c = [1,2,3,4,5,6];
c.slice(4) // [5, 6]
c // 没有改变 [1,2,3,4,5,6]
javascript this指向
javascript es6 promise
react : 专一于视图层(view)
若是不用jsx写,用json写react
<div className="content">
<p>7777</p>
</div>
const DivContent = () =>{
return {
type:'div',
props:{
className:'content',
children:{
type:'p',
props:{
children: '你大爷的'
}
}
}
}
}
react jsx组件内true简写
demo: <Checkbox checked />
<Checkbox checked = {false}/>
react jsx 自定义属性,react 不会渲染:
html元素使用data-
以aria-开头的网络无障碍属性一样不会渲染
const LeftComponent = <Add data-init = "1"/>
react 属性表达式:
输入: <Add too={a ===1 ? '我爱你' : ' 不爱你'}/>
输出:const Add = React.createElement({
Add,
{too:a===1?'我爱你':'不爱你'}
})
经典面试题:
function fn(){
for(var i =0;i<5;i++){
dubugger
setTimerout(()=>{
console.log(i) // 5
},2000)
}
}
fn() //
https:
get和post请求的区别
get和post都没有长度限制,长度限制是web浏览器的url限制
get能够是获取用户数据,因此不用每次和数据库链接,
post 是用户操做交互,删除和修改,因此每次都须要请插入和删除数据库
vue 实现数据绑定的作法:
发布者-订阅模式:sub/pub 实现数据和视图绑定,更新数据的方式用vm.set('property',value)
class类
class Person {
constructor(val){
this.name = val;
}
getName(){
return this.name;
}
setName(val){
this.name = val
}
}
const person = new Person('我是一个类的变量,放置在constructor');
console.log(person.name); // 我是一个类的变量,放置在constructor
person.setName('我是');
console.log(person.getName());// 我是