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')