Ricesgui


  • 首页

  • 标签

  • 分类

  • 归档

  • 关于

前端面试题小结

发表于 2018-07-17 | 阅读次数:

  1. js 字符串操作函数
  2. concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。

    join() 方法用于把数组中的所有元素放入一个字符串。

    indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。

    charAt() – 返回指定位置的字符。

    lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 。

    match() – 检查一个字符串是否匹配一个正则表达式。

    substr() 函数 – 返回从string的startPos位置,长度为length的字符串

    substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。

    slice() – 提取字符串的一部分,并返回一个新字符串。

    replace() – 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。

    search() – 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。

    split() – 通过将字符串划分成子串,将一个字符串做成一个字符串数组。

    length – 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。

    toLowerCase() – 将整个字符串转成小写字母。

    toUpperCase() – 将整个字符串转成大写字母。

  3. js中==和===区别

  4. 简单来说: == 代表相同, ===代表严格相同, 为啥这么说呢,

    这么理解: 当进行双等号比较时候:先检查两个操作数数据类型,如果相同, 则进行===比较, 如果不同, 则愿意为你进行一次类型转换, 转换成相同类型后再进行比较, 而===比较时, 如果类型不同,直接就是false.

    操作数1 == 操作数2, 操作数1 === 操作数2

    比较过程:

      双等号==:

      (1)如果两个值类型相同,再进行三个等号(===)的比较

      (2)如果两个值类型不同,也有可能相等,需根据以下规则进行类型转换在比较:

        1)如果一个是null,一个是undefined,那么相等

        2)如果一个是字符串,一个是数值,把字符串转换成数值之后再进行比较

      三等号===:

      (1)如果类型不同,就一定不相等

      (2)如果两个都是数值,并且是同一个值,那么相等;如果其中至少一个是NaN,那么不相等。(判断一个值是否是NaN,只能使用isNaN()来判断)

      (3)如果两个都是字符串,每个位置的字符都一样,那么相等,否则不相等。

      (4)如果两个值都是true,或是false,那么相等

      (5)如果两个值都引用同一个对象或是函数,那么相等,否则不相等

      (6)如果两个值都是null,或是undefined,那么相等

  5. js中push(),pop(),unshift(),shift()的用法小结

  6. 1)、这两组同为对数组的操作,并且会改变数组的本身的长度及内容。

      不同的是 push()、pop() 是从数组的尾部进行增减,unshift()、shift() 是从数组的头部进行增减。
     例子:var arr = [1, 2];

    2)、push()和unshift()

      向数组的 尾部/头部 添加若干元素,并返回 数组的 新长度;

      arr.push(3,4); //返回 arr 的新长度 4

      arr ; // arr = [1,2,3,4];

      arr.unshift(0,0.5); // 返回 arr 的新长度 6

      arr ; // arr = [0,0.5,1,2,3,4];

    3)、pop()和shift()

      从数组的 尾部/头部 删除1个元素(删且只删除1个),并返回 被删除的元素;空数组是继续删除,不报错,但返回undefined;

      arr.pop();      //返回 4;

      arr ;         // arr = [0,0.5,1,2,3];

      arr.pop();      //返回 3;

      arr ;         // arr = [0,0.5,1,2];

      arr.shift();     // 返回 0 ;

      arr ;        // arr = [0.5,1,2]

      PS: pop()和shift() 不接受传参,即使传了参数也没什么卵用~~;

      arr.pop(3) ; // 返回 2;永远返回最后一个;

      arr ;        // arr = [0.5,1];

      arr.shift(1);    // 返回 0.5; 永远返回第一个;

      arr ;        // arr = [1];

      arr.pop() ;     // 返回 1;

      arr ;        // arr = [];

      arr.shift()     // 返回 undefined;

      arr ;        // arr = [];

  7. link和@import的区别
  8. link属于html标签,而@import是css提供的。

    页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。

    link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。

    link方式样式的权重高于@import的。

    link支持使用js控制DOM改变样式,@import不支持。‘

  9. 编写一个方法 去掉一个数组的重复元素

  10. 方法一:

    var arr = [0,2,3,4,4,0,2];
    var obj = {};
    var tmp = [];
    for(var i = 0 ;i< arr.length;i++){
    if( !obj[arr[i]] ){
    obj[arr[i]] = 1;
    tmp.push(arr[i]);
    }
    }
    console.log(tmp);
    结果如下: [0, 2, 3, 4]

    方法二:

    var arr = [2,3,4,4,5,2,3,6],
    arr2 = [];
    for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
    arr2.push(arr[i]);
    }
    }
    console.log(arr2);
    结果为:[2, 3, 4, 5, 6]

    方法三:

    var arr = [2,3,4,4,5,2,3,6];
    var arr2 = arr.filter(function(element,index,self){
    return self.indexOf(element) === index;
    });
    console.log(arr2);

    结果为:[2, 3, 4, 5, 6]

