js基础--箭头函数

箭头函数

1.当箭头函数中只有一个参数的时候,可以省略形参参数的括号
2.当箭头函数中只有一句代码的时候 可以直接省略{}
3.当箭头函数中有切只有一句代码的时候 可以省略return 箭头函数会直接的把这句代码的执行结果当作函数返回值。
4.有多条语句(要加上花括号,写法和以前一样) =>{ 语句1; 语句2; 语句3;…}

 let arr = [1, 2, 3, 4, 5];
 //   let newArr = arr.filter(function (item, index) {
    
    
 //    return item > 3
 //})
    let newArr2 = arr.filter(item => item > 3);

箭头函数,到底和我们的普通函数有什么区别,好处在哪?:

1.this指向问题
1.箭头函数的出现就是为了解决ES5中this指向混乱的问题
2.箭头函数没有自己的this,它的this来自父级上下文,并且永远指向父级上下文
3.箭头函数的this不会在调用的时候被改变, 因为箭头函数在声明的时候它的this就已经被永久的确定了
2.箭头函数是匿名函数 箭头函数不能作为构造函数使用 不能使用new

{
    
    
        /*function Fn(name){
    
    
            this.name = name;
            this.age = 18;
            console.log("Fn中的this==>",this); //new Fn()
        }
        let fn = new Fn("哈哈");*/

        /*let Fn = ()=>{
    
    
            this.name = name;
            this.age = 18;
        }
        let fn = new Fn(); //Fn is not a constructor*/
    }

3.箭头函数没有arguments

function fn() {
    
    
    return () => arguments[0]
}
var result = fn(l);
con sole.log(result()); //1

那如果我们需要访问箭头函数的参数可以通过命名参数、扩展运算符或者rest参数的形式访问参数:

let nums = (...nums) => nums;

4.箭头函数不能通过call()\apply()\bind()方法直接修改它的this指向 但是,可以正常传参

{
    
    
    let sum = (...args)=>{
    
    
     console.log(this,args);
    }
    sum.call({
    
    },1,2,3)
}

5.箭头函数没有原型属性

{
    
    
    let person = ()=>{
    
    
    };
    // person.prototype.sayHello = 1;
    //Uncaught TypeError: Cannot set property 'sayHello' of undefined
    console.log(person)
    console.log(person.prototype)
}

类数组转换成数组

//普通函数  arguments=>参数集合=>伪数组=>...
    // function sum(a,b){
    
    
    //     let sumNum = 0;
    //     let likeArr = arguments;//伪数组 --> 原型指向object
    //     //伪数组转换成数组
    //     let arr = Array.from(likeArr);
    //     let arr2 = Array.prototype.slice.call(likeArr);
    //     // let arr3 = [].slice.call(likeArr);
    //
    //     arr.forEach((i)=>{
    
    
    //         sumNum+=i;
    //     })
    //
    //     console.log(sumNum);
    // }

感谢各位大佬的大驾光临,多有纰漏请多多包涵。

猜你喜欢

转载自blog.csdn.net/jfx_jfx/article/details/120581496