es6

es6

ES6的新增语法

let

ES6中新增的用于声明变量的关键字。

●let声明的变 量只在所处于的块级有效

●不存在变量提升

●暂时性死区

//let变量只在其所处的块级作用域(就是大括号{})有效
        if(true){
            let a=10
        }
        console.log(a);//a is not defined
        //使用let关键字没有变量提升
        console.log(b);
        let b=5;//b is not defined
        //使用let关键字变量具有暂时性死区的特性
        var num=1;
        if(true){
            console.log(num);
            let num=9

        }

注意:使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

const

作用:声明常量，常量就是值(内存地址)不能能化的量。

●具有块级作用域

●声明常量时必须赋值,且复值后不能被修改

//const声明的变量具有块级作用域
        if(true){
            const a=10;
            if(true){
                const a=20;
                console.log(a);
            }
            console.log(a);
        }
        console.log(a);
        //const声明对象必须赋值
        const a;//错误
       /*  const声明的常量不能修改，声明的复杂数据类型比如数组，
        它内部的元素可以更改，但是不能直接给数组赋值*/
        

解构赋值

ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。

数组解构
如果解构不成功，变量的值为undefined.

var arr=[123,456,789];
        let [a,b,c]=arr;
        console.log(a);
        console.log(b);
        console.log(c);

对象解构

let o={
            name:'ldh',
            age:18
        }
        let {name,age}=o;
        console.log(name);
        console.log(age);
        //把o.name赋值给myname这个变量
        let {name:myname}=o;
        console.log(myname);

箭头函数

ES6中新增的定义函数的方式。

函数体中只有一句代码， 且代码的执行结果就是返回值，可以省略大扩号

如果形参只有一个，可以省略小括号

箭头函数没有绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

const fn=()=>{
            console.log(123);
        }
        fn();
        //函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
        const sum=(num1,num2)=>num1+num2;
        console.log(sum(1,2));
        //如果形参只有一个，可以省略小括号
        const f=v=>alert(v)
        f(3);
        //箭头函数无this关键字，其this随包含它的函数中的this指向
        const o={
            name:'san'
        }
        function fns(){
            console.log(this);
            return ()=>{
                console.log(this);
            }
        }
        var k=fns.call(o);
        k()

例题：

 var  name='lucy'
        var o={
            name:'andy',
            say:()=>{
                console.log(this.name);
                
            }
        }
        //undifidend是因为函数没有返回值
      console.log(o.say());

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

const fn=(...args)=>{
            let local=0;
            args.forEach((item)=>{
                local+=item
            })
        return local;
        }
        console.log(fn(10,20,30));

剩余参数还可以跟数组解构联系

let arr=['a','b','c'];
    let [s1,...s2]=arr;
    console.log(s1);
    console.log(s2);

ES6的内置对象扩展

Array的扩展方法

扩展运算符(展开语法)

扩展运算符可以将数组或者对象转为用逗号分隔的参数序例。

扩展运算符可用于合并数组

扩展运算符可用于将伪数组转换为真正的数组，从而使用数组的方法

 //扩展运算符可以将数组或者对象转变为用逗号分隔的参数
        let arr=['a','b','c'];
        console.log(...arr);
        //数组合并1
        let a=[1,2,3];
        let b=[4,5,6];
        let c=[...a,...b]
        console.log(c);
        //数组合并2
        a.push(...b);
        console.log(a);
           //扩展运算符可用于将伪数组转换为真正的数组，从而使用数组的方法
        var btns=document.querySelectorAll('button');
        var k=[...btns]

Array的扩展方法

构造函数方法: **Array.from()**将类数组或可遍历对象转换为真正的数组

方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

 //from可以将一个伪数组转换成真数组，第二个参数可以是一个函数
        var o = {
            '0': '3',
            '1': '6',
            '2': '9',
            'length': 3
        }
        var k = Array.from(o, item => item * 2);
        console.log(k);

实例方法: find()

用于找出第一一个符合条件的数组成员,如果没有找到返回undefined

用于找出第一一个符合条件的数组成员的位置，如果没有找到返回-1

 //find方法可以找出第一个符合条件的数组成员
        //findindex方法可以第一个符合条件的数组成员的索引号
        var k = [{
            id: 1,
            name: 'ldh'
        },
        {
            id: 2,
            name: 'zxy'

        }
        ];
        var p=[1,2,3,4,5]
        let g=k.find(item=>k.id=1);
        let f=p.findIndex(function(value){
            return value>3
        })
        console.log(g);
        console.log(f);

实例方法: includes()

表示某个数组是否包含给定的值，返回布尔值。

//includes方法用于寻找数组是否有该元素，返回的是布尔值
        var k=[1,2,3,4,5];
        let g=k.includes(3);
        let m=k.includes(7);
        console.log(g);
        console.log(m);

String的扩展方法

模板字符串

ES6新增的创建字符串的方式，使用反引号定义。

模板字符串中可以换行

在模板字符串中可以调用函数。

//模板字符串中可以解析变量
        let a = `pink`;
        let b = `${a}老师`
        console.log(b);
        //模板字符串中可以调用函数
        function f() {
            return 'abc'
        }
        let c = `${f()}`
        console.log(c);
        //模板字符串中可以换行
        let html = `123
456`
        console.log(html);

String的扩展方法

实例方法: startsWith() 和endsWith()

●startsWith（）: 表示参数字符串是否在原字符串的头部，返回布尔值
●endsWith（）: 示参数字符串是否在原字符串的尾部,返回布尔值

 //startsWith方法判断是否以某个或某些字符开头，返回布尔值
        //endsWith方法判断是否以某个或某些字符结尾，返回布尔值
        let a='hello world!';
      console.log( a.startsWith('h'));
      console.log(a.endsWith('world!'));

实例方法: repeat()

repeat方法表示将原字符串重复n次,返回一个新字符串。

//repeat方法表示将一个字符串重复多少次
        let a='asdf'
        console.log(a.repeat(5));

Set数据结构

ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的, 没有重复的值。

Set本身是一个构造函数,用来生成Set数据结构。

const s = new Set();

Set函数可以接受一个数组作为参数, 来初始化。

const set = new Set([1, 2，3, 4, 4]);

实例方法

●add(value): 添加某个值,返回Set结构本身

●delete(value): 删除某个值,返迥一个布尔值，示删除是否成功

●has(value): 返回一个布尔值,表示该值是否为Set的成员

●clear(): 清除所有成员，没有返回值

遍历

Set结构的实例与数组一样,也拥有forEach方法， 用于对每个成员执行某种操作,没有返回值。

//set数据结构类似数组，但是其成员的值不重复
        //s1.size检测长度
       const s1=new Set(['1','2']);
       console.log(s1.size);
       //利用set进行数组去重
       const s2=new Set(['a','a','c','c'])
       var o=[...s2]
       console.log(o);
       //set的方法:add，delete，has，clear
       const s=new Set();
       s.add(1).add(2).add(3);
       console.log(s.size);
       s.delete(3);
       console.log(s.size);
     console.log(  s.has(2));
       s.clear()
       console.log(s.size);
       //从set数据中取出用foreach遍历
       let a=new Set([1,2,3,4,5,6]);
       a.forEach(value=>{
        console.log(value);
       })