前端开发基础

CSS

盒子模型:https://blog.csdn.net/Renkx0404/article/details/76096095
box-sizing决定元素遵循啥盒子模型:https://wanghan0.github.io/2017/03/31/css-box/
清除浮动://www.greatytc.com/p/53cde7aa3a61
CSS选择器优先级:import>内联>id>类|属性》标签》继承》通配符https://segmentfault.com/a/1190000008961940
CSS
1、position属性
https://blog.csdn.net/luckyfbb/article/details/80068706
//www.greatytc.com/p/244a55b1d5b6
2、BFC
——块级格式化上下文。BFC 可以看作是隔离了的独立“块”,“”块“里面的元素不会在布局上影响到外面的元素
触发BFC:https://blog.csdn.net/DFF1993/article/details/80394150
可以通过触发BFC解决一下问题
1)阻止margin外边距重叠:每个div触发bfc
2)阻止margin高度重叠:父bfc
3)清除浮动:父bfc
3、两列布局(左侧宽度固定、右侧宽度自适应)://www.greatytc.com/p/b4ba0ef3307a
4、三列布局:利用float
css样式:

#left {
    float: left;
    width: 200px;
    background: green;
}
#right {
    float: right;
    width: 200px;
    background: blue;
}
#center {
    background: red;
    margin-left: 200px;
    margin-right: 200px;
}           
html:
<div id="box">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="center">center</div>
</div>

5、水平垂直居中???

6、如何实现一个三角形:
如何实现一个圆形:

   .circle{
    width: 100px;
    height:100px;
    border-radius: 50px;
    background-color: red;
   }

CSS3新增属性
1)border-radius实现圆角;阴影box-shadow
2)box-sizing:content-box|border-box
3)媒体查询

js

js引入方式://www.greatytc.com/p/8099a0f45657
闭包https://www.zhihu.com/question/19554716
闭包是什么?闭包就是把外部作用域的变量引用封闭到函数里,使得变量不能被外部访问,同时可以通过函数提供访问接口。

function princess(){
  var adventures = [];
  var a = "a",
      b = "b",
      c = "c";
  adventures.push(a,b,c);
  //返回函数
  return {
    story: function(){
    return adventures[adventures.length-1];
  }
  }
}
console.log(princess().story());//"c"
console.log(adventures[0]);//adventures is not defined

闭包用在哪,有什么好处?1、模拟块级作用域2、通过函数访问私有变量和函数
闭包缺点?1、函数内部封闭的变量除非手动清理,不然一直存在内存当中
创建对象方式
1.原型方式


原型链:
原型链我的理解就是对象可以有个「默认的属性来源」,当读取一个对象上不存在的属性时,就会到原型上查(每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。也就是说,在我们调用person1.sayName()的时候,会先后执行两次搜索。首先,解析器会问:“实例person1有sayName属性吗?”答:“没有。”然后,它继续搜索,再问person1的原型有sayName属性吗?”答:“有。 ”于是,它就读取那个保存在原型对象中的函数当我们调用person2.sayName()时,将会重现相同的搜索过程,得到相同的结果。而这正是多个对象实例共享原型所保存的属性和方法的基本原理)
原型链实现继承(SubType.prototype = new SuperType();)

function SuperType(){
  this.value = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.value;
}
function SubType(){
  this.subValue = false;
}

//重写SubType原型对象,继承SuperType
SubType.prototype = new SuperType();
var instance = new SubType();
console.log(instance.getSuperValue());

组合模式实现继承:(page187)

js this指向
普通函数的this:1.直接调用指向window对象2.对象调用就指向对象3.指向new出来的实例
箭头函数
1)this指向:与外层函数this指向一致
2)new不可用,箭头函数不能实例化对象,会报错
问:addEventListener里面的箭头函数指向谁: window

 btn.addEventlistener('click', () => {
      console.log(this);
}let btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
  alert(this);
})

js数组方法:https://www.cnblogs.com/obel/p/7016414.html
splice(起始位置,想删除几个)
删除整个数组1.arr.splice(0,arr.length)2.length=0
js深拷贝//www.greatytc.com/p/6622b5a9d48d(对象Object,数组Array);

