前端学习——记录大厂前端笔试题

野生小米椒

已于 2022-06-09 15:39:46 修改

阅读量645

点赞数

分类专栏：三大基础语言文章标签：前端学习 javascript

于 2019-05-27 20:53:10 首次发布

本文链接：https://blog.csdn.net/x1037490413/article/details/90611637

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body> 
      <!-- 逗号操作符 -->
      <script>
      var a=(1-1,1+1);//计算前后的值，将后面的计算结果返回回去
      </script>

      <!--一道笔试题 
            写出下面程序的执行结果
      -->
      <script>
        var f=(
            function f(){
                  return "1";
            },
            function g(){
                  return 2;
            }
            )();
            typeof f;//就是typeof(f)，可以用空格代替括号，最好用空格
            //输出number  
      </script>

      <script>
      var x=1;
      if(function f(){}){
            x += typeof f;//未经声明的变量只有在typeof下不报错 返回Undefined字符串
      }
      console.log(x);//1undenfined
      </script>
      
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //阿里巴巴笔试题
        function foo(x){
            console.log(arguments)
            return x;
        }
        foo(1,2,3,4,5)
        //输出[1,2,3,4,5]

        function foo(x){
              console.log(arguments);
              return x;
        }(1,2,3,4,5)

       //立即执行函数
        (function foo(x){
            console.log(arguments)
            return x;
        })(1,2,3,4,5)
        //输出1,2,3,4,5

        
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
       //逗号操作符的用法
       //返回逗号后面的值
        
    </script>
</body>
</html>

在控制台上运行

再看以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
       //逗号操作符的用法
       //返回逗号后面的值
       //要加括号()
       var f=(
           function f(){
               return "1";
           },
            function g(){
                return 2;
            }//逗号操作符，相当于var f=(function g(){return 2;})返回2
       )();//立即执行函数
       typeof f;//number
        
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    //例一
    //prototype是构造函数的公有祖先  祖先上的东西构造函数对象都可以用
    Person.prototype.lastName = 'deng';

    function Person() {
      // var this={
      //   _proto_:Person.prototype
      // }

    }
    var person = new Person();
    console.log(person.lastName); //先看看自己的function Person()里面有没有lastname的值，没有就在prototype里面找


    //例2
    //一旦经历了var的操作，所得出的属性，window,这种属性叫做不可配置的属性
    //不可配置的属性，delete不掉

    //可配置的是这下面这个例子的
    var num = 123;
    var obj = {

    }
    obj.num = 234;
    //delete obj.num   true
    //如果在控制台 var num=123,再delete 则是false


    //例3
    //1:预编译 this--->window
    //  2:谁调用的this指向谁
    //  3： call apply
    //  4:全局this--->window

    function test() {
      var num = 123;

    }
    test(); //相当于test.call()  如果test.call({name:"123"});则this变成{name:"123"}
    // test()-->AO{
    //   arguments:{}//类数组，形参列表
    //   this：window
    //   num:undefined
    //   a:function(){}
    // }

    var name = 'window';
    var obj = {
      name: "222",
      say: function () {
        console.log(this.name); //obj
      }
    }
    //1
    obj.say(); //obj调用的this  this指向obj
    //2
    obj.say.call(window); //有call  this就指向call括号里的值
    //3
    var fun = obj.say //相当于function (){}直接将函数拿出来了，全局中走预编译的环节， window
    //4
    fun.call(obj); //obj

    //call 和apply的应用
    function Person(name, age) {
      this.name = name;
      this.age = age;
    }

    function Student(name, age, sex) {

      Person.call(this, name, age) // this.name=name;
      // this.age=age;
      this.sex = sex;
    }
    var student = new Student('shi', 20, 'male');

    //例4
    //闭包就是一个函数嵌套另一个函数，把被嵌套的函数保存到嵌套函数的外面
    var obj = {}; //这样b能拿到a的执行期上下文
    function a() {
      function b() {

      }
      obj.fun = b;
    }

    //例五
    // “类”就是一部机器，而“对”象就是由机器生产出来的产品。new的命令就是让机器生产出一个产品来，然后程序员再去使用这个产品。
    //什么时候用new 
    function Person() {
      //var this={}
      this.name = 'abc';
      this.age = 123;
      //return this
    }
    //  构造函数和类是一个东西 想通过构造函数构造对象的时候用new，不new生产不出来对象,执行函数的时候不用new
    var person = new Person(); //new加上构造函数的执行才能够构造对象出来，有了new之后构造函数发生两步隐式变化，请看构造函数内部注释部分

    function Person(name){
      // var this={
      //   makeMoney:function(){}
      //   offer:function (){}
      // }
      var money=100;
      this.name=name;
      this.makeMoney=function(){
        money++;
      }
      this.offer=function(){
        money--;
      }
      //return this
    }
    var person=new Person();
    
    
  </script>
</body>

</html>

5.关于dom操作的笔试题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 一道阿里笔试题 
    只有insertBefore方法，如何实现insertAfter方法
    -->
    <div>
        <i></i>
        <b></b>
        <span></span>
    </div>

   <script>
       //假设要在b标签后加一个p标签，targetNode是指p标签，afterNode是指b标签
       Element.prototype.insertAfter=function (targetNode,afterNode){
               var beforeNode=afterNode.nextSibling;
               if(beforeNode==null){//如果在最后的一个标签的后面加标签就可以直接appendChild
                   this.appendChild(targetNode);//谁调用this就是谁，在控制台用父节点div调用
               }else{
                   this.insertBefore(targetNode,beforeNode);
               }
       }
       var div=document.getElementsByTagName('div')[0];
       var i=document.getElementsByTagName('i')[0];
       var b=document.getElementsByTagName('b')[0];
       var span=document.getElementsByTagName('span')[0];
       var p=document.createElement('p');
   </script>
    
</body>
</html>

6.请用html和css画出一个三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
</body>
<style>
    div{
        width: 0;
        height: 0;
        border-bottom: 100px solid cyan;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
</style>
</html>

7. 经过这一系列的运算，x,y,z分别是什么值

 <script>
    
    var x=1,y=z=0;
    function add(n){
      return n=n+1
    }
    y=add(x)
    //两个同名函数，后面的函数会覆盖前面的函数
    function add(n){
      return n=n+3
    }
    z=add(x)
  </script>

 <script>
     
    var bar={a:"002"};//{a:'a'}
    function print(){
      bar.a='a',
      Object.prototype.b='b';
      return function inner(){
        console.log(bar.a);
        console.log(bar.b);//在原型链上找
      }
    }
    print()()//第一个括号返回的是一个函数,第二个括号执行
  </script>

<script>
    
    var h=function a(){
      return 23
    }//这是表达式,a找不到名了
    console.log(typeof a());// a is not defined
   
  </script>

10.

11.

12.

13.

14.

15.三栏布局

16.position:absolute 50% 50％

17.

野生小米椒

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录