Fork me on GitHub

JavaScript语法篇

什么是标识符?

  • 变量 丶函数 丶属性的名字丶或者是函数的参数

标识符的命名规则:

  • 由字母 丶数字丶下划线(_)或美元符号($)组成
  • 不能用数字开头
  • 不能用关键字丶保留字

JavaScript 变量是 ”松散类型“

  • 松散类型:可以用来保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符而已。
  • 变量的声明 要使用var 操作符
  • 语法:var 变量名称
  • 变量的赋值:

    • 声明的同时赋值: var 变量名称 = 值
    • 声明后赋值: 变量名称 = 值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script> 
    // 声明保存用户名的变量
    var name_01;
    name_01 = 'hufeifei';
    // 声明的同时赋值
    var age = 18;
    // 一次声明多个变量
    var id,sex,age,name = 'hufeifei';
    var name = 'hufeifei',age = 18, sex = '1993';
    </script>
  • 省略var声明的变量是全局变量

  • 不推荐省略var操作符来定义全局变量
  • 注意事项:JavaScript中的一切都是区分大小写的。

JavaScript的数据类型

  • 基本数据类型
    • undefined 未定义
    • null 空
    • Boolean 布尔
    • Number 数字
    • String 字符串
  • 复杂数据类型
    • Object 对象

typeof 操作符

功能 检测变量类型
语法 typeof 变量 或者 typeof(变量)
返回值 String类型:有可能是:undefined丶 null丶Boolean丶Number丶String丶function
1
2
3
4
5
6
var name = 'hufeifei',age = 18, sex = '1993',k,s = null;
// 检测变量类型---返回值是由变量的值决定的
console.log(typeof name ); // 返回 String
console.log(typeof age ); // 返回 Number
console.log(typeof k ); // 返回 undefined
console.log(typeof s ); // 返回 null

null 空对象指针

  1. null值表示一个空对象的指针
  2. 如果定义的变量准备在将来用于保存对象,那么最好将改变量初始化为null而不是其他值
  3. undefined值 是派生自null值的,所以undefined == null 返回结果是 true

Number 整数和浮点数

  • NaN : 特殊的数值,即非数值

    • 任何涉及NaN 的操作,都会返回NaN

    • NaN 与任何值都不相等,包括NaN 本身

    • isNaN( n ): 检测n是否是 “非数值”
      • 返回值: 布尔值 true / false
      • 参数:参数可以是任意类型
      • 如果检测的值: 不是数字,返回 true是数字,返回 false
      • isNaN()对接收的数值,先尝试转换为数值,再检测是否为非数值

