JS基础[一]

1. js是什么

1. 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果（html、css是标记语言）。

2. 是弱数据类型语言（对数据类型的规范较为模糊，非强制的）变量被赋值为什么类型的数据，变量的数据类型就是什么。

2. js的组成

1. 由ECMAScript（规定js的基础语法）和webAPI（DOM文档对象模型、BOM浏览器对象模型）组成。

3. js书写位置

1. 使用<script>标签包裹，写在html文件里，尽量写在/body前面，防止出现html在js后加载时js找不到dom对象等错误。

2. 外部引入<script src="xxxx.js"></script>且该标签内的js代码无效。

3. 代码写在标签内。

4. js输入输出语法

1. 输入例如：prompt();

2. 输出例如：console.log();

// 输入语法
// prompt会跳过页面渲染先被执行
prompt("请输入姓名：");
// 输出语法
// 向body内输出内容
// 标签可被编译成html元素
document.write("<div>哈哈</div>");
// 其他输出举例
console.log("这是控制台打印输出");
// alert会跳过页面渲染先被执行
alert("这是弹窗输出");

5. 字面量

1. 在计算机科学中，字面量是在计算机中描述事/物(个人理解就是从字面上直接表达内容的常量/变量)。

const name = "张三";

6. 什么是变量？变量的赋值

1. 变量是计算机存储数据的容器（注意：不是数据本身，而是存数据的容器）。

2. 使用“=”赋值号对变量进行赋值，也叫变量的初始化，注意：==和===是比较运算符。

3. 值在赋值号右侧，被赋值的变量在左侧。

4. 声明变量关键字let const var。

5. let const同一变量不能重复声明。

6. 临时变量会自动销毁。

// 声明变量包括
// 1.声明变量关键字let const var
// 2.变量名
// 3.也可以直接赋值
let value;
let name = "test";
let age = 21 + 1;
// 一个变量关键字同时声明多个变量,用逗号","分隔
let firstName = "张三", lastName = 18;
// 使用变量
console.log(name + age + firstName + lastName); // 输出：test22张三18

7. 变量的本质

1. 内存：暂时存储程序以及数据的地方，用于暂时存放CPU的运算数据，以及与硬盘等外部存储器交换的数据。

2. 外存：一般指外存储器，可以长期存储数据，一般计算机断电后数据不会消失。

3. 内存溢出：分配的内存空间不足以放下过于大量的数据，程序会报错。

4. 变量本质：是程序在内存中申请一块用于存放数据的小空间。

8. 变量的命名规则与规范

1. 规则：

1. 不能使用关键字。

2. 数字不能开头。

3. 只能用下划线、字母、数字、$组成。

4. 严格区分大小写。

2. 规范：

1. 遵循小驼峰命名法。

2. 起名要有意义，便于代码阅读。

9. let和var和const的区别

1. var：

1. 可以先使用再声明。

2. var声明过的变量可以重复声明。

3. 可变量提升。

4. 是全局变量。

5. 没有块级作用域等。

2. let：

1. 必须先声明再使用。

2. let声明过的变量不可重复声明。

3. 不可以变量提升。

4. 有块级作用域。

3. const：

1. 不需要重新赋值的数据使用const声明。

2. 必须先声明再使用。

3. const声明的变量赋值后不可再重复赋值，值无法被修改。

4. const生命的变量不可重复声明。

5. 不可变量提升。

6. 有块级作用域。

变量提升：在声明变量之前，能使用该变量为可变量提升，只能在声明变量之后使用则为不可变量提升。

10. 数组

1. 数组是在一个变量中存储一组数据。

2. []是数组的字面量。

3. 数组是有序的，数组内的每个数据（元素）的序号叫下标或索引，可根据下标取出指定的数组内的数据（元素），数组下标从0开始计数。

4. 数组可以存储任意类型数据。

5. 通过数组的长度length获取数组内数据的个数，length从1开始计数，length为0则是数组内没有数据。

// 数组的声明
let array = [];
let names = ["张三","李四"];
// 使用数组下标获取数组的指定值
console.log(names[0]); // 输出：张三
// length获取数据长度
console.log(names.length); // 输出：2

11. 常量

1. 一旦被声明，不会变化的称为常量。

2. 一般使用const声明的变量成为常量。

3. 常量不允许重新赋值，初始化时必须赋值。

const name = "张三";
name = name + "和李四"; // 报错Identifier 'name' has already been declared

12. 数据类型

1. 数据分类可以更加充分且高效的利用内存。

