var a = 1;
var a = 2;
console.log(a); // 2

let a = 1;
let a = 2;
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world'; // 這里會(huì)有變量提升
  }
}
f(); // undefined

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
// for循環(huán)外面打印
console.log(i); // 5

{
  let a = 10;
  var b = 1;
}
console.log(b); // 1
console.log(a); // Uncaught ReferenceError: a is not defined

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 報(bào)錯(cuò)
}}}};

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i); // ReferenceError: i is not defined

for (var i = 0; i < 3; i++) {
  console.log(i); //輸出0 1 2
}
console.log(i); //只會(huì)輸出3

var a = 1
{ 
 a = 6 
 let a  // Uncaught ReferenceError: Cannot access 'a' before initialization
}

 var a = 1;
  (function () {
    console.log(a); // 1
  })();

 var a = 1;
  (function () {
    console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
    let a = 2
  })();

// var聲明的變量會(huì)掛載到window上
var a = 1;
window.a // 1

// let聲明的變量不會(huì)掛載到window
let b = 1;
window.b // undefined

const a = 1;
a = 3; // TypeError: Assignment to constant variable.

const a;
// SyntaxError: Missing initializer in const declaration

const a = {};
// 為 a 添加一個(gè)屬性，可以成功
a.prop = 123;
// 將 a 指向另一個(gè)對(duì)象，就會(huì)報(bào)錯(cuò)
a = {}; // TypeError: "a" is read-only

const obj = { a:1, b:2, c:3 }
const a = obj.a; 
const b = obj.b; 
const c = obj.c; 

const obj = { a:1, b:2, c:3 }
const {a,b,c} = obj;

const obj = { a:1, b:2, c:3 }
const {a:a1, b:b1, c} = obj;
console.log(a1)  // 1
console.log(b1)  // 2
console.log(c)   // 3

const obj = { a:1, b:2, c:3 }
const {d = 5} = obj;
const {e:e1 = 6} = obj;
console.log(d)  // 5
console.log(e1)  // 6

  const metadata = {
    title: "english-title",
    translations: [
      {
        title: "我是深處的title",
      },
    ],
    friend: {
      girlFriend: {
        name: {
          firstName: "chimmy",
        },
      },
    },
  };

  let {
    title: englishTitle, // rename
    translations: [
      {
        title: localeTitle, // rename
      },
    ],
    friend: {
      girlFriend: {
        name: { firstName },
      },
    },
  } = metadata;

  console.log(englishTitle); // "english-title"
  console.log(localeTitle); // "我是深處的title"
  console.log(firstName); // "chimmy"

// 以前獲取數(shù)組里面值得方式
var names = ["abc", "cba", "nba"]
// var item1 = names[0]
// var item2 = names[1]
// var item3 = names[2]

// 對(duì)數(shù)組的解構(gòu): []
let [item1, item2, item3] = names
console.log(item1, item2, item3) // abc cba nba

// 解構(gòu)后面的元素
let [, , itemz] = names
console.log(itemz) // nba

// 解構(gòu)出一個(gè)元素,后面的元素放到一個(gè)新數(shù)組中
let [itemx, ...newNames] = names
console.log(itemx, newNames) // abc ['cba', 'nba']

// 解構(gòu)的默認(rèn)值
let [itema, itemb, itemc, itemd = "aaa"] = names
console.log(itemd) // aaa

// 通過解構(gòu)交換變量
let a = 1;
let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

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

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

let name = "jimmy"
let age = 18
// 屬性的簡(jiǎn)寫
let obj = {
 name，
 age
}
// 等同于
let obj = {
 name:name，
 age:age
}

// 方法的簡(jiǎn)寫
let obj2 = {
  bar() {
    console.log(this)
  },
}
//   等同于
let obj2 = {
  bar:function() {
    console.log(this)
  }
}

// 計(jì)算屬性名(對(duì)象的鍵可以是變量)
let obj3 = {}
obj3[name] = "chimmy";
console.log(obj3.jimmy); // chimmy

const names = ["abc", "cba", "nba"]
const info = {name: "why", age: 18}

// 1.函數(shù)調(diào)用時(shí)
function foo(x, y, z) {
  console.log(x, y, z)  // abc cba nba
}
foo(...names)

// 2.構(gòu)造數(shù)組時(shí)
const newNames = [...names]
console.log(newNames) // ['abc', 'cba', 'nba']
console.log(...[1, 2, 3]) // 1 2 3

// 3.構(gòu)建對(duì)象字面量時(shí)ES2018(ES9)
const obj = { ...info, address: "成都市", ...names }
console.log(obj) // {0: 'abc', 1: 'cba', 2: 'nba', name: 'why', age: 18, address: '成都市'}

