5.20 js基础（数组）

最新推荐文章于 2024-03-13 19:09:39 发布

新时代农民工官方认证码农--菜鸭子毛毛~

最新推荐文章于 2024-03-13 19:09:39 发布

阅读量267

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_54093765/article/details/117091423

版权

目标：

创建数组的几种方式
获取和改变数组中的元素
操作数组的几种方法
数组排序

一、创建数组

数组作用：一个变量存储多个数据

1.1、字面量的形式

1.声明一个数组：var 数组名 = [元素1，元素2，元素3…………]
- 数组名其实就是变量名，只是习惯上称之为数组名
- 元素其实就是数组中保存的数据，只是习惯上称之为元素
2.获取数组中某一个数据:数组名[下标]
3.获取数组中元素的数量:数组名.length
4.总结：数组主要由三要素构成
- 元素：数组中的数据
- 下标：元素在数组中的位置(从0开始按照顺序递增)
- 长度：数组中元素的数量

var cars = ["Saab", "Volvo", "BMW"];

空格和折行并不重要。声明可横跨多行：

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

请不要最后一个元素之后写逗号（比如 “BMW”,）。可能存在跨浏览器兼容性问题。

1.2、使用 JavaScript 关键词 new

var cars = new Array("Audi", "Volvo", "BMW");

以上两个例子效果完全一样。无需使用 new Array()。出于简洁、可读性和执行速度的考虑，请使用第一种方法。

没有必要使用 JavaScript 的内建数组构造器 new Array()。

请使用 [] 取而代之！

new 关键词只会使代码复杂化。它还会产生某些不可预期的结果：

var points = new Array(40, 100);  // 创建包含两个元素的数组（40 和 100）
var points = new Array(40);       // 创建包含 40 个未定义元素的数组！！！

/**
     * js中复杂的数据类型在初始化的编译器要做的事情远多于基本数据类型
     * 所以为了方便开发者，ECMAJavascript为负责数据类型提供了简洁的创建方式
     *
     * 数组的创建方式有两种:
     *      * 简洁方式：[]
     *      * 标准方式： new Array()
     *      * 它们最大的区别就是创建时如果数组的元素只有一个时含义不同
     *          * 简洁方式：[10]; 代表数组长度为1，元素是10
     *          * 标准方式：new Array(10)； 代表数组长度为10，没有元素
     */
//1.创建一个空数组

//1.1简洁方式：最常用
var nums = [];
//1.2 标准方式
var array = new Array();

//2.创建有多个元素的数组
//2.1 简洁方式
var nums1 = [10,20,30,40,50];//创建一个长度为5的数组，元素分别为10，20，30，40，50
//2.2 标准方式
var array1 = new Array(10,20,30,40,50);//创建了一个长度为5的数组，元素分别为10,20,30,40,50
//2.3 这两种方式只是创建的区别，取值和获取长度都是一致
console.log ( nums1[ 2 ], array1[ 3 ]);
console.log ( array1.length, nums1.length );

//3.创建只有一个元素的数组
//3.1简洁方式
var nums2 = [10];//创建一个长度为1的数组，元素是10
var array2 = new Array(10);//创建一个长度为10的数组，没有元素。这是一个空数组
console.log ( nums2 );
console.log ( array2 );

1.3、如何识别数组

typeof 运算符返回 “object”，因为 JavaScript 数组属于对象。

为了解决这个问题，ECMAScript 5 定义了新方法 Array.isArray()：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
Array.isArray(fruits);     // 返回 true

二、获取数组元素

我们通过引用*索引号（下标号）*来引用某个数组元素。

var cars = ["Audi", "Volvo", "BMW"];
//这条语句访问 cars 中的首个元素的值：
var mycar = cars[0];
//这条语句修改 cars 中的首个元素：
cars[0] = "Opel";

    /**
     * 数组取值：  `数组变量名[下标]`
     *      * 1.数组的下标是从0开始的
     *      * 2.数组的最大下标 = 长度 - 1
     *      * 3.如果数组的的下标超过最大下标时，则得到undefined
     *
     * 数组赋值：`数组变量名[下标] = 值;`
            * 1.：如果下标有对应的值，会把原来的值覆盖
            * 2.如果下标不存在，会给数组新增一个元素，并且数组的长度发生变化
     */

    //下标的作用：数组的取值与赋值
    //数组的下标是从0开始的

    var arr = [20,65,78,90];

    //1.数组的取值: 数组名[下标]

    //a.如果没有超过最大下标：获取该下标对应元素的值
    console.log ( arr[ 2 ] );//78 第三个元素的值
    console.log ( arr[ 0 ] );//20 第0个元素

    //b.如果取值下标超出最大下标则会得到undefined
    console.log ( arr[ 4 ] );//undefined

    //2.数组的赋值   语法：数组名[下标] = 值

    //a.如果没有超过最大下标：则将旧值给覆盖
    arr[0] = 100;//将100这个值赋给数组的第1一个元素
    console.log ( arr );

    //b.如果超过最大下标：则将往数组后面添加元素（用法不多）
    arr[5] = 88;
    console.log ( arr );
    console.log ( arr[ 4 ] );

    //数组赋值用的最多的是往数组后面只添加一个元素

