Java开发工程师应该掌握的JS语法

Posted 2021-08-08 @阿证1024

1. 方法/函数

js中函数的语法：

// 函数的命名规则是小驼峰，首字母小写，碰到新的单词首字母大写
function 函数名(参数1, 参数2, 参数3.....){
	函数体;
}

函数的几种形式：

• 无参无返回值

function warn(){
	alert("无参无返回值")
}

• 无参有返回值

function getRes(){
	return "无参有返回值"; // 使用return关键字返回需要返回的内容, 这里返回一个字符串
}

• 有参无返回值

function getRes(a, b){
	alert("a + b = " + (a + b))
}

• 有参有返回值

function getRes(a, b){
	return a + b
}

注意：在传参的过程中我们可能会传入多于或少于参数列表的参数

// 传入参数少于参数列表
<script>
   function add(a, b){
       alert(a) // 此时a的值为1
       alert(b) // 此时b为undefined
   }
   add(1)
</script>

// 传入参数多于参数列表, js中程序并不会报错
<script>
    function add(a, b){
        alert(a) // 此时a的值为1
        alert(b) // 此时b的值为2    
    }
    add(1, 2, 3)
</script>

js中的内置函数：

• alert() 无返回值
• prompt() 有返回值，返回输入框中输入的内容
• document.write() 无返回值
• console.log() 无返回值
• Number() parseInt() parseFloat() 有返回值，返回转换后的结果
• confirm() 有返回值，返回true/false，点击确定按钮返回true，点击取消按钮返回false

2. 面向对象

在js中对象的类型是object，在声明对象的时候可以直接创建对象。

• 对象的创建方法1：

<script>
    // 使用new创建一个对象
    var person = new Object();
    // 对象的属性
    person.name = "张三"; 
    person.age = 20;
    // 对象的方法
    person.eat = function () { // 对象的方法对应一个匿名函数, 其实这个函数的函数名就是eat
        alert("今天我吃饭了")
    }

    // 查看对象的属性值
    console.log(person.name)
    console.log(person.age)
    // 调用对象的方法
    person.eat()
</script>

• 对象的创建方法2：

<script>
    // 直接初始化一个对象
    var person = { "name": "张三", "age": 20, "eat": function () { alert("今天我吃饭了") } }

    // 查看对象的属性
    console.log(person.name)
    // 调用对象的方法
    person.eat()
</script>

3. 数组

数组就是将一组数据同时存放在一个容器中，此容器称为数组，类似于超市的储物柜一样。

语法：

// 第一种创建数组的方式
var arr1 = new Array();
// var arr1 = new Array(1, 2, 3, 4, "hello"); 创建一个数组并添加元素
// var arr1 = new Array(2); 此时的2不再是数组中的元素，当只有一个数字时，代表此时创建的数组的长度。如果是字符串，则还是作为数组中的元素。

// 第二种创建数组的方式
var arr2 = [1, 2, 3, "hello", 2.123];

数组的属性及方法：

<script>
    var arr1 = [1, 2, 3, 4, "hello", 2.333];

    console.log(arr1.length) // 打印数组的长度
    console.log(arr1[1]) // 通过下标访问数组中的元素, 下标从0开始
    // 遍历数组
    for(var i = 0; i < arr1.length; i++){
        console.log(arr1[i])
    }
    arr1.push(100); // 往数组中追加一个元素, 返回添加元素后数组的长度
    console.log(arr1.toString()) // 将数组转为字符串
    console.log(arr1.join("-")) // 使用'-'符号将数组中的元素连接成字符串
    console.log(arr1.reverse()) // 将数组中的元素反转
</script>