【JS】变量声明与赋值，引用、值传递与对象拷贝

1
var x // Declaration and initialization
2
x = 'Hello World' // Assignment
3
// Or all in one
4
var y = 'Hello World'

1
function sayHello() {
2
  var hello = 'Hello World'
3
  return hello
4
}
5
console.log(hello)

1
var hello = 'Hello World'
2
function sayHello() {
3
  return hello
4
}
5
console.log(hello)

1
let x // Declaration and initialization
2
x = 'Hello World' // Assignment
3
// Or all in one
4
let y = 'Hello World'

1
var name = 'Peter'
2
if (name === 'Peter') {
3
  let hello = 'Hello Peter'
4
} else {
5
  let hello = 'Hi'
6
}
7
console.log(hello)

1
var name = 'Peter'
2
if (name === 'Peter') {
3
  let hello = 'Hello Peter'
4
  console.log(hello)
5
} else {
6
  let hello = 'Hi'
7
  console.log(hello)
8
}

1
for (let i = 0; i < 2; i++) {
2
  setTimeout(() => {
3
    console.log(`i:${i}`)
4
  }, 0)
5
}
6
for (var j = 0; j < 2; j++) {
7
  setTimeout(() => {
8
    console.log(`j:${j}`)
9
  }, 0)
10
}
11
let k = 0
12
for (k = 0; k < 2; k++) {
13
  setTimeout(() => {
14
    console.log(`k:${k}`)
15
  }, 0)
16
}
17
// output
18
i: 0
19
i: 1
20
j: 2
21
j: 2
22
k: 2
23
k: 2

1
function f() {
2
  {
3
    let x;
4
    {
5
      // okay, block scoped name
6
      const x = "sneaky";
7
      // error, const
8
      x = "foo";
9
    }
10
    // error, already declared in block
11
    let x = "inner";
12
  }
13
}

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

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

1
# Example 4
2
const me = Object.freeze({name: “Jacopo”})
3
me.age = 28
4
console.log(me.age) // print undefined
5
# Example 5
6
const arr = Object.freeze([-1, 1, 2, 3])
7
arr[0] = 0
8
console.log(arr[0]) // print -1
9
# Example 6
10
const me = Object.freeze({
11
  name: 'Jacopo',
12
  pet: {
13
    type: 'dog',
14
    name: 'Spock'
15
  }
16
})
17
me.pet.name = 'Rocky'
18
me.pet.breed = 'German Shepherd'
19
console.log(me.pet.name) // print Rocky
20
console.log(me.pet.breed) // print German Shepherd

1
function changeStuff(a, b, c) {
2
  a = a * 10;
3
  b.item = "changed";
4
  c = {item: "changed"};
5
}
6
var num = 10;
7
var obj1 = {item: "unchanged"};
8
var obj2 = {item: "unchanged"};
9
changeStuff(num, obj1, obj2);
10
console.log(num); // 10
11
console.log(obj1.item); // changed
12
console.log(obj2.item); // unchanged

1
var a=b=1;

1
var a = {n:1};
2
var b = a; // 持有a，以回查
3
a.x = a = {n:2};
4
alert(a.x);// --> undefined
5
alert(b.x);// --> [object Object]

1
  a.x  =  a  = {n:2}
2
          │      │
3
  {n:1}<──┘      └─>{n:2}

1
[ variable1, variable2, ..., variableN ] = array;

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

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

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

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

1
function* fibs() {
2
  var a = 0;
3
  var b = 1;
4
  while (true) {
5
    yield a;
6
    [a, b] = [b, a + b];
7
  }
8
}
9
var [first, second, third, fourth, fifth, sixth] = fibs();
10
console.log(sixth); // 5

1
var robotA = { name: "Bender" };
2
var robotB = { name: "Flexo" };
3
var { name: nameA } = robotA;
4
var { name: nameB } = robotB;
5
console.log(nameA);// "Bender"
6
console.log(nameB);// "Flexo"

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

1
var complicatedObj = {
2
  arrayProp: [
3
    "Zapp",
4
    { second: "Brannigan" }
5
  ]
6
};
7
var { arrayProp: [first, { second }] } = complicatedObj;
8
console.log(first);// "Zapp"
9
console.log(second);// "Brannigan"

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

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

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

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

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

