JavaWeb——JavaScript（2/4）-JS函数、JS对象（Array，String，JSON）

最新推荐文章于 2024-11-11 19:29:13 发布

qiyi.sky

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量1.2k

点赞数 54

分类专栏： JavaWeb 文章标签： javascript 前端开发语言笔记学习

本文链接：https://blog.csdn.net/li13437542099/article/details/140577536

版权

JavaWeb 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

JS函数

函数

介绍：函数（方法）是被设计为执行特定任务的代码块。
定义：JavaScript函数通过function关键字进行定义，语法为：

function functionName (参数1，参数2，...){

//要执行的代码

}

注意：

形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

调用：函数名称(实际参数列表)

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

//调用
var result = add(10,20);
alert(result);

定义方式二：

var functionName = function(参数1，参数2，...){

//要执行的代码

}

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

//调用
var result = add(10,20);
alert(result);

注意：JS中，函数调用可以传递任意个数的参数。

超出形参个数的那些参数则无意义，但不会报错。

JS对象

Array

介绍(1)

JavaScript中Array对象用于定义数组。
定义

var 变量名 = new Array(元素列表); //方式一

var arr = new Array(1,2,3,4);

var 变量名 = [ 元素列表 ] ; //方式二

var arr = [1,2,3,4];

访问

arr[ 索引 ] = 值;

arr[10] = "hello";

注意：JavaScript中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。

案例

<!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>对象-Array</title>
    </head>
    <body>
        
    </body>
    <script>
        //特点：长度可变，类型可变
        var arr = [1,2,3,4];
        arr[10] = 50;

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

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

        console.log(arr);
    </script>
</html>

介绍(2)

属性

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

方法

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

箭头函数 (ES6) ：是用来简化函数定义语法的。具体形式为：(...) => (...)，如果需要给箭头函数起名字：var xxx = (...) => (...)

案例(2)

<!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>对象-Array</title>
    </head>
    <body>
        
    </body>
    <script>
        //特点：长度可变，类型可变
        var arr = [1,2,3,4];
        arr[10] = 50;

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

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

        // console.log(arr);

        for(let i = 0; i < arr.length; i++){
            console.log(arr[i]);
        }
        console.log("======================");
        //forEach:遍历数组中有值的元素
        arr.forEach(function(e){
            console.log(e);
        })
        console.log("======================");
        //箭头函数
        arr.forEach((e) => {
            console.log(e);
        });

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

        //splice:删除元素
        arr.splice(2,3);
        console.log(arr);
    </script>
</html>

String

介绍

String字符串对象创建方式有两种：

var 变量名 = new String("..."); //方式一

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

var 变量名 = "..." ; //方式二

var str1 = "Hello String";
var str2 = 'Hello String';

属性：

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

方法：

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

案例

<!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>对象-String</title>
    </head>
    <body>
        
    </body>
    <script>
        //创建字符串对象
        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);

        //substring(start,end)  ---- 开始索引，结束索引（含头不含尾）
        console.log( s.substring(0,4) );
    </script>
</html>

JSON

JS自定义对象

定义格式：

var 对象名 = {

属性名1：属性值1，

属性名2：属性值2，

属性名3：属性值3，

函数名称：function(形参列表){}

};

// var user = {
//     name:"Tom",
//     age:20,
//     gender:"male",
//     eat:function(){
//         alert("用膳~");
//     }
// };
//简化
var user = {
    name:"Tom",
    age:20,
    gender:"male",
    eat(){
        alert("用膳~");
    }
};

调用格式：

对象名.属性名 ;

对象名.函数名() ;

console.log(user.name);
user.eat();

JSON介绍

概念：JavaScript Object Notation，JavaScript对象标记法。
JSON 是通过JavaScript 对象标记法书写的文本。
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

{

name:"Tom",

age:20,

gender:"male"

} ;

{

"name":"Tom",

"age":20,

"gender":"male"

} ;

JSON格式化工具 （上浏览器搜索即可使用）

JSON格式化

JSON基础语法

定义

var 变量名 = '{"key1": value1，"key2":value2}';

var userStr = '{"name":"Jerry","age":18，"addr":["北京","上海","西安"]}';

JSON字符串转为JS对象

var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

value的数据类型为：

数字 (整数或浮点数)
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）
null

案例

<!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>对象-JSON</title>
    </head>
    <body>
        
    </body>
    <script>
        // var user = {
        //     name:"Tom",
        //     age:20,
        //     gender:"male",
        //     eat:function(){
        //         alert("用膳~");
        //     }
        // };
        // var user = {
        //     name:"Tom",
        //     age:20,
        //     gender:"male",
        //     eat(){
        //         alert("用膳~");
        //     }
        // };

        //定义JSON
        var jsonstr = '{"name":"Jerry","age":18,"addr":["北京","上海","西安"]}';
        console.log(jsonstr.name);            //undefined

        //json字符串——js对象
        var obj = JSON.parse(jsonstr);
        console.log(obj.name);                //Jerry

        //js对象——json字符串
        console.log(JSON.stringify(obj));       //整个字符串

    </script>
</html>