首页 > 其他分享 >[02] JS-基础语法(一)

[02] JS-基础语法(一)

时间:2024-04-18 20:35:30浏览次数:26  
标签:02 运算符 false 变量 JS 语法 console true log

1. 几个概念

本文我们讲解一下 JS 中的几个简单的概念,包括标识符、关键字、保留字、大小写和字面量。这些基本概念虽然不能直接提升我们的编程能力,但它们是 JS 的基本组成元素。

1.1 标识符

所谓标识符(Identifier),就是名字。JavaScript 中的标识符包括变量名、函数名、参数名、属性名、类名等。

合法的标识符应该注意以下强制规则:

  • 第一个字符必须是字母、下划线(_)或美元符号($)。
  • 除了第一个字符外,其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母,不建议使用双字节的字符。
  • 不能与 JavaScript 关键字、保留字重名。
  • 可以使用 Unicode 转义序列。例如,字符 a 可以使用“\u0061”表示。

1.2 关键字&保留字

  • 「关键字」就是 JavaScript 语言内部使用的一组名字(或称为命令)。这些名字具有特定的用途,用户不能自定义同名的标识符,具体说明如表所示。
  • 「保留字」就是 JavaScript 语言内部预备使用的一组名字(或称为命令)。这些名字目前还没有具体的用途,是为 JavaScript 升级版本预留备用的,建议用户不要使用。具体说明如表所示。

ECMAScript 3 将 Java 所有关键字都列为保留字,而 ECMAScript 5 规定较为灵活,例如:

  • 在非严格模式下,仅规定 class、const、enums、export、extends、import、super 为保留字,其他 ECMAScript 3 保留字可以自由使用;
  • 在严格模式下,ECMAScript 5 变得更加谨慎,严格限制 implements、interface、let、package、private、protected、public、static、yield、eval(非保留字)、arguments(非保留字)的使用。

JavaScript 预定义了很多全局变量和函数,用户也应该避免使用它们,具体说明如表所示。

不同的 JavaScript 运行环境都会预定义一些全局变量和函数,上表列出的仅针对 Web 浏览器运行环境。

无论是在严格模式下还是在非严格模式下,都不要在定义变量名、函数名或者属性名时使用上面列举出的保留字,以免同学们入坑。

1.3 区分大小写

JavaScript 严格区分大小写,所以 Hello 和 hello 是两个不同的标识符。

为了避免输入混乱和语法错误,建议采用小写字符编写代码,在以下特殊情况下可以使用大写形式:

(1)构造函数的首字母建议大写。构造函数不同于普通函数。

下面示例调用预定义的构造函数 Date(),创建一个时间对象,然后把时间对象转换为字符串显示出来。

d = new Date();                // 获取当前日期和时间
document.write(d.toString());  // 显示日期

(2)如果标识符由多个单词组成,可以考虑使用骆驼命名法——除首个单词外,后面单词的首字母大写。例如:

typeOf();
printEmployeePaychecks();

提示:上述都是约定俗成的一般习惯,不构成强制性要求,用户可以根据个人习惯进行命名。

1.4 直接量

字面量(Literal)也叫直接量,就是具体的值,即能够直接参与运算或显示的值,如字符串、数值、布尔值、正则表达式、对象直接量、数组直接量、函数直接量等。

下面示例分别定义不同类型的直接量:字符串、数值、布尔值、正则表达式、特殊值、对象、数组和函数。

                 // 空字符串直接量
1                // 数值直接量
true             // 布尔值直接量
/a/g             // 正则表达式直接量
null             // 特殊值直接量
{}               // 空对象直接量
[]               // 空数组直接量
function(){}     // 空函数直接量,也就是函数表达式

2. 注释

  • 「单行注释」以双斜杠 // 开头,// 之后的所有内容都会看作是注释的内容,对 // 之前的内容则不会产生影响。
  • 「多行注释」以 /* 开头,并以 */ 结尾,出现在 /**/ 之间的所有内容都会看作是注释的内容。
  • JavaScript 还能够识别 HTML 注释的开始符 <!--,并将其看作单行注释,与 // 效果相同。至于 HTML 注释的结束符 --> JavaScript 则不能识别,因此若要使用 HTML 注释来注释 JavaScript 代码,应该使用 JavaScript 的单行注释将 HTML 注释的结束符 --> 注释掉,例如 //-->

3. 变量

3.1 变量定义