1
jQuery.ajax = function (url, {
2
  async = true,
3
  beforeSend = noop,
4
  cache = true,
5
  complete = noop,
6
  crossDomain = false,
7
  global = true,
8
  // ... 更多配置
9
}) {
10
  // ... do stuff
11
};

1
function returnMultipleValues() {
2
  return [1, 2];
3
}
4
var [foo, bar] = returnMultipleValues();

1
function outerFunction() {
2
  // store arguments into a separated variable
3
  var argsOuter = arguments;
4
  function innerFunction() {
5
    // args is an array-like object
6
    var even = Array.prototype.map.call(argsOuter, function(item) {
7
      // do something with argsOuter
8
    });
9
  }
10
}

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

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

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

1
let cold = ['autumn', 'winter'];
2
let warm = ['spring', 'summer'];
3
// construct an array
4
[...cold, ...warm] // => ['autumn', 'winter', 'spring', 'summer']
5
// function arguments from an array
6
cold.push(...warm);
7
cold // => ['autumn', 'winter', 'spring', 'summer']

1
class King {
2
  constructor(name, country) {
3
    this.name = name;
4
    this.country = country;
5
  }
6
  getDescription() {
7
    return `${this.name} leads ${this.country}`;
8
  }
9
}
10
var details = ['Alexander the Great', 'Greece'];
11
var Alexander = new King(...details);
12
Alexander.getDescription(); // => 'Alexander the Great leads Greece'

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

1
interface Iterable {
2
  [Symbol.iterator]() {
3
    //...
4
    return Iterator;
5
  }
6
}

1
interface Iterator {
2
  next() {
3
     //...
4
     return {
5
        value: <value>,
6
        done: <boolean>
7
     };
8
  };
9
}

1
var str = 'hi';
2
var iterator = str[Symbol.iterator]();
3
iterator.toString(); // => '[object String Iterator]'
4
iterator.next();     // => { value: 'h', done: false }
5
iterator.next();     // => { value: 'i', done: false }
6
iterator.next();     // => { value: undefined, done: true }
7
[...str];            // => ['h', 'i']

1
function iterator() {
2
  var index = 0;
3
  return {
4
    next: () => ({ // Conform to Iterator protocol
5
      done : index >= this.length,
6
      value: this[index++]
7
    })
8
  };
9
}
10
var arrayLike = {
11
  0: 'Cat',
12
  1: 'Bird',
13
  length: 2
14
};
15
// Conform to Iterable Protocol
16
arrayLike[Symbol.iterator] = iterator;
17
var array = [...arrayLike];
18
console.log(array); // => ['Cat', 'Bird']

1
function shallowCopy(target, source) {
2
  if (!source || typeof source !== 'object') return
3
  // 这个方法有点问题，target一定要事先定好，不然就不能改变实参了
4
  // 具体原因解释可看参考资料中 JS是值传递还是引用传递
5
  if (!target || typeof target !== 'object') return
6

7
  // 这边最好区别一下对象和数组的复制
8
  for (var key in source) {
9
    if (source.hasOwnProperty(key)) {
10
      target[key] = source[key]
11
    }
12
  }
13
}

1
Object.assign(target, ...sources)

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

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

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

1
var obj = Object.create(
2
  { foo: 1 },
3
  {
4
    // foo是个继承属性
5
    bar: { value: 2 }, // bar是个不可枚举属性
6
    baz: {
7
      value: 3,
8
      enumerable: true // baz是个自身可枚举属性
9
    }
10
  }
11
)
12
var copy = Object.assign({}, obj)
13
console.log(copy) // {baz: 3}

1
var v1 = '123'
2
var v2 = true
3
var v3 = 10
4
var v4 = Symbol('foo')
5

6
var obj = Object.assign({}, v1, null, v2, undefined, v3, v4)
7
// 源对象如果是原始值，会被自动转换成它们的包装对象，
8
// 而 null 和 undefined 这两种原始值会被完全忽略。
9
// 注意，只有字符串的包装对象才有可能有自身可枚举属性。
10
console.log(obj) // { "0": "1", "1": "2", "2": "3" }

