JavaScript的个人分享

JavaScript的基础语法:

JavaScript的语法是区分大小写的

• 注意: 在JavaScript中是区分大小写的

  • 变量名称不能是中文

代码示例:

var v1 = '一花一世界';
console.log(v1);
var Va1 = 'Yihuayishijie';
console.log(Va1);
var VA1 = 'YIHUAYISHIJIE';
console.log(VA1);

控制台调用效果图:

JavaScript语法中的空格与换行

• 注意: 并不是JavaScript的语法内容 - 可有可无的 (建议使用)

  • 因为这样会使代码看的更清晰利于阅读代码

示例代码:

var v1 = '一花一世界';
console.log(v1);

---

JavaScript中的分号

• 可选项 - JavaScript语法并不强制要求必须写分号 ( ; )

  • 但是在多个语句编写在同一行时,必须要写分号 ( ; )
  • 作用是 - 表示一句话的结束
  • 注意: 如果最后不写分号控制台也不会报错但是编辑器会提示
• 建议: 不忽略结束符 ( ; )

示例代码:

//带分号的
var v1 = '一花一世界';
console.log(v1);

//不带分号的
var v1 = '一花一世界'
console.log(v1)

区别图:

JavaScript中的关键字和保留字

• 关键字就是JavaScript中有特殊作用的
• 注意关键字不能用于变量名(自己起的名)
• 保留字就是以后可能变成关键字同样也不能用

---

常量与变量:

JavaScript中的变量

变量的概念:

• 变量就是存储信息的容器 - (就是放东西的)放数据的
• 变量又叫临时存储
• 变量具体说就是有名字的容器 - 称为变量名
• 变量名称的作用 - 就是通过名来找到值的数据信息
• 调用时会找最近的变量名 - 就近原则

变量的问题与需要注意的事情:

1. 注意: 每个变量只能存储一个值
2. 问题:局限性太大

---

变量的定义

• 变量的定义语法结构:

  • 语法结构 - var 变量名称 = 变量的值;

• 注意: JavaScript的变量是弱类型(也叫松散类型)

  • 定义变量时,但不初始化值时 - 控制台并不清除该变量值的类型
  • 只有在变量初始化值时 - 控制台才知道该变量的类型

• 注意:

  1. 变量允许, 只变量不赋值
  2. 变量允许, 先变量在赋值

代码示例:

/* 1.定义变量,并初始化值 */
var v1 = '一花一世界';// 定义变量 - 变量的定义,并且初始化值
console.log(v1);// 调用变量

/* 2.定义变量,但没有初始化值 */
var v2;// 指定义,没有初始化值
console.log(v2);// 调用结果为 undefined - 表示未定义

v2 = '一叶一孤城';
console.log(v2);

/* 3.多个变量同时定义 - 变量定义之间使用逗号分隔 */
var v3 = 100,v4 = 200;// 两个变量声明
console.log(v3);// 调用结果 - 100
console.log(v4);// 调用结果 - 200

控制台调用效果图:

变量的重复定义

• JavaScript中重复定义变量 - 语法允许
• 重复定义时 - 先将之前的变量在内存的空间进行销毁,然后在创建 - 不建议使用

代码示例:

var v1 = '一花一世界';
console.log(v1);// 调用结果为 一花一世界

var v1 = 100;
console.log(v1);// 调用结果为 100

---

变量的重复赋值

• JavaScript中变量是允许重复赋值的 - 建议使用

代码示例:

var v1 = '一花一世界';
console.log(v1);// 调用结果为 一花一世界

v1 = '一叶一孤城';// 赋值
console.log(v1);// 调用结果为 一叶一孤城

---

遗漏的定义

• 遗漏的定义 - 就是变量没有定义,而直接调用
• 如果没有定义直接进行调用 - 在内存中没有存储的位置所以会报错 -> 不允许使用
• 而定义但不初始化值进行调用 - 在内存中有位置所以可以调用 -> 允许使用

• 注意:

  • JavaScript中允许只定义不赋值,但是不允许没定义而直接调用

代码示例:

console.log(v1);
/*
    只定义变量，但不初始化值
    * 结果 - (不报错)输出结果为 undefined
 */
var v1;
console.log(v1);/* undefined */

JavaScript的常量

• 常量就是一个只读的变量(定以后就不能改)

• 注意:

  1. 不能重复赋值
  2. 不能重复定义
  3. 常量定以后也不能用变量重新定义
• 定义常量的语法:
  const 常量名称 = 值;

代码示例:

/*
    ECMA5之前的版本 - (了解就好)
        * 语法并没有提供常量的定义 - 只能定义变量
        * 认为规定定义的是常量,但是使用的语法依旧是变量的语法
 */
var C = 100;//语法上依旧是变量, 人为规定是常量
C = 200;// 语法上是变量

