前端学习 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布尔值型
Undefinedvar 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换行符
\\\\斜杠
\\’单引号
\\"双引号
\\ttab缩进
\\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、NaNnullundefined,其余值都会被转换为true

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

2、复杂数据类型

复杂数据类型,又叫做引用类型,存储对象存储的仅仅是地址(引用),因此又叫引用类型。

复杂数据类型是通过new关键字创建的对象,如ObjectArrayDate等。

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

四、运算符与流程控制

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基础的主要内容,如果未能解决你的问题,请参考以下文章

web前端开发JQuery常用实例代码片段(50个)

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

markdown Snippets.md是我最常用的HTML,CSS和JavaScript代码片段,用于前端Web开发

从零开始学习前端JAVASCRIPT — 5JavaScript基础ES5

前端JS基础