【前端学习】 JavaScript基础

引言

在HTML、CSS、JavaScript三者中，JavaScript就是灵魂，失去了JavaScript，HTML和CSS很难撑住场面。因此一个合格的前端工程师必须要熟练掌握JavaScript。

一、初识JavaScript

JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

1、JavaScript的作用

1、表单动态校验(密码强度检测)
2、网页特效
3、服务端开发(Node.js)
4、桌面程序(Electron)、App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)

2、JavaScript的写法

JavaScript的写法分为行内式、内嵌式、外部式。

（1）行内式：

<input type="button" value="点我试试" 
onclick="alert('Hello World')"/>

（2）内嵌式：

<script>
    alert('Hello  World!');
</script>

（3）外部式：

<script src = "my.js"></script>

3、JavaScript注释

单行注释使用 //

多行注释使用 /*...*/

二、JavaScript变量

1、声明变量

使用关键字 var 。

var num;

2、赋值

num=10;

3、变量的初始化

var num=10;

4、变量命名规范

JavaScript的命名规范跟Java一样。

a.由字母、数字、下划线、美元符号组成
b.严格区分大小写
c.不能以数字开头
d.不能是关键字、保留字
e.遵循驼峰命名法

三、数据类型

1、简单数据类型

简单数据类型	说明
Number	数字型，包含整型和浮点型
String	字符串型
Boolean	布尔值型
Undefined	var a时声明了变量a但是没有赋值，此时a = undefined
Null	空类型

（1）Number数字型
数字型进制：

在JS中八进制前面加0，十六进制前面加 0x
十六进制数字序列范围：0~9 以及 A~F

数字型范围：

最大值：Number.MAX_VALUE，值为：1.7976931348623157e+308
最小值：Number.MIN_VALUE，值为：5e-32
特殊值：Infinity 无穷大 ，-Infinity 无穷小 ，NaN 代表一个非数字
isNaN()：用来判断一个变量是否为非数字的类型。非数字型为true，数字型为false。

（2）String字符串型
字符串型可以是引号中的任意文本（单引号或双引号皆可）。

字符串转义符：

转义符	说明
\n	换行符
\\	斜杠
\’	单引号
\"	双引号
\t	tab缩进
\b	空格

字符串长度：

var str = '我是帅哥';
console.log(str.length); // 显示4

字符串拼接（使用 “+” 号）：字符串 + 任何类型 = 拼接之后的新字符串。

（3）布尔型Boolean
布尔型分为 true 和 false ，布尔型和数字型相加时，true 的值为1，false 的值为0。

console.log(true + 1) // 2
console.log(false + 1) // 1

（4）Undefined 和 Null 类型

一个变量声明后没有赋值会有一个默认值 undefined，若是与数字型或布尔型相加时，结果为 NaN。

var a;
console.log(a); // undefined
console.log("你好" + a); // 你好undefined
console.log(11 + a); // NaN
console.log(true + a); // NaN

若一个变量声明并赋值null，则里面存的值为空。

var b = null;
console.log(b); // null
console.log("你好" + b); // 你好null
console.log(11 + b); // 11
console.log(true + b); // 1

（5）获取变量类型（使用 typeof ）

  var num = 10;
  console.log(typeof num) //结果为 number

（6）数据类型转换

a.转换为字符串型

方式	说明
toString()	转成字符串
String()	强制转换
"+"号拼接字符串	和字符串拼接的结果都是字符串

b.转换为数字型

方式	说明
parseInt(String)	将string类型转成整型
parseFloat(String)	将string类型转成浮点型
Number()	将string类型强制转换为数值型
js隐式转换(与数字作运算)	利用算数运算隐式转换为数值型

c.转换为布尔型
代表空、否定的值会被转换为false，如空引号、0、NaN、null、undefined，其余值都会被转换为true。

或者使用Boolean()将其他类型转换为布尔型。

2、复杂数据类型

复杂数据类型，又叫做引用类型，存储对象存储的仅仅是地址（引用），因此又叫引用类型。

复杂数据类型是通过new关键字创建的对象，如Object，Array，Date等。

由于内容繁杂，就不在此赘述，感兴趣的小伙伴儿可以自行搜索~

四、运算符与流程控制

1、运算符（操作符）

（1）算数运算符

运算符	描述
+	加
-	减
*	乘
/	除
%	取余（模）

（2）递增和递减运算符

递增和递减运算符必须配合变量使用。

var  num = 10;
alert(++num + 10); // 21 先自加，后返回值
  
var  num1 = 10;
alert(10 + num1++); // 20 先返回原值，后自加 

（3）比较运算符

运算符	描述
<	小于号
>	大于号
>=	大于等于号
<=	小于等于号
==	判等号
!=	不等号
=== !===	全等 全不等

（4）逻辑运算符

运算符	描述
&&	逻辑与and
II	逻辑或or
!	逻辑非not

（5）赋值运算符

