• JavaScript 语法基础

    JavaScript 语法基础

    引言

    JavaScript，简称 JS，它是一个脚本语言，通过编写代码，在浏览器上运行。

    一、JS 引入方式

    1. 内嵌式

    内嵌式是指：将 JS 代码写在 script 标签的内部。

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo8title>
head>
<body>
    <script>
    	//alert 的功能是弹出一个对话框
        alert("hello world");
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    展示结果：

    1

    2. 行内式

    行内式是指：将 JS 代码入到 html 中，但不通过 script 标签。

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo9title>
head>
<body>
    <input type="button" value="按钮" onclick="alert('hello! 欢迎来到这个页面')">
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    展示结果：

    2

    3. 外部式

    (1) 创建一个 js文件，在 js文件中，书写代码。
    (2) 在 html 文件中，通过路径引入 css 文件。

    js 文件

    alert("hello world");

    • 1

    html 文件

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo10title>
head>
<body>
    <script src="demo10.js">
        alert("welcome to the world");
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在通过 src 文件引入 【hello world】之后，同一 script 标签中的其他相同命令不会生效。比方说：上面的 【alert(“welcome to the world”)】就并没有生效。

    展示结果：

    3

    二、JS 基础语法

    1. 注释

    和 Java 相同，既可以使用 【//】，也可以使用【/* */】

    2. 输入输出

    // 弹出一个输入框
prompt("请输入你的名字");
// 弹出一个输出框
alert("hello world");

    • 1
    • 2
    • 3
    • 4

    展示结果：

    4

    3. 在控制台上打印

    console.log("hello world");

    • 1

    展示结果：

    5

    注意

    ①【console.log()】的用法和 Java 中【System.out.println()】的用法基本相似，都是具有打印并换行的显示效果。

    ② console 是一个 JS 中的 “对象”。其中. 表示取对象中的某个属性或者方法，我们可以直观地将 . 理解成 “的”。那么，console.log 就可以理解成：使用 “控制台” 对象 “的” “log 方法”。

    4. 变量的使用

    基本数据类型

    6

    创建变量

    let num = 10;
//var num = 10;
num = 20;
console.log(num);

let str = 'hello world';
console.log(str);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    展示结果：

    7

    var / let 是 JS 中的一个关键字，它的作用是声明这是一个变量。var 的使用，年代较为久远，后面建议使用 let，以免不必要的缺陷发生。

    在 JS 中，创建变量不需要显示指定类型。变量实际的类型，根据初始化 / 赋值来确定的。而这一特性实际上就是因为 JS 是基于动态类型这一语法的。

    在上面的程序中，将变量 num 赋值成数字，那么 num 就表示 number 类型；将变量 str 赋值成字符串，那么 str 就是字符串类型。

    理解动态类型

    理解动态类型之前，先来看看 Java 的静态类型语言：

    在 Java 中，一个变量的类型，在编译阶段就固定了，在运行时不能改变。例如：下面的变量 a 就是一个 int 类型，在后面的编译阶段中，不管怎么修改 a 的值都是可以的，但当前 a 的类型始终是 int 类型，这无法改变。

    int a = 10;

    • 1

    而在 JS 中，变量的类型随着程序运行，随时可以改变。这其实就是动态类型的含义。

    let a = 10;
console.log(a);
//typeof 可以展示当前变量的类型
console.log(typeof a);

a = 'hello world';
console.log(a);
console.log(typeof a);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    展示结果：

    8

    5. number 类型的规则

    (1) 进制表示

    和 Java 类似，不再赘述。

    let a = 07; 	// 八进制整数, 以 0 开头
let b = 0xa; 	// 十六进制整数, 以 0x 开头
let c = 0b10; 	// 二进制整数, 以 0b 开头

    • 1
    • 2
    • 3

    (2) 特殊的数字值

    Infinity: 无穷大, 大于任何数字。表示数字已超过了 JS 能表示的范围。
-Infinity: 负无穷大, 小于任何数字。表示数字也已超过了 JS 能表示的范围。
NaN: 表示当前的结果不是一个数字。

    • 1
    • 2
    • 3
    console.log(10/0);
console.log(-10/0);
console.log('hello' - 10);

    • 1
    • 2
    • 3

    展示结果：

    9

    (3) 小数

    console.log(1/3);

    • 1

    展示结果：

    1

    6. string 类型的规则

    (1) 创建字符串

    字符串需要使用引号引起来，单引号双引号都可以。因为在 JS 的语法中，没有字符的概念，只有字符串。

    let str1 = 'hello';
let str2 = "hello world";

    • 1
    • 2

    也可以单引号双引号配合使用：

    console.log(" welcome to 'Shanghai' ");
console.log(' welcome to "Shanghai" ');

    • 1
    • 2

    (2) 求字符串长度

    let str = 'hello 杰克';
console.log(str.length);

//输出结果：8

    • 1
    • 2
    • 3
    • 4

    (3) 拼接字符串

    let str1 = "hello ";
let str2 = "杰克";
console.log(str1+str2);

