JavaScript基础（二）- JS函数与基本对象（Array、String、JSON）

目录

函数

1.具名函数

2.匿名函数

JS对象

基本对象

1.Array

语法格式：

 特点

属性和方法

2.String

语法格式

属性和方法

3.JSON

自定义对象

 介绍JSON语言

 定义JSON语言

---

函数

1.具名函数

第一种定义格式如下：

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

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

• 形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。

• 返回值也不需要声明类型，直接return即可

示例：

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

如果要调用上述的函数add，可以使用：函数名称(实际参数列表)

let result = add(10,20);
alert(result);

我们在调用add函数时，再添加2个参数，修改代码如下：

let result = add(10,20,30,40);
alert(result);

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。

注意：

1.由于JS是弱类型语言，形参、返回值都不需要指定类型。

2.在调用函数时，实参个数与形参个数可以不一致，但是建议一致。 

2.匿名函数

• 是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。
• 匿名函数定义可以通过两种方式：函数表达式 和 箭头函数。

示例一（函数表达式）：

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

function后面不再需要函数名，直接在括号里添加参数。

示例二（箭头函数）：

let add2 = (a, b) => {
            return a + b;
        }

函数箭头表示方式可以通过省略return关键字和花括号来简写，如下：

let add2 = (a,b) => a+b;

上述匿名函数声明好了之后，是将这个函数赋值给了add变量。 那我们就可以直接通过add函数直接调用，调用代码如下：

let result = add(10,20);
alert(result);

也可以在定义完匿名函数之后，让该函数立即执行，这类函数我们也称为 立即执行函数。

(function (a,b) {console.log(a + b);})(10,20);
​
((a,b) => {console.log(a + b);})(100,200);

---

JS对象

JavaScript中的对象有很多，主要可以分为如下3大类：

第一类：基本对象,我们主要学习Array、String和JSON

第二类：BOM对象,主要是和浏览器相关的几个对象

第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象

基本对象

1.Array

语法格式：

Array对象是用来定义数组的。常用语法格式有如下2种：

定义：

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

let 变量名 = [元素列表];//第二种方式

例如：

let arr = new Arry(1,2,3,4,5);

let arr = [1,2,3,4,5];

访问：

arr[索引] = 值;

例如：

arr[10] = 'hello'

接下来，我们按照上面的语法举例一段代码来熟悉数组：

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

浏览器控制台观察的效果如下：输出1和2

 特点

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

接下来我们通过代码来演示上述特点：

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

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

上述代码定义的arr变量中，数组的长度是4，但是我们直接再索引10的位置直接添加了数据10，并且输出索引为10的位置的元素，浏览器控制台数据结果如下：

因为索引8和9的位置没有值，所以输出内容undefined。 当然，我们也可以给数组添加其他类型的值，添加代码如下：注释掉之前控制台输出的代码

//特点: 长度可变 类型可变
let 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作为一个对象，那么对象是有属性和方法的，所以接下来我们介绍一下Array对象的属性和方法

官方文档中提供了Array的很多属性和方法，但是我们只学习常用的属性和方法，如下图所示：

• 属性：

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

• 方法：

方法	描述
forEach()	只会遍历数组中有值的元素，并调用一次传入的函数
map()	遍历每个数组元素，调用函数进行处理，并将结果封装到一个新数组中
push()	将一个或多个元素添加到数组的末尾，并返回新的长度。
pop()	从数组移除最后一个元素，并返回该元素。
unshift()	在数组开头添加一个或多个元素，并返回数组的新长度。
shift()	从数组移除第一个元素，并返回该元素。
splice()	从数组中删除元素。

• length属性：

length属性可以用来获取数组的长度，所以我们可以借助这个属性，来遍历数组中的元素，添加如下代码：

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

浏览器控制台输出结果如图所示：

•  forEach()方法

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

//写法一：
arr.forEach(function(e){
    console.log(e)//e是一个形参，接受的是数组遍历时的值
})
//写法二：
arr.forEach((e) => {
    console.log(e)
})

浏览器输出结果如下：

注意：forEach()方法只会遍历有值的元素，没有元素的内容是不会输出的 。

•  map()方法

该方法是用于遍历数组中的元素，调用传入的函数对元素进行处理，并将结果封装到一个新数组中。 如下所示：

//map:对arr中的每一个元素进行处理，在原来的基础上加10，并将其封装到一个新的数组arr2中
let arr2 = arr.map((e) => {
    return e+10;
})