2. 增加数据类型规范更加有利于程序的开发和使用数据。

3. 不同的数据类型占用的内存的空间也是不同的。

13. 基本数据类型

1. number数字型

1. 整数、小数、正数、负数统称为数字型。

2. 可使用算术运算符进行计算。

2. string字符串型

1. 使用'单引号' "双引号" `反引号`包裹数据，必须成对出现。

2. '' 是空字符串。

3. "" '' 可以相互嵌套，但不可同符号嵌套。

4. 必要时，使用\转义符，输出"" ''。

// 嵌套错误，且无法输出引号
console.log('他说'哈哈''); // 错误写法 控制台报错
// 使用转义符输出引号，\后面的符号不会被编译，而是直接被当做字符串
console.log('他说\'哈哈\''); // 正确写法 他说'哈哈'
// 正确嵌套
console.log("他说'哈哈'"); // 正确写法 他说'哈哈'

3. boolean布尔型

1. 只有两个值：true、false（是布尔型字面量）。

2. 用于判断真、假。

// 声明一个布尔型变量
const value = true;
// 布尔型用于判断真、假
console.log(1 > 2); // 输出：false

4. undefined未定义型

1. 只有一个undefined值。

2. 只声明变量，但并未赋值时，则为undefined。

3. undefinedj数据类型为undefined。

let age;
console.log(age); // 输出：undefined

5. null空类型

1. 只有一个null值。

2. 表示赋值为空。

3. null作为尚未创建的对象。

4. null数据类型为对象。

let obj = null;
console.log(obj); // 输出：null
console.log(typeof obj); // 输出：object

14. undefined和null区别

1. undefined为未定义型，声明变量未赋值。

2. null为空型，声明变量赋值为null空。

console.log(undefined + 1); // 输出： NaN
console.log(null + 1); // 输出： 1

15. 引用数据类型

1. object对象

16. 数据类型的存储方式

1. 首先区分值类型和引用类型，简单的数据类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

1. 值类型：简单数据类型/基本数据类型，在存储变量中存储的是值本身，因此叫做值类型。如：string、number、boolean、null、undefined。

2. 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址，引用存储的地址找到对应的数据，所以叫引用类型。如：使用new关键字创建的对象Object、Array、Date等等。

2. 再来了解下堆和栈。简单数据类型存放在栈里面，复杂数据类型存放在堆里面。

1. 栈空间分配（操作系统）：由操作系统自动分配释放，存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。

2. 堆空间分配（操作系统）：一般由程序员分配释放，若程序员不释放，程序结束时可能由OS（操作系统）回收，分配方式倒是类似于链表。

3. 值类型数据存放在栈中，根据变量名在栈中找对应的数据。

4. 引用类型数据的真正对象实例（也就是数据）存放在堆中，不是根据其名字直接去堆中找数据，而是在栈中存储一个地址指向堆中对应的数据，然后使用其名字找栈中存放的对应的地址，再用地址去堆里面找对应的数据。

3. 值类型数据改变时，数据不会互相影像，而引用数据类型改变时，涉及地址指向问题，可能会互相影响。

堆和栈的空间分配摘自百度百科，来源地址：https://baike.baidu.com/item/%E5%A0%86%E6%A0%88/1682032?fr=aladdin

17. 数据类型检测

1. 使用 typeof 关键字检测数据类型，有两种写法：

1. 作为运算符：typeof xxx

2. 函数形式：typeof(xxx)

let num = 12;
let str = "字符串";
console.log(typeof num); // 输出：number
console.log(typeof str); // 输出：string
console.log(typeof(num)); // 输出：number
console.log(typeof(str)); // 输出：string

console.log(typeof null); // 输出：object
console.log(typeof undefined); // 输出：undefined
console.log(typeof true); // 输出：boolean

18. 数据类型的转换

1. 目的：将数据转换为需要使用的类型，例如：字符串类型的数字，要转换为数字类型才可以进行计算。

2. 隐式转换：运算符执行时，系统内部自动将数据类型进行转换。

1. +两边有一个是字符串，则会把另一个也转换成字符串。

2. +以外的运算符，如- / * 会把数据转换成数字类型，‘’和null会被当成0。

3. +作为正号时，会自动把后面的数据转换成数字类型。

4. 注意：隐式转换没有明确的规范，不够严谨，所以有时可能会导致程序出错。