在 JavaScript 中,变量名称并不能随便定义,需要遵循标识符的命名规则,如下所示:

  • 变量名中可以包含数字、字母、下划线 _、美元符号 $
  • 变量名中不能出现汉字;
  • 变量名中不能包含空格;
  • 变量名不能是 JavaScript 中的关键字、保留字;
  • 变量名不能以数字开头,即第一个字符不能为数字。

在定义变量时,变量名要尽量有意义,让自己或者他人能轻易看懂,例如可以使用 name 来定义一个存储姓名的变量、使用 dataArr 来定义一个数组类型的变量。

当变量名中包含多个英文单词时,推荐使用驼峰命名法(大驼峰:每个单词首字母大写,例如 FileType、DataArr;小驼峰:第一个单词首字母小写后面的单词首字母大写,例如 fileType、dataArr)。

在 JavaScript 中,定义变量需要使用 var 关键字,语法格式如下:

// 1.【语法】var|let 变量名;

var str;      // 用来存储字符串
var age;      // 用来存储年龄
var prePage;  // 用来存储上一页

// 2. 定义变量时,可以一次定义一个或多个变量,若定义多个变量,则需要在变量名之间使用逗号 `,` 分隔开
var a, b, c;  // 同时声明多个变量

变量定义后,如果没有为变量赋值,那么这些变量会被赋予一个初始值 —— undefined(未定义)。

3.2 变量赋值

变量定义后,可以使用等于号 = 来为变量赋值,等号左边的为变量的名称,等号右边为要赋予变量的值,如下例所示:

var num;    // 定义一个变量 num
num = 1;    // 将变量 num 赋值为 1

此外,也可以在定义变量的同时为变量赋值,如下例所示:

var num = 1;                // 定义一个变量 num 并将其赋值为 1
var a = 2, b = 3, c = 4;    // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4
// var a = 2,               // 为了让代码看起来更工整,上一行代码也可以写成这样
//     b = 3,
//     c = 4;   

变量中并不存储任何值,而是存储值的内存地址。

3.3 变量提升

JavaScript 在「预编译期」会先预处理声明的变量,但是变量的赋值操作发生在 JavaScript 「执行期」。

document.write(str); // 显示 undefined
str = 1;
document.write(str); // 显示 1
var str;

在上面示例中,声明变量放在最后,赋值操作放在前面。由于 JavaScript 在预编译期已经对变量声明语句进行了预解析,所以第 1 行代码读取变量值时不会抛出异常,而是返回未初始化的值 undefined。第 3 行代码是在赋值操作之后读取,故显示为数字 1。

JavaScript 引擎的解析方式是:先解析代码,获取所有被声明的变量,然后再一行一行地运行。 这样,所有声明的变量都会被提升到代码的头部,这就叫作「变量提升(Hoisting)」。

3.4 let&const

2015 年以前,JavaScript 只能通过 var 关键字来声明变量,在 ECMAScript6(ES6)发布之后,新增了 let 和 const 两个关键字来声明变量,其中:

  • 使用 let 关键字声明的变量只在其所在的代码块中有效(类似于局部变量),并且在这个代码块中,同名的变量不能重复声明;
  • const 关键字的功能和 let 相同,但使用 const 关键字声明的变量还具备另外一个特点,那就是 const 关键字定义的变量,一旦定义,就不能修改(即使用 const 关键字定义的为常量)。

注意:IE10 及以下的版本不支持 let 和 const 关键字。

let name = "小明";       // 声明一个变量 name 并赋值为“小明”
let age  = 11;          // 声明一个变量 age
let age  = 13;          // 报错:变量 age 不能重复定义

const PI = 3.1415       // 声明一个常量 PI,并赋值为 3.1415
console.log(PI)         // 在控制台打印 PI

4. 数据类型

数据类型指的是可以在程序中存储和操作的值的类型,每种编程语言都有其支持的数据类型,不同的数据类型用来存储不同的数据,例如文本、数值、图像等。

JavaScript 是一种动态类型的语言,在定义变量时不需要提前指定变量的类型,变量的类型是在程序运行过程中由 JavaScript 引擎动态决定的,另外,您可以使用同一个变量来存储不同类型的数据,例如:

var a;                         // 此时 a 为 Undefined
a = "tree";                    // 此时 a 为 String 类型
a = 123;                       // 此时 a 为 Number 类型