//上面这段代码也可以简写为
let arr2 = arr.map((e) => e = e+10);
console.log(arr2);
//或者还有下面这种方式:
const arr2 = arr.map(e => e + 10);
console.log(arr2);

在简化过程中将let替换为const原因如下：

1.变量不可变性

在箭头函数简化后，变量arr2被赋值为一个函数引用，且这个引用在后续代码中不会被重新赋值。const关键字明确声明了这种不可变性，防止意外修改：

// 简化前：使用 let（允许重新赋值，但实际不需要）
let add2 = (a, b) => { return a + b; };

// 简化后：使用 const（更安全，明确不可重新赋值）
const add2 = (a, b) => a + b;

2.防止错误

如果后续代码尝试重新赋值 arr2，使用 const 会立即抛出错误，帮助提前发现问题：

const add2 = (a, b) => a + b;
add2 = (a, b) => a * b; // 错误：Assignment to constant variable

关键区别：

 

• let：声明可变变量（可重新赋值）。
• const：声明不可变变量（不可重新赋值，但对象 / 数组内容可修改）。
• 在箭头函数简化的场景中，函数引用本身不需要改变，因此使用 const 更合适。

• push()方法

push()方法是用于向数组的末尾添加元素的，其中函数的参数就是需要添加的元素。编写如下代码：向数组的末尾添加3个元素

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

 浏览器输出结果如下：

• pop()方法

pop()方法是用来移除数组中的最后一个元素，并返回该元素。编写如下代码：

//pop:移除最后一个元素
arr.pop();
console.log(arr);

浏览器输出结果如下：

•  unshift()方法

该方法是用于在数组的开头添加元素(一个或多个)，并返回新的数组的长度。示例如下：

//unshift:往数组的头部添加元素
arr.unshift('A','B');
console.log(arr);

 浏览器输出结果如下：

•  shift方法

该方法用来在数组的头部移除第一个元素，并返回该元素。示例如下：

//shift()方法：移除数组头部的第一个元素，并返回该元素
arr.shift();
console.log(arr);

浏览器输出结果如下：

• splice()方法

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

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

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

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

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

浏览器执行效果如下：元素3和4被删除了，元素3是索引2

---

2.String

语法格式

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

<script>
    //String对象的两种创建方式
    //方式一
    let str = new String("Hello String");//这里的引号用单引号、双引号、反引号都可以
    //方式二
    let str = 'Hello String';

    console.log(str);
</script>

属性和方法

• 属性：

属性	描述
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()函数用于去除字符串两边的空格。添加如下代码：

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

• substring()函数

substring()函数用于截取字符串，函数有两个参数。（左包右不包）

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

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

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

3.JSON

自定义对象

在 JavaScript 中自定义对象特别简单，其语法格式如下：

let 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名称: function(形参列表){}
};

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.方法名()

示例代码：

<script>
    //自定义对象
    let user = {
        name: "Tom",
        age: 10,
        gender: "男",
        //sing: function(){
        //    console.log("悠悠的唱着最炫的民族风~");
        // }

        //这里我们可以将上面的代码简化
        sing(){
            console.log("悠悠的唱着最炫的民族风~");
    }
}

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

浏览器控制台结果如下：

 介绍JSON语言

JavaScript对象标记法。JSON是通过JavaScript标记法书写的文本，而由于语法简单，层级结构鲜明，现多用于作为数据载体替代了xml，在网络中进行数据传输。其格式如下：

{
    "key":value,
    "key":value,
    "key":value
}

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

JSON必须严格按照此格式书写。

例如我们可以直接百度搜索“json在线解析”，随便挑一个进入，然后编写内容如下：

{
    "name": "李传播"
}

定义JSON语言

let userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alter(userStr.name);

JSON书写过程中尽量不要换行，换行的话会因为存在换行符报错，也可以添加转义符

浏览器输出结果如下：

为什么浏览器会显示错误？因为上面是一个json格式的字符串，不是JSON对象，所以我们需要借助JS中提供的JSON对象，来将json字符串和JS对象之间来完成转换。

1. JSON字符串->JS对象

// JSON字符串--->JS对象  
let obj = JSON.parse(userStr);
alert(obj.name);

      此时浏览器输出结果如下：

      2.JS对象 -> JSON字符串

let userStr2 = JSON.stringify(obj);
alert(userStr2);
//另一种写法
alert(JSON.stringify(obj));

 此时浏览器输出结果如下：