JavaScript学习笔记（四）：数组和函数的方法

目录

一、数组

1.1 简介

1.2 数组字面量

1.3 数组的四个方法

1.4 数组的遍历

1.5 forEach

1.6 slice和splice

1.7 数组的剩余方法

二、函数的方法

2.1 call()和apply()

2.2 arguments

---

一、数组

对象分类：

        - 内建对象

        - 宿主对象

        - 自定义对象

1.1 简介

数组（Array）

数组也是一个对象，它和我们普通对象类似，也是用来存储一些值的，不同的普通对象使用字符串作为属性名，而数组使用数字来作为索引来操作元素。

        - 索引：从0开始的整数就是索引

数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据。

创建数组对象

let arr = new Array();

console.log(typeof arr);  // Object

向数组中添加元素

语法：数组[索引] = 值

arr[0] = 10;

读取数组中的元素

读取不存在的索引不会报错，直接返回undefined

语法：数组[索引]

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

获取数组长度

可以使用length属性来获取数组的长度

语法：数组.length

console.log(arr.length);  // 1

对于连续的数组，使用length直接返回数组长度；

对于不联系的数组，返回最大的索引加一

        - 尽量不要创建非连续的数组

修改length

        - 如果修改的length大于原长度，则多出部分会空出来

        - 如果修改的length小于原长度，多出的部分会被删除

向数组的最后一个位置添加元素

arr[arr.length] = 20;

1.2 数组字面量

使用字面量来创建数组

let arr = [];

使用字面量创建数组，可以在创建时就指定数组中的元素。

let arr = [1, 2, 3];

let arr = new Array(1, 2, 3);

// 创建一个数组，数组中只有一个元素10
let arr = [10];

// 创建一个数组，长度为10
let arr = new Array(10);

数组中的元素可以是任意的数据类型，也可以是对象、函数。

数组里面也可以放数组，我们称之为二维数组。

1.3 数组的四个方法

push()

该方法可以向数组末尾添加一个或多个元素，并返回新数组的长度

可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾。

let arr = [1, 2, 3];

let result = arr.push(4, 5, 6);


console.log(arr);  // [1, 2, 3, 4, 5, 6]
console.log(result);  // 6

pop()

该方法可以删除数组的最后一个元素，并返回被删除的元素。

unshift()

向数组开头添加一个或多个元素，并返回新的数组的长度。

向前边插入元素以后，其他的元素的索引会依次改变。

shift()

可以删除数组第一个元素，并将被删除的元素返回。

1.4 数组的遍历

所谓的遍历数组，就是将数组的所有元素都取出来。

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


for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

练习

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.toString = function() {
    return ""+this.name+","+this.age;
}

let per1 = new Person("swk", 18);
let per2 = new Person("zbj", 28);
let per3 = new Person("shs", 38);
let per4 = new Person("zzj", 48);
let per5 = new Person("els", 58);

let perArr = [per1, per2, per3, per4, per5];


// 创建一个函数把大于30岁的Person提取出来，并封装到一个新的数组
function getOlder(arr) {
    // 创建一个新的数组
    let arr = [];

    // 遍历arr，获取其中的对象
    for (let i = 0; i < perArr.length; i++) {
        // 判断元素年龄是否大于30
        if (perArr[i] > 30) {
            arr.push(perArr[i]);
        }
    }
    return arr;
}

let result = getOlder(perArr);
console.log(result);
    

1.5 forEach

forEach()

这个方法只支持IE8以上的浏览器。

一般都是使用for循环去遍历数组。JS还为我们提供了一个方案用来遍历数组。

forEach()方法需要一个函数作为参数

        - 由我们创建但是不由我们调用的，我们称为回调函数。

        - 数组中有几个元素，函数就会执行几次，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以来定义形参，来读取这些内容。

        - 浏览器会在回调函数中传递三个参数：第一个参数就是当前正在遍历的元素；第二个参数就是当前正在遍历的元素的索引；第三个参数就是正在遍历的数组。

let arr = ["swk", "zbj", "shs"];

arr.forEach(function(value, index, c) {
    console.log();
});

1.6 slice和splice

slice()

        - 可以用来从数组中读取指定的元素。

        - 参数：1.截取开始的位置的索引，包含开始索引；2.截取结束的位置的索引，不包含结束索引。第二个参数可以省略不写。

        - 该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。

let arr = ["swk", "zbj", "bgj", "shs"];

let result = arr.slice(1, 3);

console.log(result);  // ["zbj", "bgj"]

splice()

        - 可以用来删除数组中的指定元素

        - 使用splice（）会影响到原数组，会将指定元素从原数组中删除，并返回被删除的元素。

        - 参数：第一个，表示开始位置的索引；第二个，表示删除的数量；第三个及以后的参数，可以传递一些新的元素，这些元素会自动掺入到开始位置索引前面的位置。

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

arr.splice(1, 0, 5, 6);

console.log(arr);  // [1, 5, 6, 2, 3, 4]

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

