锐捷网络

戳气球的爱玛镇皇后
263 阅读2分钟

面试记录

  • 锐捷网络日常实习生前端面试过程记录，基本上整个过程进行了近一个小时，前端三大件从html、css到javascript。感觉答得一般，好多基础的都有点遗忘了。
  • 周末面的，第二周收到了offer

HTML4和HTML5区别

  1. 语法简化

    头部文件简化 以标准模式渲染页面

  2. 语义话标签引入

    指定字符编码 charset=‘utf-8’

    支持音视频

    结构：header、footer、artical

    内容：h、title

    好处：便于SEO、优化代码结构、方便其他设备解析

  3. 新增属性

    input

    placeholder min max

    list 配合datalist创建下拉菜单

    form

    novalidate 禁止表单默认验证行为

    可用在input button select等其他标签上，不再局限于层叠关系

    autofocus

  4. 新增浏览器缓存机制

    • cookie

    • localStorage

      本地存储，长时间存储

    • SessionStorage

      会话存储，窗口标签页关闭后会被删除

  5. 使用Canvas替代了flash，引入svg

    • Canvas：封装js绘图API

      Echarts基于Canvas

    • svg：xml文档

      D3基于svg，js库

  6. 使默认不可编辑标签变得可编辑 contenteditable=’true’

    使用css中user-modify同样可以实现

CSS3

  1. css3新增

    • 文字边框阴影

    • 动画

      • transition：简单动画

      • animation：复杂动画

        • @keyframes规则定义各个阶段属性
        @keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}
        • animation-name：设置需要绑定到元素的动画名称；
        • animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
        • animation-timing-function：设置动画的速度曲线，默认为 ease；
        • animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
        • animation-delay：设置动画开始之前的延迟时间，默认为 0；
        • animation-iteration-count：设置动画被播放的次数，默认为 1；
        • animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
        • animation-play-state：设置动画是正在运行还是暂停，默认是 running；
        • animation：所有动画属性的简写属性。

        animationstart\animationend 事件监听动画的开始结束，transition也存在

  2. 选择器

    • id、类、属性、标签、组合、伪类、否定选择器
    • 组合选择选择器：可以通过自定义属性选择

    eg：选取div标签下面所有包含a字母的所有选择器

    div[*=’a’]

    *包含 $结尾 ^开头

    • 组合选择器：

      ～同级元素选择，只匹配一个兄弟

      +同级元素选择，匹配所有兄弟

      儿子选择器

  3. 选择器优先级

    id > 类=伪类=属性 > 标签=伪元素

  4. var()函数

    :root{
	--white:#fff;
}

p{
	color:var(--white);
}

  5. pointer-events:none 禁用button点击

  6. box-sizing ：用来改变盒模型中计算宽高的方法

    • 盒模型

      • 默认（content-box）宽高只包含content区域

      • 块元素的border，padding属性会影响盒子的宽高

        • 使用border-box使宽高包含border，padding

scss

  • css预处理器

JavaScript

  1. es5数组相比较es3增加方法

    1. es3

      • splice(index,length,newArr)：将元素插入到指定位置，返回“”，若不添加元素，返回删除元素（改变原数组）
      • slice：也可用于数 组截取
      • concat：连接多个数组（返回新数组）

    2. es5

      • map：不改变原数组
      • filter：不改变原数组
      arrNum.filter((item) => {
            return item > 3
        })
      • some：任意一项返回true，返回true
      • every：每一项true，返回true
      const res = arr.some((item,index,arr)=>{
    return item > 3
})
      • indexOf
      • lastIndexOf

    3. es6

      • find
      • findIndex
      • copyWith
      • fill：将元素全部替换（改变原数组）

操作字符串：

  • slice：切割字符串，返回切出来的
  • split：分割字符串

  1. 数组去重

    1. Array.from(new Set(arr))

  2. 数组遍历

    • for .. in ..（常用于对象的遍历，获取键）

      会遍历所有可遍历元素

    • for ..of ..（遍历数组，类数组，对象中的值）

      for (let key of arr){
	console.log(key)
}

    • forEach（item，index，arr）

      通过return跳出循环

    • reduce（total，item，index，arr）：用于累加

      const res =  arrNum.reduce((total,item)=>{
            return total+item
        })

  3. forEach实现

  4. ES6新特性

  5. 箭头函数 zhuanlan.zhihu.com/p/57204184

    1. 箭头函数没有this
    2. 没有arguments

    延迟执行

  6. AJAX设置成同步操作

    • async 设置为false

  7. 同步函数异步执行

  8. const

    • 定义基本数据类型不可以改变
    • 定义引用数据类型可以改变，仅限于值（即修改对象属性的方式）

  9. 从1加到100

    • for循环
    • 递归
    • reduce

  10. 驼峰下划线的转化

    // 下划线转换驼峰
function toHump(name) {
    return name.replace(/\_(\w)/g, function(all, letter){
        return letter.toUpperCase();
    });
}
// 驼峰转换下划线
function toLine(name) {
  return name.replace(/([A-Z])/g,"_$1").toLowerCase();
}
    💡 正则表达式

    /g

  11. webpack配置

  12. ·Canves事件监听

avatar
文章
阅读
粉丝