Java后端掌握的基本前端知识

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、js引入

二、 js变量

三、 js函数

---

一、js引入

         一般在前端可直接在HTML的<script></script>标签中写js脚本，但是如果css，html，js都混在一个页面的话就会显得很乱，也不方便去看代码，所以一般写在外部static（静态资源文件）文件中，然后通过<script src="../static/JS.js"></script>引入。

---

二、 js变量

       声明一个变量有let、const、var；let声明的变量可以被多次赋值；const声明的变量为常量，不可被修改，但是如果声明的是数组，可以改变某处索引的值；var和let的效果一样，但是能用let就用let，因为var容易出现作用域的问题。

/**
 * 运行时返回undefined原因：
 *                 1.没有返回的结果
 *                 2.没有该元素或者某个类的属性
 *                 3.声明变量未赋初值
 * NAN:字符串转数字时，字符串不为数字
 * bigint类型：整数型 （10n  此时10为整数）
 * number类型：双精度浮点数 (10  此时10为小数)
 */
let a = document.getElementById("p1");
a.innerText = "2222";
a=100;//let声明的变量可以多次被赋值

const b = 100;//const修饰的叫常量，不可被修改，但是声明的数组元素值可以
const nums = [1,2,3];
nums[2] = 4;

var c = 100;
c = 50;//var声明的变量也可以被多次赋值，但是能用let声明就不用var，var容易出现作用域的问题

let d = '"a"'; //js字符串可以用单引号，里面就可以正常再写带有双引号的字符

---

三、 js函数

       js中的函数跟java中的方法有点类似，但是不完全一致，js函数中的参数可以不用指定类型，后续会根据入参去调节；里面有个特殊的就是函数其实就是一个对象，它可以用来赋值，同时也有属性，方法，同时也可以作为方法的参数和返回值。

/**
 * 函数中的参数可以不带类型
 * 函数被调用时，里面的入参可以不限制类型和个数
 */
function sum(a , b){
    return a+b;
}

/**
 * 函数实现默认参数可以直接加在函数参数里面
 */
function Page(page = 1 , size = 10){
    console.log(page , size);
}

/**
 * 匿名函数，常用使用场景一：就是只调用一次，直接使用；
 */
(function (a , b) {
    return a+b;
})(1,2);

/**
 * 常用使用场景二：作为其他对象的方法
 * 函数就是对象，可以赋值，有属性、方法，可以作为方法参数，可以作为返回值
 * 赋值
 */
document.getElementById("p1").onclick = (function (){
   window.alert("点击了我");
})

/**
 * 箭头函数，类似与java的Lambda表达式
 * 如果没有参数 （）不能省略；有的话可以
 * 如果方法体内只有一行代码，则{}也可以省略
 */
document.getElementById("p1").onclick =  () =>window.alert("点击了我");

/**
 * 函数作为对象
 */
function tt(){
    console.log("我是a");
}
function yy(fn){
    console.log("我是b");
    fn();
}

/**
 * 函数作为方法返回值
 */
function aa(){
    console.log("我是CC")
    function bb(){
        console.log("我是BB")
    }
    return bb;
}