const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
console.log(a1) // [2, 2]

const a1 = [1, 2];
const a2 = [...a1];
a2[0] = 2;
console.log(a1) // [1, 2]

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并數(shù)組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

const name = "jimmy";
const age = 18;
const height = 1.88;
console.log("my name is " + name + ", age is " + age + ", height is " + height)

const age = 18;
const height = 1.88;

// 支持變量
const message = `my name is ${name}, age is ${age}, height is ${height}`;
console.log(message); // my name is , age is 18, height is 1.88

// 支持表達(dá)式
const info = `age double is ${age * 2}`;
console.log(info); // age double is 36

// 支持函數(shù)調(diào)用
function doubleAge() {
  return age * 2;
}
const info2 = `double age is ${doubleAge()}`;
console.log(info2); // double age is 36

Object.is(value1, value2);

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

console.log(NaN === NaN); // false
console.log(0 === -0);     // true

Object.is(NaN, NaN) // true
Object.is(+0, -0) // false

// 目標(biāo)對(duì)象與源對(duì)象有同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 4, c: 5 } 注意目標(biāo)對(duì)象自身也會(huì)改變
console.log(returnedTarget); { a: 1, b: 4, c: 5 }
// Object.assign()的返回值其實(shí)就是目標(biāo)對(duì)象
target === returnedTarget // true

Object.assign(target, ...sources)

const obj = {a: 1};
Object.assign(obj) === obj // true

typeof Object.assign(2) // "object"

Object.assign(undefined) // 報(bào)錯(cuò)
Object.assign(null) // 報(bào)錯(cuò)

// 如果`undefined`和`null`不在首參數(shù)，就不會(huì)報(bào)錯(cuò)。
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

// 等同于下面的寫法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

function clone(origin) {
  return Object.assign({}, origin);
}

const merge = (target, ...sources) => Object.assign(target, ...sources);

const merge = (...sources) => Object.assign({}, ...sources);

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

let obj = {
  name: "jimmy",
  age: 18,
  like: "girl",
};

// for...in的作用是用于遍歷對(duì)象的。
for (let key in obj) {
  console.log(key, obj[key]);
}

// Object.keys()用于返回對(duì)象所有key組成的數(shù)組。
Object.keys(obj).forEach((key) => {
  console.log(key, obj[key]);
});

// Object.getOwnPropertyNames()用于返回對(duì)象所有key組成的數(shù)組。
Object.getOwnPropertyNames(obj).forEach((key) => {
  console.log(key, obj[key]);
});

// Reflect.ownKeys()用于返回對(duì)象所有key組成的數(shù)組。

Reflect.ownKeys(obj).forEach((key) => {
  console.log(key, obj[key]);
});

// 打印的都是
// name jimmy
// age 18
// like girl

function log(x, y) {
 if (typeof y === 'undefined' || typeof y === 'null') {
   y = 'World';
 }
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

// arguments變量的寫法
function sortNumbers() {
  return Array.from(arguments).sort();
}

// rest參數(shù)的寫法
const sortNumbers = (...numbers) => numbers.sort();

// 報(bào)錯(cuò)
function f(a, ...b, c) {
  // ...
}

function hello() {
    console.log('say hello')
}
// 或

let hello = function() {
    console.log('say hello')
}

let hello = () => {
    console.log('say hello')
}

let hello = (name) => {
    console.log('say hello', name)
}
// 或者

let hello = name => {
    console.log('say hello', name)
}
// 如果只有一個(gè)參數(shù)，可以省略括號(hào)，如果大于一個(gè)參數(shù)一定要記得帶括號(hào)

 let pow = x => x * x

let person = (name) => ({
      age: 20,
      addr: 'Beijing City'
  })

function foo(a, b = 1, c) {
    console.log(arguments.length)
}
foo('a', 'b') //2

function foo(a, b = 1, c) {
    console.log(foo.length)
}
foo('a', 'b') // 1

Array.from(arrayLike[, mapFn[, thisArg]])

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

// NodeList對(duì)象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});

// arguments對(duì)象
function foo() {
  var args = Array.from(arguments);
  // ...
}

// Set
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set); // [ "foo", "bar", "baz" ]

// Map
const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map); // [[1, 2], [2, 4], [4, 8]]

Array.from([1, 2, 3]) // [1, 2, 3]

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

for (let val of [1, 2, 3]) {
    console.log(val); // 1,2,3
}

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found); //12

arr.find(callback[, thisArg])

element當(dāng)前遍歷到的元素。

index 可選 當(dāng)前遍歷到的索引

array 數(shù)組本身

let array = [5, 12, 8, 130, 44];
let found = array.find(function(element) {
    return element > 10;
});
console.log(found); // 1

