JavaScript基础语法的简单了解

JavaScript基础语法的简单了解
目录

1、JS与HTML、CSS之间的关系

JavaScript 的能做的事情:

JS运行过程

2、JS前置知识

2.1、JS的书写形式

2.2、输入输出

3、JS语法

 3.1、变量的使用

基本用法

3.2、理解动态类型

3.3、基本数据类型

3.3.1、number数字类型

3.3.2、string字符串类型

3.3.3、Boolean布尔类型

3.3.4、undefined未定义数据类型

3.3.5、null空值类型

3.4、运算符

3.5、条件语句、循环语句

3.6、数组

3.6.1、数组的基本操作

3.6.2、越界访问数组

3.6.3、插入删除替换元素

3.7、函数

3.8、对象

1、JS与HTML、CSS之间的关系
- HTML：网页的结构（骨）
- CSS：网页的表现（皮）
- JS：网页的行为（魂）
通俗解释为：HTML就是一只刚出生的小鸟，毛都没有长出来着，而CSS则是小鸟已经长出羽毛了，甚是好看，而JS则是小鸟已经学会翱翔，会飞了，可以动了

JavaScript 的能做的事情:
- 网页开发(更复杂的特效和用户交互)
- 网页游戏开发
- 服务器开发(node.js)
- 桌面程序开发(Electron, VSCode 就是这么来的)
- 手机 app 开发
JS运行过程
- 编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
- 双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
- 浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)
- 得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)
注：
- 浏览器分成渲染引擎 + JS 引擎.
- 渲染引擎: 解析 html + CSS, 俗称 "内核"
- JS 引擎: 也就是 JS 解释器. 典型的就是 Chrome 中内置的 V8
- JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行.
2、JS前置知识

2.1、JS的书写形式

2.1.1、行内式

直接嵌入到HTML元素内部

例如：
```
<input type="button" value="按钮" onclick="alert('hello js')">
```
效果：

注：
- JS 中字符串常量可以使用单引号表示, 也可以使用双引号表示.
- HTML 中推荐使用双引号, JS 中推荐使用单引号
2.1.2、内嵌式

写到script标签中
```
  <script>
        alert('hello js');
  script>
```
2.1.3、外部式

写在单独的.js文件中

注：

使用alert显示弹窗提示是一种很常见的交互方式，但是使用js来进行输出，使用console.log更为常见。毕竟使用弹窗了打印，毕竟比较烦，用户看了体验也很不好。
在浏览器开发者工具中，有一个控制台，在这个控制台上就能使用js的输出语句，看到输出的内容，如果出现了语法错误控制台上也会有提示。

如下：
```
<script>
   console.log('haha');
script>
```
2.2、输入输出

输入：prompt——弹出一个输入框
```
prompt("输入姓名：");
```
输出：alert——弹出一个警示对话框，输出结果
```
alert("hello");
```
在控制台打印日志（供程序员看）

3、JS语法

3.1、变量的使用

基本用法