运算符	描述
=	直接赋值
+= -=	加减一个数后再赋值
*= /= %=	乘、除、取模后再赋值

2、流程控制

JS的流程控制与C++的流程控制几乎一样，包含顺序结构、分支结构和循环结构。

if语句、switch语句、for语句、while语句、do-while语句使用方法都是一样的，因此在此不赘述。

五、数组与函数

1、数组

JS中的数组和C++的数组也是一样的，都是存放元素的集合。

（1）创建数组
a.使用 new 关键字创建数组

var 数组名 = new Array([n]);
var arr = new Array(); // 创建了一个名为 arr 的空数组

b.使用数组字面量创建数组

var arr1 = ['1', '2', '3', '4'];
var arr2 = ['fan', true, 17.5];

（2）访问数组元素

var a = [1, 2, 3];
alert(a[1]); // 获取第二个元素

若访问数组时数组越界，返回值为undefined。

2、函数

函数的概念自不必说，用于封装代码。

（1）定义函数
通过使用 function 关键字定义函数：

function 函数名()
{
    ...
}

（2）调用函数

函数名(); // 函数声明后调用才会执行函数体代码	

（3）函数的参数
形参：函数定义时候，传递的参数
实参：函数调用时候，传递的参数

function 函数名(形参1, 形参2, 形参3...) 
{
    ...
}

函数名(实参1, 实参2, 实参3...);

当函数的形参和实参数量不匹配时：

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数大于形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

（4）arguments 的使用
当不确定有多少个参数传递的时候，可以用 arguments 来获取。JS中，arguments实际上是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，该对象中存储了传递的所有实参。

function fn() 
{
    console.log(arguments); // [1,2,3...]
    console.log(arguments[1]); // 2
    console.log(arguments.length); // 3
    
    // 按照数组的方式遍历argument  
}
fn(1, 2, 3);

例子：用伪数组实现求最大值。

 // 用伪数组实现求最大值
 function getMax() 
 {
    var max = arguments[0];
    for(var i = 1; i < arguments.length; i++) 
    {
        if(arguments[i] > arguments[0])
        {
            max = arguments[i];
        }
    }
    return max;
  }
  
  var result = getMax(1, 3, 77, 5, 85)
  console.log(result);

六、作用域

1、基本概念

一段代码中用到的名字并不总是有效可靠，而限定这个名字的可用性代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域：作用于所有代码执行的环境（整个 script 标签内部）或者一个独立的 JS 文件。

局部作用域：作用于函数内部的代码环境，就是局部作用域。因为跟函数有关系，所以也被称为函数作用域。

2、变量的作用域

全局变量：在全局作用域下声明的变量（在函数外部定义的变量）。

全局变量在代码的任何位置都可以使用。
在全局作用域下 var 声明的变量是全局变量。
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）。

局部变量：在局部作用域下声明的变量（在函数内部定义的变量）。

局部变量只能在函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量

全局变量和局部变量的区别：
全局变量在任何一个地方都可以使用，因此比较占内存。

局部变量只在函数内部使用，当其所在的代码块被执行时，才会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。

七、对象

1、基本概念

在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象由属性（事物的特征）和方法（事物的行为）组成。

为什么需要对象？
为了更好地存储一组数据，对象应运而生。对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

var obj = 
{
    "name":"xiaoming",
    "sex":"male",
    "age":18,
    "height":185
}

2、创建对象的方法

（1）用字面量创建对象

花括号内包含了对象的属性和方法，用键值对的形式表示。

var star = 
{
    name : 'ghost',
    age : 18,
    sex : '男',
    sayHi : function() 
    {
        alert('大家好');
    }
};

（2）用 new Object 创建对象

通过内置构造函数Object创建对象，此时ans变量已经保存了创建出来的空对象。

var ans = new Object();  
ans.name = 'ghost';
ans.age = 18;
ans.sex = '男；
ans.sayHi = function() 
{
    alert('大家好');
}

（3）利用构造函数创建对象

构造函数的封装格式：

function 构造函数名(形参1，形参2，形参3...) 
{
    this.属性名1 = 参数1;
    this.属性名2 = 参数2;
    this.属性名3 = 参数3;
    this.方法名 = 函数体;
}

var obj = new 构造函数名(实参1，实参2，实参3);

3、内置对象

JS中的对象分为3种：自定义对象 、内置对象、 浏览器对象。前面两种对象是 JS 基础内容，属于ECMAScript；第三个浏览器对象属于JS 独有的。内置对象可以理解为 JS 内部自带的对象。

4、Math对象

属性+方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入就近取整
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机值

5、日期对象

Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间。

var now = new Date();
var future = new Date('2022/10/1');

如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象。

6、数组对象

略

7、字符串对象

略

数组对象和字符串对象就懒得写了，感兴趣的小伙伴儿可以自行搜索了解~ 另外，若文章有错误的地方，还望大佬指正！