【JavaScript】_html-js-css

目录 🌈 数组的概念🌈 创建数组1、数组的创建方式2、利用 new 创建数组3、利用数组字面量创建数组4、数组元素的类型 🌈 获取数组元素1、数组的索引 🌈 遍历数组1、数组的长度2、案例（1）数组求和及平均值（2）数组最大值（3）数组转换为字符串（4）数组转换为分割字符串 🌈 数组中新增元素1、通过修改 length 长度新增数组元素2、通过修改数组索引新增数组元素3、案例（1）数组新增元素（2）筛选数组 🌈 数组案例1、删除指定数组元素2、翻转数组3、数组排序（冒泡排序）

🌈 数组的概念

➢ 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式。

// 普通变量一次只能存储一个值
var num = 10; 
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];

🌈 创建数组 1、数组的创建方式

➢ JS 中创建数组有两种方式：

利用 new 创建数组利用数组字面量创建数组 2、利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组

注意 Array () ，A 要大写 3、利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = [1,2,3,4,5];

数组的字面量是方括号 [ ]声明数组并赋值称为数组的初始化这种字面量方式也是使用的最多的方式 4、数组元素的类型

➢ 数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['JJ',22,true,28.8];

🌈 获取数组元素 1、数组的索引

➢ 索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。

例子：

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>Documenttitle>
    <script>
        var arr = ['苹果','香蕉','榴莲','橙子'];
        console.log(arr);
    script>
head>
<body>
    
body>
html>

结果展示：

➢ 数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。（这里的访问就是获取得到的意思）

例子：

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>Documenttitle>
    <script>
        var arr = ['苹果','香蕉','榴莲','橙子'];
        console.log(arr[1]);
    script>
head>
<body>
    
body>
html>

结果展示：

🌈 遍历数组

➢ 通过“数组名[索引号]”的方式获取数组中的每一项

var arr = ['苹果','香蕉','榴莲','橙子'];
console.log(arr[0]) // 苹果
console.log(arr[1]) // 香蕉
console.log(arr[2]) // 榴莲
console.log(arr[2]) // 橙子

➢ 从代码中我们可以发现，从数组中取出每一个元素时，代码是重复的，有所不一样的是索引值在递增

遍历: 就是把数组中的每个元素从头到尾都访问一次
我们可以通过 for 循环索引遍历数组中的每一项

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>Documenttitle>
    <script>
        var arr = ['苹果','香蕉','榴莲','橙子'];
        for (var i=0;i<=3;i++) {
            console.log(arr[i]);
        }
    script>
head>
<body>
    
body>
html>

结果展示：

1、数组的长度

➢ 使用“数组名.length”可以访问数组元素的数量（数组长度）。

例子：

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>Documenttitle>
    <script>
        var arr=['A','B','C','D'];
        console.log(arr.length);
    script>
head>
<body>
    
body>
html>

结果展示：

➢ 注意：
① 此处数组的长度是数组元素的个数，不要和数组的索引号混淆。
② 当数组里面的元素个数发生了变化，这个 length 属性跟着一起变化。

2、案例（1）数组求和及平均值

➢ 求数组 [1,2,3,4,5,6,7,8,9,10] 里面所有元素的和以及平均值。

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>Documenttitle>
    <script>
        var arr=[1,2,3,4,5,6,7,8,9,10];
        var sum=0;
        for (var i=0;i<arr.length;i++) {
            sum=sum+arr[i];
        }
        console.log('该数组的和是：'+sum);
        console.log('该数组的平均值是：'+sum/arr.length);
    script>
head>
<body>
    
body>
html>

结果展示：

（2）数组最大值

➢ 求数组 [2,5,66,99,33,88] 中的最大值。

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>Documenttitle>
    <script>
        var arr = [2,5,66,99,33,88];
        var max = arr[0];    // 将数组的第一位元素赋值给max
        for (var i=1;i<arr.length;i++) {
            if (arr[i]>max) {
                max=arr[i];
            } 
        }
        console.log('该数组的最大值是：'+max);

    script>
head>
<body>
    
body>
html>

结果展示：

（3）数组转换为字符串

➢ 要求：将数组 [‘one’,‘two’,‘three’,‘four’,‘five’] 里面的元素转换为字符串
➢ 输出： ‘onetwothreefourfive’

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>Documenttitle>
    <script>
        var arr = ['one','two','three','four','five'];
        var str = '';
        for (var i=0;i<arr.length;i++) {
            str = str + arr[i];
        }
        console.log(str);
    script>
head>
<body>
    
body>
html>

结果展示：

（4）数组转换为分割字符串

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>Documenttitle>
    <script>
        var arr = ['one','two','three','four','five'];
        var str = arr[0];
        var sep = '|'
        for (var i=1;i<arr.length;i++) {
            str = str + sep + arr[i];
        }
        console.log(str);
    script>
