ES6知识点

蓝莓圣代
781 阅读10分钟

一、ES6

ES6目录

  1. let与const
  2. 解构赋值
  3. 新的原始数据类型（Symbol）
  4. Map对象和Set对象
  5. Reflect 与 Proxy
  6. 字符串
  7. 数值
  8. 对象
  9. 数组
  10. 函数
  11. 迭代器
  12. Class类
  13. 模块
  14. Promise对象
  15. Generator函数
  16. async函数

1. let const var 的区别

  1. let/const定义的变量不会变量提升，而var定义的变量可以变量提升
  2. 相同作用域内，let/const不能重复声明，var可以
  3. const声明变量必须要有初始值
  4. const声明一个只读常量，且常量不可以改变

2. 解构赋值

定义：解构赋值是对赋值运算符的扩展，可以将属性/值从对象/数组中取出来，赋值给其他变量

数组的解构赋值

let [a, [[b], c]] = [1,[[2], 3]]
let [a,,c] =  [1,2,3]
let [a,...c] = [1,2,3,4]
let [a,b,...c] = [1]

对象的解构赋值

var {a,b} = {a:'aaa',b:'bbb'}

字符串的解构赋值

const[a,b,c,d,e] = 'hello'

数值和布尔值的解构赋值

let {toString:s} = 123
s ===  Number.prototype.toString

函数参数的解构赋值

function add([x,y]){
    return x + y
}
add([1,2])

解构赋值的应用

  1. 交换变量的值
[x,y]=[y,x]
  1. 从函数返回多个值
function arr(){
    return [1,2,3]
}
var[a,b,c] = arr()
function obj(){
    return{
        a:1,
        b:2
    }
}
var {a,b}= obj()

3. Symbol

  • Symbol的特点是什么
    1. 表示独一无二的值
2. 声明时不能使用new Symbol()，而是Symbol()
3. 声明时可以加参数，用于描述
4. 作为key时不能被遍历
  • 如何声明两个相等的Symbol变量
    使用Symbol.for

let a = Symbol.for('a');
let b = Symbol.for('a');
a === b

4. Set和Map的区别

Set:

  • 允许储存任何类型的唯一值，成员不能重复
  • 应用场景：数据重组
  • 只有键值没有键名
  • 可以遍历

Map:

  • 保存键值对，任何值都可以作为一个键或一个值
  • 应用场景是：数据储存
  • 本质上是键值对的集合
  • 可以遍历，可以跟各种数据格式转换

5. Reflect和Proxy

Reflect对象创建目的

  1. 将Object对象一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上
  2. 修改某些Object方法返回的结果，让其更合理
  3. 让Object操作都变成函数行为
  4. Reflect对象的方法与Proxy对象的方法一一对应。不管proxy怎么修改默认行为，总可以在Reflect上获取到默认行为

什么是Proxy

用于修改某些操作的默认行为。在目标对象之前架设一层拦截，外界对该对象访问都必须先通过这层拦截。对外界的访问进行过滤和改写。

6. 字符串

模板字符串

 `My Name is ${name},I am ${age+1} years old next year.`

7. 数值

比如新增的Number.parseInt()，用于将给定的字符串转换为指定进制的整数

8. 对象

  1. 拓展运算符
    拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象，可用于合并两个对象
  2. 新方法Object.assign
    将源对象所有可枚举属性复制到目标对象中

9. 数组

  1. Array.of()

    将参数中所有值转换为一个数组

  2. Array.from()

    将类数组对象或可迭代对象转化为数组

10. 函数

箭头函数没有自己的this,它的this继承而来，默认指向在定义它时所处的对象。

11. 迭代器

迭代器是ES6引入的一种新的遍历机制

  • forEach、for in、for of区别?

    * forEach更多用来遍历数组
* for in 一般用来遍历对象或json
* for of 数组对象都可以遍历，但遍历对象要通过Object.keys()
* for in循环出的是key，for of循环出的是value

12. Class类

ES6的Class可以看作一个语法糖，它的绝大部分功能ES5也可以做得到，但Class写法让对象原型的写法更加清晰、更像是面向对象的编程语言

Class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    toString(){
        return this.x + this.y
    }
}

13. 模块

export和import

1. 导出的函数声明与类声明必须要有名称
2. 不仅能导出声明，还能导出引用
3. export命令可以出现在模块的任何位置，但必须处于模块顶层
4. import命令会提升到整个模块头部，首先执行

14. Promise？ 手写一个Promise

Promise是异步编程的一个解决方案。所谓Promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作的结果）。Promise是一个对象，从它可以获取异步操作的消息

  1. 一般什么时候使用
处理异步请求时使用，比如Ajax请求
  1. 状态有pending、resolved、rejected怎么捕获它的错误
最后写catch,then里面的第二个参数可以捕获
  1. 如果内部抛错，但是没有被捕获，这个没被捕获的错误接下来会发生什么
冒泡
  1. 能不能被try catch捕获？为什么
不能，因为是异步编程
  1. 能不能被window.onerror捕获？
不能

let p = new Promise((resolve, reject) => {
    axios.get(url).then((res) => {
        if(res){
            resolve(res)
        }
    }).catch(err => {
        reject(err)
    })
})
p.then((data) => {
    
}).catch(err => {
    
})

15. Generator函数

可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案

16. async、await

async是异步的简写，用于申明一个function是异步的，而await是等待一个异步方法执行完成。async函数其实返回的是一个Promise对象。

  • 为什么await只能出现在async函数中？