// + 一边为字符串，另一边也会转换成字符串类型，字符串相加
console.log(1 + '2'); // 输出：12
console.log(1 + '哈哈'); // 输出：1哈哈
// - * / 自动转换成数字类型
console.log(1 - '2'); // 输出：-1
console.log(1 * '2'); // 输出：2
console.log('2' / 2); // 输出：1
console.log('张三' / 2); // 输出：NaN 非数字相除返回错误类型NaN
// + 作为正号，自动将后面的数据转换为数字类型
console.log(+ '2' + 1); // 输出：3
console.log(+'张三'); // 输出：NaN

5. null和 '' 空字符串经过数字转换会被当成0。

6. undefined经过数字转换会变为NaN；

console.log(null + 1); // 输出：1
console.log('' + 1); // 输出：1
console.log(undefined + 1); // 输出：NaN

3. 显式转换：将数据强制转换类型。

1. Number()转换为数字类型，非数字返回NaN。

2. parseInt()只保留整数的数字类型，非数字返回NaN。

3. parseFloat()可以保留小数的数字类型，非数字返回NaN。

4. String()可以将所有数据类型转换为字符串型。

5. Boolean()转换为布尔类型,undefined、null、NaN、0、''空字符串转换后为false，其它均转换后为true。

6. xxx.toString()转换为字符串,null和undefined不支持调用，会报错。

// number
console.log(Number('张三')); // 输出：NaN
console.log(Number('123')); // 输出：123
console.log(parseInt('100vw')); // 输出：100
console.log(parseInt('vw100vw')); // 输出：NaN
console.log(parseInt('100.99vw')); // 输出：100
console.log(parseFloat('100vw')); // 输出：100
console.log(parseFloat('vw100.99vw')); // 输出：NaN
console.log(parseFloat('100.99vw')); // 输出：100.99
// string
console.log(String('100vw')); // 输出：100vw
console.log(String(null)); // 输出：null
console.log(String(undefined)); // 输出：undefined
console.log(String({})); // 输出：[object Object]
console.log(String([])); // 输出：''空字符串
let a = 123;
console.log(a.toString()); // 输出：123字符串
let b = null;
console.log(b.toString()); // 报错
let c = NaN;
console.log(c.toString()); // 输出：NaN字符串
// boolean
console.log(Boolean([])); // 输出：true
console.log(Boolean({})); // 输出：true
console.log(Boolean("哈哈")); // 输出：true
console.log(Boolean(1)); // 输出：true
console.log(Boolean(0)); // 输出：false
console.log(Boolean('')); // 输出：false
console.log(Boolean(undefined)); // 输出：false
console.log(Boolean(null)); // 输出：false
console.log(Boolean(NaN)); // 输出：false

19. NaN （not a number）

1. 代表一个计算错误，是一个不正确的或者一个未定义的数学操作所得的结果。

2. NaN是粘性的，任何对NaN的操作都会返回NaN。

3. NaN === NaN 返回false，也就是说，NaN不等于任何值，也不等于NaN本身。

4. NaNa是数字类型。

console.log(NaN === NaN); // 输出：false
console.log(NaN + 1); // 输出：NaN
console.log('哈哈' + 1); // 输出：NaN

20. 字符串拼接

1. 使用+拼接字符串，注意，如果是两个数字类型相加，则进行算数运算，若其中一个是字符串，则会直接进行拼接。

console.log(1 + 1); // 输出：2
console.log('哈哈' + 1); // 输出：哈哈1
console.log('哈哈' + '1'); // 输出：哈哈1
console.log('哈哈' + 1 + 1); // 输出：哈哈11

21. 模板字符串

1. 用来拼接字符串和变量。

2. 成对的反引号``包裹整段被拼接的内容，${变量名}来拼接变量

let name = '王钢蛋';
console.log(`${name}今天嗓子里站了一百个人抽烟`);// 输出：王钢蛋今天嗓子里站了一百个人抽烟

22. 算数运算符

1. + 加

2. - 减

3. * 乘

4. / 除

5. % 取模（取余数）

6. 算术运算符优先级：* / % 优先计算，+ - 后计算，（）可以提升优先级，优先级相同时，从左向右计算。

23. console.log打印带css样式的内容

1. %c表示css样式。

2. 空格分隔被修改内容。

3. 逗号后面接css样式。

4. css样式用逗号分隔。

// 输出：蓝色哈哈 红色嘿嘿
console.log('%c哈哈 %c嘿嘿', 'color: blue;', 'color: red;'); 

仅作为个人学习用，如有错误，还请指正。