前端学习 JavaScript基础
Posted SG_teresa
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基础的主要内容,如果未能解决你的问题,请参考以下文章
markdown Snippets.md是我最常用的HTML,CSS和JavaScript代码片段,用于前端Web开发