await其实是在等待一个表达式，这个表达式的计算结果是Promise对象或者其他值。
也可以说是在等待async函数，如果他等到的是一个Promise对象，
await就会阻塞后面的代码，等待Promise对象resolve，得到resolve的值，
作为await表达式的运算结果。

但async函数调用不会造成阻塞，它内部的所有阻塞都封装在Promise对象
中异步执行。所以await必须用在async函数中
  • async await的使用场景是什么
连续的异步请求，下一步异步请求依赖于前一步的异步请求结果

服务端与网络

同源策略

同源是指域名、协议、端口都相等。为了保护用户数据安全而采取的策略

  1. 无法用js读取非同源的cookie/localstorage等。防止恶意网站通过js获取用户信息
  2. 无法用js获取非同源DOM
  3. 无法用js发送非同源ajax请求

XXS攻击

XSS为跨站脚本攻击，其原理是攻击者向有XSS漏洞的网站中输入恶意的HTML代码，当用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击目的

解决办法：通过正则表达式过滤掺入参数的HTML标签来防范XSS攻击

服务端渲染

服务端渲染简写SSR，是将组件或页面通过服务器生成html字符串，再发送到浏览器。最后将静态标记混合为客户端上完全交互的应用程序

使用SSR的利弊

  • 优势、
  1. 由于服务端渲染返回的客户端已经获取了异步数据并执行js脚本的最终html,网络爬虫就可以抓取到完整的页面信息，利于SEO
  2. 更利于首屏渲染，普通客户端渲染加载所需文件时间较长，首页就会有一个很长的空白等待时间
  • 劣势
  1. 服务端压力较大
  2. 开发条件受限
  3. 学习成本高

图片懒加载和预加载

  • 懒加载也叫延迟加载。符合某些条件时，再加载图片
  • 预加载：提前加载图片，当用户需要查看时可以从本地缓存中读取

前端性能优化方法

内容优化

  • 减少http请求
  • 减少DNS查询
  • 避免重定向
  • 让Ajax可以缓存
  • 延迟架子啊组件
  • 预加载组件
  • 减少DOM操作
  • 避免使用iframe
  • 避免404

CSS优化

  • 压缩css
  • 避免使用css表达式
  • 选择link放弃使用import
  • 把样式表放在顶部

js优化

  • 压缩js
  • 去除重复脚本
  • 脚本放在底部

图片优化

  • 图片大小设置合适

  • 使用雪碧图或base64字符

    • 相关问题
    1、这两个哪个好，为什么
雪碧图可以缓存
base64可以减少请求

2、怎么使用它们
webpack配url-loader(base64)
webpack的雪碧图插件webpack-spritesmith

  • 使用字体图片或者svg

  • 避免图片src属性为空

服务器

  • 对AJAX使用get请求
  • 使用cdn
  • 添上Expires或者Cache-Control HTTP头
  • 尽早清空缓存区
  • 配置Etags
  • Gzip组件

移动端

移动端开发怎么实现自适应

  • rem

  • vw和vh

  • 媒体查询 它们的特点分别是什么？或者说实现的原理

  • rem根据html的font-size为基准点

  • vw是根据浏览器窗口高低、vh是高度

  • 媒体查询是根据浏览器窗口高度或宽度进行响应式选择显示哪个css

GIT

git的一些基本命令

git init
git add 
git commit -m
git status
git checkout 
git branch
git merge
git push
git fetch
git pull
git remote

WEBPACK

webpack打包原理

  • 原理

    把所有依赖打包成一个bundle.js文件，通过代码分隔成单元片段并按需加载。

  • 核心概念

    1. 入口

      entry,告诉webpack从哪个入口文件开始构建

    2. 出口

      output,告诉webpack在哪里输出构建后的包，包的名称等

    3. loader

      让webpack处理非javascript文件

    4. plugin

      处理各种任务，从打包优化，一直到重新定义环境中的变量

    5. mode

      告诉webpack使用相应模式的内置优化

    6. target

      webpack能够为多种环境和target构建编译

    7. source map

      定位代码中的错误

浏览器

一个页面从输入url到页面加载显示都发生了什么

浏览器根据请求的url交给DNS域名解析，找到真实ip，向服务器发起请求 服务器交给后台处理完成后返回数据，浏览器接收文件 浏览器对加载到的资源进行语法解析，建立相应的内部数据结构。载入解析到资源文件，渲染页面，完成

重绘与回流

  • 重绘 当元素样式的改变不影响布局式，浏览器使用重绘对元素进行更新

  • 回流 当元素的尺寸、结构或某些属性改变时，浏览器会重新渲染页面

  • 触发回流的操作 页面初次渲染 浏览器窗口大小改变 元素尺寸内容位置发生改变等

  • 重绘不一定触发回流，但回流一定触发重绘

防抖与节流

  • 防抖：触发事件后，在n秒内函数只能执行一次
  • 节流：连续触发事件，但是在事件中只执行一次

描述下cookies sessionstorage localstorage 的区别

  1. cookie数据始终在同源的http请求中携带，而另外两个不会自动把数据发给服务器，仅在本地保存

  2. cookie的储存大小不能超过4M 而另外两个虽然也有储存限制，但比cookie大得多

  3. localstorage 浏览器关闭，数据不会被删除。除非自己手动删除 sessionstorage 浏览器关闭，数据被删除 cookie 数据在设置的有效期内一直有效

浏览器内核

IE：Trident
谷歌：webkit
火狐：Gecko
Safari：webkit
Opera：Presto
avatar
文章
阅读
粉丝