JavaScript 中的数据类型可以分为两种类型:

  • 基本数据类型(值类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol
  • 引用数据类型:对象(Object)、数组(Array)、函数(Function)

提示:Symbol 是 ECMAScript6 中引入的一种新的数据类型,表示独一无二的值。

typeof】在开始介绍各种数据类型之前,先来了解一下 typeof 操作符,使用 typeof 操作符可以返回变量的数据类型。

// typeof 操作符有带括号和不带括号两种用法
typeof x;       // 获取变量 x 的数据类型
typeof(x);      // 获取变量 x 的数据类型

4.1 基本数据类型

a. String 类型

字符串(String)类型是一段以单引号 '' 或双引号 "" 包裹起来的文本,例如 '123'、"abc"。需要注意的是,单引号和双引号是定义字符串的不同方式,并不是字符串的一部分。

定义字符串时,如果字符串中包含引号,可以使用反斜杠 \ 来转义字符串中的引号,或者选择与字符串中不同的引号来定义字符串,如下例所示:

/*
- 在JS中使用单引号或双引号来表示字符串
- 转义字符 \
    \" => "
    \' => '
    \\ => \
    \t => 制表符
    \n => 换行
- 模板字符串
    - 使用反单引号` 来表示模板字符串
    - 模板字符串中可以嵌入变量
- 使用typeof检查一个字符串时会返回 "string"
 */
var str = "Let's have a cup of coffee.";  // 双引号中包含单引号
var str = 'He said "Hello" and left.';    // 单引号中包含双引号
var str = 'We\'ll never give up.';        // 使用反斜杠转义字符串中的单引号

b. Number 类型

数值(Number)类型用来定义数值,JavaScript 中不区分整数和小数(浮点数),统一使用 Number 类型表示,如下例所示:

var num1 = 123;     // 整数
var num2 = 3.14;    // 浮点数

对于一些极大或者极小的数,也可以通过科学(指数)计数法来表示,如下例所示:

var y=123e5;      // 123 乘以 10 的 5 次方,即 12300000
var z=123e-5;     // 123 乘以 10 的 -5 次方,即 0.00123s

另外,Number 类型中还有一些比较特殊的值,分别为 Infinity、-Infinity 和 NaN,其中:

  • Infinity:用来表示正无穷大的数值,一般指大于 1.7976931348623157e+308 的数;
  • -Infinity:用来表示负无穷大的数值,一般指小于 5e-324 的数;
  • NaN:即非数值(Not a Number 的缩写),用来表示无效或未定义的数学运算结构,例如 0 除以 0。

提示:如果某次计算的结果超出了 JavaScript 中 Number 类型的取值范围,那么这个数就会自动转化为无穷大,正数为 Infinity,负数为 -Infinity。

/* 
数值(Number)
  - 在JS中所有的整数和浮点数都是Number类型
  - JS中的数值并不是无限大的,当数值超过一定范围后会显示近似值
  - Infinity 是一个特殊的数值表示无穷
  - 所以在JS中进行一些精度比较高的运算时要十分注意
  - NaN 也是一个特殊的数值,表示非法的数值
 */
let a = 10
a = 10.5
a = 3.14
a = 9999999999999991111111111111111111
a = 99999 ** 99999
a = Infinity
a = 1.11111111111111111111111111111111111111111111
a = 0.0000000000000000000000000000000000001
a = 0.1 + 0.2
a = 1 - "a" // NaN (Not a Number)
a = NaN

/* 
大整数(BigInt)
  - 大整数用来表示一些比较大的整数
  - 大整数使用n结尾,它可以表示的数字范围是无限大
 */
a = 99999999999999999999999999999999999999999999999999n

/* 
其他进制的数字:
  - 0b 二进制
  - 0o 八进制
  - 0x 十六进制
 */
a = 0b1010
a = 0o10
a = 0xff
console.log(a)

使用 typeof 运算符来检查不同的值的类型。

let a = 10
let b = 10n
console.log(typeof a) // "number"
console.log(typeof b) // "bigint"

c. Boolean 类型

布尔(Boolean)类型只有两个值,true(真)或者 false(假),在做条件判断时使用的比较多,您除了可以直接使用 true 或 false 来定义布尔类型的变量外,还可以通过一些表达式来得到布尔类型的值,例如:

var a = true;   // 定义一个布尔值 true
var b = false;  // 定义一个布尔值 false
var c = 2 > 1;  // 表达式 2 > 1 成立,其结果为“真(true)”,所以 c 的值为布尔类型的 true
var d = 2 < 1;  // 表达式 2 < 1 不成立,其结果为“假(false)”,所以 c 的值为布尔类型的 false

d. Null 类型

Null 是一个只有一个值的特殊数据类型,表示一个“空”值,即不存在任何值,什么都没有,用来定义空对象指针。

使用 typeof 操作符来查看 Null 的类型,会发现 Null 的类型为 Object,说明 Null 其实使用属于 Object(对象)的一个特殊值。因此通过将变量赋值为 Null 我们可以创建一个空的对象。

e. Undefined 类型

Undefined 也是一个只有一个值的特殊数据类型,表示未定义。当我们声明一个变量但未给变量赋值时,这个变量的默认值就是 Undefined。例如:

var num;
console.log(num);  // 输出 undefined

在使用 typeof 操作符查看未赋值的变量类型时,会发现它们的类型也是 undefined。对于未声明的变量,使用 typeof 操作符查看其类型会发现,未声明的变量也是 undefined,示例代码如下:

var message;
console.log(typeof message);  // 输出 undefined
console.log(typeof name);     // 输出 undefined

f. Symbol 类型

Symbol 是 ECMAScript6 中引入的一种新的数据类型,表示独一无二的值,Symbol 类型的值需要使用 Symbol() 函数来生成,如下例所示:

var str = "123";
// 用来创建一个唯一的标识
var sym1 = Symbol(str);
var sym2 = Symbol(str);
console.log(sym1);          // 输出 Symbol(123)
console.log(sym2);          // 输出 Symbol(123)
console.log(sym1 == sym2);  // 输出 false
// 虽然 sym1 与 sym2 看起来是相同的,但实际上它们并不一样,根据 Symbol 类型的特点,sym1 和 sym2 都是独一无二的

4.2 引用类型

a. Object 类型

JavaScript 中的对象(Object)类型是一组由键、值组成的无序集合,定义对象类型需要使用花括号{},语法格式如下:

{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}

其中 name1、name2、name3、...、nameN 为对象中的键,value1、value2、value3、...、valueN 为对应的值。

在 JavaScript 中,对象类型的键都是字符串类型的,值则可以是任意数据类型。要获取对象中的某个值,可以使用对象名.键的形式,如下例所示:

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};
console.log(person.name);       // 输出 Bob
console.log(person.age);        // 输出 20