let str3 = "hello ";
let str4 = "Jack";
console.log(str3+str4);

let str5 = "My score is "
let str6 = 100;
console.log(str5+str6);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    展示结果：

    2

    7. boolean 类型的规则

    boolean 类型除了用来表示 true 或 false 以外，还能够分别表示 0 或 1.

    let a = true;
let b = false;
console.log(a + 1);
console.log(b + 1);

    • 1
    • 2
    • 3
    • 4

    展示结果：

    3

    8. undefined 和 null 类型

    let a;
console.log(a);

let b = null;
console.log(b + 2);
console.log(b + '2');

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    展示结果：

    4

    两者的区别与联系

    共同点：null 和 undefined 都表示取值非法的情况，但是侧重点不同。
    不同点：null 表示当前的值为空，相当于一个空的盒子。
    undefined 表示当前的变量未定义，相当于连盒子都没有。

    9. 运算符与符号

    JS 中的算术运算符、赋值运算符、自增自减运算符、比较运算符、逻辑运算符、移位运算、转义字符。这些和 C 语言、 Java 的语法都基本一致，虽有个别地方不相同，但不影响，可以自己在实际编程中发现差异。

    比方说：

    展示1

    JS 中有一个【===】号，它与两个等号的差异：

    ==		  :比较相等(会进行隐式类型转换)
===		  :比较相等(不会进行隐式类型转换)

    • 1
    • 2
    let x = 10;
let y = '10';
console.log(x == y);
console.log(x === y);

    • 1
    • 2
    • 3
    • 4

    展示结果：

    5

    展示2

    a || b

    • 1

    如果 a 为 true， 整个表达式的值就是 a 的值。
    如果 a 为 false，整个表达式的值就是 b 的值。
    所以在 JS 中，|| 得到的结果，不一定就是 boolean 类型。

    10. 语句

    JS 中的 if 语句、三元表达式、switch 语句、while循环、for 循环。这些都与 C语言的语法基本一致。

    在 if 语句、while 循环中的判断条件中，存在 【0为假，非0为真】的逻辑。

    let a = 1;
let b = 0;

if(5) {
    console.log(100);
} else {
    console.log(200);
}