数组元素可以是对象

javaScript 变量可以是对象。数组是特殊类型的对象。我们可以在相同数组中存放不同类型的变量。

可以在数组保存对象。可以在数组中保存函数。甚至可以在数组中保存数组：

var students = [{
    name:'李朗'，
    sex:'boy'
},{
    name:'邓丽芳'，
    sex:'girl'
}]

三、数组的属性

3.1、length 属性

length 属性返回数组的长度（数组元素的数目）。

var fruits = ["Banana", "Orange", "Apple", "Mango"];console.log(fruits.length);                       //  4

实例：

/*获取数组的长度：数组中数据（元素）的个数    获取：数组名.length    赋值：  数组名.length = 值        * 改变数组的长度会改变数组的元素数量     */    //1.往数组后面添加一个元素    var arr = [10,20,30,40];    arr[arr.length] = 50;//arr.length = 最大下标 + 1    console.log ( arr );//[10,20,30,40,50]    //2.删除数组最后的一个元素    arr.length--;//长度-1，相当于把最后一个元素删除了    console.log ( arr );//[10,20,30,40]    //3.设置数组的长度会修改数组的元素    arr.length = 2;    console.log ( arr );//相当于只保留前面两个元素，后面元素全部被删除了

3.2、遍历数组元素

1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组
- 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取
2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环
3.固定循环语句格式:for(var i = 0; i < arr.length; i++) {// 数组遍历的固定结构}
- 思考：为什么循环变量var i = 0 而不是1呢？

fruits = ["Banana", "Orange", "Apple", "Mango"];for (i = 0; i < fruits.length; i++) {     console.log(fruits[i]);} //要求将数组 [2,0,6,1,77,0,52,0,25] 中的 0 去掉后 形成一个不包含 0 的新数组。[2,6,1,77,52,25]

也可以使用 Array.foreach() 函数：

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.forEach(myFunction);function myFunction(item) {  console.log(item)}

练习

1.求数组中元素的平均值
2.求数组中元素的最大值

        /*1.翻转数组        */        //1.翻转数组        var arr = [20, 25, 66, 88, 90];//[90,88,66,25,20]        /*         1.1 翻转法            (1)声明空数组newArr            (2)倒着遍历arr，添加到空数组中        */        //     //1.声明空数组newArr        //     var newArr = [];        //    //2.倒着遍历arr，添加到空数组中        //    for(var i = arr.length-1;i>=0;i--){        //        console.log(arr[i]);        //        newArr[newArr.length] = arr[i];        //    };        //    console.log(newArr);        /*         1.2 交换法            (1)遍历数组一半            (2)下标为 i元素   与  下标为 arr.length-1-i  元素交换        */        //1.遍历数组的一半        for (var i = 0; i < arr.length / 2; i++) {//i = 0 1 2            //2. 下标为i元素  和 下标为arr.length-1-i元素交换            var temp = arr[i];            arr[i] = arr[arr.length - 1 - i];            arr[arr.length - 1 - i] = temp;        };        console.log(arr);

四、数组的常用方法

4.1、添加数组元素

向数组添加新元素的最佳方法是使用 push() 方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)

也可以使用 length 属性向数组添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)

4.2、删除元素

pop() 方法从数组中删除最后一个元素：pop() 方法返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）console.log(fruits.pop()) //"Mango"console.log(fruits) // ["Banana", "Orange", "Apple"];

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.shift();            // 从 fruits 删除第一个元素 "Banana"  // 返回 "Banana"

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon" 返回5

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

var fruits = ["Banana", "Orange", "Apple", "Mango"];delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

4.3、拼接数组

splice() 方法可用于向数组添加新项：

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组：

使用 splice() 来删除元素

使用 splice() 在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

第一个参数（0）定义新元素应该被添加（接入）的位置。
第二个参数（1）定义应该删除多个元素。
其余参数被省略。没有新元素将被添加。