b. Array 类型

数组(Array)是一组按顺序排列的数据的集合,数组中的每个值都称为元素,而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号[],数组中的每个元素使用逗号进行分隔,例如:

[1, 2, 3, 'hello', true, null]

另外,也可以使用 Array() 函数来创建数组,如下例所示:

var arr = new Array(1, 2, 3, 4);
console.log(arr); // 输出 [1, 2, 3, 4]

数组中的元素可以通过索引来访问。数组中的索引从 0 开始,并依次递增,也就是说数组第一个元素的索引为 0,第二个元素的索引为 1,第三个元素的索引为 2,以此类推。如下例所示:

var arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr[0]);  // 输出索引为 0 的元素,即 1
console.log(arr[5]);  // 输出索引为 5 的元素,即 true
console.log(arr[6]);  // 索引超出了范围,返回 undefined

c. Function 类型

函数(Function)是一段具有特定功能的代码块,函数并不会自动运行,需要通过函数名调用才能运行,如下例所示:

function sayHello(name){
    return "Hello, " + name;
}
var res = sayHello("tree");
console.log(res);  // 输出 Hello, tree

此外,函数还可以存储在变量、对象、数组中,而且函数还可以作为参数传递给其它函数,或则从其它函数返回,如下例所示:

var fun = function() {
    console.log("http://c.biancheng.net/js/");
}

function createGreeting(name){
    return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
    return greetingFunction(userName);
}

var result = displayGreeting(createGreeting, "tree");
console.log(result);  // 输出 Hello, tree

4.3 类型转换

a. 转字符串

/*
1.调用toString()方法将其他类型转换为字符串
  - 由于null和undefined中没有toString(),所以对这两个东西调用toString()时会报错
2.调用String()函数将其他类型转换为字符串
  - 对于拥有toString()方法的值调用String()函数时,实际上就是在调用toString()方法
  - 对于null,则直接转换为"null";对于undefined,直接转换为"undefined"
 */

let a = 10 // "10"
a = true // "true"
a = 11n  // "11"
a = undefined
// console.log(typeof a, a)

a = a.toString() // "10"
// console.log(typeof a, a)

let b = 33    // "33"
b = null      // "null"
b = undefined // "undefined"
b = true

console.log(typeof b, b)

b = String(b)

console.log(typeof b, b)

b. 转数值

