es6新增及理解

---

一、es6新增有哪些？

1.块级作用域{}

{}内的内容表示一个块级，在里面声明的变量和外面声明的变量是区别开的。例：if(){}或function(){}等。。。

2.声明对象的方法(let,const)

这两种声明对象的方式和var差不多但也有一些区别：

方式	块级作用域	变量提升	同一作用域下重复声明	能否改值	声明时必须赋值
var	否	有	能	能	否
let	是	无	不能	能	否
const	是	无	不能	不能	是

3.定义类语法糖Class

class就是类，让对象原型写法更加清晰，如下：
(效果一样)

// 传统写法
function Old(name) {
  this.name = name;
}

Old.prototype.show = function () {
  alert(this.name)
};
var o = new Old('hhh');

// class 写法
class New {
  constructor (name) {
    this.name = name;
  }
  show() {
    alert(this.name)
  }
}
var n = new New('hhh');
n.show()

ps：class定义的方法相当于在原型上定义方法，及new.property.show(详细的以后再写！)

4.解构赋值

将右边的值快速赋给左边，通常用来快速给变量赋值或快速获取值。

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

ps:不局限于数组，对象等其他都行，但是左右两边必须都是es6有的数据类型，且左右两边类型一样，还要同时出现！

5.关于函数

a.箭头函数:

新增了箭头函数，将之前的函数简化了

let fun
//原来
fun = function(name,age){
alert(name,age)
}
//现在
fun = (name,age)=>{
alert(name,age)
}
//（只有一个参数还可以省略()号,只有一句话可以省略{}号）
fun = name=>alert(name,age)//只输出name

(你看多方便!)

b.函数默认值：

es5中函数有用到形参，但是调用时没有传实参就会报错。而es6给函数设置默认值后，不需要传参也会自动补充一个默认值，如下：

function fun(name='hhh')=>{
console.log(name)
}
fun()//控制台输出hhh不报错！

6.模块化(import/export)

让你在一个文件中可以获取到另一个文件的内容(如vue中使用vuex，bus.js，组件，封装API都需要利用模块化)
导入（import）、导出（export）

7.新的基本数据类型symbol

表示独一无二！(Symbol()返回的symbol值都是唯一的.)
写法：

var sym1 = Symbol()//正确写法
var sym2 = new Symbol(); // TypeError

8.set,map语法结构

a.set:

与数组有些相似，没有重复的值(默认去重)

• .size为获取长度的方法
• .add(value)添加的方法
• .delete(value)删除的方法
• .has(value)查找set里有没有这个内容，返回true/false
• .clear()清空Set

let s1=new Set([1,2,3,4,5,5]);
console.log(s1)//[1,2,3,4,5](多余的5，自动去重)
console.log(s1.size)//5
console.log(s1.has(7))//false
s1.add(6)
s1.delete(1)
console.log(s1)//[2,3,4,5,6]
s1.clear()
console.log(s1.size)//0

ps:可通过使用扩展运算符或者Array.from方法实现Set结构转化为数组

b.map:

方法和set的一样，只不过add改为set
（第一个值为键名(key)，第二个值为键值(value)，如果键名相同，那么后写入的会覆盖先写入的）

let map = new Map()
        // set方法，类似于add
        map.set(1,1111)
        map.set(2,2222)
        map.set(1,3333)//替换第一条
        map.set([],[123,234])
        console.log(map)
        console.log(map.get(1))//获取某一你指定的值(键名为1)
        // 任何数据都能作为key
        console.log([map.keys()])//用来管理数据
        console.log(map.keys(undefined))

9.拓展运算符…

直接把string，{}或者[]的内容拆开，用法太多了，通常用于快速赋值，数组合并

// 拓展运算符
       let str = 'asdfghjkl'
       // es5方法
       let arr = str.split('')
       // es6方法
       let arr1 = [...str]
       console.log(arr==arr1)//true

10.生成器(Generator)和遍历器(Iterator)

generator是es6提供的异步编程坚决方案，返回一个遍历器对象。似函数非函数，由function*定义，用return和yield返回。不会立刻执行，一般都是停止状态，f.next()时会打破停止状态执行直到遇到下一个yield或return又停止

11.Proxy

Proxy 也就是代理
可以用来解决跨域问题和双向数据绑定(如下!)

let obj = {name:'hmw',age:18}
        let p = new Proxy(obj,{
            // 获取值时调用
            get(target,key){
                // 相当于返回value
                return target[key]
            },
            // 设置值时调用
            set(target,key,value){
                // console.log(target,key,value)
                console.log(value)
                target[key]=value
                if(key=='name'){
                    document.querySelector('p').innerHTML=value
                }
               
            }
        })
        document.querySelector('input').oninput=()=>{
            // 这里只能通过p修改obj的内容，使用obj无效！！
            p.name = event.target.value
            p.age--
        }

12.新增方法

a.字符串

  let str = 'hello hmw'
  		//1.查找
        // 1>判断字符串是否包含的方法  返回true或false
        let res = str.includes("l")

        // 2>返回下标终止查找
        let res1 = str.indexOf('l')
        console.log(res,res1)

        // 2.字符串重复  参数为重复多少遍
        console.log(str.repeat(10))

        // 3.判断字符串是否以he开头
        console.log(str.startsWith('he'))
        // 4.判断字符串是否以w结尾
        console.log(str.endsWith('w'))

b.数组

• find(找到返回元素，没找到返回undefined)
• findIndex(返回下标,没找到返回-1)
• fill：数组填充

c.对象

 // 1.// 判断对象是否是一样
        console.log(-0 == +0)
        console.log(NaN == NaN)
        console.log(0 == [])//[]转化为了0
        // 就看长得是不是一样
        console.log(Object.is(-0,+0))
        console.log(Object.is(NaN,NaN))
        // 应用类型指针不一样
        console.log(Object.is([],[]))//false
        console.log(Object.is({},{}))//false
        Object.is()

        // 2.合并对象
        Object.assign()
        // 要是属性名一样，会被覆盖哦！！！
        let [a,b,c] = [{name:1},{name:2},{sex:3}]
        let newobj1 = Object.assign({},a,b,c)//合并的目标对象,固定写法！！！abc不受影响
        console.log(newobj1)
        // a会被覆盖，且输出的a是合并后的结果
        let newobj2 = Object.assign(a,b,c)
        console.log(a,b,c)
        // 用拓展运算符来实现
        let newobj3 = {...a,...b,...c}
        console.log(newobj3)

        // 3.简洁语法
        let [a,b,c] = [1,2,3]
        let obj = {a,b,c}
        // 相当于
        // let obj = {
        //     a:a,
        //     b:b,
        //     c:c
            
        // }
        console.log(obj)

        // 4.方法简洁
        let [a,b,c] = [1,2,3]
        let obj = {a,b,c,
        say(){
            console.log('1')
        }
        // 相当于
        // say:function(){}
        }
        obj.say()

        // 5.
        let obj = {name:'hmw',sex:'girl',age:18}
        let arr = Object.keys(obj)//输出属性名于数组
        let arr = Object.values(obj)//输出属性值于数组
        let arr = Object.entries(obj)//把每一项分装成一个数组，在用一个大数组包起来
        console.log(arr)

        // 总结：
        // Object.is()/Object.assign()/Objext.keys()/Object.values()/Object.entries()

---

总结

最常使用的：拓展运算符，箭头函数，模块化，新增方法，解构赋值，let，const