创建变量（定义变量、变量声明、变量初始化）
```
var name = "小龙";
let age = 19;
```
var和let都是JS中创建变量的关键字，更建议使用let(var的坑比较多，这里咱们后端的程序员就不必深究了）

注：
- =的两侧建议有一个空格
- 每个语句结尾建议使用一个英文的分号（可以省略）
- 初始化的值如果是字符串，需要用单引号或者双引号引起来
- 初始化的值如果是数字，可直接赋值
使用变量
```
console.log(age);//读取内容
age = 30;//修改变量内容
```
3.2、理解动态类型

1、JS的变量类型是程序员在运行过程中才确定的（运行到的语句才可以确定类型）
```
let a = 10;//数字
let b = "haha";//字符串
```
2、随着程序运行，变量的类型也会发生改变
```
let a = 10;//数字
a = "haha";//字符串
```
3.3、基本数据类型
- number: 数字. 不区分整数和小数.
- boolean: true 真, false 假.
- string: 字符串类型.
- undefined: 只有唯一的值 undefined. 表示未定义的值.
- null: 只有唯一的值 null. 表示空值.
3.3.1、number数字类型

JS中不区分整数和浮点数，统一用“数字类型”来表示

数字进制表示
```
let a = 07;//八进制整数，0开头
let b = 0xa;//十六进制整数，0x开头
let c = 0b10;//二进制整数，以0b开头
```
特殊的数字值
- NaN，表示非数字值，一般字符串与数字进行非加法运算会出现，为什么加法不会出现，因为+也能表示字符串拼接，可以使用isNaN函数来判断计算结果是否是NaN。
- Infinity，无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围。
- -Infinity，负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围。
```
var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);
```
3.3.2、string字符串类型

基本规则

字符串字面值需要使用引号引起来，单、双引号均可

如何解决字符串中已经包含了字符串？
```
let msg = "My name is "zhangsan"";    // 出错
let msg = "My name is \"zhangsan\"";  // 正确, 使用转义字符. \" 来表示字符串内部的引
号. 
let msg = "My name is 'zhangsan'";    // 正确, 搭配使用单双引号
let msg = 'My name is "zhangsan"';    // 正确, 搭配使用单双引号
```
转义字符

有些字符不方便直接输入：
- \n
- \\
- \'
- \"
- \t
求长度

使用String的length属性即可（单位：字符）
```
let a = 'hehe';
console.log(a.length);
```
字符串拼接

使用+进行拼接
```
let a = "my name is ";
let b = "小龙";
console.log(a + b);
```
数字与字符串拼接
```
let c = "my score is ";
let d = 120;
console.log(c + d);
```
3.3.3、Boolean布尔类型

Boolean 参与运算时当做 1 和 0 来看待 .
```
console.log(true + 1);
console.log(false + 1)
```
3.3.4、undefined未定义数据类型

一个变量没有被初始化过，结果就是undefined，是undefined类型
```
let a;
console.log(a);
```
undefined和字符串进行相加，结果进行字符串拼接
```
console.log(a + "10");  // undefined10
```
endefined和数字进行相加，结果为NaN (not a number)
```
console.log(a + 10);
```
3.3.5、null空值类型

null表示当前的变量是一个“空值”
```
var b = null;
console.log(b + 10);    // 10
console.log(b + "10");  // null10
```
3.4、运算符

js的运算符与其他语言的运算符基本上一模一样，就不多说了。

但是还是有不同的部分的，主要就是比较相等的运算符。
==与!=：表示比较两个变量的值是否相等。
===与!==：表示比较变量的值与类型是否相等。
```
let a = 10;
let b = "10";
 
console.log(a == b);//true
console.log(a === b);//false
```
逻辑运算符也和其他语言有区别，区别主要在运算返回的值并不是true和false，这个值到底是什么，其实与短路效应是有关的。
- &&：表示且，比如a&&b，如果表达式a为假，则结果为a的值，如果表达式a为真，则结果为b的值。
- ||：表示或，比如c||d，如果表达式c为真，则结果为c的值，如果表达式c为假，则结果为d的值。
```
let x = null;
if (x == null) {
    x = 0;
}
 //相当于
 x = x || 0;
```
3.5、条件语句、循环语句

条件语句、循环语句没什么好说的，和Java一样

3.6、数组

3.6.1、数组的基本操作

创建数组
```
//1
let arr1 = new Array();
//2
let arr2 = [];
//3
let arr3 = [1,2,3,4,5,6,7,8,9,0];
//4
let arr4 = [1,"sss","777",2.33,null,undefined];
//5
let arr5 = [12,[],[1,3,5,null,"sss"],false,true];
```
由于js里面的类型为弱类型，基本上什么类型的值都能赋值，所以js的数组什么都可以放，可以理解为java的Object数组，但不完全相同。

输出数组：
```
//基本语法：
console.log(数组名);
```
```
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);
```
```
let arr = [1,2,3,4,5,6,7,8,9,0];
for (let  i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
```
3.6.2、越界访问数组

js的数组是可以越界访问的，得到的结果是undefined。
```
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr[100]);
console.log(arr[-1]);
```
结果：

越界修改数组的值，那么此时数组的长度就会发生改变
```
let arr = [1,2,3,4,5,6,7,8,9,0];
arr[100] = 22;
console.log(arr);
```
结果：

我们发现当越界将下标为100的值修改为22时，数组长度变成了101。中间填充的值均为undefined。

但是你的下标为负整数时，数组的长度并不会发生改变，毕竟你的下标格式都不合法，但是会生成一个键值对添加到数组中，那么此时对于js中的数组，更像是对象，而数组和多出来的键值对可以理解为该对象里面的属性，同理当下标如果是字符串，浮点数等，也是相同的情况，既然是属性你也可以使用.去访问。说是数组，更像是map
```
let arr = [1,2,3,4,5,6,7,8,9,0];
arr[-1] = -1;
arr["hello"] = 123;
console.log(arr);
```
结果：

长度改小，会优先保留前面的数据，你再改回来，数据也不会回来的。
```
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);
arr.length = 5;
console.log(arr);
arr.length = 10;
console.log(arr);
```
结果：

3.6.3、插入删除替换元素

可以使用push方法进行数组元素的追加，即在数组的最后面插入元素。
```
let arr = [];
 
for (let i = 0; i < 10; i++) {
    arr.push(i+1);
}
console.log(arr);
```
我们可以使用splice方法来对数组进行，基本语法：
```
array.splice(index, howmany, item1, ....., itemX);
```
```
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//删除前
arr.splice(2, 3);//表示从下标2进行删除，删除3个元素
console.log(arr);
```
结果：

它也可以实现元素的替换。
```
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//替换前
arr.splice(2, 3, 666, 777, 888);//表示从下标2进行替换，替换3个元素
console.log(arr);
```
结果：

运用巧妙一点，也能在某一位置插入元素。
```
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//插入前
arr.splice(2, 0, 666);//表示在2下标后插入一个66
console.log(arr);
```
结果：

当然由于js数组是可以越界的，所以也可以使用下标的方式在数组尾插元素。
```
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//插入前
arr[arr.length] = 66;
console.log(arr);
```
结果：

3.7、函数

JavaScript的函数还是挺有特点的相比于java的方法，它不用指定返回值类型，有就返回，没有就不返回，它需要使用function关键字来表示它的身份，即函数，它的形参列表不需要返回值，它是JavaScript家族的一等公民，与变量平起平坐。

函数的定义、函数声明、函数调用：
```
//函数的定义、函数声明
function func(形参列表,不需要声明类型,毕竟js是弱类型的语言) {
        //函数语句块
        return 返回值;
}
//函数调用
函数名(实参列表);//无返回值
let varname  = 函数名(实参列表);//有返回值
```
调用可以出现在定义之前：
```
hello();
hello();
function hello() {
    console.log("hello");
}
hello();
hello();
```
结果：

由于JavaScript是弱类型语言，函数的变量类型可以随便放，所以也不需要重载，泛型。
```
function add(a, b) {
    return a + b;
}
console.log(add(10,20));
console.log(add("10","20"));
console.log(add(1024,"hello"));
console.log(add(true,false));
console.log(add(undefined,20));
console.log(add(undefined,"20"));
```
结果：

其实吧，形参有那么多，你少传一点也可以，只不过没有收到传入参数值的变量默认值为undefined，此时进行数学运算值为NaN。
```
function add(a,b,c,d,e,f,g) {
    return a + b + c + d + e + f + d + g;
}
console.log(add(10, 20));
console.log(add(10, 20, 30));
console.log(add(10, 20, 30, 40));
console.log(add(10, 20, 30, 40, 50));
console.log(add(10, 20, 30, 40, 50, 60));
console.log(add(10, 20, 30, 40, 50, 60, 70));
```
结果：

加个判断，将未初始化的值，赋值为0，就能进行计算了。
```
function add(a,b,c,d,e,f,g) {
    // if(a === undefined) {
    //     a = 0;
    // }
    // //相当于
    // a = a || 0;
    a = a || 0;
    b = b || 0;
    c = c || 0;
    d = d || 0;
    e = e || 0;
    f = f || 0;
    g = g || 0;
    return a + b + c + d + e + f + d + g;
}
console.log(add(10, 20));
console.log(add(10, 20, 30));
console.log(add(10, 20, 30, 40));
console.log(add(10, 20, 30, 40, 50));
console.log(add(10, 20, 30, 40, 50, 60));
console.log(add(10, 20, 30, 40, 50, 60, 70));
```
结果：

参数多了，也没什么事，前面已经成功传入的参数，会正常进行运算。
```
function add(a,b,c,d,e,f,g) {
    // if(a === undefined) {
    //     a = 0;
    // }
    // //相当于
    // a = a || 0;
    a = a || 0;
    b = b || 0;
    c = c || 0;
    d = d || 0;
    e = e || 0;
    f = f || 0;
    g = g || 0;
    return a + b + c + d + e + f + d + g;
}
console.log(add(10, 20, 30, 40, 50, 60, 70));
console.log(add(10, 20, 30, 40, 50, 60, 70, 80, 90));//参数传多了，多传的参数接收不到
```
结果;

函数就像普通变量一样，可以赋值给变量，然后该变量可以调用该函数，相当于C语言中的函数指针，所以js中的函数也被叫做“一等公民”。
```
function print(s) {
    console.log(s);
}
let p = print;
p("hello");
//typeof获取类型
console.log(typeof p);
```
结果：
```
//合二为一的写法
let p = function print(s) {
    console.log(s);
}
p("hello");
```
结果：

可以省略函数名，然后使用变量接收匿名函数。
```
//匿名函数赋值调用，常用
let p = function (s) {
    console.log(s);
}
p("hello");
```
结果：

在js中，函数里面是可以定义函数的，而且可以无限的嵌套，这与java不同。

在JavaScriptES6之前，作用域只有全局作用域和函数作用域，并没有块级作用域，而在ES6之后引入了let，也有了块级作用域，定义的在大括号内部的变量在大括号外面是无法访问的。因为js中的函数可以嵌套定义，对于里层函数的变量，如果在函数本体找不到就会一级一级向上查找。
```
let num = 10;
function func1() {
    function func2 () {
        function func3 (){
            console.log(num);
        }
        func3();
    }
    func2();
}
func1();
```
结果：
```
let num = 10;
function func1() {
    let num = 20;
    function func2 () {
        let num = 30;
        function func3 (){
            console.log(num);
        }
        func3();
    }
    func2();
}
func1();
```
结果：

3.8、对象

js的对象里面的是属性是通过键值对的方式来创建的。

方式一：直接为对象添加属性来进行创建。
```
let 变量名 = {
	//属性
	键:值,
	...,
	//函数
	键:function (){
		//函数语句块
	},
	...,
	//最后一个属性逗号可以省略
}
```
举例：
```
let animal = {
    name: "小鸭子",
    age: 18,
    
    running: function (){
        console.log(this.name + "会奔跑");
    },
    swimming:function () {
        console.log(this.name + "会游泳")
    }
}
console.log(animal.name);
console.log(animal.age);
animal.swimming();
animal.running();
```
结果：

方式二：new Object()，然后添加属性，不推荐！
```
let animal = new Object();
animal.name = "小鸭子";
animal.age = 18;
animal.running = function (){
    console.log(animal.name + "会奔跑");
}
animal.swimming = function (){
    console.log(animal.name + "会游泳");
}
console.log(animal.name);
console.log(animal.age);
animal.swimming();
animal.running();
```
结果：

方式三：使用this，并使用类似与java构造方法的方式创建对象。
```
function 构造函数名(形参列表) {
	this.属性 = 值;
	this.函数 = function...;
}
//创建
let obj = new 构造方法名(实参);
```
举例：
```
function animal() {
    this.animal;
    this.age;
    this.swimming = function () {
        console.log(this.name + "会游泳");
    }
    this.running = function() {
        console.log(this.name + "会奔跑");
    }
}
 
let ani = new animal();
ani.name = "小鸭子";
ani.age = 18;
console.log(ani.name);
console.log(ani.age);
ani.swimming();
ani.running();
```
结果:

下期见！！！

作为一个致力于后端开发的程序员来说，这些只是作为一个简单的了解，所以不是很全~
相关阅读:
0.泛型基础学习
 HPLC电力载波灯控的节能照明智慧照明方案
 WPS ppt怎么设置自动播放？wps ppt如何设置自动放映？
一.node的文件系统；二.node的数据流(Stream接口)；
Java比较两个日期的间隔天数（案例详解）
iPhone的实时照片不能直接查看，但有不少替代方法可以查看
 SpringBoot学习笔记（三）自动装配
 红杉官网已删长文：伴随SBF一路走来的救世主情结（上）
你了解的SpringCloud核心组件有哪些？他们各有什么作用？
flink状态后端和检查点的关系
原文地址：https://blog.csdn.net/LYJbao/article/details/127736484

1、JS与HTML、CSS之间的关系

JavaScript 的能做的事情:

JS运行过程

2、JS前置知识

2.1、JS的书写形式

2.2、输入输出

3、JS语法

3.1、变量的使用

基本用法

3.2、理解动态类型

3.3、基本数据类型

3.3.1、number数字类型

3.3.2、string字符串类型

3.3.3、Boolean布尔类型

3.3.4、undefined未定义数据类型

3.3.5、null空值类型

3.4、运算符

3.5、条件语句、循环语句

3.6、数组

3.6.1、数组的基本操作

3.6.2、越界访问数组

3.6.3、插入删除替换元素

3.7、函数

3.8、对象