arr.fill(value[, start[, end]])

const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4)); // [1, 2, 0, 0]
console.log(array1.fill(5, 1)); //  [1, 5, 5, 5]
// 只有一個(gè)參數(shù)，說明其他兩項(xiàng)都是默認(rèn)值，會(huì)替換數(shù)組全部?jī)?nèi)容
console.log(array1.fill(6)); // [6, 6, 6, 6]

Array.prototype.copyWithin(target, start = 0, end = this.length)

// 將3號(hào)位復(fù)制到0號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相當(dāng)于3號(hào)位，-1相當(dāng)于4號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5]

// 參數(shù)不足三個(gè)，沒有的參數(shù)就是默認(rèn)值
[1, 2, 3, 4, 5].copyWithin(-2) // [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.of() // [] `Array.of()`總是返回參數(shù)值組成的數(shù)組。如果沒有參數(shù)，就返回一個(gè)空數(shù)組。
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Number.isFinite(15) // true
Number.isFinite(0.8) // true
Number.isFinite(NaN) // false
Number.isFinite(Infinity) // false
Number.isFinite(-Infinity) // false
Number.isFinite('foo') // false
Number.isFinite('15') // false
Number.isFinite(true) // false

Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN('true' / 0) // true
Number.isNaN('true' / 'true') // true

Number.isInteger(25) // true
Number.isInteger(25.1) // false

Number.isInteger() // false
Number.isInteger(null) // false
Number.isInteger('15') // false
Number.isInteger(true) // false

Math.pow(2, 53) // 9007199254740992

9007199254740992  // 9007199254740992
9007199254740993  // 9007199254740992

Math.pow(2, 53) === Math.pow(2, 53) + 1 // true

Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1 // true
Number.MAX_SAFE_INTEGER === 9007199254740991 // true

Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER // true
Number.MIN_SAFE_INTEGER === -9007199254740991 // true

Math.pow(2, 53) // 9007199254740992

Math.pow(2, 53) === Math.pow(2, 53) + 1 // true

const str = 'jimmy'

console.log(str.indexOf('y'))  // 4

const str = 'jimmy'
console.log(str.includes('mm')) // true

// 區(qū)分大小寫
'Blue Whale'.includes('blue'); // returns false

str.includes(searchString[, position])

const str = 'jimmy'
console.log(str.startsWith('ji')) // true

const str = 'jimmy'

console.log(str.endsWith('my')) // true

const str = 'jimmy'
const newStr = str.repeat(2)
console.log(newStr) // jimmyjimmy

let a = Symbol();
let b = Symbol();

typeof a  // symbol
console.log(a === b); // false

let s1 = Symbol('foo')
let s2 = Symbol('foo')
console.log(s1) //Symbol(foo)
console.log(s2) // Symbol(foo)
// `Symbol`函數(shù)的參數(shù)只是表示對(duì)當(dāng)前 Symbol 值的描述，因此相同參數(shù)的`Symbol`函數(shù)的返回值是不相等的。
console.log(s1 === s2) // false

const obj = {
  toString() {
    return 'abc';
  }
};
const sym = Symbol(obj); // Symbol(abc)

let sym = Symbol('My symbol');

"your symbol is " + sym
// TypeError: can't convert symbol to string
`your symbol is ${sym}`
// TypeError: can't convert symbol to string

let sym = Symbol('My symbol');
String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

Boolean(sym) // true
!sym  // false

Number(sym) // TypeError
sym + 2 // TypeError

let s1 = Symbol.for('foo')
let s2 = Symbol.for('foo')
console.log(s1 === s2) // true

const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefined

const s2 = Symbol.for('foo')
console.log(Symbol.keyFor(s2)) // foo

function getArea(shape, options) {
  let area = 0;

  switch (shape) {
    case 'Triangle': // 魔術(shù)字符串
      area = .5 * options.width * options.height;
      break;
     /* ... more code ... */
  }

  return area;
}

getArea('Triangle', { width: 100, height: 100 }); // 魔術(shù)字符串

const shapeType = {
  triangle: 'Triangle'
};

