对象的浅拷贝与深拷贝

javascript原生里并没有对对象拷贝的函数，要实现对象的拷贝，可以使用以下方法。

浅拷贝

只拷贝对象的值，即将该对象的属性复制给另一个对象，如果对象里面包含另一个对象，只是将引用复制了而已。所以浅拷贝也可以理解为只拷贝一层。

要实现浅拷贝，可以通过遍历将属性赋值给另一个对象，也可以直接使用Object.assign()方法
使用Object.assign()

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let Oa = {
  a: 1,
  b: 2,
  Oc: {
    d: 3,
    e: 4
  }
}

let Ob = Object.assign({}, Oa)
console.log(Ob)
// { a: 1, b: 2, Oc: { d: 3, e: 4 } }
console.log(Ob.Oc === Oa.Oc)
// true

这里Ob的属性Ob.Oc === Oa.Oc即两个对象是相等的，复制的引用

深拷贝

数组扁平化

数组扁平化是讲一个多维数组编程一个一维数组

1
2

[1, 2, 3, [4, 5, [6, 7]]] // 转换前
[1, 2, 3, 4, 5, 6, 7] 	// 转换后

下面介绍几种数组扁平化的方式

HTML 5提供了一个新的API：history，它能够操纵浏览器的历史记录信息

下面就对其进行简单的介绍

灵魂配图

在es6中，新增了Promise对象

其中有两个方法

• Promise.all()
• Promise.race()

都是用于将多个Promise实例包装成另一个实例

下面我会对两种方法进行介绍，以及自己使用js实现他们的方法

通常，你想要通过css transition来过渡属性，然后使用了下面代码transition: height 0.5s linear

然后又使用了 height: auto来自适应高度height: 0 -> height: auto

然后发现动画就像没发生一样，直接就在0和auto两个状态之间直接切换

你可能会认为出现了什么bug，或者代码写错了，其实不然

消抖(debounce):

• 当函数被调用后，n秒之后才会触发该函数，如果在此期间函数再次被调用，则重新开始计时，n秒之后才会触发该函数。

其作用是为了避免某个事件在短时间内连续触发从而影响性能，也可用于避免在一定时间内重复提交表单等。

节流(throttle):

• 函数被调用后，立即触发该函数，在之后的n秒之内不能再次重复触发。

该函数可以用于限制浏览器scroll，mousemove等高频触发事件的触发频率

下面介绍debounce和throttle的实现方式

ES6提供了新的数据结构Set，类似于数组，不过里面不会出现重复的值

另外一个是Map，类似于对象，对象只能使用字符串作为键，而Map可以使用任意类型

本篇文章会教你如何上手webpack的loader，以使用style-loader 、css-loader为例子

下面就正式开始吧

如果想修改webpack的默认入口，出口，使用的插件，loader时，可以通过控制台的webpack指令传入参数

如

1

webpack --entry xxxx

来定义入口文件

但是更多的做法是创建一个webpack.config.js文件，利用这个文件对进行相关的配置

下面介绍使用webpack.config.js的基本配置以及多

下面就来通过例子讲解webpack的安装，基本操作

webpack 是一个用于编译Javascript模块的工具，在安装webpack之后，可以通过

• CLI (command line interface 就是在控制台上使用 )
• API (在js中导入模块使用)

下面介绍的是webpack-cli的使用