数值扩展
- 二进制和八进制
ES6 提供了二进制和八进制数值的新的写法,分别用前缀 0b 和 0o 表示。
- Number.isFinite() 与 Number.isNaN()
Number.isFinite() 用来检查一个数值是否为有限的
Number.isNaN() 用来检查一个值是否为 NaN
- Number.parseInt() 与 Number.parseFloat()
ES6 将全局方法 parseInt 和 parseFloat,移植到 Number 对象上面,使用不变。
- Math.trunc
用于去除一个数的小数部分,返回整数部分。
- Number.isInteger
Number.isInteger() 用来判断一个数值是否为整数
例如:
<script>
//0. Number.EPSILON 是 JavaScript 表示的最小精度
//EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
// function equal(a, b){
// if(Math.abs(a-b) < Number.EPSILON){
// return true;
// }else{
// return false;
// }
// }
// console.log(0.1 + 0.2 === 0.3);
// console.log(equal(0.1 + 0.2, 0.3))
//1. 二进制和八进制
// let b = 0b1010;
// let o = 0o777;
// let d = 100;
// let x = 0xff;
// console.log(x);
//2. Number.isFinite 检测一个数值是否为有限数
// console.log(Number.isFinite(100));
// console.log(Number.isFinite(100/0));
// console.log(Number.isFinite(Infinity));
//3. Number.isNaN 检测一个数值是否为 NaN
// console.log(Number.isNaN(123));
//4. Number.parseInt Number.parseFloat字符串转整数
// console.log(Number.parseInt('5211314love'));
// console.log(Number.parseFloat('3.1415926神奇'));
//5. Number.isInteger 判断一个数是否为整数
// console.log(Number.isInteger(5));
// console.log(Number.isInteger(2.5));
//6. Math.trunc 将数字的小数部分抹掉
// console.log(Math.trunc(3.5));
//7. Math.sign 判断一个数到底为正数 负数 还是零
console.log(Math.sign(100));
console.log(Math.sign(0));
console.log(Math.sign(-20000));
</script>
对象拓展
ES6 新增了一些 Object 对象的方法
- Object.is 比较两个值是否严格相等,与『===』行为基本一致(+0 与 NaN)
- Object.assign 对象的合并,将源对象的所有可枚举属性,复制到目标对象
- _proto_、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型
例如:
<script>
//1. Object.is 判断两个值是否完全相等
// console.log(Object.is(120, 120));// ===
// console.log(Object.is(NaN, NaN));// ===
// console.log(NaN === NaN);// ===
//2. Object.assign 对象的合并
// const config1 = {
// host: 'localhost',
// port: 3306,
// name: 'root',
// pass: 'root',
// test: 'test'
// };
// const config2 = {
// host: 'http://atguigu.com',
// port: 33060,
// name: 'atguigu.com',
// pass: 'iloveyou',
// test2: 'test2'
// }
// console.log(Object.assign(config1, config2));
//3. Object.setPrototypeOf 设置原型对象 Object.getPrototypeof
const school = {
name: 'NEFU'
}
const cities = {
xiaoqu: ['北京','上海','深圳']
}
Object.setPrototypeOf(school, cities);
console.log(Object.getPrototypeOf(school));
console.log(school);
</script>
模块化
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。
模块化的优势有以下几点:
- 防止命名冲突
- 代码复用
- 高维护性
ES6 模块化语法:
模块功能主要由两个命令构成:export 和 import。
- export 命令用于规定模块的对外接口
- import 命令用于输入其他模块提供的功能
暴露方法汇总
①分别暴露
//位置./src/js/m1.js
//分别暴露
export let school = 'NEFU';
export function teach() {
console.log("哈哈哈哈哈啊哈");
}
<script type="module">
//引入 m1.js 模块内容
import * as m1 from "./src/js/m1.js";
console.log(m1);
</script>
②统一暴露
//统一暴露
let school = 'NEFU';
function findJob(){
console.log("哈哈哈!!");
}
//
export {school, findJob};
import * as m2 from "./m2.js";
m2.findJob();
③默认暴露
//默认暴露
export default {
school: 'NEFU',
change: function(){
console.log("哈哈哈!!");
}
}
import * as m3 from "./m3.js";
m3.default.change();
默认暴露返回的是一个default对象
导入方法汇总
①通用的导入方式
//引入 m1.js 模块内容
import * as m1 from "./src/js/m1.js";
// //引入 m2.js 模块内容
import * as m2 from "./src/js/m2.js";
// //引入 m3.js
import * as m3 from "./src/js/m3.js";
②解构赋值形式
import {school, teach} from "./src/js/m1.js";
import {school as sc, findJob} from "./src/js/m2.js";
import {default as m3} from "./src/js/m3.js";
如果重名可以用as重新命名
而如果使用的是默认暴露则一定要有as
③简便形式 (针对默认暴露)
import m3 from "./src/js/m3.js";
也就是直接重命名,不需要用as(反正是必须的,所以可以省略)
浏览器中使用模块化的第二种方式
原先我们都是在script标签中直接进行引入。
而第二种方式:创建一个入口文件,然后再用一个单独的script标签引入
例如:
//入口文件
//地址:./src/js/app.js
//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";
引入:
<script src="./src/js/app.js" type="module"></script>
考虑到兼容性的问题,项目中一般使用babel来进行处理
模块化引入npm包
略,待补。