Javascript即将到来的3个新特性

进击的小进进

发布于 2022-03-28 15:02:29

3090

发布于 2022-03-28 15:02:29

1、Optional Chaining(可选链式调用)

const data = {
  user: {},
};
console.log(data.user.address.street); 
// Uncaught TypeError: Cannot read property 'street' of undefined

这是我们现在 ES6 中会遇到的问题，原因是 user 中没有 address 对象，然后我们这样判断：

const street = data && data.user && data.user.address && data.user.address.street;
console.log(street); // undefined

这样的写法很差劲

新特性可以这样写（ ?. 类似于angular5的安全操作符）

console.log(data.user?.address?.street) //undefined

2、Nullish coalescing(空值合并) 我们判断空值一般这样：

value != null ? value : 'default value';

或者这样：

value || 'default value'

新特性可以这样写（ ?? ）：

value ?? 'default value';

3、Pipeline operator(管道运算符) 举个例子，通过三个函数对字符串进行处理，通常是这样：

function a(str) {  return str + ", " + str;}

function b(str) {
  return str[0].toUpperCase() + str.substring(1);
}

function c(str) {
  return str + '!';
}

let result = c ( b ( a("hello") ) ); // "Hello, hello!"

通过管道运算符，我们可以这样写：

let result = "hello" |> a |> b |> c     // "Hello, hello!"

参考：Here are three upcoming changes to JavaScript that you’ll love（https://medium.freecodecamp.org/here-are-three-upcoming-changes-to-javascript-that-youll-love-387bce1bfb0b）

（完）

<body>
<script src="jQuery.js"></script>
<p id="pTwo">这是divTwo</p>
<script>
  $("#pTwo").position() //{top: 0, left: 8}
</script>
</body>
  // 返回被选元素相对于父元素（parent）的偏移坐标
    // 可以理解成被选元素设置为absolute，
    // 然后设置left、top的值就是相对于父元素的偏移坐标
    // 源码10571行
    // position() relates an element's margin box to its offset parent's padding box
    // This corresponds to the behavior of CSS absolute positioning
    position: function() {
      // 如果DOM元素不存在，直接返回
      if ( !this[ 0 ] ) {
        return;
      }

      var offsetParent, offset, doc,
        elem = this[ 0 ],
        parentOffset = { top: 0, left: 0 };

      // position:fixed elements are offset from the viewport, which itself always has zero offset
      // position:fixed的元素，是相对于浏览器窗口进行定位的，
      // 所以它的偏移就是getBoundingClientRect()，即获取某个元素相对于视窗的位置
      if ( jQuery.css( elem, "position" ) === "fixed" ) {

        // Assume position:fixed implies availability of getBoundingClientRect
        offset = elem.getBoundingClientRect();

      }
      // 除去position是fixed的情况

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-05-24，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript