javascript条件式访问属性和箭头函数介绍

目录
  • 一、条件式访问属性
  • 二、箭头函数介绍

一、条件式访问属性

?. 是ES2020引入的新特性，是一个条件式属性访问操作符，当你访问值为undefined变量的某个属性值时，如果使用.操作符会直接报错，如果使用条件式属性访问操作符来访问会返回undefined。

看例子：

let book = {price:10,
            edition:10,
            name:"javascirpt"
}

console.log(book.page.num)

直接报错：

TypeError: Cannot read property 'num' of undefined

因为book.page 的值 undefined， undefined是没有任何属性值的，所以会报错。

如果你无法确定某个值是undefined还是对象，除了可以用 if 语句来判断之外，还可以直接用条件式访问操作符来访问某个属性， 就算被访问的对象是undefined，也不会报错。而是返回 undefined

console.log(book.page?.num)

输出：

undefined

二、箭头函数介绍

箭头函数是ES6中出现的一种定义函数的简写方法， 用=>分隔参数列表和函数体。

例子：

let square = x=>x**2;

console.log(square(3))

输出：

9

这个函数的定义等价于传统函数：

function square(x){
    return x**2
}

箭头函数通常用于把一个未命名函数作为参数传给另一个函数。

let nums = [1,2,3,4].map(x=>x*2)

console.log(nums)

输出：

[ 2, 4, 6, 8 ]

箭头函数让代码看起来更简洁了。

如果使用传统的function关键字来定义函数，看起来就显得有点啰嗦

nums = [1,2,3,4].map(function(x){return x*2})

console.log(nums)

箭头函数如果有多个参数，则需要使用括号括起来

const add = (x,y)=>x+y;

console.log(add(1,2))

如果箭头函数的函数体有多条语句，则要将函数体用大括号括起来，并用return关键字返回值

const add = (x,y)=>{let tmp=x+y;return tmp};

console.log(add(1,2))

这时候箭头函数的函数体和普通的function定义的函数体格式就完全一样了。所以箭头函数在简单的单行语句中才显得简洁，并具有可读性。一旦函数体过于复杂，再用箭头函数来定义可读性就没那么好了。