ajax向服务器发送JSON数据包和接收

发表于 2018-07-15 | 阅读次数:

ajax向服务器发送JSON数据包和接收

(现在来还当初欠下来的博客文章啦,毕竟在做大作业的时候遇到蛮多很经典的问题,记下来方便自己以后查阅,好记性不如烂笔头嘛。)

在进行前后端交互的时候,才意识到要前后端分离。在这时,如何进行前后端数据交互就成为了难题,焦头烂额了两三天。最后得到ajax同/异步传数据的方法,并成功应用。


AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。可采用如下方式:

$.ajax({
       type: "POST",
       url: "/views/log_out",//后端给前端提供发送请求的URL
       contentType: "application/json; charset=utf-8",
       data: JSON.stringify({"eventType":"1"}),//json数据包
       dataType: "json",//预期的服务器响应的数据类型。
       success: function (data) {//回调函数
        if(data.status=='success'){
           window.location.href="index.html";//页面跳转可添加参数
       }
        else console.log("error");
       },
       error: function (xhr,error) {
           console.log("index.fail");
       }
   });

其中JSON.stringify() 方法将 JavaScript 对象转换为字符串。
JSON.parse() 方法将数据转换为 JavaScript 对象。


JSON数据包格式:{“eventType”:”1”}
JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value(键/值)对。
key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。

key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。

访问对象值
你可以使用点号(.)来访问对象的值:

var data={"eventType":"1"};    
var x;
x=data.eventType;

git 命令报错

发表于 2018-07-15 | 阅读次数:

fatal: remote origin already exists.

最近好久没有更新过博客了,一个原因是因为期末考试和期末作业,还有一个原因就是更新换代了电脑,好多配置还没恢复回来。

今天想把博客的github配置好的时候,重新连接到自己的仓库的时候直接

命令:$ git remote add origin http://github.com/用户名/仓库名.git

即你仓库的http/ssh链接。
却报错:fatal: remote origin already exists.在这里记录一下解决方法:需要先删除之前的配置。

解决方法:只需要先输入命令$ git remote rm origin


然后就成功啦,撒花。

由于之前用的是win7系统,所以下载markdownpad2后直接安装就能用没遇上什么大问题。但是这次在win10系统下安装完后,右边预览不能正常显示,解决方法1:按说明文档提示安装一下Awesomium 1.6.6 SDK
如果还是不行,就接着安装 Microsoft’s DirectX End-User Runtimes (June 2010)
但是博主实测,只需要安装第一个就解决了问题了。

Canvas在IE上的兼容问题

发表于 2018-07-04 | 阅读次数:


前文提到最近在做网页设计,不做不知道,一做吓一跳,我们的网站越往下走信息量越大,需要做的东西也越多,特别是需要和后端协同是一个非常考验团队合作的事情,在我做注册界面的验证码的时候,遇到了Canvas在IE浏览器上不兼容的问题。以下进行说明。


