ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解

ES6 为我们引入了 let 与 const 两种新的变量声明关键字，同时也引入了块作用域；本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了 JavaScript 按值传递的特性以及多种的赋值方式，最后介绍了复合类型拷贝的技巧。

reference link

变量声明

在 ES6 中，对于变量声明的方式进行了扩展，引入了 let 与 const。var 与 let 两个关键字创建变量的区别在于， var 声明的变量作用域是最近的函数块；而 let 声明的变量作用域是最近的闭合块，往往会小于函数块。

另一方面，以 let 关键字创建的变量虽然同样被提升到作用域头部，但是并不能在实际声明前使用；如果强行使用则会抛出 ReferenceError 异常。

function sayHello(){
  var hello = "Hello World";
  return hello;
}
console.log(hello);

像如上这种调用方式会抛出异常: ReferenceError: hello is not defined，因为 hello 变量只能作用于 sayHello 函数中

let

let 关键字声明的变量是属于块作用域，也就是包含在 {} 之内的作用于。使用 let 关键字的优势在于能够降低偶然的错误的概率，因为其保证了每个变量只能在最小的作用域内进行访问。

var name = "Peter";
if(name === "Peter"){
  let hello = "Hello Peter";
} else {
  let hello = "Hi";
}
console.log(hello);

上述代码同样会抛出 ReferenceError: hello is not defined 异常，因为 hello 只能够在闭合的块作用域中进行访问，我们可以进行如下修改:

var name = "Peter";
if(name === "Peter"){
let hello = "Hello Peter";
  console.log(hello);
} else {
let hello = "Hi";
  console.log(hello);
}

我们可以利用这种块级作用域的特性来避免闭包中因为变量保留而导致的问题，譬如如下两种异步代码，使用 var 时每次循环中使用的都是相同变量；而使用 let 声明的 i 则会在每次循环时进行不同的绑定，即每次循环中闭包捕获的都是不同的 i 实例：

for(let i = 0;i < 2; i++) {
    setTimeout(()=>{console.log(`i:${i}`)},0);
}
 
for(var j = 0;j < 2; j++) {
    setTimeout(()=>{console.log(`j:${j}`)},0);
}
 
let k = 0;
for(k = 0;k < 2; k++) {
    setTimeout(()=>{console.log(`k:${k}`)},0);
}
 
// output
i:0
i:1
j:2
j:2
k:2
k:2

const

JavaScript 中 const 关键字的表现于 C 中存在着一定差异，譬如下述使用方式在 JavaScript 中就是正确的，而在 C 中则抛出异常：

// JavaScript
const numbers = [1, 2, 3, 4, 6]
numbers[4] = 5
console.log(numbers[4]) // print 5
 
// C
const int numbers[] = {1, 2, 3, 4, 6};
numbers[4] = 5; // error: read-only variable is not assignable
printf("%d\n", numbers[4]);

从上述对比我们也可以看出，JavaScript 中 const 限制的并非值不可变性；而是创建了不可变的绑定，即对于某个值的只读引用，并且禁止了对于该引用的重赋值，即如下的代码会触发错误：

const numbers = [1, 2, 3, 4, 6]
numbers = [7, 8, 9, 10, 11] // error: assignment to constant variable
console.log(numbers[4])

JavaScript 中存在着所谓的原始类型与复合类型，使用 const 声明的原始类型是值不可变的：

// Example 1
const a = 10
a = a + 1 // error: assignment to constant variable
// Example 2
const isTrue = true
isTrue = false // error: assignment to constant variable
// Example 3
const sLower = 'hello world'
const sUpper = sLower.toUpperCase() // create a new string
console.log(sLower) // print hello world
console.log(sUpper) // print HELLO WORLD

而如果我们希望将某个对象同样变成不可变类型，则需要使用 Object.freeze()；不过该方法仅对于键值对的 Object 起作用，而无法作用于 Date、Map 与 Set 等类型：

