ECMAScript——对数值的操作、对象方法扩展、ES6的模块化、代码转换

最新推荐文章于 2022-12-29 16:43:25 发布

原创最新推荐文章于 2022-12-29 16:43:25 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ecmascript #node.js #javascript #es6/es7

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

es6

73 篇文章

订阅专栏

node.js

26 篇文章

订阅专栏

ECMAScript

对数值(number)的操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //1. Number.EPSILON是javascript标识的最小精度
        // EPSILON属性的值接近于2.2204460492503130808472633361816E-16(负16次方)
        // 比如：两个值比大小，如果两个值的差值小于这个最小精度，说明两者相等
        // console.log(0.1 + 0.2 === 0.3); //false
        /* function handler(a, b) {
            if (Math.abs(a - b) < Number.EPSILON) {
                return true
            } else {
                return false
            }
        }; */
        // console.log(handler(0.1 + 0.2, 0.3));
        // 2.二进制和八进制
        /* let b = 0b1010; //二进制是0b开头
        let a = 0o777; //八进制是以0o开头
        let d = 100; //十进制
        let c = 0xff; //十六进制是以0x开头
        console.log(b);
        console.log(a); */
        //3. Number.isFinite检测一个数值是否为有限数
        // console.log(Number.isFinite(100)); //true
        // console.log(Number.isFinite(Infinity)); //false
        // 4.Number.isNaN检测一个数值是否为NaN
        // console.log(Number.isNaN(55)); //false，说明这个是一个Number类型的数值
        // Number.parseInt：字符串转整数；Number.parseFloat
        /* let str = 'number589974';
        let s = '589974number';
        console.log(Number.parseInt(str)); //NaN，因为一开始就是非Number类型的数值
        console.log(Number.parseInt(s)); //589974,直到遇到了非Number类型的数值
        console.log(Number.parseInt(5.795)); //5，去掉小数点后面的小数
        console.log(Number.parseFloat(5.658)); //保留小数 */
        // 5.Number.isInteger判断一个数是否为整数
        // console.log(Number.isInteger(5.33)); //false
        // console.log(Number.isInteger(12)); //true
        // 6.Number.trunc将数字的小数部分抹掉
        // console.log(Math.trunc(3.1415926)); //3，去掉小数部分，只留下整数部分
        // console.log(Number.parseInt(3.1415926)); //使用Number.parseInt，结果也是一样
        // 7.Math.sign判断一个数是正数(返回1)还是负数(返回-1)还是0(返回0)
        console.log(Math.sign(0)); //0
        console.log(Math.sign(-45)); //-1
        console.log(Math.sign(13)); //1
    </script>
</body>

</html>

对象方法扩展

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.Object.is 判断两个值是否完全相等,与===下锅差不多
        console
        /* .log(Object.is(120, 120)); //true
                // Object.is与===的区别
                console.log(Object.is(NaN, NaN)); //true
                console.log(NaN === NaN); //false */
        // 2.Object.assign对象的合并）（合并属性后再去重）
        const obj1 = {
            host: 'localhost',
            port: 3306,
            name: 'root',
            pass: 'root',
            timer: '20ms'
        };
        const obj2 = {
            host: 'http://baidu.com',
            port: 3300,
            name: 'admin',
            pass: '123456'
        };
        // 第一个对象与第二个对象的同名属性都被第二个对象覆盖了，不同命的属性被合并进去了
        console.log(Object.assign(obj1, obj2));
        // 3.Object.setPrototypeOf 设置原型对象和Object.getPrototypeOf获取原型对象；但是不建议通过这个方式设计原型对象
        const school = {
            name: 'zs'
        };
        const cities = {
            items: ['北京', '上海', '深圳']
        };
        // 将第二个参数添加到第一个参数的原型上面
        // 设置原型对象
        console.log(Object.setPrototypeOf(school, cities));
        // 获取原型对象
        console.log(Object.getPrototypeOf(school));
        console.log(school.items[0]);
    </script>
</body>

</html>

ES6的模块化

模块化是指将一个大的程序文件，拆分成许多小的文件（模块），然后将小文件组合起来（低耦合高内聚）

模块化的好处：

1.防止命名冲突

2.代码复用

3.高维护性

模块化规范产品

ES6之前的模块化规范：

1.CommonJS——NodeJS、Browserify

2.AMD——requireJS

3.CMD——seaJS

ES6模块化语法

模块化功能主要由两个命令构成：export和import

export命令用于规定模块的对外（导出）接口

import命令用于输入（引入）其他模块提供的功能

js文件设置导入内容

// 分别暴露
/* export let school = 'xxx学院';
export function func() {
    console.log('干饭人干饭魂');
} */

/* let school = 'xxx学院';

function func() {
    console.log('干饭人干饭魂');
}
// 统一暴露（按需暴露）
export { school, func } */
// 默认暴露(可以是任意类型，大多是对象)
export default {
    school: 'xxx学院',
    func: function() {
        console.log('干饭人干饭魂');
    }
}

入口文件

// 入口文件

// 模块引入
import * as test from './test'
console.log(test.school);

导入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- // 引入文件 -->
    <!-- 1.通用方式， -->
    <!-- import * as m from './test.js'; -->
    <!-- 2.解构赋值，as是设置别名，以防重名 -->
    <!-- import {school,func as fn} from './test.js'; -->
    <!-- import {default as obj} from './test.js'; //默认暴露-->
    <!-- 3.简便形式，针对默认暴露 -->
    <!-- 3.简便形式，针对默认暴露 -->
    <!-- import obj from './test.js'; -->
    <!-- 在script标签里面操作导入的数据 -->
    <!--   <script type="module">
        import obj from './test.js'; console.log(obj.school);
    </script> -->
    <!-- 直接用src属性引入一个入口文件 -->
    <script src="./app.js" type="module"></script>
</body>

</html>

bebal对ES6模块化代码转换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1.安装工具 
    工具：babel-cli;2.babel-preset-env;3.browserify(webpack)
    安装命令：npm i babel-cli babel-preset-env browserify -D
    2.执行
    执行命令：npx babel src/js -d dist/js --presets=babel-preset-env
    如果是全局安装就可直接使用babel，局部安装就用 npx babel
    第一个参数是源文件的目录（src/js）后面是转换选项（-d），第二个参数是将源文件转换到哪个文件夹下（dist/js）
    后面的参数（--presets）参数值是babel-preset-env
    转换后的文件是使用commenjs规范，而不是es6规范
    3.打包
    npx browserify dist/js/app.js -o dist/bundle.js
    若是后面修改文件了，要重新打包
    第一个参数（dist/js/app.js）是入口文件 输出选项-o，第二个参数（dist/bundle.js）是输出的位置
    -->
    <!-- Uncaught ReferenceError: require is not defined，不能识别 -->
    <!-- <script src="dist/js/app.js"> -->
    <script src="dist/bundle.js">
    </script>
</body>

</html>

安装jquery包

//安装
npm i jquery
//使用
import $ from 'jquery';//const $ = require('jquery')