/* 
将其他的数据类型转换为数值
    使用Number()函数来将其他类型转换为数值,转换情况如下:
        - 字符串
            - 如果字符串是一个合法的数字,则会自动转换为对应的数字
            - 如果字符串不是合法数字,则转换为NaN
            - 如果字符串是空串或纯空格的字符串,则转换为0
        - 布尔值
            - true转换为1,false转换为0
        - null 转换为 0
        - undefined 转换为 NaN

    专门用来将字符串转换为数值的两个方法           
        - parseInt() —— 将一个字符串转换为一个整数
            - 解析时,会自左向右读取一个字符串,直到读取到字符串中所有的有效的整数
            - 也可以使用该函数对一个数字进行取整
        - parseFloat() —— 将一个字符串转换为浮点数 
            - 解析时,会自左向右读取一个字符串,直到读取到字符串中所有的有效的小数
 */
let a = '123' // 123
a = 'abc' // NaN
a = '3.1415926' // 3.1415926
a = '11px' // NaN
a = ''  // 0
a = '    ' // 0

a = true // 1
a = false // 0

a = null // 0
a = undefined // NaN

// console.log(typeof a, a)

a = Number(a)
// console.log(typeof a, a)

let b = '123px'
b = parseInt(b)
console.log(typeof b, b) // number 123

b = 'a123'
b = parseInt(b)
console.log(typeof b, b) // number NaN

b = '123.45'
b = parseInt(b)
console.log(typeof b, b) // number 123

b = 456.123
b = parseInt(b)
console.log(typeof b, b) // string 456

c. 转布尔值

/*
- 转换的情况
    - 数字
        - 0 和 NaN 转换为false
        - 其余是true
    - 字符串
        - 空串 转换为 false
        - 其余是true
    - null和undefined 都转换为 false
    - 对象:对象会转换为true

- 所有表示空性的没有的错误的值都会转换为false
    0、NaN、空串、null、undefined、false
 */

let a = 1 // true
a = -1 // true
a = 0 // false
a = NaN // false
a = Infinity // true

a = 'abc' // true
a = 'true' // true
a = 'false' // true
a = '' // false
a = " " // true

5. 运算符

5.1 算术运算符

运算符 描述 示例
+ 加法运算符 x + y 表示计算 x 加 y 的和
- 减法运算符 x - y 表示计算 x 减 y 的差
* 乘法运算符 x * y 表示计算 x 乘 y 的积
/ 除法运算符 x / y 表示计算 x 除以 y 的商
% 取模(取余)运算符 x % y 表示计算 x 除以 y 的余数
** 幂运算 x ** y 表示计算 x 的 y 次幂

JS 是一门弱类型语言,当进行运算时会通过自动的类型转换来完成运算。

a = 10 - '5' // 10 - 5
a = 10 + true // 10 + 1
a = 5 + null // 5 + 0
a = 6 - undefined // 6 - NaN = NaN

5.2 赋值运算符

运算符 描述 示例
= 最简单的赋值运算符,将运算符右侧的值赋值给运算符左侧的变量 x = 10 表示将变量 x 赋值为 10
+= 先进行加法运算,再将结果赋值给运算符左侧的变量 x += y 等同于 x = x + y
-= 先进行减法运算,再将结果赋值给运算符左侧的变量 x -= y 等同于 x = x - y
*= 先进行乘法运算,再将结果赋值给运算符左侧的变量 x *= y 等同于 x = x * y
/= 先进行除法运算,再将结果赋值给运算符左侧的变量 x /= y 等同于 x = x / y
%= 先进行取模运算,再将结果赋值给运算符左侧的变量 x %= y 等同于 x = x % y
**= 先进行幂运算,再将结果赋值给运算符左侧的变量 x **= y 等价于 x = x ** y
??= 空赋值,只有当变量的值为 null 或 undefined 时才会对变量进行赋值 let a = null; a ??= 1101;

5.3 字符串运算符

JavaScript 中的 ++= 运算符除了可以进行数学运算外,还可以用来拼接字符串,其中:

  • + 运算符表示将运算符左右两侧的字符串拼接到一起;
  • += 运算符表示先将字符串进行拼接,然后再将结果赋值给运算符左侧的变量。

当任意一个值和字符串做加法运算时,它会先将其他值转换为字符串,然后再做拼串的操作。可以利用这一特点来完成类型转换,可以通过为「任意类型 + 一个空串」的形式来将其转换为字符串。其原理和 String() 函数相同,但使用起来更加简洁。

a = 'hello' + 'world'
a = '1' + 2 // "1" + "2"
a = true + ''

