JavaScript学习之路---js基础（基本语法，认识js）_javascript 语言和 java 语言的关系紧密,有着十分类似的语法结构。-CSDN博客

本文链接：https://blog.csdn.net/qq_57480977/article/details/126378357

JavaScript基础

认识JavaSceipt

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
JavaScript特点
- 向HTML页面中添加交互行为
- 脚本语言，语法和Java类似
- 解释性语言，边执行边解释

JavaScript的组成：

在这里插入图片描述

JavaSceipt基本结构：

<script type="text/javascript">
    <!—
          JavaScript 语句;
    —>
</script >

JavaSceipt执行流程：

在这里插入图片描述

JavaScript的引用方式：

使用<script>标签
外部JS文件

<script src="export.js"  type="text/javascript"></script>

直接在HTML标签中

<input name="btn" type="button" value="弹出消息框"   
   onclick="javascript:alert('欢迎你');"/>

示例：

……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
    document.write("初学JavaScript");
    document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>

<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

js的语法：

在这里插入图片描述

变量的使用

变量的作用是给某一个值或对象标注名称。比如我们的程序中有一个值123，这个值我们是需要反复使用的，这个时候我们最好将123这个值赋值给一个变量，然后通过变量去使用123这个值。

变量的声明：使用var关键字声明一个变量。

var a;

变量的赋值：使用=为变量赋值。

a = 123;

声明和赋值同时进行：

var a = 123;

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用！！！

数据类型：

JavaScript中一共有5种基本数据类型：

字符串型（String）
数值型（Number）
布尔型（Boolean）
undefined型（Undefined）
null型（Null）

这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。
示例：
在这里插入图片描述

String：

String用于表示一个字符序列，即字符串。字符串需要使用单引号或双引号括起来。

方法名称	说明
charAt(index)	返回在指定位置的字符
indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组
length	返回字符串的长度 var str=“this is JavaScript”; 示例：var strLength=str.length; //长度是18

Number：

Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。

最大值：+1.7976931348623157e+308
最小值：-1.7976931348623157e+308
0以上的最小值：5e-324

特殊的数字：

Infinity：正无穷
-Infinity：负无穷
NaN：非法数字（Not A Number）

其它的进制：

二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持
八进制：0 开头表示八进制
十六进制：0x 开头表示十六进制

使用typeof检查一个Number类型的数据时（包括NaN 和 Infinity），会返回"number"。

数组：

创建数组：

同类型有序数组创建：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

不同类型有序数组创建：

var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];

在这里插入图片描述

数组的常用方法：

借鉴：
添加链接描述

方法名称	说明
join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
sort()	对数组排序
push()	向数组末尾添加一个或更多元素，并返回新的长度
pop()	该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
length	设置或返回数组中元素的数目
unshift()	该方法向数组开头添加一个或多个元素，并返回新的数组长度
shift()	该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
concat()	该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响
reverse()	该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组
splice()	该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
slice()	该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

push()方法演示：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");
console.log(arr);
console.log(result);

在这里插入图片描述

pop()方法演示：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.pop();
console.log(arr);
console.log(result);

在这里插入图片描述

unshift()方法演示：该方法向数组开头添加一个或多个元素，并返回新的数组长度

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.unshift("牛魔王", "二郎神");
console.log(arr);
console.log(result);

在这里插入图片描述

shift()方法演示：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.shift();
console.log(arr);
console.log(result);

在这里插入图片描述

forEach()方法演示：该方法可以用来遍历数组

forEach()方法需要一个函数作为参数，像这种函数，由我们创建但是不由我们调用的，我们称为回调函数。数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以来定义形参，来读取这些内容，浏览器会在回调函数中传递三个参数：

第一个参数：就是当前正在遍历的元素
第二个参数：就是当前正在遍历的元素的索引
第三个参数：就是正在遍历的数组
注意：这个方法只支持IE8以上的浏览器，IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach()，还是使用for循环来遍历数组。

var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.forEach(function (value, index, obj) {
    console.log(value + " #### " + index + " #### " + obj);
});

在这里插入图片描述

slice()方法演示：该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

参数：

第一个参数：截取开始的位置的索引，包含开始索引
第二个参数：截取结束的位置的索引，不包含结束索引，第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
注意：索引可以传递一个负值，如果传递一个负值，则从后往前计算，-1代表倒数第一个，-2代表倒数第二个。

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.slice(1, 4);
console.log(result);
result = arr.slice(3);
console.log(result);
result = arr.slice(1, -2);
console.log(result);

在这里插入图片描述

splice()方法演示：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

参数：

第一个参数：表示开始位置的索引
第二个参数：表示要删除的元素数量
第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.splice(3, 2);
console.log(arr);
console.log(result);
result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");
console.log(arr);
console.log(result);

在这里插入图片描述

concat()方法演示：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
console.log(result);

在这里插入图片描述

join()方法演示：该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.join("@-@");
console.log(result);

