兼容性还得再等一等凡事皆有特例,从某些功能来讲,也许转码实现更好 。
Nullish运算符Nullish运算符就是"??"运算符,如果为null和undefined则取"??"后边的值:
function greet(input) {return input ?? "Hello world";}
翻译成字节码是9个字节:
0x94c082935da @0 : 0b 03Ldar a00x94c082935dc @2 : 9e 04JumpIfUndefinedOrNull [4] (0x94c082935e0 @ 6)0x94c082935de @4 : 8a 04Jump [4] (0x94c082935e2 @ 8)0x94c082935e0 @6 : 13 00LdaConstant [0]0x94c082935e2 @8 : a9Return
转码之后的结果:
function greet(input) {return input !== null && input !== void 0 ? input : "Hello world";}
翻译成字节码之后15个字节:
0x2a8a082935da @0 : 0b 03Ldar a00x2a8a082935dc @2 : 9a 0aJumpIfNull [10] (0x2a8a082935e6 @ 12)0x2a8a082935de @4 : 0b 03Ldar a00x2a8a082935e0 @6 : 9c 06JumpIfUndefined [6] (0x2a8a082935e6 @ 12)0x2a8a082935e2 @8 : 0b 03Ldar a00x2a8a082935e4 @10 : 8a 04Jump [4] (0x2a8a082935e8 @ 14)0x2a8a082935e6 @12 : 13 00LdaConstant [0]0x2a8a082935e8 @14 : a9Return
"??"运算符被v8译成JumpIfUndefinedOrNull指令,转码了之后就没有这待遇了,变成JumpIfNull和JumpIfUndefined两条指令 。
所以,只要浏览器支持的话,Nullish运算符还是值得不转码的 。
乘方运算符与Nullish一样,乘方运算符也是有指令支持的 。这样就节省了函数调用的开销 。
let f1 = x => {return x ** x;};f1(10);
因为有Exp指令,一共6个字节就搞定了:
0xb75082936be @0 : 0b 03Ldar a00xb75082936c0 @2 : 3e 03 00Exp a0, [0]0xb75082936c3 @5 : a9Return
转码之后变成:
var f1 = function f1(x) {return Math.pow(x, x);};f1(10);
因为有函数调用,需要16个字节的指令:
0xb7508293652 @0 : 21 00 00LdaGlobal [0], [0]0xb7508293655 @3 : c3Star10xb7508293656 @4 : 2d f9 01 02LdaNamedProperty r1, [1], [2]0xb750829365a @8 : c4Star00xb750829365b @9 : 5f fa f9 03 03 04 CallProperty2 r0, r1, a0, a0, [4]0xb7508293661 @15 : a9Return Constant pool (size = 2)0xb7508293621: [FixedArray] in OldSpace - map: 0x0b7508002205 <Map> - length: 20: 0x0b75082028e5 <String[4]: #Math>1: 0x0b7508202aa1 <String[3]: #pow>
JSX有一种情况下是没法用原生的代码而必须要转码的,这就是React JSX的情部况 。
虽然要转码,但是不同的目标带来的代码量也是有显著不同的 。
比如下面的代码,这是典型的React Hooks用法:
import React, { useState } from 'react';function Example() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);}
我们按iOS 9来转码:
const babel = require("@babel/core");const generate = require("@babel/generator");let result3 = babel.transformSync(code, {targets: "iOS 9",sourceMaps: true,presets: ["@babel/preset-env", "@babel/preset-react"]});let str1 = result3.code;console.log(str1);
转码后的结果如下:
...function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }function Example() {var _useState = (0, _react.useState)(0),_useState2 = _slicedToArray(_useState, 2),count = _useState2[0],setCount = _useState2[1];return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {onClick: function onClick() {return setCount(count + 1);}}, "Click me"));}
推荐阅读
- 莎士比亚的四大喜剧分别是什么内容? 莎士比亚四大喜剧
- 团购怎么做 聚团购
- 海外代购平台有哪些比较靠谱 黑五海淘
- 陈小春|被误认为是港星的10位内地明星,一个比一个有故事,有人已去世
- 简历里的求职意向怎么写比较合适? 求职意向怎么写
- 白夜追凶|比《白夜追凶》还精彩的6部探案剧,你不一定全看过?
- 先锋股份2021年净利6070.3万同比减少17.85% 公允价值变动损益同比减少
- 伊能静|伊能静儿子穿女装,裸上身妩媚妖娆,眼神勾人比妈妈还有女人味
- 最近火了的“一元脸”,真的是小脸的标准吗?
- 比黄金、白银走势更牛!钯金持续刷新历史高点,这只正牌概念股却没怎么涨!分析称:还得涨