前端面试总结

面试总结

1. Typescript与Javascript的区别

Typescript是强引用，JavaScript是弱引用。Typescript是Javascript的超集，任何合法的JavaScript都是Typescript。Typescript在JavaScript的原有对象模型当中进行了扩充，并且添加了比较严格的类型检查机制，添加了模块支持

2. let、const与var的区别

Let定义的变量有块级作用域，函数内部的变量对外部没有任何影响，const定义的变量不能改变，var定义的变量必须要初始化

3. 怎么实现前端数据安全

   可以用https协议

   对客户端传来的数据进行验证

   采用黑名单和白名单

4. 隐式转换与显式转换

   隐式转换

a、递增或者是递减

1. 在应用于一个包含有效数字字符的字符串时，先将其转换为数字值

2. 在应用于一个不包含有效数字字符的字符串时，将将变量的值设置为NaN

3. 在应用于布尔值true或者是false时，将其置为0或者是1

   b、逻辑非

   
   image.png
   

   C、关系比较操作符

   
   image.png
   显式转换 Number()、parseInt()、parseFloat()
   image.png
   

   5、用canvas画一个圆

   Var dom=document.getElementById(“test”);

   Var ctx = dom.getContext（‘2d’）;

   Ctx.fillstyle=”red”;
   Ctx.fillRect(0,0,100,200);

6、千分位格式化 前端面试总结

7、移动端的字体怎么适配不同屏幕的大小
通过rem去设置根元素documentElement,或者是百分比
8、如何在“小明去T1站台搭乘t11公交”，请为T1设置字体颜色为红色，忽略大小写

    function   rp($1){
         return "<font color="red">+$1+"</font>"
    }
str=str.replace(/T1/gi,rp)
console.log(str);

9、h5和css3的新属性
h5 :1)语义化更好的标签，如header、article、nav、section、footer
2)媒体标签audio和video
3)画布canvas
4)sessionStorage和localeStorge
5)表单控件email、date、url、time
css3:border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
10、请你写一个事件驱动函数
11、分布动画

   @-webkit-keyframes ani{
       0%{ }
       20%{ }
      60%{ }
   }
   .test:hover{
       -webkit-animation:ani 2s steps;
    }

12、创建对象的几种方式：工厂方式、构造函数、原型链

工厂方式（返回一个对象，但是对象是什么类型不知道）
   function parent(name,age){
           var o= new Object();
              o.name = name
              o.age = age
              o.sayName = function(){
                    alert(this.name)
                }
               return  o;
          }
       var x = Parent();
      console.log(x.name);

构造函数(没有return语句，不会显式地创建对象，属性和方法赋给了this对象，能够检测出对象类型)

 function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
    alert(this.name);
    }; 
}
   var person1 = new Person('Nike',29,'teacher');
   var person2 = new Person('Arvin',20,'student');

原型链

  function Person(){
     Person.prototype.name="nanlan";
     Person.prototype.age=12;
     Person.protoType.sayName = function(){
        alert(this.name);
       }
   }
 var person1 = new Person();
 var person2 = new Person();
person1.name = "xiaoju"
console.log(person1.name); //xiaoju 来自实例
console.log(person2.name);//nanlan  来自原型

为实例添加一个实例属性，这个实例属性会覆盖原型同名的属性

组合模式（构造函数+原型，构造函数通常用来定义属性，原型用来定义方法和实例属性）
function  Person（name,age,job）{
    this.name =name;
    this.age=age;
    this.job=job;
}
Person.prototype ={
   constructor:Person,
    sayName:function(){
    alert(this.name);
   }
  }
var person1 = new Person("xiaoju",22,"programer")

13、es6新的基本数据类型
Null、Undefined、String、Number、Object、Array、Symbol
14、怎么区分array Object
15、em、rem分别代表什么意思