20230227----重返学习-JavaScript引入方式及变量与变量值类型及基础类型转化与number包装对象的常用方法及object对象及属性的增删改查

day-016-sixteen-20230227-JavaScript引入方式及变量与变量值类型及基础类型转化与number包装对象的常用方法及object对象及属性的增删改查

JavaScript

只写几行基本上看不到效果。
JavaScript代码是从上到下并从左到右依次执行一遍的。

浏览器内核

Gecko 火狐浏览器
Webkit Safari浏览器
blink Chrome浏览器，基本上大多浏览器的内核
Presto 欧朋浏览器，但欧朋浏览器已经改blink

`JavaScript历史`

1995，网景的一个员工10天制作，主要是为了验证表单元素。
1997，ECMA成立并制定规则。为了JavaScript不因浏览器大战分裂而建立。
1999，ES3.0版本发布。
2007，ES4.0被废弃。
2009，ES5正式发布。
2015，ES6正式发布，命名为ES2015。
以后每年更新一个版本，以年号命名。

`JavaScript构成`

ECMAScript规则，JavaScript核心。
DOM文档对象模型，操作标签及标签属性的。
BOM浏览器对象模型，操作窗口，浏览历史，数据存储等。

`JavaScript定义`

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

JavaScript引入方式

html文件需要引入JavaScript代码，才能在页面里使用JavaScript代码。

静态引入

行内式 直接在DOM标签上使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入方式</title>
</head>
<body>
  <div onclick="alert(1111)">行内式</div>
</body>
</html>

内嵌式 写在script标签内

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入方式</title>
</head>
<body>
</body>
  <script>
    alert('内嵌式')
  </script>
</html>

外链式 通过script标签引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入方式</title>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>

与html文件同一目录下的./index.js:

alert('外链式')

动态引入
思路:

在js运行过程中，构建script标签并插入到DOM文档中，或者通过引用链接，把已经写好的js文件通过script标签并插入到DOM文档。
- 使用原生JavaScript中提供的动态加载<script>元素的方法，可以创建 <script>元素，并将其添加到 HTML文档中，以动态加载JS文件或代码。

添加方法可以使用
- document.body.appendChild(script标签元素);
- document.write() 如document.write('<script src="https://example.com/example.js"></script>');;

手写的js代码

const script = document.createElement("script");
script.innerHTML = 'console.log("DOM动态创建并运行脚本+预加载优化");';//这些代码可以手动写，也可以用ajax请求并使用。
document.body.appendChild(script);

引入外链js代码

setTimeout(() => {
  console.log(1, window.fang);//1 undefined;
  const script = document.createElement("script");
  script.src = "./动态js文件.js";
  document.body.appendChild(script);
  console.log(2, window.fang);//2 undefined;
}, 0);
setTimeout(() => {
  console.log(3, fang);//{fang: '方一'};
}, 3000);

同一目录下动态js文件.js

console.log("这个就是动态js文件");
var fang = { fang: "方一" };//{fang: '方一'};

通过import()动态模块。
- 使用ES6中引入的import()方法动态加载JS模块，该方法可以在运行时动态地加载JS模块。

引入外链js代码

async function loadJSModule() {
  const module = await import("./动态js模块.js");
  //console.log("module--->", module);
  // 加载成功后可以使用该模块
  module.fang.theFunction();//Symbol(动态js模块里的东西);
}

loadJSModule();

同一目录下动态js模块.js

console.log("这个就是动态js模块");//这个就是动态js模块
const theSymbol = Symbol("动态js模块里的东西");
let fang = {
  fang1: "方一",
  theFunction: () => {
    console.log(theSymbol);
  },
};
export { fang };

使用AJAX技术加载JS代码，可以通过XMLHttpRequest或fetch方法动态加载JS代码，并使用eval()或Function()方法执行代码。

引入外链js代码

const xhr = new XMLHttpRequest();
xhr.open("GET", "./动态js文件.js");
xhr.onload = function () {
  if (xhr.status !== 200) {
    return;
  }
  eval(xhr.responseText);
  //(new Function(xhr.responseText))()
  console.log(3, fang); //{fang: '方一'};
};
xhr.send();

同一目录下动态js文件.js

console.log("这个就是动态js文件");
var fang = { fang: "方一" };//{fang: '方一'};

变量

变量相当于数据的容器。

变量如果没定义，就直接使用会报错。

fang//Uncaught ReferenceError: fang is not defined

变量(容器，可以认为是数据的容器)

先声明+后定义(赋值)

var box;//var 是固定的一个关键字，它的作用是定义一个变量。box是变量，只要遵循命名规范随便起名。没赋值前，值为undefined。
box = 100

既声明又定义
```
var box = 100;
```

变量命名规范

