web前端-JavaScript（2）_前端 indexof-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53616401/article/details/130620611

本文详细介绍了JavaScript中的函数定义与调用，包括弱数据类型的特性。接着探讨了Array对象的基本语法、特点、属性（如length）及方法（如forEach、push、splice）。此外，还讲解了String对象的创建、属性（length）、方法（如charAt、indexOf、trim、substring）。最后，提到了JSON对象和自定义对象的创建及转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一节我们讲解了JavaScript的一些基本语法，数据类型，运算符等，接下来我们继续往下讲，来看看JavaScript中的函数

函数

第一种定义格式如下：

function 函数名(参数1,参数2..){
    要执行的代码
}

注意因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

形参不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
返回值也不需要声明类型，直接return即可

function add(a, b){
    return a + b;
}

上面只是定义函数，我们来看看函数的调用

注意：

1.我们定义的函数只有两个参数，但是我们在传递参数的时候，却传入了四个参数，那么在JavaScript中，不会报错，并且输出的值还是30，因为即使你传入再多的参数，他也只会根据你的形参个数，获取前两个的值，后面的值不会去理会。

2.也就是说10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。

<script>

    //定义函数-1
    // function add(a,b){
    //    return  a + b;
    // }

    //定义函数-2
    var add = function(a,b){
        return  a + b;
    }


    //函数调用
    //var result = add(10,20);
    var result = add(10,20,30,40);
    alert(result);
    
</script>

JavaScript对象

Array对象

基本语法

方式1：

例如

var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

方式2：

var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

获取数组元素的方式

和java中一样，需要通过索引来获取数组中的值。

代码演示：

<script>
    //定义数组
     var arr = new Array(1,2,3,4);
     var arr = [1,2,3,4];
	//获取数组中的值，索引从0开始计数
     console.log(arr[0]);
     console.log(arr[1]);
</script>

特点

与java中不一样的是，JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值

当我们执行这段代码的时候，我们会发现并不会报错，我们在输出第8个和第九个元素的时候，因为我们没有为其赋值，所以输出来的就是undefined

//特点: 长度可变 类型可变
var arr = [1,2,3,4];
arr[10] = 50;

console.log(arr[10]);
console.log(arr[9]);
console.log(arr[8]);

因为没有没有为其赋值，如果我们讲第八个和第九个元素的位置都为其附上值，那么输出出来的元素就不会是undefined了

//特点: 长度可变 类型可变
var arr = [1,2,3,4];
arr[10] = 50;

// console.log(arr[10]);
// console.log(arr[9]);
// console.log(arr[8]);

arr[9] = "A";
arr[8] = true;

console.log(arr);

属性和方法

Array作为一个对象，那么对象是有属性和方法的

属性：

属性	描述
length	设置或返回数组中元素的数量。

方法：

方法方法	描述
forEach()	遍历数组中的每个有值得元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素

length属性：

length属性可以用来获取数组的长度，所以我们可以借助这个属性，来遍历数组中的元素

var arr = [1,2,3,4];
arr[10] = 50;
	for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

forEach()函数

首先我们学习forEach()方法，顾名思义，这是用来遍历的，那么遍历做什么事呢？所以这个方法的参数，需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值。

//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
     console.log(e);
})

还有ES6的语法中还引入了箭头函数的写法

这里要注意的是没有元素的内容是不会输出的，因为forEach只会遍历有值的元素

arr.forEach((e) => {
     console.log(e);
})

push()函数

push()函数是用于向数组的末尾添加元素的，其中函数的参数就是需要添加的元素

//push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);

splice()函数

splice()函数用来数组中的元素，函数中填入2个参数。

参数1：表示从哪个索引位置删除

参数2：表示删除元素的个数

如下代码表示：从索引2的位置开始删，删除2个元素

//splice: 删除元素
arr.splice(2,2);
console.log(arr);

Array对象整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-Array</title>
</head>
<body>
    
</body>
<script>
    //定义数组
    // var arr = new Array(1,2,3,4);
    // var arr = [1,2,3,4];

    // console.log(arr[0]);
    // console.log(arr[1]);

    //特点: 长度可变 类型可变
    // var arr = [1,2,3,4];
    // arr[10] = 50;

    // console.log(arr[10]);
    // console.log(arr[9]);
    // console.log(arr[8]);

    // arr[9] = "A";
    // arr[8] = true;

    // console.log(arr);



    var arr = [1,2,3,4];
    arr[10] = 50;
    // for (let i = 0; i < arr.length; i++) {
    //     console.log(arr[i]);
    // }

    // console.log("==================");

    //forEach: 遍历数组中有值的元素
    // arr.forEach(function(e){
    //     console.log(e);
    // })

    // //ES6 箭头函数: (...) => {...} -- 简化函数定义
    // arr.forEach((e) => {
    //     console.log(e);
    // }) 

    //push: 添加元素到数组末尾
    // arr.push(7,8,9);
    // console.log(arr);

    //splice: 删除元素
    arr.splice(2,2);
    console.log(arr);

</script>
</html>

String对象

基本语法

String对象的创建方式有2种：

方式1：

举例;

var str = new String("Hello String");

方式2：

举例;

var str = 'Hello String';

String的属性和方法

属性：

属性	描述
length	字符串的长度。

方法：

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

length属性：

length属性可以用于返回字符串的长度

//length
console.log(str.length);

charAt()函数：

charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。

console.log(str.charAt(4));

indexOf()函数

indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容。

console.log(str.indexOf("lo"));

trim()函数

trim()函数用于去除字符串两边的空格的。

var s = str.trim();
console.log(s.length);

substring()函数

substring()函数用于截取字符串的，函数有2个参数。

参数1：表示从那个索引位置开始截取。包含

参数2：表示到那个索引位置结束。不包含

console.log(s.substring(0,5));

String整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-String</title>
</head>
<body>
    
</body>
<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(4));

    //indexOf
    console.log(str.indexOf("lo"));

    //trim
    var s = str.trim();
    console.log(s.length);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>
</html>

JSON对象

自定义对象

基本语法

var 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名称: function(形参列表){}
};

调用方式

<script>
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        eat: function(){
             console.log("吃饭~");
         }
    }

    console.log(user.name);
    user.eat();
<script>

函数还有简化的写法的，可以省略掉function关键字就是这样写的，看演示

    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        // eat: function(){
        //      console.log("用膳~");
        //  }
        eat(){
            console.log("用膳~");
        }
    }

json对象

基本语法

注意：key必须使用引号并且是双引号标记，value可以是任意数据类型。

注意我们直接通过jsonstr.name去访问属性，得到的结果是undefned是因为上述是一个json字符串，不是json对象，需要使用函数进行转化

将字符转为JSON对象

var obj = JSON.parse(jsonstr);
alert(obj.name);

将JSON对象转为字符串

alert(JSON.stringify(obj));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-JSON</title>
</head>
<body>
    
</body>
<script>

    // //定义json
    var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    //alert(jsonstr.name);

    // //json字符串--js对象
    var obj = JSON.parse(jsonstr);
    //alert(obj.name);

    // //js对象--json字符串
    alert(JSON.stringify(obj));


</script>
</html>