while ( a <= 10) {
    console.log(a);
    a++;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    展示结果：

    6

    三、数组

    1. 创建数组

    方式一：new 一个对象

    let arr = new Array();

    • 1

    方式二：字面量创建

    let arr = [];
let arr2 = [1, 2, 'hello', true, undefined];

    • 1
    • 2

    由于 JS 是动态类型的语言，所以不要求数组中的元素一定是相同类型的。

    2. 数组的基本使用

    let arr = [1, 2, 'hello', true];

console.log(arr);
console.log(arr.length);

let i = 0;
for(i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

console.log(arr[100]);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    展示结果：

    1
    在 JS 中，若代码中涉及到超出数组范围或不在数组范围内，在浏览器显示的时候并不会报错，但会显示 【undefined】.

    3. 为数组新增元素

    let arr = [1, 2, 'hello', true];

arr[4] = 100;
console.log(arr.length);

arr[-1] = 200;
console.log(arr.length);

arr[10] = 300;
console.log(arr.length);

arr['hello'] = 'world';
console.log(arr.length);

console.log(arr['hello']);
console.log(arr.hello);
console.log(arr);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    展示结果：

    3

    注意

    ① 当我们尝试对 arr 进行尾插的时候，结果成功。
    ② 当我们尝试往 arr[10] 插入元素的时候，结果成功，并且扩容了数组长度。
    ③ 当我们尝试往 arr[ ‘hello’ ] 插入元素的时候。即非数字下标，结果成功，但不计入长度。但是，这里我们应该将 “下标” 理解成数组的 “属性”，我们同时可以通过 arr.hello 的方式来访问此属性对应的值。
    ④ 当我们尝试往 arr[-1] 插入元素的时候，结果成功，但不计入长度。这和上面所说的 “属性” 是一个道理，但又不完全一致。

    而造成这些与 Java 数组不同语法的关键，其实就是因为 JS 是一个动态类型的语言，所以才会衍生出这些不同的逻辑。

    4. 为数组增删元素

    为数组增删元素，推荐使用 push 和 splice 方法，方便且清晰。
    在 JS 中，我们可以将数组理解为一个对象，那么我们就可以利用对象对应的方法，这就和 Java 中的 ArrayList 差不多，push 就相当于 ArrayList 的 add 方法。

    而下面的 splice(2,3)，表示：从数组 2下标开始，删除后三个元素。

    let arr = [];

for(let i=0; i<10; i++) {
    arr.push(i);
}
console.log(arr.length);
console.log(arr);

arr.splice(2,3);
console.log(arr.length);
console.log(arr);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    展示结果：

    4

    四、函数

    ① 函数的定义和调用的先后顺序没有要求。
    ② 若函数有返回值，函数定义的时候不需要写返回类型。
    ③ 实参和形参之间的个数可以不匹配，但实际开发中，要求形参和实参个数要匹配。
    ④ 函数表达式：可以定义一个函数赋给一个变量，再通过变量来调用当前的函数。

    展示1

    函数的定义和调用的先后顺序没有要求。

    f1();
console.log("-----------------");
function f1() {
    console.log("hello");
}

f1();
console.log("-----------------");

function f2(x, y) {
    return x + y;
}

console.log(f2(1, 2));
console.log(f2("hello ", "world"));;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    展示结果：

    1

    展示2

    实参和形参之间的个数可以不匹配。

    function f1(x, y) {
    console.log("x:" + x);
    console.log("y:" + y);
    return x + y;
}

console.log(f1(10));
console.log("----------------------");
console.log(f1(10, 20, 100));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    展示结果：

    2

    展示3

    function add(a, b, c, d) {
    //若 a 不为0，那么就将 a 的值赋值给 a ；否则，将 0 赋值给 a
    a = a || 0;     
    b = b || 0;
    c = c || 0;
    d = d || 0;
    return a + b + c + d;
}

console.log(add(10));
console.log(add(10 + 20));
console.log(add(10 + 20 + 30));
console.log(add(10 + 20 + 30 + 40));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    展示结果：

    3

    展示4

    函数表达式：可以定义一个函数赋给一个变量，再通过变量来调用当前的函数。
    函数和一个普通变量的地位相同，可以相互赋值。此外，还可以省略函数名，这是常见的匿名函数写法。

    let add = function addFun(x, y) {
    return x + y;
}
console.log(add(10, 20));

//常见写法：匿名函数
let add2 = function (x, y) {
    return x + y;
}
console.log(add2(10, 20));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    展示结果：

    4

    作用域

    var 关键字的范围可以脱离大括号外，let 关键字的范围只能再大括号内。

    for(var i=0; i<10; i++) {

}
console.log(i);

for(let i=0; i<10; i++) {

}
console.log(i);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    展示结果：

    5

    五、对象

    在 JS 中，字符串、数值、数组、函数都是对象。

    创建对象

    1. 使用字面量创建对象 (最常用)

    let student = {
    name: 'Jack',
    age: 20,
    height: 175,
    f1:function() {
        console.log('hello');
    } 
};

console.log(student.name);
console.log(student['age']);
student.f1();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    展示结果：

    1

    注意：

    ① 使用 【. 成员】 来访问运算符来访问属性；. 可以理解成 “的”。
    ② 使用 [ ] 访问属性，此时属性需要加上引号。
    ③ 调用方法需要加上 ( )

    2. 使用 new Object 创建对象

    //和创建数组类似
let student = new Object(); 
student.name = "Rose";
student.height = 175;

    • 1
    • 2
    • 3
    • 4

    3. 使用构造函数创建对象

    function robot(name, type) {
    this.name = name;
    this.type = type;
    this.func = function() {
        console.log("超级变换形态");
    } 
}

let robot1 = new robot("卡布达", "1号机器人");
let robot2 = new robot("金龟次郎", "2号机器人");
let robot3 = new robot("飞翔机器人", "3号机器人");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    这种创建对象的方式类似于 Java 中创建实例，但并不完全相似，此外，这种方式用的少。形如这样的函数被称为 “构造函数”，JS 中的构造函数是可以独立存在的，这一点与 Java 不同。

    理解 JS 中的对象

    ① JS 没有 “多态”， JS 本身就是动态类型语言，在使用对象的某个方法时，本身也不需要对对象的类型做出明确区分，因此并不需要在语法层面上支持多态。

    ② JS 对象不区分 “属性” 和 “方法”。

    ③ JS 对象没有 private / public 等访问控制机制。

    ④ JS 对象没有 “继承”，继承本质就是 “让两个对象建立关联”，或者说，是让一个对象能够重用另一个对象的属性 / 方法，JS 中使用 “原型” 机制实现类似的效果。

    ⑤ 在 ES6 之前，JS 没有 “类” 的概念，对象其实就是 “属性” + “方法”。而类则相当于把一些具有共有的对象的属性和方法单独提取了出来，相当于一个模型一样，那么，通过这个模型就可以实例化对象了。在 JS 中的 “构造函数” 也能起到类似的效果，但并不完全具备类的一些特性。在 ES6 之后，也引入了 class 关键字，就能按照类似于 Java 的方式创建类和对象了，但用 class 的方式还是较少。

  • 相关阅读:
    Java 文件处理工具类FileUtils
    Ubuntu20安装docker实践纠正版
    对辊柱塞式成型机总体设计
    standard_init_linux.go:211: exec user process caused “exec format error“
    空间滤波-高斯低通滤波器
    SimpleDateFormat 多线程存在的问题及解决方案
    基于Zephyr平台nRF Connect SDK在Windows10下开发环境的快速搭建
    纵享丝滑！Cesium + ffmpegserver 生成高质量动态视频【逐帧生成】
    Vue中的Ajax①(配置代理)
    postgres 建立连接并删除记录
  • 原文地址：https://blog.csdn.net/lfm1010123/article/details/126173085