// Example 4
const me = Object.freeze({name: “Jacopo”})
me.age = 28
console.log(me.age) // print undefined
// Example 5
const arr = Object.freeze([-1, 1, 2, 3])
arr[0] = 0
console.log(arr[0]) // print -1
// Example 6
const me = Object.freeze({
  name: 'Jacopo',
pet: {
    type: 'dog',
    name: 'Spock'
  }
})
me.pet.name = 'Rocky'
me.pet.breed = 'German Shepherd'
console.log(me.pet.name) // print Rocky
console.log(me.pet.breed) // print German Shepherd

即使是 Object.freeze() 也只能防止顶层属性被修改，而无法限制对于嵌套属性的修改，这一点我们会在下文的浅拷贝与深拷贝部分继续讨论。

变量赋值

按值传递

JavaScript 中永远是按值传递（pass-by-value），只不过当我们传递的是某个对象的引用时，这里的值指的是对象的引用。按值传递中函数的形参是被调用时所传实参的副本。修改形参的值并不会影响实参。而按引用传递（pass-by-reference）时，函数的形参接收实参的隐式引用，而不再是副本。这意味着函数形参的值如果被修改，实参也会被修改。同时两者指向相同的值。

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}
 
var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};
 
changeStuff(num, obj1, obj2);
 
console.log(num);
console.log(obj1.item);    
console.log(obj2.item);
 
// 输出结果
10
changed
unchanged

JavaScript 按值传递就表现于在内部修改了 c 的值但是并不会影响到外部的 obj2 变量。如果我们更深入地来理解这个问题，JavaScript 对于对象的传递则是按共享传递的（pass-by-sharing，也叫按对象传递、按对象共享传递）。

解构赋值

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。

数组与迭代器

var [ variable1, variable2, ..., variableN ] = array;
let [ variable1, variable2, ..., variableN ] = array;
const [ variable1, variable2, ..., variableN ] = array;

var [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
// 1
console.log(bar);
// 2
console.log(baz);
// 3

var [,,third] = ["foo", "bar", "baz"];
console.log(third);
// "baz"

var [head, ...tail] = [1, 2, 3, 4];
console.log(tail);
// [2, 3, 4]

console.log([][0]);
// undefined
var [missing] = [];
console.log(missing);
// undefined

对象

通过解构对象，你可以把它的每个属性与不同的变量绑定，首先指定被绑定的属性，然后紧跟一个要解构的变量。

var robotA = { name: "Bender" };
var robotB = { name: "Flexo" };
var { name: nameA } = robotA;
var { name: nameB } = robotB;
console.log(nameA);
// "Bender"
console.log(nameB);
// "Flexo"

当属性名与变量名一致时，可以通过一种实用的句法简写：

var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);
// "lorem"
console.log(bar);
// "ipsum"

与数组解构一样，你可以随意嵌套并进一步组合对象解构：

var complicatedObj = {
      arrayProp: [
        "Zapp",
        { second: "Brannigan" }
      ]
    };
var { arrayProp: [first, { second }] } = complicatedObj;
    console.log(first);
    // "Zapp"
    console.log(second);
    // "Brannigan"

当你解构一个未定义的属性时，得到的值为undefined：

var { missing } = {};
console.log(missing);
// undefined

请注意，当你解构对象并赋值给变量时，如果你已经声明或不打算声明这些变量（亦即赋值语句前没有let、const或var关键字），你应该注意这样一个潜在的语法错误：

{ blowUp } = { blowUp: 10 };
// Syntax error 语法错误

