es6-const let 解构 字符串 函数 对象

var是函数作用域，没在函数内部声明的就是全局作用域，

let、const是块级作用域{{}} 

1.1 let没有预解析

// 1. 没预解析
  console.log(a); // 报错
  let a = 1;

1.2 拥有块级作用域 {}形成一个作用域--解决for循环里面i为最终结果问题

let tabTit = document.getElementsByClassName('tab');
  let div = document.getElementsByClassName('tab-body');
  
  
  for (let i = 0;i < tabTit.length; i++) {
    tabTit[i].onclick = function(){
      div[i].style.display = "block";
    }
  }

for (let i = 0;i < 6; i++) {
　　console.log(i); // 打印6次 0~5
　　setTimeout(function(){
　　　　console.log('dsq: ' + i); // 打印一次 dsq: 0 ~ dsq: 5
　　},1000)
};

1.3 避免多次声明一个变量（错误声明或其他人误声明相同变量导致之前变量被覆盖问题）

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

// 商品打折场景--let 块级作用域
let count = 10;
let discount = 0.9;
if (count > 5) {
    let discount = 0.5; // discount只属于这个块级作用域和外层的没有关系
} 
console.log(discount); // 0.9

let count1 = 10;
var discount1 = 0.9;
if (count1 > 5) {
    var discount1 = 0.5;
}
console.log(discount1); // 0.5

2 const

const a = 1;

a = 2; // 改变值报错 Assignment to constant variable.--分配给不变的变量

// 虽然不能改变值，但是可以改变属性
const b = {};
b.name = 'jeson';
b.age = 25;
console.log(b); //  Object {name: "jeson", age: 25}

const c = {};
Object.freeze(c); // es5 属性也不能修改--修改不会报错，但是不生效
c.name = 'jeson';
console.log( c ); // Object {}

解决es6之前解决var污染全局作用域问题--自执行函数IIFE

// window有个属性 name:""
var name = 'Jeson'; // 这个属性被无意修改了

// es6之前解决方案 
(function() {
    var name = 'jack';
})()

es6方式解决问题

{ 
    const name = 'jack'; // const只属于块级作用域{}
}

es6暂时性死区

// js 变量提升
console.log(color); // undefined
var color = 'red';

// 相当于
var color;
console.log(color);
color = 'red';

console.log(color1); //  Uncaught ReferenceError
let color1 = 'red';

var let const使用原则

--1 默认使用const

--2 变量需要改变的时候才使用let

--3 es6中不建议使用var

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

let a = 1;

let b = 2;

 

[a, b] = [b, a];

let obj = {
  a: 1,
  b: 2  
}
let {b} = obj; // 获取的时候{},和对象属性对应
console.log(b); // 2

4 模版相关

4.1 模版字符串

`` 空格也会输出 .trim()删除空格

`${age}`拼接变量

``里面可以使用三元表达式 `${completed ? '完成'： '未完成'}`

``里面可以调用方法

<script>
    const Jeson = {
        name: 'Jeson',
        date: '2017-05-07',
        todos: [
          {name: '6:40起床', completed: true},
          {name: '23:30睡觉', completed: false}
        ]
    };

    const defaultTpl = `
        <div class="panel">
          <div class="penel-header">${Jeson.name}</div>
          <div class="panel-body">
            <ul>
                ${Jeson.todos.map(todo => `
                  <li>
                    ${todo.name} ${todo.completed ? '完成' : '未完成'}
                  </li>
                `).join('')}
            </ul>
          </div>
          <div class="panel-footer">${Jeson.date}</div>
        </div>
    `;

    // 优化模版
    function renderTodosFn(todos) { // 独立出来一个function
        return (
            `<ul>
                ${todos.map(todo => `
                  <li>
                    ${todo.name} ${todo.completed ? '完成' : '未完成'}
                  </li>
                `).join('')}
            </ul>`
        )
    }
    const betterTpl = `
        <div class="panel">
          <div class="penel-header">${Jeson.name}</div>
          <div class="panel-body">
             ${renderTodosFn(Jeson.todos)}
          </div>
          <div class="panel-footer">${Jeson.date}</div>
        </div>
    `;



    document.body.innerHTML = betterTpl;
  </script>

4.2 es6 标签模版

