ES6总结

历史

ECMAScript 是96年网景公司把JavaScript提交给欧洲计算器制作联合会

版本

97年1.0
98年2.0
99年3.0 （之前的js版本）
2000年4.0倍和谐
09年5.0（很多新特性没学）
15年es6正式确定

前端框架与语言

    js
    jquery
    angular
    react
    vue
    typescript  趋势

let与Cont

let//局部变量声明

    1.只能在一对{}里面有用
    2.不能重复声明
    3.不会变量提升（在变量声明前访问会报错）

cont//常量声明

    声明必须赋值
    2.赋值不能修改（简单数据类型）
    3.建议变量名 大小

解构

对象

基本

let{name,age} = {name:"mumu", age:18}
let{name :foo} = {name: "mumu"}
    foo值就是mumu

剩余值

...rest

默认值

let{name , age , weight =120} = {name:"mumu",age:18,weight:130}

没有顺序，变量名必须和对象名一致

数组

基础

let[a,b]=[12,18]
  a  12
  b  18

可以嵌套

let [a,b,[c,d,e]]=[1,2,[3,4,5]];
  c3 d4 e5

可以忽略

let[a, , b] = [1,2,3]
  a1 b3

剩余值

let [a, ...rest] = [1,2,3,4,5]
  rest[2,3,4,5]

字符串

let [a,b,c,d]="武汉加油";
  a 武
  b 汉

默认值

let [a,b=15]=[20];
  b=20
  如果解析处理的值为undefined那么就会用默认值替代

字符串

空白

    trim()
    trimLeft()
    trimRight()
    去掉空白，左边空白，右边空白

检测包含

    includes(s)//查找字符串中是否包含s字符
    statsWith(s) //是否以s字符开头
    endsWith(s) //是否以s字符串结尾

重复

    repeat(n) //重复字符串n次

填充

    padStart(len , s)//以s字符补齐长度len从前面
    padEnd(len , s)//以s字符补齐长度len从后面

模板

1.符号 ``
2.任意换行
3.单双引号特殊符号不需要转义
4.添加变量 ${变量名}

  var name = "mumu";
  var age = 19;
  var str = `大家好，我的名字是${name} 今年我${age}岁了`;

数字

Number.isNaN()//检测是不是NaN
Number.isInteger()//是不是整数

** 运算符

2**3 == 2x2x2

Number.parseInt

Number.parseFloat

转换为整数浮点数

数组

迭代方法

    forEach（）//遍历数组

map（）//返回一个Array
  通过原来的数字映射出新的数据

filter（） 返回一个Array
  如果遍历时返回值为true 则最终返回时保留该元素
  如果遍历时返回值为false 则最终返回时过滤该元素

reduce(function(a,b){ })  返回一个any
a参数是上一次遍历时的结果，
b参数时当前遍历元素

some（） 返回一个bool
如果遍历的值有一个返回为true 最终返回结果为true
如果遍历的值所有返回为false 最终返回结果为false

every（）
如果遍历的值有一个返回为true 最终返回结果为false
如果遍历的值有所有返回为false 最终返回结果为true

查找

    find()//查找数组中符合条件的元素
    findIndex（）//查找数组中符合条件的元素 的下标

flat(n)

扁平化数组 n是扁平的层级

includes（el）

查找数组是否包含el元素

fill（value，start，end）

填充数组 value填充值，start填充的开始位置，end结束位置？（可选）

copyWithin（rstart，atart，end）

从数组中拷贝内容替换
rstart替换开始位置 start拷贝的开始位置 end结束位置

函数

箭头函数

箭头的简写

特点

1.左边是函数的参数
2.右边是函数的执行语句，也是返回值（语句只有一条）

            arr.forEach(item=>console.log(item));
            arr2 = arr.map(item=>item*2);

3.如果参数不止一个，要用（）包裹

            arr3.reduce((a,b)=>a+b)

4.如果执行语句不止一条，要用{ }包裹

    arr.forEach((item,index)=>{
       console.log(item);
       console.log(index);
   })

5.执行语句不止一条，返回值要用return
6.如果返回的对象用（）

            arr.map(item=>({pic:item}))

7.this 指向当前的指向环境

默认

function add（a=1,b=1）{
  alert(a+b)
}
add(4,5)

不定参数

function add(...args){
  //args 就是函数参数的数组列表
}

对象

1.对象的简写（变量名和对象的键一致）

2.对象属性的表达式

3.对象的拷贝合并 Object.assign（）

4.扩展对象

{...a, ...b}
复制与合并对象

map

特点

1.有顺序
2.键名可以是任意类型
3.size长度

初始化

    var map2 = new Map([[key1,val1],[key2,val2]]);

方法

    set（k，v）//设置
    get(k,v)// 获取
    delete(k,v)// 删除
    has(k,v) //检测是否有

属性

    size长度

遍历

for(let [k,v] of map){
  //k  键名
  //v  值
}

转数组

    Array.from(map)

展开合并

    [...map1, ...map2]

set

不重复的数组

初始化 new set([ ])

方法

    add()  添加
    has（）检测
    delete() 删除
    clear（）  清空

属性 size 长度

转数组

    [...set]
    Array.from(set)

遍历for of

for(let v of s1){
  console.log(v);
}

for of

es6 新的遍历方法

可遍历的有 Set Map Array String

可迭代方法

    keys( )  键的集合
    values( )  值的集合
    entries( ) 键与值

类

定义：创造对象的一个模板

class 类名 {}

    class Animal{ }

constructor(){}

构造函数

constructor(name,color){ }

new Animal ("小哥哥","blur")

say(){}一般方法

var d1 = new Animal();
d1.say()

静态方法:static toName(){}

    Animal.toName()

静态属性:Static price = 100;

    Animal.price

继承

class 类名 extends 父类名{ } super()

class Dog extends Animal{
  constructor(){
    super()
  }
}

getter setter

1.成对出现
2.不能直接赋值和设置邮件有的属性

constructor(age){
  this.age = age;
}

get Age(){
  return this.age;
}
d1.Age 调用大小写的Age属性是会执行get Age()这个函数返回的小写age的值

set Age(val){
  this.age = val
}
当d1.age=15只用set Age 这个方法
最终设置是小写age的值

模块

1.导出 export

1.基本

export{name,age,fun,Animal}

2.使用as

export {Animal as An}

3. default默认

export default Animal
声明的时候导出export default class Ball

先声明再导出

class Ball{}
export default Ball;

2.导入 import