数值转换

  • Number() 强制转换为 数值类型 (不推荐强制转换

    • Number() 可以用于任何数据类型,强制转换字符串类型会返回 NaN

      1
      2
      3
      4
      5
      var name = 'hufeifei';
      var age = '93';
      // 转换
      console.log(Number(name)); // 返回 NaN
      console.log(Number(age)); // 返回 93
  • parseInt( ) 字符串转换为数值

    • 会忽略字符串前面的空格,直至找到第一个非空格字符
    • 转换空字符串返回NaN
    • 这个函数提供第二个参数,转换时使用的基数(即多少进制
    1
    2
    3
    4
    var age = '93px';
    // 转换
    console.log(parseInt(age)); // 返回 93
    console.log(parseInt("0xf")); // 返回 15 ,这里是把0xf转换为16进制 是多少
  • parseFloat( ) 字符串转换为数值

    • 转换返回值 : 整数 / 浮点数(即第一个小数点有效,忽略前导的零)
    1
    2
    3
    var age = '021.952';
    // 转换
    console.log(parseFloat(age)); // 返回 21.952
  • toString()String()

    • 语法:str.toString()

    • 功能:将str转换为字符串

    • 返回值:str 的一个副本

    • 参数: str 要转换的内容,可以是数值,布尔值,对象和字符串

    • 说明:在不知道转换值是不是null或者undefined的情况下,可以使用String()函数,它能将任何类型的值转换为字符串。(跟parseInt( ) 一样 ,都是强制转换)

    1
    2
    3
    4
    5
    var ids = 123456;
    var idstr = ids.toString();

    console.log(typeof idstr); // 检测类型 已经变成 String类型了
    console.log(idstr);// 打印的值为 “123456”
  • Boolean()

    • 用于表示真假的类型,即true 表示真,false 表示假
    1
    2
    3
    4
    5
    6
    7
    var x = 123;
    var z = 0;
    var y = " ";

    console.log(x); // 返回 true
    console.log(z); // 返回 false
    console.log(y); // 返回 false
    1. 除 0 之外的所有数字,转为布尔型都为-true
    2. 除 “ ” 之外的所有字符,转为布尔型都为-true
    3. null 和 undefined 转换为布尔型都为-false

什么是表达式?

将同类型的数据(如常量,变量,函数等),用运算符号按一定的规则连接起来的,有意义的式子称为表达式

算数操作符

  • 加 +

  • 减 -

  • 乘 *

  • 除 /

  • 取余 %

  • 递增

    • ++ a 与 a++都是对a 进行递增的操作

    • 区别:

      • ++ a 先返回递增之后的值

      • a++ 先返回原值,”再返回” 递增后的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    // 例如:
    var num1 = 10, num2 = "20",num3 = 'c';
    // 这里,num2 进行了隐士类型转换,自动转换成了数字
    console.log(num1 - num2); // 10 - 20 -10
    console.log(num1 + num2); // 10 + 20 30
    console.log(num1 * num3); // 10 * "c" NaN
    console.log(num1 / num2); // 10 / 20 0.5
    console.log(num1 % num2); // 10 % 20 10

    // ++ 在前
    var a = 10, b = 20 , c = ++a + b;
    console.log(c); // 31
    // 推理:++a ,先返回递增后的值。 应该返回的是 11
    // 结论: c = 11 + 20

    // ++ 在后
    var a1 = 10, b1 = 20 , c1 = a1++ + b1;
    console.log(a1); // 10
    console.log(c1); // 31
    console.log(a1); // 11 在运算后会返回递增后的值
    // 推理:a++ ,先返回原值 10,"再返回" 递增后的值 11
    // 代码是从上到下从左到右执行的,当代码执行到打印台输出的时候,运算代码已经执行完毕了。所以当打印 a1++ 变量时,这个返回值就是 递增后的值。
    // 结论: c = 11 + 20

    // -- 在前/在后
    var x1 = 20,
    x2 = 30,
    x3 = --x1 + x2--;

    console.log(x1);
    console.log(x2);
    console.log(x3);
    /*
    推理: x3 = --x1 + x2--;
    -- 在前,应该在'运算前'返回 递增后的值,-- 在后,则返回原值,'运算后'再返回递增值

    代码是从上到下从左到右执行的,当代码执行到打印台输出 "x2" 的时候,运算代码已经执行完毕了。所以当打印 "x2" 变量时,这个返回值就是 "x2--" 递减后的值:29。

    结论:x3 = 19 + 30

    console.log(x1); 返回值 19
    console.log(x2); 返回值 29
    console.log(x3); 返回值 49
    */
  • 递减

    • 递减同理
  • 总结 :练习

1
2
3
4
5
6
7
8
9
10
11
var num1 = 4;
var num2 = 5;
var num3 = num1++ + --num2;
var num4 = num1++ - --num2;
var num5 = num1++ * --num2;
var num6 = num1++ / --num2;

console.log(num3); // 4+4 = 8
console.log(num4); // 5-3 = 2
console.log(num5); // 6*2 = 12
console.log(num6); // 7/1 = 7

赋值操作符

1
2
3
4
5
6
7
8
9
10
11
var a = 10;
var b = 10;
var c = "hello";
var d = " word";

// 赋值操作符
a += b; // a = 10 + 10;
c += d ; // c = hello + word;

console.log(a) // 20
console.log(c) // hello word

比较操作符

  • < > >= <= == === != ! ==
  • ==: 相等 ,只比较值是否相等
  • ===: 全等,比较直的同时比较数据类型 “是否相等”
  • !=: 不相等,比较值 “是否不相等”
  • !== : 不全等,比较值的同时比较数据类型 “是否不相等”
  • 返回值:boolean 型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var a = 10;
var b = 15;
console.log( a > b ); // false

var x = 10,
y = "10",
m = 15,
z = x === y,
n = x != y,
v = x !== y;

console.log( z ); // false
console.log( n ); // false 不相等“是否不相等”
console.log( v ); // true 不全等“是否不相等”

console.log( null === undefined );

三元操作符

  • 语法:
    • 条件 ? 执行代码1 : 执行代码2
  • 说明:
    • 可代替简单的if语句,
    • 如果条件成立,执行代码块1,否则执行代码2
1
2
3
4
// 列如:
var soce= 85 ;
var result = (soce >= 60) ? "及格" : " 不及格";
alert(result);

案例练习:

1
2
3
4
5
6
/*
有2个成绩,分别是50, 70。用三元操作符判断,当成绩大于60时,输出及格,小于60时,输出不及格。
*/
var a = 50,b = 70;
alert( (a >= 60) ? '及格' : '不及格' );
alert( (b >= 60) ? '及格' : '不及格' );

逻辑操作符

  • && 与 (可以理解为:“并且” 的意思)

    • 说明: 只要有一个条件不成立,返回 false。
    • 说明: 在有一个操作数不是布尔值的情况,逻辑与操作就不一定返回值,此时它遵循下列规则:
      • 如果第1个值隐式转换为true ,则返回 第2个操作数,以此类推排除
      • 如果第1个值隐式转换为false ,则返回 第1个操作数 以此类推排除
      • 如果有一个操作数是null,则返回null
      • 如果有一个操作数是NaN,则返回NaN 前面讲过任何数与NaN做运算则返回NaN
      • 如果 有一个操作数是undefined,则返回undefined
    • 运算规则:
      • 如果操作数本身是布尔值,返回的结果就是布尔值;
      • 如果操作数本身是表达式,返回的就是表达式的运算结果,
      • 如果本身是其他类型,返回的结果就是本身,不是转化之后的布尔值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    var num1 = 10,
    num2 = 20,
    num3 = 30,
    str = 'hufeifei',
    bool = true,
    n = null,
    m;

    console.log( num1 < num2 && num2 < num3 );
    // 推理: true && true
    // 结果: true

    console.log( num1 < num2 && num2 == num3 );
    // 推理: true && false
    // 结果: false
    // 结论: 所有的条件必须为 true,返回结果 才是 true



    // 第一个值隐式转换为真,则返回最后一个值; (特殊值返回值)
    console.log( str && num3 ); // 30
    console.log( 80 && 55 ); // 55
    console.log( "hgg"&& 55 && 'abc'); // abc

    // 第一个值隐式转换为假,则返回第一个值; (特殊值返回值)
    console.log( 0 && 520); // 返回 0
    console.log( 1 && 520); // 520
    console.log( "" && 0 && 30 > 20); // 返回 空
  • || 或

    • 只要 一个条件成立,返回true
    • 规则:
      • 如果第1个操作数,隐式转换为 true,则返回第1个操作数,以此类推
      • 如果第1个操作数,隐式转换为 false,则返回第2个操作数 以此类推
      • 如果有2个操作数是null,则返回null
      • 如果有2个操作数是NaN,则返回NaN
      • 如果 有2个操作数是undefined,则返回undefined
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var m;
    console.log( "hufeifei" || 0); // hufeifei
    console.log( 99 || "abc"); // 99
    console.log( "" || 0 || 'abc'); // abc
    console.log( 0 || 0 || ""); // ""
    console.log( null || 0 || ""); // ""
    console.log( "n" || NaN); // n
    console.log( "" || 23); // 23
    console.log( "" || m); // undefined
    console.log( 30 * "abc" || 55-'adc'); // NaN
    console.log( null || null); // null
  • ! 非

    • 无论操作什么数据类型,逻辑非都是返回布尔类型
    • 可以理解为 (取反,真的为假,假为真。
    • !! 取反( 真取假取真,假取真取假)
  • 总结:非常重要 ,**与或 俩个值非常绕,他们俩正好相反。**
1
2
3
4
5
6
7
8
9
10
11
12
/*

&& 如果第1个操作数,隐式转换为true 则返回 第2个操作数
&& 如果第1个操作数,隐式转换为false 则返回 第1个操作数

|| 如果第1个操作数,隐式转换为true 则返回 第1个操作数
|| 如果第1个操作数,隐式转换为false 则返回 第2个操作数

! 真 ——————>> 假 , 假——————>> 真
!!真 ——————>> 假 , 假——————>> 假

*/