function getArea(shape, options) {
  let area = 0;
  switch (shape) {
    case shapeType.triangle:
      area = .5 * options.width * options.height;
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

const shapeType = {
  triangle: Symbol()
};

const shapeType = {
    triangle: Symbol(),
    circle: Symbol()
}

function getArea(shape) {
    let area = 0
    switch (shape) {
        case shapeType.triangle:
             area = .5 * options.width * options.height;
             break;
        case shapeType.circle:
            // ... more code ...
            break
    }
    return area
}
console.log(getArea(shapeType.triangle))

const COLOR_RED    = Symbol();
const COLOR_GREEN  = Symbol();

function getComplement(color) {
  switch (color) {
    case COLOR_RED:
      return COLOR_GREEN;
    case COLOR_GREEN:
      return COLOR_RED;
    default:
      throw new Error('Undefined color');
    }
}

 let s = new Set()
 // 在實(shí)例化的同時(shí)傳入默認(rèn)的數(shù)據(jù)。
 let s2 = new Set([1,2,3])
 
 // 初始化的參數(shù)必須是可遍歷的，可以是數(shù)組或者自定義遍歷的數(shù)據(jù)結(jié)構(gòu)。

 let s = new Set()
 s.add('chimmy')
 s.add('18')
 s.add('jimmy').add('18')
 // Set 數(shù)據(jù)結(jié)構(gòu)不允許數(shù)據(jù)重復(fù)，所以添加重復(fù)的數(shù)據(jù)是無效的
 console.log(s); // Set(3) { 'chimmy', '18', 'jimmy' }

  // 刪除指定數(shù)據(jù)
  s.delete('jimmy') // true
  // 刪除全部數(shù)據(jù)
  s.clear()

// 判斷是否包含數(shù)據(jù)項(xiàng)，返回 true 或 false
s.has('hello') // true
// 計(jì)算數(shù)據(jù)項(xiàng)總數(shù)
s.size // 3

let arr = [1, 2, 3, 4, 2, 3]
let s = [...new Set(arr)]
console.log(s) // [1,2,3,4]

let arr1 = [1, 2, 3, 4]
let arr2 = [2, 3, 4, 5, 6]
let s = new Set([...arr1, ...arr2])
console.log(s) // Set(6) { 1, 2, 3, 4, 5, 6 }
console.log([...s]) // [ 1, 2, 3, 4, 5, 6 ]
console.log(Array.from(s)) // [ 1, 2, 3, 4, 5, 6 ]

let arr1 = [1, 2, 3, 4]
let arr2 = [2, 3, 4, 5, 6]
let s1 = new Set(arr1)
let s2 = new Set(arr2)
let result = new Set(arr1.filter(item => s2.has(item)))
console.log(Array.from(result)) // [ 2, 3, 4 ]

let arr1 = [1, 2, 3, 4];
let arr2 = [2, 3, 4, 5, 6];
let s1 = new Set([1, 2, 3, 4])
let s2 = new Set([2, 3, 4, 5, 6])
let arr3 = new Set(arr1.filter(item => !s2.has(item)))
let arr4 = new Set(arr2.filter(item => !s1.has(item)))
console.log(arr3) // Set(1) { 1 }
console.log(arr4) // Set(2) { 5, 6 }  
console.log([...arr3, ...arr4]) // [ 1, 5, 6 ]

const ws = new WeakSet()
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

let ws = new WeakSet()
const obj1 = {
    name: 'imooc'
}
const obj2 = {
    age: 5
}
ws.add(obj1)
ws.add(obj2)
ws.delete(obj1)
console.log(ws)
console.log(ws.has(obj2))

const data = {};
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

  let map = new Map()
  let keyObj = {}
  let keyFunc = function() {}
  let keyString = 'a string'

  // 添加鍵
  map.set(keyString, "和鍵'a string'關(guān)聯(lián)的值")
  map.set(keyObj, '和鍵keyObj關(guān)聯(lián)的值')
  map.set(keyFunc, '和鍵keyFunc關(guān)聯(lián)的值')
  console.log(map) //
  // Map(3) {
  // 'a string' => "和鍵'a string'關(guān)聯(lián)的值",
  // {} => '和鍵keyObj關(guān)聯(lián)的值',
  // [Function: keyFunc] => '和鍵keyFunc關(guān)聯(lián)的值'
  // }

  // 刪除指定的數(shù)據(jù)
  map.delete(keyObj)
  // 刪除所有數(shù)據(jù)
  map.clear()

  // 統(tǒng)計(jì)所有 key-value 的總數(shù)
  console.log(map.size) //3
  // 判斷是否有 key-value
  console.log(map.has(keyObj)) // true

 console.log(map.get(keyObj)) // 和鍵keyObj關(guān)聯(lián)的值

// WeakMap 可以使用 set 方法添加成員
const wm1 = new WeakMap()
const key = {
    foo: 1
}
wm1.set(key, 2)
wm1.get(key) // 2

// WeakMap 也可以接受一個(gè)數(shù)組，
// 作為構(gòu)造函數(shù)的參數(shù)
const k1 = [1, 2, 3]
const k2 = [4, 5, 6]
const wm2 = new WeakMap([
    [k1, 'foo'],
    [k2, 'bar']
])
wm2.get(k2) // "bar"

const map = new WeakMap()
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key