为什么会出错？这是因为JavaScript语法通知解析引擎将任何以{开始的语句解析为一个块语句（例如，{console}是一个合法块语句）。解决方案是将整个表达式用一对小括号包裹：

({ safe } = {});
// No errors 没有语法错误

默认值

当你要解构的属性未定义时你可以提供一个默认值：

var [missing = true] = [];
    console.log(missing);
    // true
var { message: msg = "Something went wrong" } = {};
    console.log(msg);
    // "Something went wrong"
var { x = 3 } = {};
    console.log(x);
    // 3

由于解构中允许对对象进行解构，并且还支持默认值，那么完全可以将解构应用在函数参数以及参数的默认值中。

function removeBreakpoint({ url, line, column }) {
      // ...
    }

Three Dots

Rest Operator

在 JavaScript 函数调用时我们往往会使用内置的 arguments 对象来获取函数的调用参数，不过这种方式却存在着很多的不方便性。譬如 arguments 对象是 Array-Like 对象，无法直接运用数组的 .map() 或者 .forEach() 函数；并且因为 arguments 是绑定于当前函数作用域，如果我们希望在嵌套函数里使用外层函数的 arguments 对象，我们还需要创建中间变量。

function outerFunction() {  
   // store arguments into a separated variable
   var argsOuter = arguments;
   function innerFunction() {
         // args is an array-like object
         var even = Array.prototype.map.call(argsOuter, function(item) {
         // do something with argsOuter              
      });
   }
}

ES6 中为我们提供了 Rest Operator 来以数组形式获取函数的调用参数，Rest Operator 也可以用于在解构赋值中以数组方式获取剩余的变量：

function countArguments(...args) {  
return args.length;
}
// get the number of arguments
countArguments('welcome', 'to', 'Earth'); // => 3  
// destructure an array
let otherSeasons, autumn;  
[autumn, ...otherSeasons] = cold;
otherSeasons      // => ['winter']  

典型的 Rest Operator 的应用场景譬如进行不定数组的指定类型过滤：

function filter(type, ...items) {  
return items.filter(item => typeof item === type);
}
filter('boolean', true, 0, false);        // => [true, false]  
filter('number', false, 4, 'Welcome', 7); // => [4, 7] 

尽管 Arrow Function 中并没有定义 arguments 对象，但是我们仍然可以使用 Rest Operator 来获取 Arrow Function 的调用参数：

(function() {
let outerArguments = arguments;
const concat = (...items) => {
    console.log(arguments === outerArguments); // => true
return items.reduce((result, item) => result + item, '');
  };
  concat(1, 5, 'nine'); // => '15nine'
})();

Spread Operator

Spread Operator 则与 Rest Opeator 的功能正好相反，其常用于进行数组构建与解构赋值，也可以用于将某个数组转化为函数的参数列表，其基本使用方式如下：

let cold = ['autumn', 'winter'];  
let warm = ['spring', 'summer'];  
// construct an array
[...cold, ...warm] // => ['autumn', 'winter', 'spring', 'summer']
// function arguments from an array
cold.push(...warm);  
cold              // => ['autumn', 'winter', 'spring', 'summer']  

我们也可以使用 Spread Operator 来简化函数调用：

class King {  
constructor(name, country) {
this.name = name;
this.country = country;    
   }
   getDescription() {
return `${this.name} leads ${this.country}`;
   }
}
var details = ['Alexander the Great', 'Greece'];  
var Alexander = new King(...details);  
Alexander.getDescription(); // => 'Alexander the Great leads Greece'

还有另外一个好处就是可以用来替换 Object.assign 来方便地从旧有的对象中创建新的对象，并且能够修改部分值；譬如：

var obj = {a:1,b:2}
var obj_new_1 = Object.assign({},obj,{a:3});
var obj_new_2 = {
  ...obj,
  a:3
}

复合类型的拷贝

浅拷贝

顶层属性遍历

浅拷贝是指复制对象的时候，指对第一层键值对进行独立的复制。一个简单的实现如下：

// 浅拷贝实现
function shadowCopy(target, source){
if( !source || typeof source !== 'object'){
return;
    }
    // 这个方法有点小trick，target一定得事先定义好，不然就不能改变实参了。
       // 具体原因解释可以看参考资料中 JS是值传递还是引用传递
if( !target || typeof target !== 'object'){
return;
    }  
    // 这边最好区别一下对象和数组的复制
for(var key in source){
if(source.hasOwnProperty(key)){
            target[key] = source[key];
        }
    }
}
 
//测试例子
var arr = [1,2,3];
var arr2 = [];
shadowCopy(arr2, arr);
console.log(arr2);
//[1,2,3]
 
var today = {
    weather: 'Sunny',
    date: {
        week: 'Wed'
    }
}
 
var tomorrow = {};
shadowCopy(tomorrow, today);
console.log(tomorrow);
// Object {weather: "Sunny", date: Object}

Object.assign

注意，在属性拷贝过程中可能会产生异常，比如目标对象的某个只读属性和源对象的某个属性同名，这时该方法会抛出一个 TypeError 异常，拷贝过程中断，已经拷贝成功的属性不会受到影响，还未拷贝的属性将不会再被拷贝。

注意， Object.assign 会跳过那些值为 null 或 undefined 的源对象。

Object.assign(target, ...sources)

例子：浅拷贝一个对象

var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

例子：合并若干个对象

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
 
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

例子：拷贝 symbol 类型的属性

var o1 = { a: 1 };
var o2 = { [Symbol("foo")]: 2 };
 
var obj = Object.assign({}, o1, o2);
console.log(obj); // { a: 1, [Symbol("foo")]: 2 }

例子：继承属性和不可枚举属性是不能拷贝的

var obj = Object.create({foo: 1}, { // foo 是个继承属性。
    bar: {
        value: 2  // bar 是个不可枚举属性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是个自身可枚举属性。
    }
});
 
var copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

不过需要注意的是，assign是浅拷贝，或者说，它是一级深拷贝，举两个例子说明：

const defaultOpt = {
    title: {
        text: 'hello world',
        subtext: 'It\'s my world.'
    }
};
 
const opt = Object.assign({}, defaultOpt, {
    title: {
        subtext: 'Yes, your world.'
    }
});
 
console.log(opt);
 
// 预期结果
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}
// 实际结果
{
    title: {
        subtext: 'Yes, your world.'
    }
}