function clone(data){
  if(Array.isArray(data)){
    let arr = [];
    for(let i in data){
      arr[i] = clone(data[i]);
    }
    return arr;
  }else if(data instanceof Object){
     let obj = {};
     for(let key in data){
       obj[key] = clone(data[key]);
     }
    return obj;
  }else{
    return data;
  }
}
console.log(clone({name: 'yujuan',hobbies:{outgoing:"play",indoor:"sing"}}))

浅拷贝(5种基本类型Undefined,Null,Number,String,Boolean)
数组去重:
通过构造函数模式,创建一个对象(Page164):

function Person(name, age){
  this.name = name;
  this.age = age;
}

//let person = new Person("yujuan",18);
//console.log(person.name);
let o = new Object();
Person.call(o,"yujuan",18);
let person = o;
console.log(person.name);

通过原型模式创建对象:

跨域//www.greatytc.com/p/07e29c06f631
1、JSOP
2、CORS
词法作用域(执行环境):
作用域链:
函数声明

function f(){
    console.log(“1”);
}

函数表达式

var f = function(){
    console.log(“1”);
}

区别在于函数表达式需先声明再使用;
什么是变量提升:将函数声明和变量声明提到当前作用域的顶部

HTTP

HTTP 状态码知道哪些?

304的作用?

Cookie 是什么?Session 是什么?
Cookie和Session的区别如下
1、cookie保存在客户端,session数据放在服务端
2、cookie的大小和数量有限制
3、安全性不如session

LocalStorage 和 Cookie 的区别是什么?
Cookie会与服务器交互,localStorage存在浏览器本地
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的

GET 和 POST 的区别是什么?

HTML

Web语义化https://zhuanlan.zhihu.com/p/25493886
行内元素和块级元素https://jeffjade.com/2015/06/24/2015-06-24-css-block-inline/

编程基础与排序

双层for循环:return VS break VS continue
快速排序

function quickSort(arr,l,r){
    var i,j,x;
    if(l<r){
        i=l;
        j=r;
        x=arr[i];
        while(i<j){
            while(i<j&&arr[j]>=x){
                j--;
            }
            if(i<j){
                arr[i]=arr[j];
            }
            while(i<j&&arr[i]<x){
                i++;
            }
            if(i<j){
                arr[j]=arr[i];
            }
        }
        arr[i]=x;
        //递归调用
        quickSort(arr,i+1,r);
        quickSort(arr,l,i-1);
    }
  return arr; 
}  
console.log(quickSort([18,2,9,32,6,14],0,5));

冒泡排序

function bubbleSort(arr){
  for(var i =0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-i-1;j++){
      if(arr[j+1]<arr[j]){
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;
      }
    }
  }
  return arr;
}
console.log(bubbleSort([18,2,9,32,6,14]));

react

  1. 生命周期//www.greatytc.com/p/24a85ae72284
  2. setState

redux

  1. 特点

mongodb

顺序存储和链式存储区别(即数组和链表的区别)

其他话术

1、优势
1)学习新技术:就写成一个小demo
2)带着测试思维,对功能的理解更全面,去开发

算法题(体现出来思考过程,面试官注重的不是这题的正确答案,而是你的思考和逻辑能力)

1.数组寻找最大数
2.有正有负的数组里,求连续最大数字和
3.智力题:四只蚂10圈蚁速度问题;判断两个矩形是否相交
4.递归问题:阶乘;斐波那契(上台阶);
5.链表
1)逆置链表
2)输出倒数第n个结点
3)单向链表是否有环
6.二叉树按层级打印


水平居中

es6语法

1.let const 块级作用域,变量在代码块里有效
2.模版字符串反引号标识起始,${变量}标识变量
3.解构赋值

let dog = {type: 'animal', many: 2}

let { type, many} = dog

console.log(type, many)   //animal 2

4.箭头函数(写法更简洁)

js数组splice

数组去重
作用域
cookie session技术难题和区别
for循环:return VS break VS continue
return:return跳出
break:跳出
continue:下层循环

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容