JavaScript基础知识梳理

安乃玩家

于 2022-12-12 18:14:02 发布

阅读量162

点赞数

分类专栏：前端文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/jbkouohb/article/details/128291086

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS基础语法

由网景（Netscape）公司推出
是一门面向对象的，清亮的，弱类型解释型脚本语言。
弱类型：没有数据的限制。
解释型：无需编译，只要是特定的单词，浏览器就可以翻译。

JS写在哪里

1. 写在某个标签当中

例如：

<button onclick="document.write('hello JS')">点击一下 </button>

2.写在Script标签当中

script 标签可以放在内容当中，标签通常写在<head></head>中或者body结束之前
自己写的话最好写在页面中

<script></script>

3.写在单独的文件当中，在通过script标签导入

JS中的输出语句

<!-- 通过浏览器自带的消息提示框输出 -->
		<button onclick="alert('hello javaScript')">点击一下</button>

<!-- 通过控制台输出日志信息 -->
		<button onclick="console.log('hello JavaScript')">再点击一下</button>

<!-- 将输出类容放到页面上 -->
		<button onclick="document.write('hello JS')">点击一下 </button>

JS中的注释

1.单行注释

//单行注释
<!--多行注释-->

/**/

JS的组成

ECMAScript 是一种标准

ECMAScript定义了JavaScript的基本语法。

ECMAScript核心语法

** 数据类型 **

原始类型

JS中的原始类型	说明
数值型number	整数，小数为数值型
字符串型string	单双引号的都是字符串类型
布尔型boolean	true/false
空类型null	通过null赋值
未定义类型undefined	未声明或没有值

引用类型

对象，数组，函数等

定义类型

var name = "张三";
		var age;
		age=18;
		console.log("name:"+name+"age:"+age);

运算符

JS中的boolean可以用true/1，false/0来表示；

所以可以将true和false当作数来运算

算术

+ - * / %
除了+号外 ，其余都可以做字符运算

关系

> < >= <= == !=关系符号得到的结果是 true 或者 false
'==='比较的是两边的类型和内容是否相同，同为true才是true
'!=='比较值和数据类型

逻辑

&& || |

赋值和符合数值

= += -= *= /= %=
如a*=b+c相当于a=a(b+c)

自增自减

++ --

符号在前，先+1或-1后使用 反之；

条件

表达式1？表达式2：表达式3

//java中的while(true)在这里可以写作
while(1){
//表达式
}

条件语句

if语句

单分支语句
```
if(判断条件){
...
}
```
双分支语句
```
if(条件语句){
...
}else{
...
}
```

多分支语句