concat() 方法通过合并（连接）现有数组来创建一个新数组：

var myGirls = ["Cecilie", "Lone"];var myBoys = ["Emil", "Tobias", "Linus"];var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

concat() 方法不会更改现有数组。它总是返回一个新数组。

4.4、裁切数组

slice() 可接受两个参数，比如 (1, 3)。该方法会从开始参数选取元素，直到结束参数（不包括）为止。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(1, 3);

如果结束参数被省略，则 slice() 会切出数组的剩余部分。

五、数组排序

5.1、反转数组

reverse() 方法反转数组中的元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.reverse();         // 反转元素顺序

5.2、数组排序

sort() 方法以字母顺序对数组进行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.sort();            // 对 fruits 中的元素进行排序

不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。正因如此，sort() 方法在对数值排序时会产生不正确的结果。

5.3、比值函数

var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return a - b});

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){    return a-b}

排序函数规则：

传两个形参
当返回值为负数时，交换传入两形参在数组中位置

比如：

当比较 40 和 100 时，sort() 方法会调用比较函数 function(40,100)。
该函数计算 40-100，然后返回 -60（负值）。
排序函数将把 40 排序为比 100 更低的值。

让数组乱序

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

数据渲染

一、怎么渲染一个表格

写好html部分，把要循环的部分注释起来（tr–td）
获取这个表格 tbody
创建（获取）数据源（这个数据源是一个数组，里面都是对象）
遍历这个数组（拿到每一行表格数据）
声明一个字符串，将对应的数据拼接到对应的td内
每一遍循环都可以使用 innerHTML+= 到tbody里去

var tbbody = document.getElementById('tbody的id') //通过id获取容器var arr = [{                                  //获取初始的数据            name: 'zhangsan',            age: '20',            sex: 'girl',            mark: 90        },        {            name: 'lisi',            age: '20',            sex: 'boy',            mark: 95        },        {            name: 'wangwu',            age: '20',            sex: 'boy',            mark: 80        },        {            name: 'zhaoliu',            age: '20',            sex: 'girl',            mark: 50        }    ]//遍历数据源arr.forEach(function(item){    //item代表arr数组中的每一个对象    //将注释的html结构 与 对应的数据拼接成字符串        var str = `<tr>                  <td>${item.name}</td>                  <td>${item.age}</td>                  <td>${item.sex}</td>                  <td>${item.mark}</td>               </tr>`    //将拼接好的每一行 输出到页面上    tbbody.innerHTML += str    })

注意：

必须要有table的标签
渲染在同一个table标签内的tbody中
字符串必须加引号
标签字符串必须要加引号
使用forEach的时候不要漏了最后一个括号

二、怎么删除表格中的一条数据

先把渲染数据的代码封装成一个函数
删除原数组中的一条对应的数据
此时数据源已发生改变
重新渲染数据

//方法一 传入下标 使用splicefunction del (idx){    arr.splice(idx,1)    getdata();}//方法二 传入任意元素的属性 然后筛选  这里选择学号function del(id){    //声明一个新的数组来保存原    var brr = arr;    //将原数组置空    arr=[];    //遍历原数据，筛选    for(var i =0;i<brr.length;i++){        //将没有被删除的元素 重新放入arr        if(brr[i].stuid != id){            arr.push(brr[i])        }    }      getdata()}

常见错误：

标签中拼接方法错误

<button onclick="$del{item.stuid})">
<button onclick="del({item.stuid})">

正确做法：

<button onclick="del(${item.stuid})">

2.封装函数的问题

并没有封装函数就调用函数
封装的函数名与数据源名称相同

3.参数混淆

三、怎么给表格新增一条数据

创建表单的html结构并给每个input框加上id
创建添加按钮并绑定添加事件
在添加时间内获取input框的值然后组织成一个与数据源内对象属性完全一致的数据对象
将组织好的新数据 push进arr
重新渲染页面

var stuname = document.getElementById('stuname') //获取姓名输入框var stuid = document.getElementById('stuid') //获取学号输入框var stusex = document.getElementById('stusex')   //获取 性别输入框function add() {     //组织新的数据，将输入框的值与属性一一对应  获取输入框的值 xxx.value        var obj = {            name: stuname.value,            age: '30',            stuid: stuid.value,            sex: stusex.value,            mark: 50        }//将组织的新数据 放入数据源        arr.push(obj)    //重新渲染页面        getdata()    //将输入框重新置空        stuname.value=''        stuid.value=''        stusex.value=''     }