上面这个例子中，对于对象的一级子元素而言，只会替换引用，而不会动态的添加内容。那么，其实assign并没有解决对象的引用混乱问题，参考下下面这个例子：

const defaultOpt = {
    title: {
        text: 'hello world',
        subtext: 'It\'s my world.'
    }
};
 
const opt1 = Object.assign({}, defaultOpt);
const opt2 = Object.assign({}, defaultOpt);
opt2.title.subtext = 'Yes, your world.';
 
console.log('opt1:');
console.log(opt1);
console.log('opt2:');
console.log(opt2);
 
// 结果
opt1:
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}
opt2:
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}

深拷贝

递归属性遍历

一般来说，在JavaScript中考虑复合类型的深层复制的时候，往往就是指对于Date、Object与Array这三个复合类型的处理。我们能想到的最常用的方法就是先创建一个空的新对象，然后递归遍历旧对象，直到发现基础类型的子节点才赋予到新对象对应的位置。不过这种方法会存在一个问题，就是JavaScript中存在着神奇的原型机制，并且这个原型会在遍历的时候出现，然后原型不应该被赋予给新对象。那么在遍历的过程中，我们应该考虑使用hasOenProperty方法来过滤掉那些继承自原型链上的属性：

function clone(obj) {
    var copy;
 
    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;
 
    // Handle Date
    if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }
 
    // Handle Array
    if (obj instanceof Array) {
        copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }
 
    // Handle Object
    if (obj instanceof Object) {
        copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }
 
    throw new Error("Unable to copy obj! Its type isn't supported.");
}

调用如下：

// This would be cloneable:
var tree = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "right" : null,
    "data"  : 8
};
 
// This would kind-of work, but you would get 2 copies of the 
// inner node instead of 2 references to the same copy
var directedAcylicGraph = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "data"  : 8
};
directedAcyclicGraph["right"] = directedAcyclicGraph["left"];
 
// Cloning this would cause a stack overflow due to infinite recursion:
var cylicGraph = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "data"  : 8
};
cylicGraph["right"] = cylicGraph;

利用 JSON 深拷贝

JSON.parse(JSON.stringify(obj));

对于一般的需求是可以满足的，但是它有缺点。下例中，可以看到JSON复制会忽略掉值为undefined以及函数表达式。

var obj = {
    a: 1,
    b: 2,
    c: undefined,
    sum: function() { return a + b; }
};
 
var obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj2);
//Object {a: 1, b: 2}