【JavaScript】基础语法笔记（对比Java）

【JavaScript】基础语法整理

• 初识
• • What is JavaScript?
  • What can JavaScript do?
  • 运行过程
  • JavaScript 的组成
• JavaScript 的书写形式
• • 行内式
  • 内嵌式
  • 外部式
• 输入输出
• 语法
• • 变量
  • • 基本用法
  • 动态类型
  • 基本数据类型
  • • 数字
    • undefined
    • null
  • 数组
  • • 创建数组
    • 获取数组元素
    • 增加 / 删除数组元素
  • 函数
  • • 语法格式
    • 参数个数
  • 对象
• 练习

初识 What is JavaScript?

1. 世界上最流行的编程语言之一
2. 是通过解释器运行的一个脚本语言
3. 主要在客户端（浏览器）上运行，也可以基于node.js在服务器端运行

What can JavaScript do?

• 网页开发
• 网页游戏开发
• 服务器开发（基于node.js）
• 桌面程序开发（Electron，VSCode）
• 手机app开发

此处要注意：
JavaScript 和 Java 的关系，
就像雷锋和雷峰塔一样；
就像印度和印度尼西亚一样；
就像黑客和博客一样，莫有半毛钱关系噢~

但是JavaScript 和 CSS、HTML可是有非常大的关系，他们仨可以一起称为前端三剑客，可见其对于前端的作用。

HTML：网页的结构（骨）
CSS：网页的表现（皮）
JavaScript：网页的行为（魂）

运行过程

浏览器分成渲染引擎和JS引擎：

渲染引擎：俗称内核，主要任务：解析html和CSS
JS引擎：即JS解释器，主要任务：读取JS代码，解析成二进制指令，执行指令。（典型：Chrome中内置的V8）

JavaScript 的组成

1. ECMAScript（简称ES）：核心语法
2. DOM API：浏览器提供的一组操作页面元素的API
3. BOM API：浏览器提供的一组操作浏览器窗口的API

JS光有语法，只能写一些基础的逻辑流程，如果想要完成更复杂的任务，就需要DOM API 和 BOM API 来完成和浏览器以及页面的交互。（如果是运行在服务器端的JS，则需要使用node.js 的 API，与DOM 和 BOM 关系不大）

JavaScript 的书写形式 行内式

直接嵌入到html元素内部

注：在JS中，字符串常量既可以使用单引号表示，也可以使用双引号表示。
html中推荐使用双引号，JS中推荐使用单引号

内嵌式

写到script标签中

由于本文中使用的是比较简单的基础语法，故使用内嵌式更多。

外部式

即写到单独的,js文件中，在html中通过script来引入。适合与代码量较大的情况。

输入输出

输入：prompt
输出：alert

注：后面的代码中就直接展示代码内容，不展示标签了。

前面弹窗的输出方式体验不好，作为程序员，我们当然要给自己开一个特别的后台，即控制台，因此我们也可以用过控制台输出的方式来查看输出。
输出：console.log

//向控制台输出日志
        console.log("这是一条日志");

保存项目后，在浏览器中打开开发者工具（或者按“F12”快捷键），出现如下界面：
·
选中控制台，就能看到输出啦~

console是js中的一个“对象”，即控制台对象
.表示取对象中的某个属性或者方法，可以理解为“的”
这里的console.log就可以理解成为：使用控制台对象的log方法

语法

虽然JavaScript和Java是两个东西，但是在语法层面上还有一些相似之处，因此本文主要是基于Java的基础来讲解JavaScript，主要讲JavaScript中不同于Java的内容，相同点就不再赘述了。

变量 基本用法

1. 创建变量

//创建变量
var name = 'zhangsan';
var age = 20;

var是js中用于定义变量的关键字
‘=’表示赋值
最后的分号；可以省略
若初始化的值是字符串，则需使用单引号或双引号

2. 使用变量

console.log(age);//读取变量内容
age = 30;//修改变量内容

示例：

var name = prompt("请输入姓名：");
var age = prompt("请输入年龄");
var score = prompt("请输入分数");
alert("您的姓名是：" + name + "n" +
      "您的年龄是：" + age + "n" +
      "您的分数是：" + score + "n");

动态类型

从上面的代码中，可以看到，js中并没有对整型、浮点型、字符串等类型分别使用不同关键字进行定义，而是使用同一个关键字var，因为js中的类型属于动态类型。

js中的变量类型是程序在运行过程中才确定的。并且随着程序的运行，变量的类型可能会发生改变。

var a = 10;//数字
a = "hehe";//字符串

基本数据类型

js中的几种内置类型：

• number - 数字，不区分整数和小数
• boolean - 真（true） 假（false）
• string - 字符串
• undefined - 表示未定义的值，只有唯一一个值，即undefined
• null - 表示空值

数字

1. 进制表示
   我们在使用二进制数字时，可以使用八进制或十六进制来表示二进制数字

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

一个八进制数字对应三个二进制数字
一个十六进制数字对应四个二进制数字

2. 特殊的数字值

• infinity - 无穷大，表示数字已经超过了js能表示的范围
• -infinity - 负无穷大，注意与无穷小进行区别（无穷小指无限趋近于0，值为 1 / infinity）
• NaN - not a number 表示当前结果不是一个数字

var max = Number.MAX_VALUE;
console.log(max*2);
console.log(-max*2);
console.log('hehe'-20);

undefined

如果一个变量没有被初始化过，则其结果的就是undefined，类型也为undefined类型。

var a;
console.log(a);
console.log(a + "10");//与字符串拼接
console.log(a + 10);//与数字运算