5.4 自增、自减运算符

运算符 名称 影响
++x 自增运算符 将 x 加 1,然后返回 x 的值
x++ 自增运算符 返回 x 的值,然后再将 x 加 1
--x 自减运算符 将 x 减 1,然后返回 x 的值
x-- 自减运算符 返回 x 的值,然后将 x 减 1

5.5 比较运算符

运算符 名称 示例
== 等于 x == y 表示如果 x 等于 y,则为真
=== 全等 x === y 表示如果 x 等于 y,并且 x 和 y 的类型也相同,则为真
!= 不相等 x != y 表示如果 x 不等于 y,则为真
!== 不全等 x !== y 表示如果 x 不等于 y,或者 x 和 y 的类型不同,则为真
< 小于 x < y 表示如果 x 小于 y,则为真
> 大于 x > y 表示如果 x 大于 y,则为真
>= 大于或等于 x >= y 表示如果 x 大于或等于 y,则为真
<= 小于或等于 x <= y 表示如果 x 小于或等于 y,则为真

当对非数值进行关系运算时,它会先将前转换为数值然后再比较。当关系运算符的两端是两个字符串,它不会将字符串转换为数值,而是逐位的比较字符的 Unicode 编码(利用这个特点可以对字符串按照字母排序)。

let result = 10 > 5   // true
result = 5 > 5        // false
result = 5 >= 5       // true

result = 5 < "10"     // true
result = "1" > false  // true

result = "a" < "b"    // true
result = "z" < "f"    // false
result = "abc" < "b"  // true

// 注意比较两个字符串格式的数字时一定要进行类型转换
result = "12" < "2"   // true
result = +"12" < "2"  // false

// 检查num是否在5和10之间
let num = 4
// result = 5 < num < 10 // 错误的写法
result = num > 5 && num < 10

console.log(result)

相等和全等代码示例:

/* 
    ==
        - 相等运算符,用来比较两个值是否相等
        - 使用相等运算符比较两个不同类型的值时,它会将其转换为相同的类型(通常转换为数值)然后再比较,类型转换后值相同也会返回true
        - null和undefined进行相等比较时会返回true
        - NaN不和任何值相等,包括它自身
    ===
        - 全等运算符,用来比较两个值是否全等
        - 它不会进行自动的类型转换,如果两个值的类型不同直接返回false
        - null和undefined进行全等比较时会返回false
    !=
        - 不等,用来检查两个值是否不相等
        - 会自动的进行类型转换
    !==
        - 不全等,比较两个值是否不全等
        - 不会自动的类型转换
 */

let result = 1 == 1                // true
result = 1 == 2                    // false
result = 1 == '1'                  // true
result = true == "1"               // true

result = null == undefined         // true
result = NaN == NaN                // false

result = 1 === "1"                 // false
result = null === undefined        // false

result = 1 != 1                    // false
result = 1 != "1"                  // false
result = 1 !== "1"                 // true

5.6 逻辑运算符

运算符 名称 示例 补充
&& 逻辑与 x && y 表示如果 x 和 y 都为真,则为真 与运算是短路的与,如果第 1 个值为false,则不看第 2 个值。与运算是找 false 的,找到 false 则直接返回,没有 false 才会返回 true。
|| 逻辑或 x || y 表示如果 x 或 y 有一个为真,则为真 或运算也是短路的或,如果第 1 个值为 true,则不看第 2 个值。或运算是找 true,如果找到 true 则直接返回,没有 true 才会返回 false。
! 逻辑非 !x 表示如果 x 不为真,则为真 如果对一个非布尔值进行取反,它会先将其转换为布尔值然后再取反。可以利用这个特点将其他类型转换为布尔值。

示例如下:

// false || alert(123)    // 第一个值为false,alert会执行
true || alert(123)        // 第一个值为true,alert不会执行

// 对于非布尔值进行或运算,它会转换为布尔值然后运算,但是最终会返回原值。
// - &&: 如果第一个值为false,则直接返回第一个;如果第一个值为true,则返回第二个。
// - ||: 如果第一个值为true,则返回第一个;如果第一个值为false,则返回第二个。

let result = 1 || 2       // 1
result = "hello" || NaN   // "hello"
result = NaN || 1         // 1
result = NaN || null      // null

5.7 三元运算符

// 如果“条件表达式”的结果为真(true),则执行“表达式1”中的代码,否则就执行“表达式2”中的代码。
条件表达式 ? 表达式1 : 表达式2;

5.8 位运算符