head>
<body>
    
body>
html>

结果展示：

🌈 数组中新增元素 1、通过修改 length 长度新增数组元素可以通过修改 length 长度来实现数组扩容的目的length 属性是可读写的

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>Documenttitle>
    <script>
        var arr = ['one','two','three'];    // 此时arr.length = 3
        arr.length = 5;
        console.log(arr[3]);
        console.log(arr[4]);
    script>
head>
<body>
    
body>
html>

结果展示：

➢ 其中索引号是 3，4 的空间没有给值，就是声明变量未给值，默认值就是 undefined。

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>Documenttitle>
    <script>
        var arr = ['one','two','three'];
        arr[3] = 'four';
        console.log(arr);
    script>
head>
<body>
    
body>
html>

结果展示：

➢ 替换数组元素：

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>Documenttitle>
    <script>
        // 如果给数组中已经被占用的索引号赋值，原有元素会被替换
        var arr = ['one','two','three'];
        arr[0] = 'six';
        console.log(arr);
    script>
head>
<body>
    
body>
html>

结果展示：

➢ 千万不要直接给数组名赋值，不然数组里的元素都没有了，对数组元素进行追加或者替换要记得要带上索引号

错误例子：

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>Documenttitle>
    <script>
        var arr = [1,2,3,4,5];
        arr = '啊这这这';
        console.log(arr);
    script>
head>
<body>
    
body>
html>

结果展示：

3、案例（1）数组新增元素

➢ 新建一个数组，里面存放10个整数（ 1~10），要求使用循环追加的方式输出： [1,2,3,4,5,6,7,8,9,10]

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>Documenttitle>
    <script>
        var arr = [];
        for (var i=0;i<10;i++) {
            arr[i] = i+1;
        }
        console.log(arr);
    script>
head>
<body>
    
body>
html>

结果展示：

（2）筛选数组

➢ 要求：将数组 [1,3,22,11,66,5,0,9,66] 中大于等于 10 的元素选出来，放入新数组。

方法一：

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>Documenttitle>
    <script>
        var arr1 = [1,3,22,11,66,5,0,9,66];
        var arr2 = [];
        var j = 0;
        for (var i=0;i<arr1.length;i++) {
            if (arr1[i] >= 10) {
                arr2[j] = arr1[i]; 
                j++;
            }
        }
        console.log(arr2);
    script>
head>
<body>
    
body>
html>

方法二

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>Documenttitle>
    <script>
        var arr1 = [1,3,22,11,66,5,0,9,88];
        var arr2 = [];
        for (var i=0;i<arr1.length;i++) {
            if (arr1[i] >= 10) {
                arr2[arr2.length] = arr1[i];  
                 /* 一开始时，arr2是空数组，此时的arr2.length=0，
                 把arr2.length=0当作arr2数组的索引号，刚好是数组的首位索引号，
                 当arr2存了一个元素时，此时arr2.length=1，1就是arr2的第二个索引号啦 */
            }
        }
        console.log(arr2);
    script>
head>
<body>
    
body>
html>

两种方法得到的结果都一样：

🌈 数组案例 1、删除指定数组元素

➢ 要求：将数组 [2,60,0,89,0,65,36,0,99] 中的 0 去掉后，形成一个不包含 0 的新数组。

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>Documenttitle>
    <script>
        var arr1 = [2,60,0,89,0,65,36,0,99];
        var arr2 = [];
        for (var i=1;i<arr1.length;i++) {
            if (arr1[i]!=0) {
                arr2[arr2.length] = arr1[i];
            }
        }
        console.log(arr2);
    script>
head>
<body>
    
body>
html>

结果展示：

2、翻转数组

➢ 要求: 将数组[‘one’,‘two’,‘three’,‘four’,‘five’] 的内容反过来存放。
➢ 输出： [‘five’, ‘four’, ‘three’, ‘two’, ‘one’]

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>Documenttitle>
    <script>
        var arr1 = ['one','two','three','four','five'];
        var arr2 = [];
        for (var i=arr1.length-1;i>=0;i--) {
            arr2[arr2.length] = arr1[i];
        }
        console.log(arr2);
    script>
head>
<body>
    
body>
html>

结果展示：

3、数组排序（冒泡排序）

➢ 冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）。

➢ 例如，我们可以将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5

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>Documenttitle>
    <script>
        // 冒泡排序
        var arr = [5,4,3,2,1];
        for (var i=0;i<arr.length-1;i++) {
            for (var j=1;j<=arr.length-i-1;j++) {
                // 内部交换两变量的值
                if (arr[j]>arr[j+1]) {
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }
        }
        console.log(arr);
    script>
head>
<body>
    
body>
html>

结果展示：

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/924726.html

【JavaScript】

发表评论

评论列表（0条）