null

null表示当前的变量是一个“空值”

var b = null;
console.log(b + 10);
console.log(b + "10");

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

数组 创建数组

//创建数组
var arr = new Array();
//使用字面量方式创建
var arr1 = [];
var arr2 = [1, 2, 'haha', false];//数组中的内容称为“元素
//js中的数组不要求元素是相同类型

获取数组元素

//使用下标的方式访问数组元素（从0开始）
var arr3 = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr3);
console.log(arr3[0]);
console.log(arr3[1]);
console.log(arr3[2]);
arr3[2] = '小猫凯迪';
console.log(arr3);

console.log(arr3[3]);//undefined
console.log(arr3[-1]);//undefined

增加 / 删除数组元素

• 增加元素

//通过修改length新增
//相当于在末尾新增元素，新增的元素默认值为undefined
var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);

//通过下标新增
//如果下标超出范围赋值元素，则会给指定位置插入新元素
var arr2 = [];
arr2[2] = 10;
console.log(arr2);

//使用push进行追加元素
arr2.push(3);
console.log(arr2);

• 删除元素

//使用splice方法删除元素
var arr = [9, 5, 2, 7];
//从下标为2的位置开始，删除1个元素
arr.splice(2, 1);//参数分别表示：删除的起始位置，删除的元素个数
console.log(arr);

函数 语法格式

定义格式：

function 函数名(形参列表) {
            函数体
            return 返回值;
        }

调用格式：同Java
函数的定义和调用对先后顺序没有要求。

参数个数

实参和形参之间的个数可以不匹配。（但是实际开发中一般要求形参和实参个数匹配）

1. 如果实参个数比形参多，则多出来的参数不参与函数运算
2. 如果实参个数比形参少，则此时多出来的形参值为undefined

对象

在js中，字符串、数值、数组、函数都是对象，每个对象中包含若干的属性和方法

属性：事物的特征
方法：事物的行为

JavaScript 的对象和 Java 的对象在概念上基本一致但是具体的语法表现形式差别较大。

1. 使用字面量创建对象（常用）
   使用{ }创建对象 -

var a = {};//创建了一个空的对象
var student = {
    name: '蔡徐坤',
    height: 175,
    weight: 170,
    sayhello: function() {
        console.log("hello");
    }
};

• 使用{ }创建对象
• 属性和方法使用键值对的形式来组织
• 键值对之间使用，分割，最后一个属性后面的，可有可无
• 键和值之间使用：分割
• 方法的值是一个匿名函数

使用对象的属性和方法：

//1.使用.成员访问运算符来访问属性
console.log(student.name);
//2.使用[]访问属性，此时属性需要加上引号
console.log(student['height']);
//3.调用方法，记得机上（）
student.sayhello();

2. 使用new Object 创建对象

var student = new Object();//和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayhello = function() {
    console.log("hello");
}

console.log(student.name);
console.log(student['weight']);
student.sayhello();

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

基本语法：

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function() {

    }
}

var obj = new 构造函数名(实参);

• 在构造函数内部使用this关键字来表示当前正在构建的对象
• 构造函数的函数名首字母一般是大写的
• 构造函数的函数名可以是名词
• 构造函数不需要return
• 创建对象的时候必须使用new关键字
• this 相当于“我”

练习

最后来两道练习题，检查一下自己对JavaScript的语法的掌握情况，如果下面的两道题你都能轻松做出来，那么应该问题不大啦~~~~

1. 设计一个函数实现二分查找的逻辑

var arr = [5, 4, 3, 2, 1];
function binarySearch(arr, val) {
    var left = 0;
    var right = arr.length - 1;
    while(left < right) {
        var mid = parseInt((left + right) / 2);
        if (val == arr[mid]) {
            return mid;
        } else if (val < arr[mid]) {
            right = mid - 1;
        } else {
            left = mid + 1;
        }
    }
    return -1;
}

console.log(binarySearch(arr,3));
console.log(binarySearch(arr,0));

2. 基于 js 的语法，设计一个函数，实现一个冒泡排序和一个快速排序。在控制台输出排序结果

//冒泡排序
function bubbleSort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        var flg = false;
        for (var j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
                flg = true;
                var tmp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = tmp;
            }
        }
        if (flg == false) {
            return;
        }
    }
}

//快速排序
function pivotIndex(arr, start, end) {
    var left = start;
    var right = end;
    var pivot = arr[left];
    while ( left < right) {
        while (left < right && arr[right] >= pivot) {
            right--;
        }
        arr[left] = arr[right];
        while (left < right && arr[left] <= pivot) {
            left++;
        }
        arr[right] = arr[left];
    }
    arr[left] = pivot;
    return left;
}

function quickSort2(arr, start, end) {
    if (start == end) {
        return;
    }
    if (start > end) {
        return;
    }
    var i = pivotIndex(arr, start, end);
    quickSort2(arr,start,i-1);
    quickSort2(arr,i+1,end);
}

function quickSort(arr) {
    quickSort2(arr,0,arr.length-1);
}

关于js的语法就介绍到这里啦~
以上的叙述很简略，因为js的语法和Java还是有很多相似之处的，相同的地方本文就不再赘述了。作为一名后端猿，有更多不清楚的地方，咱们即用即查就行啦~~~~

前段时间因为学业繁忙，把博客落下了很多，现在写博客更多作为巩固和记忆，如果有写得不好的地方，请各位大佬轻喷，我会继续努力的！

如果文章对你有帮助，记得一键三连，让我看到你哦~~~~