运算符 描述 示例
& 按位与:如果对应的二进制位都为 1,则该二进制位为 1 5 & 1 等同于 0101 & 0001 结果为 0001,十进制结果为 1
| 按位或:如果对应的二进制位有一个为 1,则该二进制位为 1 5 | 1 等同于 0101 | 0001 结果为 0101,十进制结果为 5
^ 按位异或:如果对应的二进制位只有一个为 1,则该二进制位为 1 5 ^ 1 等同于 0101 ^ 0001 结果为 0100,十进制结果为 4
~ 按位非:反转所有二进制位,即 1 转换为 0,0 转换为 1 ~5 等同于 ~0101 结果为 1010,十进制结果为 -6
<< 按位左移:将所有二进制位统一向左移动指定的位数,并在最右侧补 0 5 << 1 等同于 0101 << 1 结果为 1010,十进制结果为 10
>> 按位右移(有符号右移):将所有二进制位统一向右移动指定的位数,并拷贝最左侧的位来填充左侧 5 >> 1 等同于 0101 >> 1 结果为 0010,十进制结果为 2
>>> 按位右移零(无符号右移):将所有二进制位统一向右移动指定的位数,并在最左侧补 0 5 >>> 1 等同于 0101 >>> 1 结果为 0010,十进制结果为 2

6. 输出

某些情况下,我们可能需要将程序的运行结果输出到浏览器中,JavaScript 中为我们提供了多种不同的输出语句来向浏览器中输出内容:

  1. 使用 alert() 函数来弹出提示框;
  2. 使用 confirm() 函数来弹出一个对话框;
  3. 使用 document.write() 方法将内容写入到 HTML 文档中;
  4. 使用 innerHTML 将内容写入到 HTML 标签中;
  5. 使用 console.log() 在浏览器的控制台输出内容。

6.1 alert()

使用 JS alert() 函数可以在浏览器中弹出一个提示框,在提示框中我们可以定义要输出的内容,语法格式如下:

alert(_____);

其中 _____ 为要在提示框中输出的内容,需要注意的是,alert() 中只能输出文本内容。

alert() 函数是 window 对象下的一个函数,所以有时为了代码更严谨,我们也可以使用 window.alert() 的形式来调用 alert() 函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var a = 11, b = 5;
        window.alert("a * b = " + a * b);
    </script>
</body>
</html>

6.2 confirm()

JS confirm() 函数与 alert() 函数相似,它们都是 window 对象下的函数,同样可以在浏览器窗口弹出一个提示框,不同的是,使用 confirm() 函数创建的提示框中,除了包含一个“确定”按钮外,还有一个“取消”按钮。如果点击“确定”按钮,那么 confirm() 函数会返回一个布尔值 true,如果点击“取消”按钮,那么 confirm() 函数会返回一个布尔值 false。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var res = window.confirm("这里是要显示的内容");
        if (res == true) {
            alert("你点击了“确定”按钮");
        } else {
            alert("你点击了“取消”按钮");
        }
    </script>
</body>
</html>

6.3 console.log()

使用 JS console.log() 可以在浏览器的控制台输出信息,我们通常使用 console.log() 来调试程序,其语法格式如下:

console.log(_____);

其中 _____ 为要输出的内容,可以是字符串或者对象类型。与 window.alert() 和 window.confirm() 可以分别简写成 alert() 和 confirm() 不同,console.log() 不能简写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var myArr = ["Chrome","Firefox","Edge","Safari","Opera"];
        console.log(myArr);
    </script>
</body>
</html>

要看到 console.log() 的输出内容需要先打开浏览器的控制台。以 Chrome 浏览器为例,要打开控制台您只需要在浏览器窗口按 F12 快捷键,或者点击鼠标右键,并在弹出的菜单中选择“检查”选项即可。最后,在打开的控制台中选择“Console”选项,如下图所示:

6.4 document.write()

使用 JS document.write() 可以向 HTML 文档中写入 HTML 或者 JavaScript 代码,语法格式如下:

document.write(exp1, exp2, exp3, ...);

其中 exp1、exp2、exp3 为要向文档中写入的内容,document.write() 可以接收多个参数,即我们可以一次向文档中写入多个内容,内容之间使用逗号进行分隔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        document.write("<p>现在的时间是:</p>");
        document.write(Date());
    </script>
</body>
</html>

6.5 innerHTML