1
var target = Object.defineProperty({}, 'foo', {
2
  value: 1,
3
  writeable: false
4
}) // target 的 foo 属性是个只读属性。
5
Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 })
6
// TypeError: "foo" is read-only
7
// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。
8
console.log(target.bar) // 2，说明第一个源对象拷贝成功了。
9
console.log(target.foo2) // 3，说明第二个源对象的第一个属性也拷贝成功了。
10
console.log(target.foo) // 1，只读属性不能被覆盖，所以第二个源对象的第二个属性拷贝失败了。
11
console.log(target.foo3) // undefined，异常之后 assign 方法就退出了，第三个属性是不会被拷贝到的。
12
console.log(target.baz) // undefined，第三个源对象更是不会被拷贝到的。

1
ar list = [1, 2, 3];
2
var changedList = [].concat(list);
3
changedList[1] = 2;
4
list === changedList; // false

1
> list = [[1,2,3]]
2
[ [ 1, 2, 3 ] ]
3
> new_list = [].concat(list)
4
[ [ 1, 2, 3 ] ]
5
> new_list[0][0] = 4
6
4
7
> list
8
[ [ 4, 2, 3 ] ]

1
const defaultOpt = {
2
  title: {
3
    text: 'hello world',
4
    subtext: "It's my world"
5
  }
6
}
7
const opt = Object.assign({}, defaultOpt, {
8
  title: {
9
    subtext: 'Yes, your world'
10
  }
11
})
12
console.log(opt) // { title: { subtext: 'Yes, your world.' } }

1
const defaultOpt = {
2
  title: {
3
    text: 'hello world',
4
    subtext: "It's my world."
5
  }
6
}
7
const opt1 = Object.assign({}, defaultOpt);
8
const opt2 = Object.assign({}, defaultOpt);
9
opt2.title.subtext = 'Yes, your world.';
10
console.log(opt1); // { title: { text: 'hello world', subtext: 'Yes, your world.' } }
11
console.log(opt2); // { title: { text: 'hello world', subtext: 'Yes, your world.' } }

1
function clone(obj) {
2
  var copy
3
  // 处理基本类型 null undefined
4
  if (null === obj || 'object' !== typeof obj) return obj
5
  // 若为 Date 对象时
6
  if (obj instanceof Date) {
7
    copy = new Date()
8
    copy.setTime(obj.getTime())
9
    return copy
10
  }
11
  // 处理数组
12
  if (obj instanceof Array) {
13
    copy = []
14
    for (var i = 0, len = obj.length; i < len; i++) {
15
      copy[i] = clone(obj[i])
16
    }
17
    return copy
18
  }
19
  // 处理对象
20
  if (obj instanceof Object) {
21
    copy = {}
22
    for (var attr in obj) {
23
      if (obj.hasOwnProperty(attr)) {
24
        copy[attr] = clone(obj[arr])
25
      }
26
    }
27
    return copy
28
  }
29
  throw new Error('Unable to copy obj! Its type isn\'t supported!')
30
}

1
// This would be cloneable:
2
var tree = {
3
    "left"  : { "left" : null, "right" : null, "data" : 3 },
4
    "right" : null,
5
    "data"  : 8
6
};
7
// This would kind-of work, but you would get 2 copies of the
8
// inner node instead of 2 references to the same copy
9
var directedAcylicGraph = {
10
    "left"  : { "left" : null, "right" : null, "data" : 3 },
11
    "data"  : 8
12
};
13
directedAcyclicGraph["right"] = directedAcyclicGraph["left"];
14
// Cloning this would cause a stack overflow due to infinite recursion:
15
var cylicGraph = {
16
    "left"  : { "left" : null, "right" : null, "data" : 3 },
17
    "data"  : 8
18
};
19
cylicGraph["right"] = cylicGraph;

1
JSON.parse(JSON.stringify(obj))

1
var obj = {
2
  a: 1,
3
  b: 2,
4
  c: undefined,
5
  sum: function() {
6
    return a + b
7
  }
8
}
9
var obj2 = JSON.parse(JSON.stringify(obj))
10
console.log(obj2) // Object {a: 1, b: 2}