/*
    ECMA5以后的版本
      * 提供了定义常量的语法定义 - 一旦定义,值就不能被改变
        * 语法 - const 常量名 = 值;
        * 注意: 重复赋值 - 会报错 - TypeError: Assignment to constant variable.
        * 重复定义也会报错 - SyntaxError: Identifier 'C1' has already been declared
 */
const C1 = 100;


/*
    注意 - 常量不允许重新赋值 - 否则会报错
*/
C1 = 200;


/*
    重复定义常量 - 同样也不允许
*/
const C1 = 200;


/*
    重复定位为变量 - 也同样不允许
 */
var C1 = 200;


/*
    总的来说就是利用常量定义过之后就不允许使用了
      * 不管是变量,还是常量的重新定义或重新赋值

    通常定义变量与常量的名称的写法:
      * 定义变量名称 - 全小写或者大小写混合
      * 定义常量名称 - 全大写
 */

---

定义变量或常量时

• JavaScript是脚本语言 - 语法规则相对灵活(不建议)
• 定义变量或常量时，允许不写修饰符(var或const)
• 没有var或const关键字时，定义的默认为变量

代码示例:

s = 300;
console.log(s);
s = 400;
console.log(s);

---

常量定义的问题

• 常量的定义 - 必须定义时同时初始化值
• 如果只定义而不初始化值 - 则会报错
• 报错结果为 - SyntaxError: Missing initializer in const declaration

代码示例:

const C;
console.log(C);

控制台调用示例图:

---

常量与变量的区别

• 变量:

  1. 定义变量使用var关键字
  2. 定义变量使用小写
  3. 变量允许重复定义或赋值
  4. 变量允许只定义但不初始化值
  5. 变量的值允许改变

• 常量

  1. 定义常量使用const关键字
  2. 定义常量使用大写
  3. 常量不允许重复定义或重复赋值
  4. 常量必须定义并初始化值
  5. 常量的值不能改变

---

数据类型:

• 数据类型就是对数据进行分类,

• 数据类型官方分为两大类:

  1. 原始类型 - 又称原始值
  2. 引用类型 - 又称内置对象

number类型:

• number类型:整数(Intger)和浮点数(就是小数|float或double) - 在JavaScript中不区分整数与浮点数

代码示例:

var num =100;/* 步骤: 1.变量名的定义并初始化; 2.字面量或直接量定义数字值 */

浮点类型:

1. 如果写的是".1"表示"0.1"的含义 -> 不推荐
2. 如果写的是".0"表示为整数 -> 不建议
3. 如果写的是"10."表示为整数 -> 不建议

示例代码:

var num1 = 0.1;
console.log(num1);
/* 浮点类型 - '.1'表示'0.1'的含义 -> 不推荐 */
var num2 = .1;
console.log(num2);

var num3 = 10.1;
console.log(num3);
/* 浮点类型 - '.0'表示为整数 */
var num4 = 10.0;
console.log(num4);
/* 浮点类型 - '.'表示为整数 */
var num5 = 10.;
console.log(num5);

控制台调用图:

---

• 注意: number类型中的小数可能出现误差问题: - 并不是所有的小数计算都会出现误差

  • 小数计算时一定要注意是否出误差
  • 解决方法:通过数字值的换算来解决(把小数换成整数然后在换回来)

示例代码:

/*
    number类型中的小数,在计算时可能出现误差
    * 并不是所有小数计算都会出现误差
    * 小数的计算时,要注意结果是否出现误差
      * 如果出现误差 - 利用数字换算的方法计算,然后得到结果在换算回来
       *比如: 0.3 - 0.2 给换算成整数 就是3 - 2  
*/

var x = 0.3;
var y = 0.2;
console.log(x - y);

控制台调用示例图:

---

• number类型中存在一个特殊的值 - NaN

  • 含义 - 表示当前的值不是以个数字值
  • 类型 - 属于number类型
  • 特点 - NaN与任何值都不相等(包括与自身都不相等)

示例代码:

var num = Number('一花一世界');/* 将一个普通文本内容转换成number类型 */
console.log(num);// 调用结果为 NaN - 表示当前这个值不是一个数字值

console.log(10 == 10);// 调用结果为 true
console.log(NaN == NaN);// 调用结果为 false

控制台调用示例图:

---

string类型:

• string类型 - 又叫字符串 -> 建议使用单引号
• 注意:字符串中如果写的是数字依旧是字符串类型

• string类型 - JavaScript的字符串就是由单引号或双引号包裹的

  • 可以是 汉字, 数字 英文字母 等等
  • 注意: 在JavaScript中单引号和双引号没有区别 - 建议使用单引号

示例代码:

var str1 = '一花一世界';
var str2 = "一花一世界";

• string类型 - 文本本身需要单引号或双引号时有两种方法:

  1. 如果是需要双引号 - 那么字符串只能使用单引号
  2. 如果是需要单引号 - 那么字符串只能使用双引号