区分大小写
- var box = 100;与var Box = 100;是不同的。
名字以数字，字母、_下划线、$美元符号组成，但是不能以数字开头。
- 可以使用中文字符等一些Unicode字符。
不能是关键字或者保留字。
- 关键字，就是代表特殊含义和功能的名字。
  - var、function、break、else、new、var、case、 finally、return、void 、catch 、for 、switch 、while 、continue、this 、with 、default 、if 、throw 、delete 、in 、 try 、do 、instranceof、 typeof
- 保留字，就是现在还不是关键字，但是以后有可能会被规定成关键字，预先保留着。
  - abstract、enum、int、short、boolean 、export 、interface、 static、 byte 、extends、long、super、char、final 、native 、synchronized、class 、float、package 、throws、const 、goto 、private、transient、debugger、implements 、protected、volatile、double 、import 、public
命名要有语义化
- 虽然也可以使用中文或拼音，但为了与其它人同步，应尽量使用英文
- 一个单词时
  - 小写
    - 定义变量
      - 名词为正常变量
      - 动词为函数名
  - 全大写
    - 常用于定义常量
  - 大驼峰命名法
    - 类名，构造函数名
  - 前缀为下划线_
    - 类里面的私有属性或私有变量名
- 多个单词时
  - 小驼峰命名法（驼峰命名法）：首单词的首字母小写，其余单词的首字母大写
  - 大驼峰命名法(又叫帕斯卡命名法)：每个单词的首字母都大写
    - 类名，构造函数名
  - 下划线命名法：要求单词与单词之间通过下划线连接即可
    - 全小写，用下划线连接
    - 全大写，用下划线连接
      - 常用于定义常量

变量值类型

值类型/原始值类型/基本数据类型
- number 数字
  - 有效数字
    - 十进制数
      - 1 1.1 -3 -9.25
    - Infinity 无限
    - 非十进制数
      - 0b数字、0B数字 二进制
      - 0数字、0o数字、0O数字 八进制
      - 0x数字、0X数字 十六进制
  - 非有效数字 NaN
- string 字符串
  - '' 用单引号包起来的
  - "" 用双引号包起来的
  - `` 用反引号包起来的，也叫模版字符串或多行文本字符串
- boolean 布尔值
  - true
  - false
- null 空
- undefined 未定义
- symbol 唯一值
  - Symbol()
  - Symbol('唯一值标记说明')
- bigint 大数，浏览器控制台会原封不动地打印出来，而不会用科学计数法去表示
  - 65245553155354695421345464587n
对象类型/引用数据类型

数据转换

非number类型转为number类型
- Number()
  1. 字符串转为number
    - 有效数字转为正常十进制数字
      - 会忽略字符串前后的空格
      - Number('0x10')//16
      - console.log(Number('1.1'));//1.1
      - console.log(Number('10px'));//NaN
      - console.log(Number('-10'));//-10
      - console.log(Number('true'));//NaN
      - console.log(Number(''));//0
      - console.log(Number(' '));//0
      - console.log(Number(' 7 '));//7
    - 非有效数字就是转为NaN
  2. 布尔值转为number
    - console.log(Number(true));//1
    - console.log(Number(false));//0
  3. null转为number
    - console.log(Number(null));//0
  4. undefined转为number
    - console.log(Number(undefined));//NaN
    - console.log(Number());//0
  5. symbol转为number
    - 会报错，symbol不能转为number
    - Number(Symbol('唯一值'));//Uncaught TypeError: Cannot convert a Symbol value to a numbe;
  6. bigint转为number
    - 超过范围就使用科学计数法表示
      - Number(11123456987456987123456789n);//1.1123456987456987e+25
    - 不超过范围就正常显示
      - Number(1112345n);//1112345
    - 可以理解为都正常转成数字了，但数字如果太大，就会使用科学计数法表示，同时数字对于太大的数本身就会损失精度。
其它数据类型转为string类型
- String()
- 总结直接加引号，
其它数据类型转为boolean
- 除了null、undefined、NaN、0、空字符串''以外，都为true。

nubmer常用方法

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是2-36之间的整数，表示被解析字符串的基数。
1. 被解析的值得是一个字符串，如果不是，需要用toString()这个方法转为字符串，再去解析。
2. 从左往右依次解析，直到遇到非有效数字，就停止。
  - 如果第一个就是非有效数字，就直接停止。
    - parseInt('k12.3');//NaN
3. 空字符串被解析为NaN。
4. 示例:
  - parseInt(100.3)//100
  - parseInt(true)//NaN
  - parseInt('')//NaN
parseFloat() 解析一个参数并返回一个浮点数。
1. 被解析的值得是一个字符串，如果不是，需要用toString()这个方法转为字符串，再去解析。
2. 从左往右依次解析，直到遇到非有效数字，就停止。
  - 如果第一个就是非有效数字，就直接停止。
    - parseFloat('k12.3');//NaN