与前面介绍的几个函数不同,innerHTML 是一个属性而不是一个函数,通过它可以设置或者获取指定 HTML 标签中的内容,示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div id="demo">JavaScript 输出</div>
    <script type="text/javascript">
        var demo = document.getElementById("demo");
        console.log(demo.innerHTML);
        demo.innerHTML = "<h2>innerHTML</h2>"
    </script>
</body>
</html>

标签:02,运算符,false,变量,JS,语法,console,true,log
From: https://www.cnblogs.com/liujiaqi1101/p/18144347

相关文章

  • [03] JS-基础语法(二)
    1.判断、循环1.1if-elseif语句ifelse语句ifelseifelse语句e.g.编写一个程序,获取一个用户输入的整数,然后显示这个数是奇数还是偶数。//编写一个程序,获取一个用户输入的整数//letnum=+prompt("请输入一个整数")letnum=parseInt(prompt("请输入一个整数"......
  • 2024-04-18---中等题---无重复字符的最长子串(滑动窗口)
    无重复字符的最长子串(滑动窗口)题目:思路:一暴力法:特殊情况,长度为0或者1声明每次位置的最大长度,和最大的最大值(返回值)双层循环,有点暴力二滑动窗口:​ 基本概念:维持一个窗口(可以理解为队列),当新进来的元素与前面的重复,则把重复的元素及之前的元素全部忽略(可以理解为......
  • 20240416
    T1TopcoderSRM573div1Medium-SkiResorts一定存在一种方案使得最终所有高度都是原高度序列中出现过的数。考虑倒着来,\(dp[i][j]\)表示\(i\)高度变成原来\(j\)的高度之后能够从\(n\)到达的最小代价。转移是简单的,但是需要使用dijkstra。代码#include<iostream......
  • 第二代长安X5 PLUS 2024款车机绕开限制安装第三方APP
    测试车型:第二代长安X5PLUS2024款智尊型系统版本:OnStyle5.2.0安卓版本:9.0Pie文章内容仅供参考,不同车型不同版本可能操作不同一、拨号页*#*#888,输入密码密码规则见二、)进入工厂模式二、工厂模式动态密码规则:4位,和当前时间有关,24小时制,1、2位位当前分钟整十数,3、4位为小......
  • 2024.04.18每日收获之联合体结构体内存分配
    今日学习组内前辈留下的代码,数码管动态扫描显示,发现前辈们用的是联合体定义扫描引脚,如:typedefunion{unsignedchara[2];typedefstruct{unsignedchardata0;unsignedchardata1;}data;}seg;此时数组a[2]和结构体里的data0和data1共用地址空间,修改数组或者data会产生相......
  • Jmeter如何判断请求的数据是Json还是表单格式
    就我个人而言,最简单的是使用curl命令执行下就知道了,比如我自己写的图书管理系统,flask框架图书管理系统服务器端-加个小鸡腿-博客园(cnblogs.com) ,python命令启动后是这样的 其中查询所有图书的接口是127.0.0.1:5000/books,我们打开浏览器输入这条url显示的数据是json格式......
  • 20240415
    T1TopcoderSRM579div1Medium-TravellingPurchasingMan发现行动肯定是从当前点沿最短路走到目标然后等开门然后买然后去下一个目标。所以先对每个关键点为原点跑一遍最短路,然后状压一下,\(dp[S][i]\)表示已经买了\(S\)集合,当前在\(S\)中的\(i\)。转移就枚举目的地,看过......
  • 【专题】2024新能源及储能参与电力市场交易白皮书报告合集PDF分享(附原数据表)
    原文链接:https://tecdat.cn/?p=35958原文出处:拓端数据部落公众号2019至2023年,我国新能源市场化交易电量持续增长,2023年更是达到6,845亿千瓦时,占新能源发电总量的47.3%。同年,国家电网公司绿电结算电量跃升至576亿千瓦时,绿证交易也激增15倍,达到2,364万张。阅读原文,获取专题报告合......
  • 2024省选OIFC模拟T1
    题意:给定k颗有n个点的树对于每个点对(i,j),求出其在每棵树上的路径经过的点(含端点)的并集大小。做法:一个比较简单的想法是搞出每个(i,j)在第k颗树上的点的集合,然后所有树并一下,这个再用bitset优化一下,然后有人就过了,而我这位大常数选手就没过。首先容斥为求不经过点的交。考......
  • 使用c#8语法
    [C#]framework修改项目语言为C#8.0_.netframework项目如何修改c#语言-CSDN博客在项目文件中增加一条:<PropertyGroupCondition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'"><PlatformTarget>AnyCPU</PlatformTarget><DebugSy......