ES6学习第二天

箭头函数

() =>{}简化函数定义语法

 // 箭头函数是用来简化函数定义语法的
        const fn = () =>{
          console.log(123);
        }
        fn();// 123

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

 const fn = num =>{
              return num;
        }
        console.log(fn(123));//123

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

const sum = (num1,num2) => num1 + num2;
        console.log(sum(10,20)); // 30

箭头函数的this指向

箭头函数不绑定this,它没有自己的this关键字 如果在箭头函数中使用this,this关键字将指向箭头函数中定义位置中的this

const obj = {name:'zhangsan'};
        function fn(){
             console.log(this);//window
             return ()=>{
                 console.log(this);
             }
        }
        const res = fn.call(obj);//利用.call方法将fn函数中的this指向改为obj对象
        res();// obj obj

箭头函数面试题

  var obj = {
            age:20,
            say:()=>{
                alert(this.age)// 因为obj是一个对象,所以此处的this指向window,在window对象下没有age属性,所以值为undefined
            }
        }
        obj.say();// undefined

剩余参数

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

  const sum= (...args)=>{// 表示接收所有的变量
          let total = 0;
          for(let i = 0; i<args.length; i++)
          {
              total += args[i];
          }
          return total;
      };
      console.log(sum(10,20));// 30 
      console.log(sum(10,20,30));// 60

剩余参数和解构配合使用

 let student = ['zhangsan','lisi','wangwu'];
        let [s1,...s2] = student;
        console.log(s1);// zhangsan
        console.log(s2);// ['lisi','wangwu']

扩展运算符

1. 扩展运算符可以将数组拆分成以逗号分隔的参数序列

 let ary = [1,2,3];
        console.log(...ary);// 1 2 3

2. 扩展运算符可以合并数组

  let arr1 = [1,2,3];
        let arr2 = [4,5,6];
        let arr = [...arr1,...arr2];
        console.log(arr);// [1,2,3,4,5,6]

扩展方法

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

 var array = {
            "0":"zhangsan",
            "1":"lisi",
            "2":"wangwu",
            "length":3
        }
        var ary = Array.from(array);
        console.log(ary);

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

 let arr = [{
        id:1,
        name:'zhangsan'
    },
    {
        id:2,
        name:'lisi'
    }];
    let target = arr.find( item =>item.id==2);
    console.log(target);//返回id为2的对象

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

let arr = [10,20,30];
        let target  = arr.findIndex(item =>  item > 20);
        console.log(target);//2

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

 let arr = [1,2,3];
        let index = arr.includes(2);
        let result = arr.includes(4);
        console.log(index);//true
        console.log(result);//false

模板字符串

let name = `这是模板字符串`;
        console.log(name);//这是模板字符串

模板字符串可以解析变量

let name = `张三`;
        let sayHello = `Hello,我的名字是${name}`;
        console.log(sayHello);//Hello,我的名字是张三

模板字符串可以换行:

 let result={
            name:'zhangsan',
            age:20
        };
        let html = `
        <div>
        <span>${result.name} </span>
        <span>${result.age} </span>
        </div>
        `;
        console.log(html);
        //  <div>
        // <span>zhangsan </span>
        // <span>20 </span>
        // </div>

startWith(): 表示参数字符串是否在原字符串的头部，返回布尔值
endsWith(): 表示参数字符串是否在原字符串的尾部，返回布尔值。

let str = 'hello world';
        console.log(str.startsWith('hello'));//true
        console.log(str.startsWith('!'));//false
        console.log(str.endsWith('world'));//true

repeat:表示将原字符串重复n次，返回一个新的字符串。

let a = 'hello world';
        let result = a.repeat(3);
        console.log(result);// hello worldhello worldhello world

5. set数据结构
   Set类似于数组，但是成员的值都是唯一的，没有重复的值
   Set本身是一个构造函数,创建此函数的实例对象就是在创建set数据结构

const set = new Set([1,2,3,4,4]);
        console.log(set);//[1,2,3,4]

add(value)；添加某个值，返回Set结构本身

const set = new Set();
        let arr = set.add(1).add(2).add(3);//[1,2,3]
        console.log(arr);

delete():删除某个值，返回一个布尔值

const set = new Set();
        let arr = set.add(1).add(2).add(3);
         console.log(arr.delete(2)); //true

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

 const set = new Set();
        let arr = set.add(1).add(2).add(3);
        console.log(arr.has(1));//true

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

 const set = new Set();
        let arr = set.add(1).add(2).add(3);
        arr.clear();
        console.log(arr.size);//0

遍历set

  const set = new Set([1,2,3]);
        set.forEach((value)=>{
             console.log(value);// 1 2 3
        });