3. 空字符串被解析为NaN。
  - parseFloat(100.3)//100.3
  - parseFloat('100.3px')//100.3
  - parseFloat(true)//NaN
  - parseFloat('')//NaN
isNaN() 被解析的值得是number类型，如果不是，就用Number()来转成number，再来判断是不是NaN。
- isNaN(100);//false;//100是NaN吗? ---> 不是(false)
toFixed() 使用定点表示法来格式化一个数值。
- 但不一定四舍五入，有时直接舍去不入，有时五舍六入。
  - 原因是因为浮点数在内存中存储的问题。
- (2.33335).toFixed(4);//'2.3333'
- (2.33336).toFixed(4);//'2.3334'
- (2.653).toFixed(1);//'2.7'
BigInt() 要想不损失精度，里面最好是一个字符串。
- BigInt(98765432100123456789);//98765432100123459584n; 使用正常数字，后面数字精度损失了。
- BigInt('98765432100123456789');//98765432100123456789n; 使用字符串，精度依旧正常。
- BigInt(98765432100123456789n);//98765432100123456789n; 使用BigInt，精度正常。
最大安全整数
- Number.MAX_SAFE_INTEGER 相当于2**53-1
最小安全整数
- Number.MIN_SAFE_INTEGER 相当于2**53-1

object普通对象

字面量表示法:
```
{属性名:属性值}
```
对象属性组成
```
  var obj={num:100,age:18}
```
num : 属性名(键/key)
100 : 属性值(值/value)
属性值可以是任意数据类型或变量，
- 换句话说必须是某一种数据类型,因为变量归根结底也是某一种数据类型。
属性名可能是字符串或者symbol类型，或者是数字

`变量属性`的`增删改查`

查
- 点语法
  - 点语法不能带引号
  - 属性名是数字时，不能用点语法
  - 属性名是symbol类型时，不能用点语法
- 中括号语法
  - 中括号语法一定要带引号
  - 属性名是数字，可以带引号也可以不带引号
  - 不带引号就默认是变量
    - 如果该变量没被创建，就会报错 xxx is not defined
    - 如果该变量被创建，就会把该变量的值放到中括号中。
      - var obj={0:'属性名为0的属性值'};console.log(obj[length]);//'属性名为0的属性值'
      - 在obj上找不到length这个属性名，就会去找上一级作用域，如果还找不到，就到window上找。结果window.length有值且为0，那么obj[0]就等于'属性名为0的属性值'。
      - var obj={0:'属性名为0的属性值'};console.log(obj[length]); 相当于: obj[length] => obj[window.length],同时window.length为0 => obj[0] => obj['0'] => '属性名为0的属性值'。
- 在对象中查找一个不存在的属性，那么值为undefined。

删

软删除 设置值为null或undefined

var obj = { name: "name", age: 100 };
obj.name = undefined;
console.log(obj);//{name: undefined, age: 100}

var obj = { name: "name", age: 100 };
obj.name = null;
console.log(obj);//{name: null, age: 100}

硬删除 使用delete关键字

var obj = { name: "name", age: 100 };
delete obj.name
console.log(obj);//{age: 100}

增

有则修改，无则新增

只能增加字符串和symbol

var obj = {}
obj[true]="true";
obj[{a:0}]="object";
console.log(obj)//{true: 'true', '[object Object]': 'object'};//无论什么对象，转字符串都是'[object Object]';

属性名不能重复，如果重复了，就相当于覆盖旧属性

新增symbol属性值，

var obj = {}
var theSymble = Symbol('Symbol注释')
obj[theSymble] = '属性值'
console.log(obj[theSymble])//'属性值';

改

有则修改，无则新增

只能修改前对象上必须有对应的属性，如果没有，就相当于新增了

var obj = {true: 'true', '[object Object]': 'object'}
obj[true]="true改";
obj[{a:0}]="object改";
console.log(obj)//{true: 'true改', '[object Object]': 'object改'};//无论什么对象，转字符串都是'[object Object]';

代码片段

进阶参考

JavaScript 开发规范

20230227----重返学习-JavaScript引入方式及变量与变量值类型及基础类型转化与number包装对象的常用方法及object对象及属性的增删改查

day-016-sixteen-20230227-JavaScript引入方式及变量与变量值类型及基础类型转化与number包装对象的常用方法及object对象及属性的增删改查

JavaScript

浏览器内核

JavaScript历史

JavaScript构成

JavaScript定义

JavaScript引入方式

变量

变量值类型

数据转换

nubmer常用方法

object普通对象

变量属性的增删改查

代码片段

进阶参考

`JavaScript历史`

`JavaScript构成`

`JavaScript定义`

`变量属性`的`增删改查`