<script>
  function highLight() {
    return 'fore-end';
  };

  function wellHighLight(strs, ...args) { // 字符串 每个变量都声明或者使用es6剩余参数(...变量)...args
    // 如果模版以变量开头或结束就会多出首尾的空格
    // console.log(args)
    const highlighted = args.map((value) => { // 高亮处理
       return `<span style="color:red">${value}</span>`;
    });

    /* 写法1
    let str = '';
    strs.forEach((item, i) => { // strs为数组 forEach()数组方法
      str += `${item}${highlighted[i] || ''}`; // 处理最后一个为undefined问题
    });
    return str;
     */

    /* 写法2 数组.reduce(fn, '');*/
    /* 未使用箭头函数改写
    return strs.reduce((prev, curr, i) => {
      return `${prev}${curr}${highlighted[i] || ''}`;
    }, '');
    */
    return strs.reduce((prev, curr, i) => `${prev}${curr}${highlighted[i] || ''}`, '');
  };

  const user = 'Jeson';
  const topic = 'learn to use ES6';

  const sentence = highLight`${user} has commented on your topic ${topic}`;
  const sentence2 = wellHighLight`${user} has commented on your topic ${topic}`;

  document.body.innerHTML = sentence2;
</script>

5 箭头函数

function a(c) {
  console.log(c);  
}
function (c) {
　console.log(c);
}
// 去掉function 保留（）添加 =>
let a = (c) => { // 命名函数用箭头函数改写
  console.log(c); 
}
(c) => {
　　console.log(c)
}
// 当只有一个参数时可以省略 （）没有参数或不少于1个要（）
let c  = canshu => {

}

// 箭头自带一个return 功能 隐式返回可以去掉{} ，显示返回 return
let d = () => '123';
console.log(d()); // '123'

const arrs = [1, 2, 3, 4, 5];
const double = arrs.map( number => number*2 );
console.log(double); // [2, 4, 6, 8, 10]

 

// es5一般this是在运行时才绑定--哪个运行这个函数，这个函数的this就指向这个对象
// 箭头函数在定义时就指定，箭头函数this指向父级的this

const arrs = [1, 2, 3, 4, 5];
const double = arrs.map(function(arr){ // map里的回调函数--独立运行的函数this指向window global严格模式undefined 之前用that/self = this;保存这个this;
return arr * 2; // arr指数组里面的每个对象 each
});
console.log(double);

箭头函数不适用场景：TypeError--why:02步没完成
1 作为构造函数 const Person = (name, age) {
　　this.name = name;
　　this.age = age;
}
const jeson = new Person('jeson', 25);
// 创建一个实例要走四步
　　01： 生成一个新对象
　　02： this 指向这个新对象
　　03： 将新对象绑定到构造函数的原型对象
　　04： 返回这个新生成的对象

2 当真的需要this的时候　　

　　const button = document.querySelector('button');
　　button.addEventListener('click', () => {
　　　　this.classList.add('active'); // TypeError 实际需要this指向button但是这里的this指向window最外层this
　　　　setTimeout(() =>{
　　　　　　this.classList.remove('active'); // 这里需要this指向button，当外层click的回调函数为非箭头函数的时候，可以使用箭头函数，如果不是需要保存下this
　　　　})
　　}):

3 需要使用arguments对象时--箭头函数没有arguments对象

6 对象

let age = 18;

let obj = {
  age: age  
  // 简写
  age
}
console.log(obj.age); // 18

7 import export

1.js
// 引入2.js赋值给age
import age from '2.js';

2.js
export default { // 默认输出  import 的变量名可以任意取名
    
}

common.js方法

1.js

let age = require('./2.js')
console.log(age); // 18

2.js
let b = 18;
module.exports = b;

或者
1.js
let age = require('./2.js');
age(18); // 18
2.js
module.exports = function(ar1) {
  console.log(ar1);  
}

 8 参数默认值

function multiply(a, b) {
    a = a || 3; // a undefined时取后面的值
    b = b || 5;
    return a * b;
};

multiply(2, 5); // 10
multiply(); // 15

// es6参数默认值
function multiplys(a = 3, b = 5) {
    return a * b;
} 
multiplys(undefined,6); // 指定第二个参数的时候第一个参数要为undefined