es6学习笔记

夜雨随风es6学习笔记

变量声明

• let 声明块级做用域 声明的变量不会被预解析（变量提高）。
• const 声明常量，声明后不可修改值，可是能够修改其属性和方法。

在全局声明let、const不会被添加到window，所以运行速度会比var快65%。

字符串模板

• 模板字符串：用于字符串内容和变量的混合链接。能保持原有字符格式，保证代码整洁性。

  let name='yeson';
      let age=22;`
      console.log(`${name}年龄是${age}岁`);
  复制代码

• 模板字符串不会压缩内部的换行和空格，只是把变量内容替换掉，保持原有格式输出。

结构赋值

es结构赋值包括数组结构赋值和对象结构赋值，

• 数组解构赋值是严格按照下标一一对应的，若是赋值常量个数不够，则对应下标变量为undfined，若是常量个数超出，则会被遗弃。

• 对象结构赋值是根据对象引用的键名来实现对应的，能够无视顺序。若是某个变量已经声明，则不能重复参与结构，解释引擎会按照重复声明处理。es6中，禁止任何变量重复声明。

  let [a,b,c]=[1,2,3,4]
      let {a,b,c}={a:10,b:20,c:30}
      [b,c]=[c,b]//变量值交换
  复制代码

数组新特性

• 复制数组

  //展开运算符
  let arr=[92,'hello',{key:false}];
  let arr2=[...arr];//浅拷贝
  //arr.from() 将类数组转化为数组
  (a,b,c)=>{
      let arr=Array.from(arguments);//[a,b,c]
  }
  复制代码

• 默认参数

  function fn1(a='默认参数'){
          console.log(a);
  }
  fn1();//'默认参数'
  fn1('传入参数');//'传入参数'
  复制代码

• 不定参

  function fn2(...a){
     console.log(a); 
  }
  fn2(1,2,3);//[1,2,3]
  fn2('hi','yes','pen','apple','orange');//['hi','yes','pen','apple','orange']
  复制代码

• 扩展参

  let namelist=['李磊','韩梅'];
  function fn3(name1 ,name2){
      console.log(`${name1}和${name2}是很好的朋友！`)
  }
  fn3(namelist);//'李磊和韩梅是很好的朋友！'
  复制代码

箭头函数

箭头函数的设计来自于CoffeeScript，es6添加这一特性的目的是为了让函数的声明更加简便。

[1,2,3].forEach((x)=>x*x)
复制代码

类

在es6之前javascript没有类的概念，实现面向对象继承的思路是：原型链继承、构造函数继承、拷贝继承等几种方式。它们都不是真正的继承，会出现子类不必定是父类的实例、子类和父类共享一个实例等奇葩问题。es6所以添加了关键字class。

class admin{
    constructor(){
        //
    }
}
class pople extends admin{
    constructor(contents={}){
        super();
        this.name=contents.name;
        this.age=contents.age;
        this.address=contents.address;
    }
    sayhi(){
        console.log(`hi,我是${this.name}，今年${this.age}岁,如今在${this.address}，很高兴见到你！`)
    }
}
let body =new pople({
    name:'黄佳'，
    age：'18'
    address：'武汉'
})
body.sayhi();//'hi，我是黄佳，今年18岁，如今在武汉，很高兴见到你！'
复制代码

模块

es6引入了模块引用规范

import{sayhi} from './pople.js';
export default sayhi;
复制代码

使用default导出模块时，尽可能导出有用模块，尽量不导出整个对象。若是使用打包工具时，若导出整个对象，将会打包进大量未使用代码，不利于代码执行效率和后期代码优化。

循环和迭代器

• 遍历数组

//for ..of..遍历
const arr=[1,2,3,4,5];
for(let iteam in arr ){
    console.log(iteam);
}
//迭代器遍历
const arr2=[1,2,3,4,5];
let num=0;//计数器
let iteam=arr2[Symbol.iterator]();
num++;
let result =iteam.next();
console.log(result.value,num);//1,2
num=num+15;
result =iteam.next();
console.log(result.value,num);//2,16
num-=16;
result =iteam.next();
console.log(result.value,num);//3,0
num=num+'123';
result =iteam.next();
console.log(result.value,num);//4,'0123'
num=Number(num);
result =iteam.next();
console.log(result.value,num);//5,123
复制代码

iterator能够在循环开始后任意位置进行数组的单步循环，中间能够作其余操做。能够理解为iterator是数组或对象上的一个游标，每次调用next(),游标就会向下移动一个单位。Symbol.iterator是object原型上的方法，可用来遍历一切可遍历对象。

（未完待续。。。）