if(条件语句）{
...
}else if(条件语句){
...
}...
else{
...
}

嵌套语句

if(条件){
if(条件语句）{
...
}
}

switch语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

注意：JS里的switch里的case后的数据类型可以是不同的，java中的必须是相同类型的case语句；

循环语句

for循环

循环代码块一定的次数

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

for/in循环

循环遍历对象的属性

while (条件)
{
    需要执行的代码
}

while循环

当指定的条件为true时循环指定的代码块

do
{
    需要执行的代码
}
while (条件);

do/wihle循环

同while,指定true时执行指定代码块类容；

javaScript break和continue语句

break

跳出当前循环体，会执行接下来的代码

for (i=0;i<10;i++)
{
    if (i==3)
    {
        break;
    }
    x=x + "The number is " + i + "<br>";
}

continue

它会中断当前循环体，直接结束本次循环，继续下一次迭代循环

while (i < 10){
  if (i == 3){
    i++;    //加入i++不会进入死循环
    continue;
  }
  x= x + "该数字为 " + i + "<br>";
  i++;
}

JS中的数组

js中的数组类似于java中的集合数组

他是一个可变的数组且可以存放不同类型

定义数组的方式

var 数组名 = new Array();
var 数组名 = [];

默认没有初始化的位置，用undefined填充
最大下标决定了数组长度
可以保存不同类型的数据

遍历数组的两种方式

for循环遍历

for(var i=0;i<arr.length;i++){
   console.log(arr[i]);
}

增强for循环

for(var index in list){
   console.log(list[index])
}

初始化数组

var list =[123,"asd",true,"qwe"];
var list = new Array(123,"asd",true,"qwe"];

数组常用方法

以下方法在调用时都会影响数组本身

方法名	作用	返回值
sort()	将数组升序排序	排序后的数组
reverse()	将数组的元素倒序保存	倒叙后的数组
pop()	移除最后一个元素	被去除的元素
push(参数)	添加一个元素到数组的末尾	更新后的数组的长度
unshift()	添加元素到数组头	更新后的数组的长度
shift(参数)	移除数组头的元素	被移除的元素
fill(参数)	使用指定参数填充数组	填充后的数组
splice(index)	从指定位置分割元素	截取后的新元素
splice(index , length)	指定位置长度的截取数组	截取到的数组

以下方法不会影响原数组

方法名	作用	返回值
indexOf(元素)	得到某个元素第一次出现的索引	索引
lastindexOf(元素)	得到元素最后一次出现的索引	索引
concat(元素)	将指定元素添加到数组末尾	添加后的数组
join(字符)	拼接字符到数组中	拼接后的数组
slice(start,end)	截取start到end之间的数组	截取后的数组
map(方法名)	让数组执行指定方法	执行方法后的新数组

练习

1.分解质因子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p id="id"></p>
		<script>
			let n = Number(prompt('输入一个正整数'));
			var m = n;
			var arr = [];
			var flag = 0;
			for (var i = 2; i <= n; i++) {
				if (n % i == 0) {
					arr.push(i)
					n /= i;
					i--;
					flag++;
				}
			}
			let arrNum = arr.join('*');
			if (flag < 2) {
				console.log(m + "就是一个质数");
			} else {
				document.getElementById('id').innerHTML = m + "=" + arrNum;
			}
		</script>
	</body>

</html>

2.java版分解质因子

import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        System.out.println("输入所求正整数:");
        Scanner sc = new Scanner(System.in);
        Long n = sc.nextLong();
        long m=n;
        int flag = 0;
        String[] str = new String[50];
        for (long i = 2; i <= n; i++) {
            if (n % i == 0) {
                str[flag] = Long.toString(i);
                flag++;
                n = n / i;
                i--;
            }
        }
        if (flag < 2)
            System.out.println(m + "为质数");
        else {
            System.out.print(m + "=" + str[0]);
            for (int k = 1; k < flag; k++) {
                System.out.print("*" + str[k]);
            }
            System.out.println("\n"+m+"共有"+flag+"个质因数.");
        }
        sc.close();
    }
}

3.输入某一年的某一月，计算这个月有多少天

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p id="id"></p>
		<script>
			var y = Number(prompt("请输入年份："));
			var m = Number(prompt("请输入月份："));
			var d;
			if (y % 4 == 0 || y % 100 == 0);
			switch (m) {
				case 1:
					d = 31;
					break;
				case 2:
					if (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) {
						d = 28;
					} else {
						d = 29;
					}
					break
				case 3:
					d = 31;
					break;
				case 4:
					d = 30;
					break;
				case 5:
					d = 31;
					break;
				case 6:
					d = 30;
					break;
				case 7:
					d = 31;
					break;
				case 8:
					d = 31;
					break;
				case 9:
					d = 30;
					break;
				case 10:
					d = 31;
					break;
				case 11:
					d = 30;
					break;
				case 12:
					d = 31;
					break;
				default:
					console.log("没有这一天")
			}
			document.getElementById("id").innerHTML = y + "年的" + m + "月有" + d + "天";
		</script>
	</body>
</html>

4.冒泡排序

<script>
			var flag = 0;
			var arr = new Array(12, 15, 65, 54, 33);
			for (var i = 0; i < arr.length; i++) {
				for (var j = 0; j < arr.length; j++) {
					if (arr[j - 1] > arr[j]) {
						flag = arr[j - 1];
						arr[j - 1] = arr[j];
						arr[j] = flag;
					}
				}
			}
			for (var i = 0; i < arr.length; i++) {
				console.log(arr[i]);
			}
		</script>