day1JS-数据类型
傻虎贼头贼脑 2024-09-08 15:03:11 阅读 57
1. 浏览器内核
通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。
blink（webikt 内核的升级）（Google Chrome/ Safari /Opera/ 大部分的国产和手机浏览器）。
Gecko（[ˈɡekəʊ]）内核（Firefox 火狐）。
Presto （[ˈprestəʊ]）欧朋。
Trident （ie浏览器）。
2. 服务器渲染与客户端渲染
2.1 服务器渲染
客户端（浏览器html+css+js发送消息给服务器要数据）-----> 服务器（去数据库查找相关的数据）-----> 数据库（返回数据）-----> 服务器（拿到数据，并渲染成一个完整的页面返回）-----> 客户端（将接收到的页面进行展示）。
2.2 服务器渲染的缺点
服务器渲染数据压力过大。
每次修改数据都需要服务器重新渲染一个页面，不能局部更新。
不利于团队协作。
2.3 客户端渲染
客户端（浏览器页面局部需要数据）-----> 服务器（去数据库查找相关的数据）-----> 数据库（返回数据）-----> 服务器（拿到数据，返回给客户端）-----> 客户端（将接收到的数据进行循环渲染）。
2.4客户端渲染的优点
减少了服务器的压力。
能局部更新数据。
有利于团队协作。
3. 为什么学JavaScript
所有主流浏览器都支持JavaScript。
目前，全世界大部分网页都使用JavaScript。
他可以让网页呈现各种动态效果。
作为一个Web开发工程师，如果你想提供漂亮的网页、令客户满意的上网体验，JavaScript是必不可少的工具。
4. JS的构成(背)
ECMAScript：语言的核心（语法）。
DOM（文档对象模型）：Document Object Model，提供了一系列的应用程序接口（api），供我们开发者对DOM的添加删除修改等（说白了就是操作标签的）。
BOM（浏览器对象模型）：Browser Object Model，客户端和浏览器端窗口操作的基础（操作浏览器窗口的），可以使用BOM对浏览器窗口进行访问和操作，比如移动窗口位置、返回历史记录等等，但是BOM没有一个成型的规范，但是所有的浏览器都支持。
5. 什么是JavaScript
5.1 简介
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
5.2 JS的3种引入方式
5.2.1 行内JS
<code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title></title>
</head>
<body>
<div id="box"></div>code>
<!-- 行内式：通过事件引入（有限制性） -->
<div onclick="alert('月薪过万')">点击</div>code>
</body>
</html>
5.2.2 内部JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title></title>
</head>
<body>
<script>
alert('月薪过万')
</script>
</body>
</html>
5.2.3 外部JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title></title>
</head>
<body>
<script src="Demo-01.js"></script>code>
</body>
</html>
6. JavaScript命名规范
区分大小写
名字以数字，字母、下划线、$ 符号组成，（但是不能以数字开头）。
不能是关键字或者保留字，关键字，就是代表特殊含义和功能的名字。
命名要有语义化，可以遵循：
1.小驼峰命名法（驼峰命名法）：首单词的首字母小写，其余单词的首字母大写，例如：studentMessage
2.大驼峰命名法(又叫帕斯卡命名法)：跟小驼峰命名法类似，只不过是每个单词的首字母都大写，例如：StudentMessage。
3.下划线命名法：要求单词与单词之间通过下划线连接即可。例如：my_name
7. JS的基础知识
7.1 注释
单行注释： //
多行注释 : /*多行注释*/
7.2 语句
js的语句是以；为结尾的，虽然不一定是必须的，但是我们建议不省略，代码块结束以后可以省略。
7.3 变量
7.3.1 简介
变量相当于容器，值就是容器中盛放的内容，变量名字就是贴在容器上的标签，通过这个标签可以找到变量，读取使用它。
在ECMAScript中，变量是松散类型的（弱类型、动态类型），也就是一个变量可以保存任何类型的值。
7.3.2 定义一个变量并使用
声明变量的关键字是var/let
1. 声明一个变量未赋值，默认是undefined（未定义）。
语法1：var/let 变量名;
2. 声明一个变量并赋值。
语法2：var/let 变量名 = 数据;
案例：
var name="xiaoxiaohui" (把等号后面的值赋给了前面定义的变量)code>
3. 还可以给多个变量同时赋值，或者是同时定义，使用英文逗号隔开。
var sex="女",age="18"；code>
let sex="女",age="18"；code>
4. 可以给同一个变量多次赋值或者多次定义。
var age=18;
age=19;
var age=20;
console.log(age);
7.3.3 var与let的区别
var关键字可以重复声明同一个变量，let关键字不可以重复声明同一个变量。
7.4 常量
1. 声明一个变量并赋初始值。
语法：const 变量名 = 数据;
2. 常量的特点：
必须赋初始值。
const 不能重复声明同一个变量。
赋初始值后不可以被修改。
8. JS的数据类型
8.1 基础数据类型（原始值类型）（7个）
Number 数值 ：（数字，整数，小数，NaN（Not a Number））。
String 字符串：可以使用单引号或双引号或反引号（字符串模板）表示字符串。
Boolean 布尔： true(真)，false（假）。
Null （空）
Undefined （未定义）
Symbol（唯一值，es6新增）
BigInt（大数，es6新增）
8.2 引用数据类型（11个）
Array
Object
Function
RegExp（正则表达式）
Math
Date
..........
9. 基础数据类型详解
9.1 number 数值类型
1. number 数值类型运行原理：把十进制数据转为二进制数据，二进制数据再转十进制数据。
2. number 数值类型包括：整型 （整数） 、浮点型 （小数） 、特殊的数值 NaN。
注意！！！
浮点型 （小数）的计算要注意浮点的精度问题（十进制小数转为二进制小数，大部分无法精确转换；整数不存在这个问题）。
0.1 + 0.2 = 0.30000....4
3. JS中数值的范围
JS 中的Number数据类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。
4. 特殊的数值 NaN 的特点
NaN是number类型，是一个数值，表示非有效数字。
特点1：NaN与任何数进行任何运算结果都是NaN。
特点2：NaN与任何数都不相等，包括自己。
5. 数值相关的运算符
+ :加
- ：减
* ：乘
/ ：除
% ：取余
6. 相关的函数
isNaN() ：验证一下n是不是有效数字，如果是有效数字，则返回false；如果不是有效数字，则返回true。
isNaN()函数的底层运行逻辑：先把任何类型转化为数字类型Number()，再使用isNaN()函数判断。
<body>
<script>
console.log(isNaN(1)); //false
console.log(isNaN(NaN));//true
console.log(isNaN('AA'));//true
//"12.5"---Number("12.5")---12.5 isNaN(12.5) false
console.log(isNaN('12.5'));//false
//Number("12.5px")---NaN isNaN(NaN) true
console.log(isNaN('12.5px'));//true
//Number([])---0 false
console.log(isNaN([]));//false
//Number([10])---10 false
console.log(isNaN([10]));//false
//Number([10, 20])---NaN true
console.log(isNaN([10, 20]));//true
// Number({}) NaN true
console.log(isNaN({}));//true
//Number(null)---0 isNaN(0) false
console.log(isNaN(null));//false
//Number(undefined)--NaN true
console.log(isNaN(undefined));//true
console.log(isNaN(Symbol(1)));//报错
</script>
</body>
注意！！！！几个特殊值
NaN 转为数字类型值为NaN --- ture
null转为数字类型值为0 --- false
[] 转为数字类型值为0 --- false
[10，30] 转为数字类型值为NaN --- ture
{} 转为数字类型值为NaN--- true
undefined转为数字类型值为NaN --- true
Symbol(1) --- 报错
Number（）：Number是JS内置的转换方法，可以把其它数据类型“强制”转换为数字类型。
Number（）的底层实现逻辑：把其它数据类型先转为字符串类型，再转为数字类型。
转换规则：
1.把字符串转换为数字：一但字符串中出现非有效数字字符（只要不是数字），则结果为NaN。
2.只有都是有效数字字符，才能转换为具体的数字。
3.把布尔转换为数字：true转换为1 false转换为0。
4.把null转换为数字：null转换为0 undefined转换为NaN。
5.不能把Symbol类型转换为数字，否则会报错。
案例：
<body>
<script>
console.log(Number('111'));//111
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number(Symbol());//报错
</script>
</body>
练习题：
console.log(Number('12')); //12
console.log(Number('12.5'));//12.5
console.log(Number('12px'));//NaN
console.log(Number('12.5.0'));//NaN
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number(function func() { }));//NaN
console.log(Number(Symbol(13)));//报错
parseInt()/parseFloat()：把其它数据类型转换为number类型。
parseInt()的使用方法：
使用方法一：
parseInt()真正的用法是：将指定的进制字符串转换为10进制的整数。
例如：console.log(parseInt("FF"，16));
解读：将16进制的"FF"转换为10进制的整数为255。
使用方法二：
其他类型转化为number，取整数部分。
parseFloat()：其他类型转化为number，取整数+小数部分。
从字符串最左边开始查找，把找到的有效数字字符转换为数字，遇到不是数字的时候停止。如果找不出来，就是NaN。
console.log(Number('12px'));//NaN
console.log(parseInt('12px'));//12
console.log(parseInt('12px24'));//12
console.log(parseInt('width:12px'));//NaN
console.log(parseInt('12.5px'));//12
console.log(parseFloat('12.5px'));//12.5
console.log(parseFloat('12px'));//12
console.log(Number(true)); //1
console.log(parseInt(true));//NaN
console.log(parseInt('true'));//NaN
console.log(parseInt(NaN));//NaN
console.log(Number(null));//0
console.log(parseInt(null));//NaN
console.log(isNaN(Number(parseInt("0.8"))));//false
console.log(Number(''));//0
console.log(parseInt('')); //NaN
toFixed( )：保留小数点后面N位（最后的结果是一个字符串），要四舍五入。
var num = 12.349594354;
//装箱
console.log(num.toFixed(2)); //四舍五入
console.log(num.toFixed(1)); //四舍五入
console.log(num.toFixed(3)); //四舍五入
Number.MAX_SAFE_INTEGER ：JS能够有效识别的最大整数。
console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991
最大安全数（JS能够有效识别的最大整数）
console.log(9007199254740992 == 9007199254740993); //=>true
应该是不一样的，但是超过了最大数值，JS无法精准计算
9.2 值类型string 字符串
定义字符串 ：在JS中用 单引号/双引号/反引号 包起来的都是字符串。
string 字符串类型的特点：
字符串有长度length。
字符串有索引，但没有负索引，虽然能够使用负索引不报错，但是取不到值，默认为undefined。
数值类型的字符串没有方法。
//没有负索引
var str = "10ased";
console.log(str.length); //length 求长度
console.log(str[2]); //a [index] 求索引（下标） 0---X
console.log(str[5]); //d
console.log(str[-1]); //undefined 索引取不到值，默认 undefined
console.log(str[10]); //undefined
3. 相关函数
String( )：将其他类型转化为字符串。
console.log(String(100)); //"100"
console.log(String(null)); //"null"
console.log(String(undefined)); //"undefined"
console.log(String(true)); //"true"
console.log(String(false)); //"false"
console.log(String(Symbol())); //"Symbol()"
toString( )：将一个10进制的整数转换为对应进制的字符串。
//将10进制的整数20转换为16进制的14
console.log((20).toString(16)); //"14"
9.3 boolean 布尔类型
布尔值表示真或假 ，开或关，是或否。有 true 和 false 两个值。数字转为布尔值： 0转为false，NaN转为false；其他都是true。
字符串转为布尔值： 空字符串转为false， 其他都是true。
null 转为 flase。
undefined 转为 false 。
总结：除了0 “”没有任何内容的引号 null undefined NaN为false，其他都是true。
6. 相关函数
Boolean()：将其他类型转化为布尔类型。
console.log(Boolean(0)); //false
console.log(Boolean("")); //false
console.log(Boolean(null)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(" ")); //true
console.log(Boolean([])); //true
console.log(Boolean({})); //true
! 非（取反 ）： 间接转化为布尔类型。
console.log(!"11"); // false "11"--真 !"11"---假
console.log(!null); //true null--假 !null--真
console.log(!!null); //false null--假 !null--真 !!null--假
9.4 null 和 undefined
null表示没有，即该处不应该有值：
在我们不确定一个变量具体数据类型的时候，我们可以先赋值为null，后面可以再给具体的值。作为对象原型链的终点。获取 DOM 获取不到的时候。
undefined表示缺少值，即此处应该有值，但没有定义：
定义了变量没有给值，显示 undefined。定义了形参，没有传实参，显示 undefined。对象属性名不存在时，显示 undefined。函数没有写返回值，即没有写return，拿到的是 undefined。写了return，但没有赋值，拿到的是 undefined。
var str = "hello";
console.log(str[10]); //undefined
var arr = [10, 20, 30];
console.log(arr);
console.log(arr[100]); //undefined
var arr = null; //未来要存放引用类型的值，释放内存
9.5 Symbol类型
//es6 新增
var s1 = Symbol("a");
console.log(s1);
var s2 = Symbol("a");
console.log(s2);
console.log(s1 === s2); //false 唯一 可以用作对象的key,唯一的key
9.6 BigInt类型
BigInt类型：管理超过安全数值的数字。ES6中提供了一个新的数据类型。
console.log(BigInt(9007199254740992), BigInt(9007199254740993));
10 .引用数据类型详解
10.1 数组类型
1. 数组类型：可以放任何数据类型。
2. 特点：有长度length，有索引，有方法。
3. 数组的两种写法：
写法一：通过new的方式
var/let 变量名 = new Array(数据1，数据2，...);
写法二：通过[]字面量的方式，[]是数组字面量
var/let 变量名 = [数据1，数据2，...];
var arr1 = new Array(10, 20, 30);
console.log(arr1);
console.log(arr1[0]); //10
console.log(arr1.length); //3
//在数组的尾部添加一个值
arr1.push("hello");
console.log(arr1);
var arr2 = [100, 200, 300, 400];
console.log(arr2);
10.2 String引用数据类型
1. String字符串类型既是值类型也是引用数据类型。
语法：var/let 变量名 = new String("变量值");
var str2 = new String("apple");
console.log(str2);
2. 值类型的string与引用类型的String的区别：
值类型的string有长度length，有索引，但是没有方法，而引用类型的string是有方法的。
声明的方法不同。 值类型的string的声明语法为var/let 变量名 = 变量值；，而引用类型的string的声明语法是var/let 变量名 = new String("变量值");。
3. 为什么值类型的string会有长度length和索引？
是因为装箱。
4. 装箱与拆箱的概念：
装箱：把值类型---转换成---引用类型用---转换成---值类型拆箱：把引用类型---转换成---值类型---转换成---引用类型
10.3 Number引用数据类型
1.Number数字类型既是值类型也是引用数据类型。
语法：var/let 变量名 = new Number(变量值);
2. 值类型的number与引用类型的Number的区别：
声明的方法不同。
值类型的number没有方法，引用类型的Number有方法。
10.4 Object引用数据类型
10.4.1 创建Object对象
Object引用数据类型把多组键值对用大括号{}包起来 ,并且属性与属性之间用“英文逗号”进行分割。
声明语法：var/let 对象名 = {
属性名1：属性值，
属性名2：属性值
......}
使用属性的语法：对象名['key'] 或 对象名.key
var obj = {
name: "lili", //"name":"lili"
age: 18,
"for one": true,
};
console.log(obj);
console.log(obj["name"]); //"lili"
console.log(obj.age); //18
console.log(obj["for one"]); //true
console.log(obj.school); // undefined
注意！！！
1. 属性名（key）不是使用string字符串类型，而是其它基础类型，属性名要使用[ ]包裹起来，会自动把其它基础类型转为字符串。
2. 属性名（key）的类型只能是string字符串类型、Symbol()。
var obj = {
name : "lili",
age : 18,
[Symbol()] : 100,
[true]:true
}
3.虽然Symbol()可以使用[ ]包裹起来作为键，但是无法访问到数据。因为Symbol()是唯一的，下面的写法相当于声明了两个Symbol()，所以取不到值，默认是undefined的。如果使用常量把Symbol()装起来，就可以访问到同一个Symbol()。
<body>
<script>
var obj = {
name: "lili",
age: 18,
[Symbol()]: 100
};
console.log(obj[Symbol()]);//undefined
</script>
</body>
-------------------------------------------
<body>
<script>
const sym = Symbol('10');
var obj = {
name: "lili",
age: 18,
[sym]: 100
};
console.log(obj[sym]);//100
</script>
</body>
4. 对象的属性名不能是引用数据类型值 。
基于对象[属性名] 的方式操作，需要保证属性名是一个值（字符串/数字/布尔等都可以），如果不是值而是一个变量，它会把变量存储的值作为对象的属性名进行操作。
基于对象.属性名的方式操作，属性名就是点后面的。
let n = {
x: 100
};
let m = [100, 200];
let obj = {};
obj[n] = "高高";
obj[m] = "培训";
console.log(obj);
属性三种写法的区别：
var obj={
//属性名只能是首字母非数值驼峰命名法，无特殊字符，或者纯数字
a:1,
//属性名可以是任意字符串
"b":2,
//属性名可以是任意字符串，并且可以带入变量或者symbol，
//如果变量值不是字符串或者symbol，会自动隐式转换为字符串
["c"]:3
}
案例：虽然是三种不同的写法，但是却是同一个属性名，所以对象中只有一个属性。
var o={
1:10,
["1"]:20,
[[1]]:30
}
console.log(o);
Object属性的排序规则：
如果属性名转换为数值是正整数，则先按照正整数的属性名从小到大排序，剩余所有属性名按照添加的先后顺序排列。
案例：
<code> var o = { b: 2, 2: 3, 11: 3, a: 1, "-2": 3, c: 3, 1: 10, 1.2: 10 };
for (var key in o) {
console.log(key);
}
10.4.2 属性名和属性值
属性名：就是用来描述某种特征或者特点的名字，（又被称作键，key）。
属性值：就是这个特征的具体值（又被称作值，value）。
合称键值对。
基本操作：增、删、改、查。
10.4.3 获取属性值的方法
对象的属性名一般都是字符串格式，属性值可以是任意类型数据。
方法一：对象.属性名;
方法二：对象['属性名']; 或 对象[“属性名”]; :如果key的类型是字符串，使用该方法必须加“ ”，不然是获取不到值的。默认为undefined的。
方法三：如果key的类型是变量或常量，获取语法：对象[属性名];
<code><body>
<script>
const sym = Symbol('10');
var obj = {
name: "lili",
age: 18,
[sym]: 100
};
console.log(obj.age);//18
console.log(obj.name);//lili
console.log(obj['name']);//lili
console.log(obj[name]);//undefined
console.log(obj[sym]);//100
</script>
</body>
注意!!!!
1.如果对象里面没有这个属性名，得到的值就是“undefined”。
2.如果key的类型是特殊类型（for age）、数字类型（number）、Symbol()、变量必须使用[ ]进行访问，点（.）只能访问字符串类型的数据。
10.4.4 增、改
对象的属性名（键）是不允许重复的，之前没有这个属性则为新增，之前有这个属性，则是修改对应的属性值。一般新增一项的key都是string类型。
语法：
方法一：对象[“属性名”] = 属性值；
方法二：对象.属性名 = 属性值；
var obj={
"name":"lili",
"age":18
}
obj.name="dawei"; ====>修改code>
obj.sex="男"; =====> 增加code>
obj.true = 180; =====>这种增加会把true转为字符串"true"
console.log(obj)
10.4.5 删除
彻底删除语法： delete 对象名["属性名"]
普通删除语法： 只是让对象中的属性值为空， 对象名["属性名"] = null；
var obj={
"name":"lili",
"age":18
}
//彻底删除
delete obj["age"];
//普通删除
obj.name=null;
console.log(obj);
思考题：
var obj={
name:"lili",
age:18
}
var name="zhufengpeixun"; code>
console.log(obj.name);//lili
console.log(obj["name"]);//lili
//obj[name] === obj["zhufengpeixun"] ---对象中没有这个属性名 ----/undefiend
console.log(obj[name]);//undefiend
10.4.6 Object综合案例
案例1：找出对象中的属性重复了几次，在进行从小到大的顺序排序
var arr = [1, 2, 4, 2, 1, 4, 7, 9, 9, 1, 2, 4, 5, 7, 9, 11];
var o = {}
for (var i = 0; i < arr.length; i++) {
if (!o[arr[i]]) o[arr[i]] = 0;
o[arr[i]]++;
}
console.log(o);
//在进行从小到大的顺序排序
var arr1 = [];
for (var key in o) {
// arr1.push(...Array(o[key]).fill(Number(key)))
for (var j = 0; j < o[key]; j++) {
arr1.push(Number(key))
}
}
console.log(arr1);
案例2：面试题
<code> var o = { a: 1 };
var obj = {};
obj[o] = 1;
// "[object Object]"
console.log(obj[{ a: 2 }]);
案例3： 把{a:1,b:3,d:10}转换为["a","b","b","b","d","d","d","d","d","d","d","d","d","d"]。
<code> let obj = { a: 1, b: 3, d: 10 };
// ["a","b","b","b","d","d","d","d","d","d","d","d","d","d"]
let arr = Object.keys(obj).reduce((v, key) => {
v.push(...Array(obj[key]).fill(key));
return v;
}, [])
console.log(arr);
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。