到此这篇关于javascript条件式访问属性和箭头函数介绍的文章就介绍到这了,更多相关javascript条件式访问属性和箭头函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 编写更好的JavaScript条件式和匹配条件的技巧(小结)

    介绍 如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句.通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多态.我认为我们应当尽可能地遵循这些原则. 正如我在另一篇文章 JavaScript 整洁代码的最佳实践里提到的,你写的代码不单单是给机器看的,还是给"未来的自己"以及"其他人"看的. 从另一方面来说,由于各式各样的原因,可能我们的代码最终还是会有条件式.也许是修复 bug 的时间很紧,也许是不使用条件语句会对我们的代码库造成大的

  • JS什么场景不适合箭头函数

    概述 这些年来,ES6 将js的可用性提升到一个新的水平时: 箭头函数.类等等,这些都很棒. 箭头函数是最有价值的新功能之一,有很多好文章描述了它的上下文透明性和简短的语法. 但每个事务都有两面.通常,新特性会带来一些混乱,其中之一就是箭头函数被误导了.本文将介绍一些场景,在这些场景中,你应该绕过箭头函数,转而使用良好的旧函数表达式或较新的简写语法.并且要注意缩短代码,因为这会影响代码的可读性. 定义对象上的方法 在js中,方法是存储在对象属性中的函数.当调用该方法时,this将指向该方法所属的

  • JS 箭头函数的this指向详解

    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承. 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 无法使用arguments参数,如果要用的话就用rest 无法使用yield命令,所以箭头函数无法用作Generator函数 因为没有自己的this,所以没法通过bind.call.apply来改变this指向 但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制 箭头函数的this从外层代码

  • JavaScript哪些场景不能使用箭头函数

    目录 1. 定义对象方法 2.定义原型方法 3. 定义事件回调函数 4. 定义构造函数 1. 定义对象方法  JS 中对象方法的定义方式是在对象上定义一个指向函数的属性,当方法被调用的时候,方法内的 this 就会指向方法所属的对象. let obj = { array: [1, 2, 3], sum: () => { console.log(this === window); // true return this.array.reduce((result, item) => result

  • JavaScript 箭头函数的特点、与普通函数的区别

    目录 1. 箭头函数的使用 1. 普通函数到箭头函数 2. 省略大括号和 return 3. 省略小括号 2. 箭头函数与普通函数的区别 1. 箭头函数的 this 是父级作用域的 this 2. call.apply.bind无法改变箭头函数的 this 3. 不可以作为构造函数 4. 不可以使用 arguments 5. 箭头函数不支持 new.target 1. 箭头函数的使用 ES6 中新增了使用箭头=>来定义函数表达式的方法.很多情况下,箭头函数和函数表达式创建的函数并无区别,只有写法

  • JavaScript中箭头函数与普通函数的区别详解

    JavaScript中箭头函数与普通函数的区别详解

    本文为大家讲解了JavaScript中箭头函数与普通函数的区别,供大家参考,具体内容如下 箭头函数: let fun = () => { console.log('lalalala'); } 普通函数: function fun() { console.log('lalla'); } 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return. 箭头函数是匿

  • javascript条件式访问属性和箭头函数介绍

    目录 一.条件式访问属性 二.箭头函数介绍 一.条件式访问属性 ?. 是ES2020引入的新特性,是一个条件式属性访问操作符,当你访问值为undefined变量的某个属性值时,如果使用.操作符会直接报错,如果使用条件式属性访问操作符来访问会返回undefined. 看例子: let book = {price:10, edition:10, name:"javascirpt" } console.log(book.page.num) 直接报错: TypeError: Cannot re

  • Javascript中 带名 匿名 箭头函数的重要区别(推荐)

    带名函数是指函数显示地给出了一个名字的函数,function abs(x){}.匿名函数是指函数只带有function这个关键字,而没有像abs这种函数名称的函数,如function(){}.ES6标准新增了一种新的函数:Arrow Function(箭头函数)箭头函数表面上相当于匿名函数,并且简化了函数定义.它们各自的区别是什么呢? 1 带名和匿名函数的区别 区别:匿名函数需要讲地址赋值给另一个变量let a,然后再用a来调用函数:而带名函数因为显示地给出了函数名称,所以可以直接用这个函数名称

  • JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法.分享给大家供大家参考,具体如下: 箭头函数在 JavaScript 里面,是 ES6(ES2015)才加入进来的.因为函数里有个像箭头一样的符号:=>,所以叫箭头函数,英文经常也会称为 Fat arrow functions,胖乎乎的箭头函数.这种函数也称为 lambda 表达式.箭头函数不能当作构造函数使用. 语法 一个箭头函数看起来像这样: const

  • JavaScript数组去重和扁平化函数介绍

    目录 1.数组扁平化(又称数组降维) 方法一:使用 reduce 方法 方法二:栈 2.数组去重 方式一:Set(ES6) 方式二:reduce 方法三:filter 1.数组扁平化(又称数组降维) flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回 const test = ["a", ["b", "c"], ["d", ["e", ["

  • JavaScript基础之this和箭头函数详析

    箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this. 由于箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this),他们的第一个参数会被忽略. 前言 阅读下面的内容要先看下<你不知道的javascript(上)>中的第二部分:this和对象原型(里面对于this指向的理论部分主要来源于该书). 问题 这周在写代码的时候,听同事在说箭头函数无法更改this的指向,并且使用下面代码进行验证: // (1)

  • JavaScript截取字符串的2个函数介绍

    首先我们来看一下substring函数使用介绍. 一.substring substring需要至少需要一个参数,第一个参数为起始位置,第二个参数可选,为结束位置. 只有一个参数: 复制代码 代码如下: <meta charset="UTF-8" /> <script type='text/javascript'> /**  * substring函数使用DEMO  */ var str = '欢迎各位童鞋到我们做客'; var sub = str.substr

  • 详解JavaScript什么情况下不建议使用箭头函数

    详解JavaScript什么情况下不建议使用箭头函数

    目录 this指向原理 问题的由来 内存的数据结构 函数 环境变量 箭头函数的缺点 不适用的场景 总结 箭头函数作为ES6新增的语法,在使用时不仅能使得代码更加简洁,而且在某些场景避免this指向问题.但是箭头函数不是万能的,也有自己的缺点以及不适用的场景,虽然可以解决this只想问题,但是也可能会带来this指向问题.具体场景具体分析,本文就深入探讨箭头函数. 箭头函数没有自己的this,其this取决于上下文中定义的this. this指向原理 问题的由来 学懂 JavaScript 语言,

  • 深入理解JavaScript 箭头函数

    深入理解JavaScript 箭头函数

    JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法.通常,在JavaScript中,可以通过两种方式创建函数: 函数语句. 函数表达式. 可以如下所示创建函数语句: function add(num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum); 也可以创建相同功能的函数表达式,如下所示: var add = function (nu

随机推荐