for (let i=0; i<arr.length; i++) {
    for (let j=I+1; j<arr.length; j++) {
        if (arr[i] == arr[j]) {
            arr.splice(j, 1);
            j--;
        }
    }
}

1.7 数组的剩余方法

concat()

concat（）可以连接两个或多个数组，并将新的数组返回

         - 该方法不会对原数组产生影响

join()

该方法可以将数组转换为一个字符串

         - 该方法不会对原数组产生影响，并将转换后的字符串作为结果返回

         - 在join（）中可以指定一个字符串作为参数，这个字符串将会称为数组中元素的连接符，若不指定连接符，默认使用逗号。

reverse()

该方法用来反转数组

        - 该方法会直接修改原数组

sort()

可以用来对数组中的元素进行排序。

         - 也会影响原数组，默认会按Unicode编码进行排序。

         - 即使对数字进行排序，也会按照Unicode编码进行排序，我们可以在sort（）添加一个回调函数，来指定排序规则。

        - 回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是确定的是数组中a一定在b前边。

        - 浏览器会根据回调函数的返回值来决定元素的顺序：如果返回一个大于0的值，则元素会交换位置；如果返回一个小于0的值，则元素位置不变；如果返回一个0，则认为两个元素相等，也不交换位置。

        - 如果需要升序排列，则返回a-b，降序则返回b-a

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

arr.sort(function(a, b) {
    return a - b;
});

console.log(arr);  // [1, 2, 3, 4, 5]

 下面是力扣官方给出的常见的数组属性和方法

• length: 返回数组中的元素数量。
• constructor: 指定创建数组原型的函数。
• prototype: 允许你向数组的原型对象添加属性和方法。
• Symbol.iterator: 返回用于迭代数组元素的迭代器对象。
• concat(): 连接两个或多个数组并返回一个新数组。
• join(): 将数组的所有元素连接成一个字符串。
• push(): 将一个或多个元素添加到数组的末尾并返回数组的新长度。
• pop(): 从数组中移除最后一个元素并返回该元素。
• shift(): 从数组中移除第一个元素并返回该元素。
• unshift(): 将一个或多个元素添加到数组的开头并返回数组的新长度。
• slice(): 返回一个从开始到结束（不包括结束）选定的部分的浅拷贝。
• splice(): 在指定的索引位置更改数组的内容，删除、替换或添加元素。
• indexOf(): 返回元素在数组中第一次出现的索引，如果不存在则返回-1。
• lastIndexOf(): 返回元素在数组中最后一次出现的索引，如果不存在则返回-1。
• forEach(): 为数组中的每个元素执行提供的函数一次。
• map(): 创建一个新数组，其中包含对数组中的每个元素调用提供的函数的结果。
• filter(): 创建一个新数组，其中包含通过提供的函数实现的测试的所有元素。
• reduce(): 将一个函数应用于累加器和数组中的每个元素，将其减少为单个值。
• reduceRight(): 从右到左应用一个函数于累加器和数组的每个元素，将其减少为单个值。
• sort(): 原地对数组的元素进行排序并返回排序后的数组。
• reverse(): 原地反转数组中元素的顺序。
• toString(): 返回表示指定数组及其元素的字符串。
• toLocaleString(): 返回表示数组元素的本地化字符串。
• includes(): 确定数组是否包含某个值。
• some(): 检查数组中是否至少有一个元素满足提供的条件。
• every(): 检查数组中是否所有元素都满足提供的条件。
• find(): 返回满足提供的条件的数组中的第一个元素。
• findIndex(): 返回满足提供的条件的数组中的第一个元素的索引。
• fill(): 从开始索引到结束索引将数组中的所有元素填充为静态值。
• copyWithin(): 将数组中的一系列元素复制到数组中的另一个位置。
• flat(): 创建一个新数组，其中包含所有子数组元素递归连接到指定深度。
• flatMap(): 使用映射函数映射每个元素并将结果展平到新数组中。
• from(): 从可迭代对象或类似数组对象创建一个新的浅拷贝数组。
• isArray(): 确定传递的值是否为数组。
• of(): 创建一个包含可变数量元素的新数组。
• keys(): 返回包含数组键的新数组迭代器。
• values(): 返回包含数组值的新数组迭代器。
• entries(): 返回包含数组键值对的新数组迭代器。

二、函数的方法

2.1 call()和apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用。

当对函数调用call（）和apply（）都会调用函数执行。在调用call（）和apply（）时，可以将一个对象指定为第一个参数。此时这个对象将会成为函数执行时的this

        - call（）方法可以将实参在对象之后依次传递

        - apply（）方法需要将实参封装到一个数组中统一传递

2.2 arguments

在调用函数时，浏览器每次都会传递进两个隐含的参数：

        - 1. 函数的上下文对象this

        - 2. 封装实参的对象arguments，

                - arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取长度。

                - 在调用函数时，我们传递的实参都会在arguments中保存

                - 我们即使不定义形参，也可以通过arguments来使用实参。

                - 它里面有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象。

学习的是B站尚硅谷的视频课程：

尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版