前端学习笔记JavaScript - 基础知识

常量

常量表示一些固定不变的数据

现实生活中人的性别其实就可以看做是常量, 生下来是男孩一辈子都是男孩, 生下来是女孩一辈子都是女孩

• JavaScript中常量的分类

整型常量

整型常量其实就是正数, 在JavaScript中随便写一个整数都是整型常量

1 / 666 / 99

实型常量

实型常量其实就是小数, 在JavaScript中随便写一个小数都是实型常量

3.14 / 4.32

字符串常量

字符串常量其实就是用单引号或者双引号括起来的内容, 我们就称之为字符串常量

'a' 'abc'

注意点: 无论用单引号或者双引号括起来了多少个字符, 在JavaScript中都是字符串常量

布尔常量

布尔常量其实就是真或者假, 在JavaScript中通过true和false来表达

在JavaScript中布尔常量只有两个取值, 真(true)或者假(false)

自定义常量

在ES6中新增的

const 常量名称 = 常量取值;

变量

变量表示一些可以被修改的数据

在现实生活中超市的储物格就是变量, 在不同的时间段里面, 储物格中存储的数据也不一样

• 定义变量

在JavaScript中可以通过定义变量的方式来生成储物格, 也就是告诉浏览器, 我们需要一块内存空间

var 变量名称;

var a;

• 使用变量

使用变量就是往申请的那块内存空间中存储数据, 和获取存储的数据

存储数据

变量名称 = 需要存储的数据;

var a = 1; // 等号右边需要存储的数据放到等号左边变量申请的那块存储空间中

获取数据

通过变量名称获取

// 定义一个变量
var num;
// 往变量中存储数据
num = 123;
// 从变量中获取存储的数据
console.log(num);

• 修改变量中存储的数据

在JavaScript中想要修改变量中存储的数据, 只需要再次给变量直接赋值即可

num = 666;
console.log(num);

在JavaScript中第一次给变量赋值, 我们称之为"变量的初始化"

var num;
num = 321; // "变量的初始化"
num = 888; // 不是"变量的初始化"

在JavaScript中如果定义了一个变量,但是没有进行初始化, 那么变量中存储的是undefined

var num;
console.log(num);

初始化有很多种形式

var num;
num = 321; // 先定义再初始化

var value = 666; // 定义的同时初始化

var num, value; // 同时定义两个变量

var num;
var value;
num = value = 123; // 同时对num和value进行初始化, num和value中存储的数据都是123

var num = 123, value = 666;

• 注意点

在JavaScript中变量之间是可以相互赋值的

在JavaScript中如果定义了同名的变量, 那么后定义的变量会覆盖先定义的变量

在老版本的标准的(ES6之前)JavaScript中可以先使用变量, 再定义变量, 并不会报错

由于JavaScript是一门解释型的语言, 会边解析边执行, 浏览器在解析JavaScript代码之前还会进行一个操作"预解析(预处理)"

预解析(预处理)步骤:

将当前JavaScript代码中所有变量的定义和函数的定义放到所有代码的最前面

为了解决老板标准的的两个注意点
2.在JavaScript中如果定义了同名的变量, 那么后定义的变量会覆盖先定义的变量
3.在老版本的标准的(ES6之前)JavaScript中可以先使用变量, 再定义变量, 并不会报错
在ES6中就推出了一种新的定义变量的方式
        ES6之前: var 变量名称;
        ES6开始: let 变量名称;

关键字

被JavaScript语言赋予了特殊含义的单词

关键字在开发工具中会显示特殊颜色

关键字不能用作变量名、函数名等

关键字严格区分大小写, var和Var前者是关键字, 后者不是

只需要记住一点: 在JavaScript中所有的关键字都是小写的

标识符

只能由26个英文字母的大小写、10个阿拉伯数字0~9、下划线_、美元符号$组成

不能以数字开头

严格区分大小写，比如test和Test是2个不同的标识符

不可以使用关键字、保留字作为标识符

数据类型

• 基本数据类型

Number 数值类型

在JavaScript中无论是整数还是小数都是属于数值类型的

String 字符串类型

在JavaScript中无论是通过单引号还是通过双引号括起来的内容都是属于字符串类型的

Boolean 布尔类型

在JavaScript中布尔类型比较特殊, 只有两个取值true/false

Undefined 未定义类型

在JavaScript中未定义类型比较特殊, 只有一个取值undefined

Null 空类型

• 引用数据类型

Object 对象类型

• 检测

在JavaScript中为了方便我们检测某一种数据是属于哪一种数据类型的, JavaScript提供了一个名称叫做typeof的操作符

typeof 需要检测的数据;
let res = typeof 3.14;
console.log(res);