示例代码:

var str3 = '一花"一"世界';
console.log(str3);

var str4 = "一花'一'世界";
console.log(str4);

控制台调用示例图:

---

boolean类型

• boolean类型 - 只有两个值(都是小写
• 注意:boolean类型的值只能是小写

1. true: 表示是
2. false: 表示不是

示例代码:

var boo1 = true;
console.log(boo1);

/* 大写或大小写混合时 -> JavaScript识别为另一个变量名称(会报错)
    因为控制台在判只能判断小写的true或false所以控制台报错
      * 所以控制台报错的原因是 - True is not defined - 表示该变量值未定义
      * 其实是没有识别大小写混合的true
*/
var boo2 = True;
console.log(boo2);

---

typeof运算符

• typeof运算符是判断以下变量值的类型 - (只判断原始类型)

  • 语法结构 - typeof 变量名称
  • 结果 - 原始类型的名称 (string类型)

示例代码:

var num = 100;
var boo = true;
var str = '一花一世界';

console.log(typeof num);// 调用结果为 number
console.log(typeof boo);// 调用结果为 boolean
console.log(typeof str);// 调用结果为 string

/*
    因为测试之后都打印在控制台中了 - 能打印在控制台中的信息本身就是字符串
     * 然后把typeof的结果赋值给另一个变量了
     * 所以这个变量最后得到的结果还是字符串类型
 */
var v1 = typeof num;
console.log(v1);// 调用结果为 number
console.log(typeof v1);// 调用结果为 string

---

包装类型 - (官方文档中属于引用类型)

• 通过包装类型创建一个数字值类型的变量

  • 语法 - var 变量名称 = new Number(数字值)

    • new Number() - 表示创建了一个Number类型的对象

• 以下两种方式创建的数字值, 在使用上没有任何区别

  • 建议使用字面量方式 - 原因简洁

示例代码:

/* 构造函数方式 */
var num1 = new Number(100);
console.log(num1);// 调用结果为 [Number: 100]

/* 字面量/直接量方式 */
var num2 = 100;
console.log(num2);// 调用结果为 100

• 两个方式的唯一区别就是

  • 构造函数方式 用typeof运算符运算结果是对象类型
  • 字面量方式 用typeof运算符运算结果是number类型

示例代码:

console.log(typeof num2);// 调用结果为 number
console.log(typeof num1);// 调用结果为 object(对象)

• 备注: 包装类型中的String 类型和 Boolean 类型和 Number 相似

---

包装类型的运算符 - instanceof运算符

• 注意:typeof运算符只能判断原始类型不能判断包装类型

示例代码:

var str = new String('一花一世界');
var num = new Number(100);
var boo = new Boolean(true);

// typeof运算符只能判断原始类型
console.log(typeof str);// 调用结果为 object
console.log(typeof num);// 调用结果为 object
console.log(typeof boo);// 调用结果为 object

• typeof运算符与instanceof运算符的区别

  • typeof运算符

    1. 用于判断原始类型
    2. 语法结构不同 -> typeof 变量名称
    3. 得到结果不同 -> 原始类型的名称

  • instanceof运算符

    1. 用于判断引用类型(包装类型)
    2. 语法结构不同 -> 变量名称 instanceof 引用类型名称
    3. 得到结果不同 -> 布尔类型的值(true或false)

---

特殊类型 - (官方分类属于原始类型)

• undefined - 在JavaScript表示为空的含义

  • 如果一个变量的值等于undefined -> 变量是存在的，但没有值
  • undefined类型中只存在一个值(undefined)

• 得到undefined值的情况如下：

  1. 定义变量时，只声明，而不初始化值 -> undefined
  2. 定义变量时，初始化值为 undefined -> undefined
• 注意 - 得到undefined值的情况不止以上两种

示例代码:

var v;
console.log(v);// 调用结果为 undefined

var c = undefined;
console.log(c);// 调用结果为 undefined

console.log(typeof v);// 调用结果为 undefined - 类型名称

• null

  • 作用 - 用于将指定变量从内存中进行释放
  • 实现方法: 就是将一个指定变量的值赋值为null就行
  • null类型中只存在一个值(null)
  • 注意:typeof给null的类型是错的,但是不会报错
    null类型名称就叫null

示例代码:

var v = null;

/* 以下结果是错误的 */
console.log(typeof v);// 调用结果为 object

 console.log(v instanceof Null);// 调用结果为 报错
console.log(v instanceof Object);// 调用结果为 false

undefined与null的区别:

• 不同点:

  • 变量名为undefined值时 - 内存中依旧占优空间
  • 而变量名为null值时 - 内存中内有空间

• 相同点:

  1. 都是原始类型
  2. 都保存在栈中 - 就是在内存中存储在一个位置上,这个位置叫栈