在这里插入图片描述

reverse()方法演示：该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组

var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.reverse();
console.log(arr);

在这里插入图片描述

sort()方法演示：该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序

var arr = ["b", "c", "a"];
arr.sort();
console.log(arr);

在这里插入图片描述

注意：即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。

var arr = [1, 3, 2, 11, 5, 6];
arr.sort();
console.log(arr);

在这里插入图片描述

我们可以自己来指定排序的规则，我们可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边，浏览器会根据回调函数的返回值来决定元素的顺序，如下：

如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个等于0的值，则认为两个元素相等，也不交换位置
经过上边的规则，我们可以总结下：

如果需要升序排列，则返回 a-b
如果需要降序排列，则返回 b-a

var arr = [1, 3, 2, 11, 5, 6];
arr.sort(function (a, b) {
    return a - b;
});
console.log(arr);

在这里插入图片描述

typeof运算符：

用来检查变量的返回类型：

在这里插入图片描述

运算符：

在这里插入图片描述
逻辑运算符的区别：

&& 与：&&可以对符号两侧的值进行与运算并返回结果，运算规则如下：
- 两个值中只要有一个值为false，就返回false，只有两个值都为true时，才会返回true
- JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
- 非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值
|| 或：||可以对符号两侧的值进行或运算并返回结果，运算规则如下：
- 两个值中只要有一个true，就返回true，只有两个值都为false，才会返回false
- JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
- 非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值
! 非：!可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作，true变false，false变true，运算规则如下：
- 如果对一个值进行两次取反，它不会变化
- 非布尔值时：先会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来将一个其它的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样
  比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

比较运算符的区别：

使用 == 来做相等运算
- 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较
使用 != 来做不相等运算
- 不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
使用 === 来做全等运算
- 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false
使用 !== 来做不全等运算
- 用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

逻辑控制语句：

控制符：

break：结束最近的一次循环，可以在循环和switch语句中使用。
continue：结束本次循环，执行下一次循环，只能在循环中使用

条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句，最基本的条件语句：

if…else
switch…case

类似java中的语句

if…else：

示例：

if(条件)
{
   //JavaScript代码;
}
else
{
  //JavaScript代码;
}

多层嵌套：

if (age < 18) {
    //JavaScript代码;
} else if (age == 18) {
    //JavaScript代码;
} else {
    //JavaScript代码;
}

switch：

switch (表达式)
{    
	case 常量1 : 
       //JavaScript代码;
		break;
     case 常量2 : 
 	  //JavaScript代码;
 		break;
         ...
	 default : 
       //JavaScript代码;
}

循环语句：

循环语句和条件语句一样，也是基本的控制语句，只要满足一定的条件将会一直执行，最基本的循环语句：

while
do…while
for

while

while(条件表达式){
    语句...
}

do…while

do{
    语句...
}while(条件表达式);

for：

for(初始化表达式 ; 条件表达式 ; 更新表达式){
    语句...
}

JavaScript常用方法：

常用的输入/输出：

alert()

alert("提示信息");

弹出提示信息
在这里插入图片描述

prompt()

prompt("提示信息", "输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");

在这里插入图片描述

函数：

函数的概念：

函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用
函数分类：系统函数和自定义函数

常用系统函数：

在这里插入图片描述

自定义函数：

语法：
函数声明方式：

function 函数名([参数1,参数2,参数3,…]){
     //JavaScript语句
     [return 返回值]
}

函数表达式方式：

var 函数名  = function([形参1,形参2,...,形参N]) {
    语句....
}

函数的调用：

直接调用函数名：

// 函数声明
var sum = function (num1, num2) {
    var result = num1 + num2;
    console.log("num1 + num2 = " + result);
}

// 函数调用
sum(10, 20);

与表单元素一起使用：

事件名＝ "函数名( )" ;

示例：

function study( ){
        for(var i=0;i<5;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }

单击此按钮时，调用函数study( )，执行函数体中的代码：

<input name="btn" type="button"
   value="显示5次欢迎学习JavaScript"  onclick="study( )" />

也可以配合输入框来使用：
示例：

function study(count){
        for(var i=0;i<count;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }

单击此按钮时，调用函数study (count )，执行函数体中的代码

<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
  onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />

事件：

在这里插入图片描述

对象：

对象的创建：

示例：
第一种方式：

var person = new Object();
person.name = "张三";
person.age = 18;
console.log(person);

第二种方式，推荐使用：

var person = {
    name: "张三",
    age: 18
};

对象的访问：

对象.属性名

示例：
person.name;

删除属性：

delete 对象.属性名

示例：

var person = new Object();
person.name = "张三";
person.age = 18;
console.log(person);

delete person.name
console.log(person);

对象的遍历：

for (var 变量 in 对象) {

}

示例：

var person = {
    name: "小明",
    age: 18
}

for (var personKey in person) {
    var personVal = person[personKey];
    console.log(personKey + ":" + personVal);
}