canvas 是html5新增加的元素,IE从IE9开始支持canvas,IE8及以下不支持HTML5。
在ExplorerCanvas库(http://excanvas.sourceforge.net/)中调用IE内部功能提供了几乎相同的API。 但ExplorerCanvas不支持字体, 所以为了使用文字, 还需要使用canvas-text库(http://code.google.com/p/canvas-text/)。
所以(手动划重点)如果同一页HTML要兼容低版本IE和其它支持HTML5的浏览器, 可以用如下的语法选择性加入低版本IE需要的部分:

<!--[if IE]>
<script type="text/javascript" src="javascript/excanvas/excanvas.js"></script>
<script type="text/javascript" src="javascript/excanvas/canvas.text.js"></script>
<script type="text/javascript" src="javascript/excanvas/faces/optimer-normal-normal.js"></script>
<![endif]-->

但是!!!一定要注意这个问题,因为引入excanvas.js以后,在ie下,文档中的canvas就可以用了,但是如果是通过createElement方法动态创建的就不行了,如下所示。

var canvas=document.createElement(”canvas”);
if(canvas.getContext){
alert(”support getContext()”);
}


原因是,解释器在加载并执行excanvas.js这个脚本代码的时候,G_vmlCanvasManager_.init();这句语句遍历了页面中所有的canvas元素,然后初始化这些元素,亦即是将标准canvas的那些个方法赋予ie下的canvas:

var els = doc.getElementsByTagName(”canvas”);
for (var i = 0; i < els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}

总结:静态创建的canvas 标签,在加载excanvas.js脚本的时候会被初始化,动态创建的canvas则没有。


解决办法:新创建了一个canvas元素就调用G_vmlCanvasManager_.initElement()方法来初始化。



if(!(document.getElementById(“canvas”).getContent)){
G_vmlCanvasManager.ininElement(document.getElementById(“canvas”));
}

但是,G_vmlCanvasManager_是在一个匿名函数function(){}里面定义的,我在全局范围下就没有办法引用到,还好,在excanvas.js文件的后面,有一句语句,

G_vmlCanvasManager = G_vmlCanvasManager_;

在这些过程中感觉自己学到了更多东西,很大的满足感,并且非常期待地看到最后实现的结果。一起加油!

git 报错

发表于 2018-06-11 | 阅读次数:

git pull 遇到错误,error: Your local changes to the following files would be overwritten by merge:


前面提到我最近在用git分布式版本控制系统,因为我在另一位同学push后没有pull下来就在自己原来的代码基础上修改,然后想要push上去,报错,

error: Your local changes to the following files would be overwritten by merge:  

意思就是我新修改的代码文件,将会被git服务器上的代码替代(我当然不希望自己的代码不见了呀)。
解决方法:

  • 方法1:如果想保留刚才本地修改的代码,并把git服务器上的代码pull到本地(本地刚才修改的代码将会被暂时封存起来)
  • git stash
    git pull origin master
    git stash pop
    

    这样的话,服务器上的代码更新到了本地,而且本地修改后的代码使用add,commit,push命令即可更新本地代码到服务器了。

  • 方法2:如果想完全覆盖本地的代码,只保留服务器端代码,则直接退回到上一个版本,再进行pull:
  • git reset --hard
    git pull origin master
    

    其中origin master表示git的主分支。

    blog7

    发表于 2018-06-02 | 阅读次数:

    在重新注册了另一个账户上传代码时,这个账户之前的信息就开始出现了一些错乱,在重新想上传代码时,hexo d 后提示Error Deployer not found: git

    百度了一下,总结出两种处理办法:


    1.配置没有配置好,可按照以下进行配置:

    # Deployment  
    ## Docs: https://hexo.io/docs/deployment.html  
      deploy:  
          type: git  
          repo: git@github.com:wuliqunaoguigui/wuliqunaoguigui.github.io.git  
    
       branch: master  `
    

    2.如果你的配置对了,则采取第二种方法,以下命令安装即可:

    npm install --save hexo-deployer-git
    

    这是一篇抒发感慨的文章,同时学习Markdown的基本语法润色

    发表于 2018-06-02 | 阅读次数:

    最近打代码真是越打越喜欢,甚至是零点多躺在床上回想刚刚自己哪里可以改进的时候,灵感乍现还想着爬下床去撸代码。那种根据现有的框架还去完善整个页面的感觉也是很好,当自己实现了的话就特别有成就感。

    自己的一向也是想要为大家设计实用好看的网站,希望自己可以坚持初心吧,坚定不移地向前走。引用师姐的一句话:

    迈着坚韧的步伐,梦想也会长大


    在这里附上我最近做的一个网页,还没结束,以后还会完善提交的。
    http://ricesgui01.github.io

    唠嗑完了,来学学语法吧。(本Markdown编辑器为MarkdownPad2)


    在本篇文章中使用来颜色,成就感那里采用了代码:

    <font color="00CDCD">成就感</font>
    

    这跟我们HTML差不多,是直接在标签后面添加样式,语法也差不多。

    字体、字号

    <pre><font face="黑体">我是华文彩云</font>
    <font color=gray size=5>color=gray</font>
    <font color=#0099ff size=5 face="黑体">color=#0099ff size=5 face="黑体"</font></pre>
    

    Size:规定文本的尺寸大小。可能的值:从 1 到 7 的数字。浏览器默认值是 3。
    呈现效果如下:

    我是华文彩云

    color=gray

    color=#0099ff size=5 face=”黑体”

    接下来来学习一些快捷键:

    • 加粗 Ctrl + B

    • 斜体 Ctrl + I

    • 引用 Ctrl + Q

    • 插入链接 Ctrl + L

    • 插入代码 Ctrl + K

    • 插入图片 Ctrl + G

    • 提升标题 Ctrl + H

    • 有序列表 Ctrl + O

    • 无序列表 Ctrl + U

    • 横线 Ctrl + R

    • 撤销 Ctrl + Z

    • 重做 Ctrl + Y
    • <table><tr><td bgcolor=#FF4500>这里的背景色是:OrangeRed,  十六进制颜色值:#FF4500, rgb(255, 69, 0)</td></tr></table>
      

      呈现效果:

      这里的背景色是:OrangeRed, 十六进制颜色值:#FF4500, rgb(255, 69, 0)

      Markdown语法实现代码块

      发表于 2018-05-30 | 阅读次数:

      在写上一篇文章的时候,学会了如何使用md语法引进一块代码
      ,可以采用Tab键或空4格的方法即可实现。如下文一样需要用的代码块,在写代码块时需要注意的一点就是原来的内容要与代码之间空多一行才能显示。

      <html>
      #include <iostream>
      using namespace std;
      

      你看可以随意书写你喜欢的代码块啦,多简单,开心。。。

      如何实现div中的span居左居右对齐,且在同一行上

      发表于 2018-05-30 | 阅读次数:

      最近在做网页设计的大作业,遇到很多有意思的问题,在这里记录一下。


      比如我要实现一行中有详细信息和更多信息,想让他们分别居左居右显示。以下是方法:

      • 方法1:用CSS设置left和right类并设置浮动float

      • <!DOCTYPE html>
        <html>
        <head>
        <title>
        span中居左居右
        </title>
        <style>
        .left{ 
        float:left; width:50%px;
         }
        .right{
        float:right;
        }
        </style>
        </head>
        <body>
        <div>
        <span class="left">使用span布局居左</span>
           <span class="right">使用span布局居右</span>
        </div>
        </body>
        </html>
        

      • 方法2:采用bootstrap框架中的.pull-left class类和.pull-right class 类

        <!DOCTYPE html>
        <html>
        <head>
        <title>Bootstrap框架实现</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    
        </head>
        <body>
        <div>
        <span class="pull-left">使用span布局居左</span>
        <span class="pull-right">使用span布局居右</span>
        </div>
        </body>
        </html>
        

        由以上可以发现框架有很多已经处理好的CSS样式,更加方便我们实现网页设计。

        如何将本地仓库的代码上传到github远程仓库

        发表于 2018-05-11 | 阅读次数:

        摸索了一会儿如何将代码从自己的本地仓库托管到github上,以防忘记,在这里做一个小记录。


        1.首先在本地建立一个目录,然后进入该目录,如我在我的D盘建立一个Code文件夹,将自己想要上传的代码放在该文件夹里,

        2.然后在Git Bash Here进入该路径

        命令:$ cd D:/blog/Code

        3.接着初始化它

        命令:$ git init


        4.将本地项目工作区的所有文件添加到暂存区

        命令:$ git add .


        5.将暂存区的文件提交到本地仓库


        命令$ git commit -m “excu”

        6.自然是需要你在你的Github上创建自己的repository(仓库)

        7.将本地仓库关联到Github上

        命令:$ git remote add origin http://github.com/用户名/仓库名.git
        (即第五步中创建仓库的http地址)

        8.将代码由本地仓库上传到Github远程仓库,在这里要注意下面会有叫你输入你的githu用户名和密码。

        命令:$ git push -u origin master


        如果你来到了这里,说明你已经啊成功啦,快去你的github仓库看看去吧!

        1…567

        Ricesgui

        做一个积极向上的程序员

        65 日志
        1 分类
        22 标签
        GitHub E-Mail CSDN
        Friends
        • 楷爷
        • 啊维
        • 烧饼
        • 权工
        • Ayiiii
        • 泉总
        © 2018 — 2019 Ricesgui
        由 Hexo 强力驱动
        |
        主题 — NexT.Pisces v5.1.4
        本站总访问量 次     本站访客数人次