// js
var i = 10;
i = 100;

//ES6
let i = 10;
i = 100; // right
const j = 20;
j = 200; // error

// js
var name = 'zhangsan', age = 20, html = '';
html += '<div>';
html += ' <p>' + name + '</p>';
html += ' <p>' + age + '</p>';
html += '</div>';

//ES6
const name = 'zhangsan', age = 20;
const html = `
<div>
  <p>${name}</p>
  <p>${age}</p>
</div>
`
console.log(html);

// js
var obj = {a: 100, b: 200}
var a = obj.a;
var b = obj.b;

var arr = [1,2,3];
var x = arr[0];

// es6
const obj = {a:10, b:20, c:30}
const {a, c} = obj
console.log(a);
console.log(c);

const arr = [1,2,3];
const [x,y,z] = arr;
console.log(x)
console.log(y)
console.log(z)

//js
var obj = {a:100, b:200}
for(var item in obj){
  console.log(item)
}
console.log(item) // 'b'

// es6
const obj = {a: 100, b: 200};
for(let item in obj) {
  console.log(item);
}
console.log(item); //undefined

// js
function (a, b) {
 if (b == null) {
   b = 0
 }
}

// es6
function (a, b=0){

}

// js
var arr = [1,2,3];
arr.map(function(item){
  return item + 1
})

// es6
const arr = [1,2,3];

arr.map((item) => item + 1);

arr.map((item, index) => {
  console.log(index);
  return item + 1;
})

function fn(){
  console.log('real', this); // {a: 100}
  var arr = [1,2,3];
  // js
  arr.map(function(item){
    console.log('js', this) // window
    return item + 1
  })
	
	//es6
  arr.map((item, index) => {
	  console.log('es6', this); // {a: 100}
	  return item + 1;
	})
}
fn.call({a: 100})