// let res = typeof true;
let res = typeof false;
console.log(res);

类型转换

字符串类型转换

• Number类型转换为字符串类型
• Boolean类型转换为字符串类型
• undefined类型转换为字符串类型
• null类型转换为字符串类型

在JavaScript中如果想将以上的四种基本数据类型转换为字符串类型, 常用的方法有三种

• 对于Number类型和Boolean类型来说, 可以通过 变量名称.toString()的方式来转换
• 可以通过String(常量or变量);转换为字符串
• 还可以通过 变量or常量 + "" / 变量or常量 + ''转换为字符串

let value = true;
console.log(value);
console.log(typeof value);
let str = value.toString();
console.log(str);
console.log(typeof str);
// 变量名称.toString是对拷贝的数据进行转换, 所以不会影响到原有的数据

let value = 123;
console.log(value);
console.log(typeof value);
let str = String(value);
console.log(str);
console.log(typeof str);
//  String(常量or变量), 因为是根据传入的值重新生成一个新的值, 并不是修改原有的值

let value = 123;
// let str = value + '';
let str = value + "";
console.log(str);
console.log(typeof str);

// let str = 123 + ''; // +''或者+""底层的本质其实就是调用String()函数

数值类型转换

转换说明

• String类型转换为数值类型

• 如果字符串中都是数值, 那么就正常转换
• 如果字符串是一个空串""/" ", 那么转换之后是0
• 如果字符串中不仅仅是数字, 那么转换之后是NaN

• Boolean类型转换为数值类型

true转换之后是1

alse转换之后是0

• undefined类型转换为数值类型

转换之后是NaN

• null类型转换为数值类型

转换之后是0

空字符串/false/null转换之后都是0
字符串中不仅仅是数字/undefined转换之后是NaN
其它的正常转换

转换方法

• 通过Number(常量or变量);方式来转换

let str = "123";
console.log(str);
console.log(typeof str);
let num = Number(str);
console.log(num);
console.log(typeof num);

• 通过数学运算中的+号和-号来转换

let str = "123";
// let num = +str;
// let num = -str;
// let num = +"456";
// let num = +"";
// let num = +"    ";
let num = +"12px";
console.log(num);
console.log(typeof num);

// 虽然通过+/-都可以将其它类型转换为数值类型, 但是-会改变数值的正负性
// +/-底层本质上就是调用了Number函数

• 通过parseInt(需要转换的字符串) /parseFloat(需要转换的字符串)

let str = "12px";
// let num = Number(str);
let num = +str;
console.log(num); // NaN
console.log(typeof num);
*/
/*
// let str = "12px";
let str = "3.14px";
// let num = parseInt(str);
let num = parseFloat(str);
console.log(num);
console.log(typeof num);
*/
/*
// 注意点: parseInt/parseFloat都会从左至右的提取数值, 一旦遇到非数值就会立即停止
//         停止的时候如何还没有提取到数值, 那么就返回NaN
let str = "a3.14px";
let num = parseFloat(str);
console.log(num);
console.log(typeof num);
*/

// 注意点: parseInt/parseFloat都会将传入的数据当做字符串来处理
let value = true;
// let num = Number(value);
// let num = +value;
let num = parseInt(value); // parseInt("true");
console.log(num);
console.log(typeof num);

布尔类型转换

转换说明

• String类型转换为布尔类型

只要字符串中有内容都会转换为true, 只有字符串中没有内容才会转换为false

• Number类型转换为布尔类型

只有数值是0才会转换为false, 其它的都会转换为true

如果是NaN也会转换为false

• undefined类型转换为布尔类型

undefined会转换为false

• null类型转换为布尔类型

null会转换为false

    空字符串/0/NaN/undefined/null 会转换成false, 其它的都是true

转换方法

• 在JavaScript中如果想将基本数据类型转换为布尔类型, 那么只需要调用Boolean(常量or变量)

// let str = "abc"; // true
    // let str = "     "; // true
    let str = ""; // false
    let flag = Boolean(str);
    console.log(flag);
    console.log(typeof flag);
    */
    /*
    // let num = 999; // true
    // let num = -123; // true
    // let num = -0; // false
    let num = 0; // false
    let flag = Boolean(num);
    console.log(flag);
    console.log(typeof flag);
    */
    /*
    // 注意点: 在JavaScript中NaN属于Number类型
    let num = NaN;
    // console.log(typeof num);
    let flag = Boolean(num);
    console.log(flag);
    console.log(typeof flag);
    */

    // let value = undefined; // false
    let value = null; // false
    let flag = Boolean(value);
    console.log(flag);
    console.log(typeof flag);