精华内容
下载资源
问答
  • Vue 箭头函数

    2019-11-19 11:12:38
    箭头函数 1.1 认识箭头函数 传统定义函数: const aaa = function(parse) { } 对象字面量中定义函数: const obj = { bbb(parse) { } } Es6中箭头函数; const ccc = ()=>{ } 箭头函数的参数和返回值 参数问题:...

    箭头函数

    1.1 认识箭头函数

    传统定义函数:

    const aaa = function(parse) {
    }
    

    对象字面量中定义函数:

    const obj = {
    	bbb(parse) {
    	}
    }
    

    Es6中箭头函数;

    const ccc = ()=>{
    }
    

    箭头函数的参数和返回值

    • 参数问题:
      • 放入两个参数:
      const obj = (num1, num2) => {
      return num1 + num2;
      }
      
      • 放入一个参数括号可以省略
      const power = num => {
      	return num * num;
      }
      

    函数内部

    • 函数中代码块有多行代码:
    const aaa = () => {
    	console.log('1');
    	console.log('2');
    }
    
    • 函数中只有一行代码可以省略return
    const mul = (num1, num2) => num1 * num2;
    console.log(mul);
    

    箭头函数中this使用

    • 什么时候使用箭头函数
    setTimeout(function(){
    	console.log(this);
    	}, 1000);
    setTimeout(() => {
    	console.log(this);
    	}, 1000);
    

    结论:箭头函数没有this,上面箭头函数中的this是window中的this

    const obj = {
    	aaa() {
    		setTimeout(() => {
    			console.log(this);
    			}, 1000),
    		setTimeout(function() {
    			console.log(this);
    			}, 1000)
    	}
    }
    console.log(obj.aaa())
    

    结论:第一个this是obj中的this,第二个this是windows中的this。
    高阶函数
    1. filter过滤函数

    const num = [2,5,9,8,7,4,1,2,5,6,22,55];
    let newNum = num.filter(function(item) {
    	return item>10;
    	})
    console.log(newNum);
    

    2. map过滤函数

    const num = [2,5,9,8,7,4,1,2,5,6,22,55];
    let newNum = num.map(function(item) {
    	return item * 10;
    	})
    console.log(newNum);
    

    3. reduce过滤函数

    const num = [2,5,9,8,7,4,1,2,5,6,22,55];
    let newNum = num.reduce(function(prevalue, value) {
    	return value + prevalue;
    	}, 0)
    console.log(newNum);
    

    三个综合使用

    let n = num.filter(num => num > 50).map(num => num * 2).reduce((preValue,currentValue) => preValue + currentValue)
    console.log(n);
    
    展开全文
  • vue 箭头函数

    2020-03-09 22:08:46
    ES6中的箭头函数:参数=>函数体; (1)箭头函数和普通函数对比 普通函数: function test(var param){ alert("这是传过来的参数"+param); } 箭头函数: param=>alert("这是传过来的参数"+param). ...

    ES6中的箭头函数:参数=>函数体;

    (1)箭头函数和普通函数对比

    普通函数:

    function test(var param){

    alert("这是传过来的参数"+param);

    }

            箭头函数:

    param=>alert("这是传过来的参数"+param).

    普通函数:

    function test(var param){

    return param*2;

    }

    箭头函数:

    param=>param*2;

    (2)箭头函数的作用:

    A:通过上面对比可以看出箭头函数简洁可以省去function 和函数名

    B:函数体只有一个return时 return可以省略掉。

    C:箭头函数中this指的当前的vue

    (3)箭头函数的写法:

    A:没有参数时:()=>函数体;

            B:一个参数时:参数=>函数体;

    C:多个参数时:(param1,param2)=>函数体;

    注:如果函数体只有一句话的话可以省略{}



    作者:bzuld
    链接:https://www.jianshu.com/p/7c87732c0979
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • Vue箭头函数的使用

    2021-03-04 14:38:11
    这里写自定义目录标题Vue箭头函数的使用函数中的代码数量问题箭头函数中this的使用 Vue箭头函数的使用 对象自变量中定义函数的原始做法 const obj = { bbb(){ } } 使用箭头函数放入多个参数 const sum (num1, ...

    Vue箭头函数的使用

    对象自变量中定义函数的原始做法

    const obj = {
        bbb(){
    
        }
      }
    

    使用箭头函数放入多个参数

    const sum (num1, num2) =>{
    	return num1 + num2
    	}
    

    使用箭头函数放入一个参数,括号可以省略
    const power = num =>{
    return num * num
    }`

    函数中的代码数量问题

    函数块中有多行代码的书写方式

    const test = () =>{
    //打印Hello Wolrd
    	consle.log("hello World");
    //打印Hello Vuejs
    	consle.log("hello Vuejs");
    

    函数代码块中只有一行代码
    普通写法

    const mul = (num1 + num2) => {
    return num1 + num2
    }
    

    简便写法,他会执行这行代码,并将返回值返回,函数没有返回值时,会返回undefined

    const mul =(num1, num2) => num1 + num2
    

    箭头函数中this的使用

    什么时候使用箭头函数
    当我们打算把一个函数当作一个参数传入另一个函数中使用

    箭头函数中的this引用的就是最近作用域中的this,this会向外曾作用域中,一层一层查找this,知道有this的定义

    展开全文
  • 现代 JavaScript 中最引人注目的功能之一是引入了箭头函数,用 => 来标识。这种函数有两大优点 - 非常简洁的语法,和更直观的作用域和 this的绑定。这些优点有时导致箭头函数比其他形式的函数声明更受欢迎。例如...

    现代 JavaScript 中最引人注目的功能之一是引入了箭头函数,用 => 来标识。这种函数有两大优点 - 非常简洁的语法,和更直观的作用域和 this的绑定。这些优点有时导致箭头函数比其他形式的函数声明更受欢迎。例如,受欢迎的 airbnb eslint 配置 会在您创建匿名函数时强制使用JavaScript箭头函数。然而,就像工程中的任何东西一样,箭头函数优点很明显,同时也带来了一些负面的东西。使用他们的时候需要权衡一下。学习如何权衡是更好地使用箭头函数的关键。在本文中,我们将首先回顾箭头函数的工作原理,然后深入研究箭头函数改进代码的示例,最后深入研究箭不建议使用头函数的示例。

    JavaScript 箭头函数究竟是什么?

    JavaScript 箭头函数大致相当于 python 中的 lambda 函数 或 Ruby 中的 blocks。

    这些是匿名函数,它们有自己的特殊语法,接受一定数量的参数,并在其封闭的作用域的上下文(即定义它们的函数或其他代码)中操作。

    让我们依次分解这些部分。

    箭头函数语法

    箭头函数具有单一的总体结构,然后在特殊情况下可以通过多种方式简化它们。核心结构如下所示:

    (argument1, argument2, ... argumentN) => {

     // function body

    }

    括号内的是参数列表,后跟“胖箭头”( =>),最后是函数体。

    这与传统函数非常相似,我们只是省略 function 关键字并在参数后添加一个胖箭头( =>)。

    然而,有许多方法可以简化箭头函数。

    首先,如果函数体是单个表达式,则可以不使用花括号并将其置于内联中(省略大括号直接将表达式写在一行中)。表达式的结果将由函数返回。例如:

    const add = (a, b) => a + b;

    其次,如果只有一个参数,你甚至可以省略参数的括号。例如:

    const getFirst = array => array[0];

    正如您所看到的,这是一些非常简洁的语法,我们将重点介绍后面的好处。

    高级语法

    有一些高级语法可以了解一下。

    首先,如果您尝试使用内联单行表达式语法,但您返回的值是对象字面量。您可能会认为这看起来应该是这样的:

    (name, description) => {name: name, description: description};

    问题是这种语法比较含糊不清,容易引起歧义 :看起来好像你正试图创建一个传统的函数体。如果你碰巧想要一个对象的单个表达式,请用括号包裹该对象:

    (name, description) => ({name: name, description: description});

    封闭的上下文作用域

    与其他形式的函数不同,箭头函数没有自己的 执行期上下文。

    实际上,这意味着 thisarguments 都是从它们的父函数继承而来的。

    例如,使用和不使用箭头函数比较以下代码:

    const test = {

     name: 'test object',

     createAnonFunction: function() {

       return function() {

         console.log(this.name);

         console.log(arguments);

       };

     },

     createArrowFunction: function() {

       return () => {

         console.log(this.name);

         console.log(arguments);

       };

     }

    };

    我们有一个简单的 test 对象,有两个方法 - 每个方法都返回一个匿名函数。

    不同之处在于第一个方法使用传统函数表达式,而后者中使用箭头函数。

    如果我们使用相同参数,在控制台中运行它们,我们会得到完全不一样的结果。

    > const anon = test.createAnonFunction('hello', 'world');

    > const arrow = test.createArrowFunction('hello', 'world');

    > anon();

    undefined

    {}

    > arrow();

    test object

    { '0': 'hello', '1': 'world' }

    第一个匿名函数有自己的函数上下文,因此当您调用它时, test 对象的 this.name 没有可用的引用,也没有创建它时调用的参数。

    另一个,箭头函数具有与创建它的函数完全相同的函数上下文,使其可以访问 argumetnstest 对象。

    使用箭头函数改进您的代码

    传统lambda函数的主要用例之一,就是用于遍历列表中的项,现在用 JavaScript 箭头函数实现。

    比如你有一个有值的数组,你想去map遍历每一项,这时使用箭头函数非常理想:

    const words = ['hello', 'WORLD', 'Whatever'];

    const downcasedWords = words.map(word => word.toLowerCase());

    一个非常常见的例子是提取对象中的某个特定值:

    const names = objects.map(object => object.name);

    类似地,当用现代迭代样式取代传统for循环,一般我们使用forEach循环,箭头函数能够保持this来自于父级,让他们非常直观

    类似的,当用forEach来替换传统for循环的时候,实际上箭头函数会直观的保持 this来自于父一级

    this.examples.forEach(example => {

     this.runExample(example);

    });

    Promises 和 Promise 链

    箭头函数的另一个可以使代码更清晰,更直观的地方是管理异步代码。

    Promises使得管理异步代码变得容易很多(即使你很欢快地使用async/await,你仍然应该理解 async/await 是建立在 Promises 之上的 !)

    但是,虽然使用 promises 仍然需要定义在异步代码或调用完成后运行的函数。

    这是箭头函数的理想位置,特别是如果您生成的函数是有状态的,同时想引用对象中的某些内容。例如:

    this.doSomethingAsync().then((result) => {

     this.storeResult(result);

    });

    对象转换

    箭头函数的另一个常见且极其强大的用途是封装对象转换。

    例如,在 Vue.js 中,有一种通用模式,用于使用 mapState 将 Vuex 存储的各个部分直接包含到 Vue 组件中。

    这涉及定义一组 “mappers” ,这些 “mappers” 将从原始的完整的 state 对象转换为提取所涉及组件所需的内容。

    这些简单的转换使用箭头函数再合适不过了。比如:

    export default {

     computed: {

       ...mapState({

         results: state => state.results,

         users: state => state.users,

       });

     }

    }

    你不应该使用箭头函数的情景

    在许多情况下,使用箭头函数不是一个好主意。他们不仅不会帮助你,而且会给你带来一些不必要的麻烦。

    第一个是对象的方法。这是一个函数上下文的例子,这对于我们理解很有帮助。

    有一段时间使用 Class(类)属性语法和箭头函数的组合,作为创建“自动绑定方法”的方式,例如, 事件处理程序可以使用,但仍然绑定到类的方法。

    这看起来像是这样的:

    class Counter {

     counter = 0;

     handleClick = () => {

       this.counter++;

     }

    }

    这样,即使 handleClick 由事件处理程序调用,而不是在 Counter 实例的上下文中调用,它仍然可以访问实例的数据。

    这种方法的缺点很多,在本文中很好地记录。

    虽然使用这种方法确实为您提供了具有绑定函数的快捷方式,但该函数以多种不直观的方式运行,如果您尝试将此对象作为原型进行子类化/使用,则会不利于测试,同时也会产生很多问题。

    相反,使用常规函数,如果需要,将其绑定到构造函数中的实例:

    class Counter {

     counter = 0;

     handleClick() {

       this.counter++;

     }

     constructor() {

       this.handleClick = this.handleClick.bind(this);

     }

    }

    深层的调用链

    箭头函数可能让你遇到麻烦的另一个地方是,它们被用于许多不同的组合,特别是在函数深层调用链中。

    核心原因与匿名函数相同 - 它们给出了非常糟糕的堆栈跟踪。

    如果你的函数只是向下一级,比如在迭代器里面,那也不是太糟糕,但是如果你把所有的函数定义为箭头函数,并在它们之间来回调用,你就会陷入困境 遇到一个错误的时候,只是收到错误消息,如:

    {anonymous}()

    {anonymous}()

    {anonymous}()

    {anonymous}()

    {anonymous}()

    有动态上下文的函数

    箭头函数可能让您遇到麻烦的最后一种情况就是吗, this 是动态绑定的时候。

    如果您在这些位置使用箭头函数,那么动态绑定将不起作用,并且你(或稍后使用你的代码的其他人)可能会对事情未按预期执行的原因感到困惑。

    一些典型的例子:

    • 事件处理程序是通过将 this 设置为事件的 currentTarget 属性来调用。

    • 如果您仍在使用 jQuery ,则大多数 jQuery 方法将 this 设置为已选择的 dom 元素。

    • 如果您正在使用 Vue.js ,则方法和计算函数通常将 this 设置为 Vue 组件。

    当然你可以故意使用箭头函数来覆盖这种行为,但特别是在 jQuery 和 Vue 的情况下,这通常会干扰正常运行,让你感到困惑的是为什么看起来与附近其他代码相同的代码不起作用。

    总结

    箭头函数是 JavaScript 语言的一个非常有必要的补充,并且在许多情况下使代码更符合人们的阅读习惯。57204824829295e1278a2db408af683b.png

    展开全文
  • vue箭头函数问题

    2018-03-19 10:23:00
    不要在选项属性或回调上使用箭头函数,比如created: () =>...因为箭头函数是和父级上下文绑定在一起的,this不会是如你所预期的 Vue 实例,经常导致Uncaught TypeError: Cannot read property of...
  • vue箭头函数注意事项

    2018-07-16 11:58:00
    不要在选项属性或回调上使用箭头函数, 比如created: () =>...因为箭头函数是和父级上下文绑定在一起的,this不会是如你所预期的 Vue 实例,经常导致Uncaught TypeError: Cannot read property ...
  • vue 箭头函数 及对象

    2019-06-29 19:44:44
    无参 ()=》{}; 一个参数)(augs)=>{} 一个参数一行可以省略大括号 箭头函数this 作用域 是指最近的对象
  • 一、回调函数: 二、this指向问题:
  • vue箭头函数this作用域

    2020-04-30 10:04:42
    在做vue项目时用到了axios,但是发现axios请求之后的回调函数里this并不指向当前vue实例,从而导致浏览器报错。 出错代码及结果: created : function(){ axios.get('static/data.json').then(function(res){ ...
  • 最近在一个 Vue 的项目中重构功能时,遇到一个有趣的问题,场景是通过接口动态获取名称并显示在下拉列表中,第一次实现的代码如下:但这样写代码可扩展性很低,例如这时候需要添加一个查询用户身份的下拉框就要再写...
  • 创建一个实例每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的:数据与方法当Vue实例按照上述方式被创建时,Vue的响应式系统中就加入了data对象,在使用中可以直接通过属性的调用方式进行使用,并且当这些属性...
  • VUE箭头函数在IE浏览器不兼容 myArray.forEach(=>{ ..................... }  把=>改成function(xxx) IE不支持很多VUE的写法,自己可以参考一下ES6   swiper3.0版本在IE上兼容性很差的,...
  • 创建一个实例每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的:数据与方法当Vue实例按照上述方式被创建时,Vue的响应式系统中就加入了data对象,在使用中可以直接通过属性的调用方式进行使用,并且当这些属性...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,095
精华内容 438
关键字:

vue箭头函数

vue 订阅