前端学习 JavaScript基础
Posted Daniel_Muei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习 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、字符串对象
略
数组对象和字符串对象就懒得写了，感兴趣的小伙伴儿可以自行搜索了解~ 另外，若文章有错误的地方，还望大佬指正！
以上是关于前端学习 JavaScript基础的主要内容，如果未能解决你的问题，请参考以下文章