从零开始学前端：字符串、数组的方法 --- 今天你学习了吗？（JS：Day12/13/14）

Coisini_甜柚か

已于 2024-02-04 09:04:29 修改

阅读量1k

点赞数

分类专栏：从零开始学前端文章标签：前端 javascript 学习

于 2022-04-19 16:55:11 首次发布

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/124248495

版权

从零开始学前端专栏收录该内容

48 篇文章 11 订阅

订阅专栏

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：垃圾回收机制，闭包，案例 — 今天你学习了吗？（JS：Day11）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

前言

差两节课

第十二节课：字符串、数组的方法

一、字符串的方法

1.定义/声明方式

        var str1 = 'candy';                 //字符串的字面量/直接量;
        var str2 = String('123');                //函数式
        var str3 = new String('abc123');    //构造函数
        /*
            它是由低层提供：
            比如var str2 = String('123');
        */
        console.log(str1)
        console.log(str2)
        console.log(str3)
        console.log(typeof str3);           //输出为一个object；为一个包装对象；
       //常用是第一种方法:  var str1 = 'candy';

运行：
在这里插入图片描述

2.length长度

        var str1 = 'coisini';
        var str2 = '5201314';

        //length  /返回字符串的长度
        console.log(str1.length);    //7
        console.log(str1[1]);    //不兼容IE7及其以下；所以要使用charAt

运行结果：
在这里插入图片描述

3.charAt返回指定索引的字符串（输入下标返回字符）

索引即下标

        var str1 = 'abcdefg'
        console.log(str1.charAt(3));    //返回指定索引的字符串，索引即下标

效果：
在这里插入图片描述

4.concat字符串拼接/合并字符串

语法：
str.concat(str,str,…); 字符串拼接
用于把一个或多个字符串连接到一块，返回拼接好的字符串

        var str1 = String('Coisini')
        var str2 = new String('Jojo')
        console.log(str1 + str2);  //字符串的拼接
        console.log(str1.concat(str2));// 把第2个字符串放到第一个里面
        console.log(str1.concat(str2, 'pupy', 'crazy', 'loyal'));// 继续拼接~数量没有限制；

效果：
在这里插入图片描述

5.indexOf查找字符串（输入字符返回下标）

查找字符串，返回查找字符串首次出现的位置；

        var str = '5201314'
        // 查找字符串，返回查找字符串首次出现的位置；
        console.log(str.indexOf('1'))   //value匹配字符
        console.log(str.indexOf('1', 4))   //index  开始检索的位置，合法值是0到string.length-1，默认0
        //  若匹配失败返回-1
        console.log(str.indexOf('5', 2))

效果：
在这里插入图片描述
用法（了解即可，不详解）：

<div id="box" class="wrap on active"></div>

<div id="box" class="wrap on active"></div>

console.log(box.className.indexOf('on'));

效果：
在这里插入图片描述
2. lastIndexOf('0')

var str = '5201314'
console.log(str.lastIndexOf('1'))

效果：
在这里插入图片描述

6.charCodeAt(index)返回指定索引的ASCII编码（了解即可，不详解）

        // 返回指定索引的ASCLL编码
        var str = '52011314'
        console.log(str.charCodeAt(1))

效果：
在这里插入图片描述

7.formCharCode:返回指定ASCII编码的字符串（了解即可，不详解）

        // 从字符编码创建一个字符串。一个或多个ASCII编码的值
        console.log(String.formCharCode(53))
        // 要在内建函数里面去调用
        console.log(String.formCharCode(53, 50, 48, 49, 51, 49, 52))

8.substring：截取字符串（根据下标截取字符串，左闭右开）和substr

语法：

substring(start,end)截取字符串：截取到的字符串时前闭后开形式的
substr(start,length)截取字符串

        var str2 = '5201314'
        // 截取字符串，从start开始，截止到end前，不包含end
        console.log(str2.substring(1, 5)) //  [0,5)   开始位置的序号，第二个值为结束位置的序号；
        console.log(str2, sunstr(0, 7))  //第一个值为开始，第二个值为长度；

效果：
在这里插入图片描述

9.slice截取字符串(根据下标截取字符串，前闭后开)

截取字符串，从start开始，截止到end前，不包含end，前闭后开；

        //   9. slice：截取字符串
        // a.和subatring用法一样，从左往右截取
        // b. start/end 可以为负值，负值时，倒着从最后数
        // c.start和end任何时候都不会交换位置，能截取才有值，截取不到则无值
        console.log(str2.slice(0, 2))
        //负数表示从后往前读分别是-1.-2...
        console.log(str2.slice(0, -2))

效果：
在这里插入图片描述

10.str.toLocaleUpperCase():小写转大写; str.toLocaleLowerCase():大写转小写

        var str1 = 'coisini'
        var str4 = 'CRAZY WORLD'
        // 小写转大写
        console.log(str1.toUpperCase());
        console.log(str1.toLocaleUpperCase());   //字符串转换成
        // 大写转小写
        console.log(str4.toLowerCase());
        console.log(str4.toLocaleLowerCase());

效果：
在这里插入图片描述

11.match匹配的值：正则用的多

str.match（value/RegExp）查找指定的值，返回匹配的值。未找到返回null，筝则可以找一个或多个表达式

        var str3 = 'HAPPY';
        console.log(str3.match('H'));   //输出一个数组，下标为0，input返回的是母串；
        console.log(str3.match(/a/i));   // 正则写法，不区分大小写        
        // 如果匹配不到对应的情况，返回null
        console.log(str3.match('1'));
        //   在使用正则的时候，用的比较多。

12.search返回检索字符串首次出现的位置；未找到返回-1

str.search(‘需要搜索的字符’)

        var str1 = 'coisini'
        var str2 = '5201314'
        var str3 = new String('abc123')
        console.log(str2.search('4'));    //返回下标
        console.log(str2.search('8'));    //匹配不到的话返回-1
        // 也是可以写正则表达式
        // 也是可以写正则表达式

13.replace替换：输入替换字符，返回替换后的字符串

str.replace(‘需要替换的字符’,‘替换后的字符’)

        var str1 = 'coisini'
        var str2 = '5201314'
        var str3 = new String('abc123')
        // str.replace(value/RegExp,new)  用一些字符替换另一些字符，new可以是字符串，也可以是函数
                // 不会改变母串的值
        console.log(str2.replace('0', '1'))
        console.log(str2.replace('8', '5'))

效果：
在这里插入图片描述

14.str.split()分割成字符串数组：去掉当前字符，然后数组输出其他字符组成的串

        var str2 = '5201314'
        // str.split(value/RegExp,length-1)  方法用于把一个字符串分割成字符串数组，返回分割后的数组
        // 第二个参数是可选参数，是指定返回数组的长度，最大为str.length-1,不写默认str.length-1
        console.log(str2.split('0', 5))   //返回"52","1314";返回数组！
        console.log(str2.split(' '))   //按空格切，如果母串没有空格，该数组只返回一条数据！
        console.log(str2.split(''))   //按空字符串切，每个内容都切！

效果：
在这里插入图片描述

15.字符串拼接

用“+”即可把两个字符串拼接起来。

        var peoson1 = '甜柚';
        var person2 = '我'
        console.log(person2 + '的朋友是' + peoson1)

例图：
在这里插入图片描述

二、Array()数组

1.定义/声明方式

        var arr = []  //字面量/直接量；
        var arr2 = Array(1, 2, 3)   //函数式
        consol.log(arr2);  //3条数据
        var arr3 = Array(6)   // 创建一个数组，每一项都是空值；一个值的时候是长度，内容为空
        var arr4 = new Array(1, 2, 3);  //[1,2,3]
        var arr5 = new Array(6);

        // 推荐使用第一种

2.length长度

        var arr = [1, 2, 3, 4, 5, 0];
        //length  /返回数组的长度   只读属性
        console.log(arr.length);  //6

3.通过数组索引，访问值

        console.log(arr[0])   //修改数组指定索引下的值

        // 可读可写
        arr[2] = 8888
        console.log(arr);  //[1,2,8888,4,5,0]

4.在数组后面添加项

        console.log(arr[arr.length] = 999)  //[1,2,8888,4,5,0,999]
        console.log(arr)

5.concat数组拼接

        // var arr2 = ['c','a','n','d','y']
        console.log(arr.concat(arr2));   //[1,2,8888,4,5,0,999,"c","a","n","d","y"]
        /*数组不能加号拼接，所以只能用concat*/
        console.log(arr);  //原数组不变

+号拼接展示：

        var arr1 = Array(1, 2, 3)   //函数式:[1,2,3]
        var arr3 = new Array(666, 888);// [666,888]
        var arr6 = arr1 + arr3
        console.log(arr6)

效果：
是object类型
在这里插入图片描述

6.join：将数组拼接成字符串

arr.join(‘中间的连接词’)

        var str = "Hello everyone!"
        var arr1 = str.split(' ');
        console.log(arr1)
        var arr = arr1.join('^')
        console.log(arr)
        // 空格字符串拼接
        console.log(arr1.join(' '));
        // 空字符串为直接拼接
        console.log(arr1.join(''))

效果：
在这里插入图片描述

7.indexOf查找数组里面的数据

查找字符串，返回查找字符串首次出现的位置；

        var arr5 = [5, 2, 0, 1, 3, 1, 4]
        console.log(arr5.indexOf(0))    //2，返回下标    //value   匹配字符
        //下面的可以不做了解
        console.log(arr5.indexOf(0, 3));  //3    //index  开始检索的位置，合法值是0到string.lenth - 1,默认0
        // 匹配失败 返回-1
        //  如果里面增加个[123],那么不返回对应的下标;
        var arr = [1, 2, 3, 4, 5, 0, [123]];
        console.log(arr.indexOf([123]))

效果：
在这里插入图片描述

8.delete删除项

        var arr3 = new Array(666, 888);
        /*这种方法删除了之后，返回对应的项为空值，对应的位置还在*/
        console.log(arr3)
        delete arr3[0];
        console.log(arr3)
        arr3.length = 0;
        console.log(arr3);    //清空值；length可读可写;

效果：
在这里插入图片描述

9.unshift()向数组的头部添加一个或更多元素，并返回新的长度

        var arr = [5, 2, 0, 1, 3, 1, 4]
        console.log(arr.unshift('coisini')) //返回新的长度
        console.log(arr);  //[coisini,5,2,0,1,3,1,4]

效果：
在这里插入图片描述

10.push(item 1,item 2, …)向数组的尾部添加一个或更多元素，并返回新的长度

        var arr = [5, 2, 0, 1, 3, 1, 4]
        arr.push('coisini');
        console.log(arr);   //[5,2,0,1,3,1,4,"coisini"]
        // 另一种增加值的操作：往数组的最后一项增加值
        console.log(arr[arr.length] = 999);
        console.log(arr);
        // 数组的最后一项
        console.log(arr[arr.length - 1])

效果：
在这里插入图片描述

11.shift()删除数组的第一个元素(返回删除对象)

        // 11.shift():往数组的最前一项开始删除
        var arr = [5, 2, 0, 1, 3, 1, 4];
        console.log(arr.shift());
        console.log(arr);   //[2,0,1,3,1,4]

效果：
在这里插入图片描述

12.pop()删除数组的最后一个元素(返回删除对象)

        // pop():往数组的最后一项删除
        var arr = [5, 2, 0, 1, 3, 1, 4];
        console.log(arr.pop());
        console.log(arr);   //返回删除对象

效果：
在这里插入图片描述

13.includes()传入一个元素作为参数来判断数组中是否包含该元素

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); //true
console.log(numbers.includes(6)); //false

三、arr.splice：数组的增加替换删除（重难点）

(index,how,item1,item2)删除替换添加，返回删除项 — 修改数组
arr,splice(下标，长度）

            index 删除、替换、添加的位置
            how   删除个数，0不删除
            item  添加项

不进行处理，返回值为空：

        //    不进行处理，返回值为空：
        var arr = [5, 2, 0, 1, 3, 1, 4];
        var arr1 = arr.splice()
        console.log(arr1);   //[]

删除：

        //  删除
        // 参数一：下标
        // 参数二：个数
        var arr = [5, 2, 0, 1, 3, 1, 4];
        var narr = arr.splice(1, 5);
        console.log(narr);  //[5,2,0,1,3]   //返回返回删除项
        console.log(arr);   //[1,4]    //原链

替换：

        // 替换
        // 参数一：索引
        // 参数二：删除的length
        // 参数三以上：需要替换的值
        var arr = [5, 2, 0, 1, 3, 1, 4];
        var narr = arr.splice(1, 2, 'hello', 'world');  //删除，删除个数，项
        console.log(narr);//[2,0]
        console.log(arr);   //[5,'hello','world',1,3,1,4]

添加：

        // 添加
        // 参数一：索引
        // 参数二：删除长度为00
        // 参数三以上：需要添加的值
        var arr = [5, 2, 0, 1, 3, 1, 4];
        var narr = arr.splice(1, 0, 'hello', 'world');
        console.log(narr);//[]  切出了0个
        console.log(arr);   //[5,'hello','world',2,0,1,3,1,4]

效果：
在这里插入图片描述

四、数组的排序：sort和map（重难点）

arr.sort() :数组的高阶函数【回调函数】：一个函数作为两外一个函数的参数

        var arr = [520, 66, 666, 250, 409, 404, 200]
        // 数组的高阶函数【回调函数】：一个函数作为两外一个函数的参数
        arr.sort(function (a, b) {
            console.log(a)   //从第二个值开始；
            console.log(b)   //从第一个值开始，到倒数第二个值结束；
        });

a：
在这里插入图片描述
b:

1. return的值不同数组的变化不同：

  倒序排列：return的值 < 0的时候，会进行倒序处理；

     a-b： 排序【小至大】递增
     b-a:排序【大至小】递减

倒序：

        var arr = [520, 66, 666, 250, 409, 404, 200]
        // 数组的高阶函数【回调函数】：一个函数作为两外一个函数的参数
        var arr1 = arr.sort(function (a, b) {
            // console.log(a)   //从第二个值开始；
            // console.log(b)   //从第一个值开始，到倒数第二个值结束；
            return -1
        });

        console.log(arr1)

效果：
在这里插入图片描述

递增：

        var arr = [520, 66, 666, 250, 409, 404, 200]
        // 数组的高阶函数【回调函数】：一个函数作为两外一个函数的参数
        var arr1 = arr.sort(function (a, b) {
            // console.log(a)   //从第二个值开始；
            // console.log(b)   //从第一个值开始，到倒数第二个值结束；
            // return 0
            return a - b
        });

        console.log(arr1)

效果：
在这里插入图片描述

递减：

        var arr = [520, 66, 666, 250, 409, 404, 200]
        // 数组的高阶函数【回调函数】：一个函数作为两外一个函数的参数
        var arr1 = arr.sort(function (a, b) {
            // console.log(a)   //从第二个值开始；
            // console.log(b)   //从第一个值开始，到倒数第二个值结束；
            // return 0
            // return a - b
            return b - a
        });

        console.log(arr1)

效果：
在这里插入图片描述

2. arr.reverse()数组的反转：

        console.log(arr)
        console.log(arr.reverse())

效果：
在这里插入图片描述

2. arr.map数组的遍历：

语法：

        // map数组遍历 :映射函数
        arr.map(function (value, index, arrSelf) {
            // console.log(value);      //数组的每一项
            // console.log(index);      //数组的下标
            //console.log(arrSelf);       //数组本身
        })

value:
在这里插入图片描述

Iindex:
在这里插入图片描述
arrSelf:

map内可进行处理：

        var arr1 = arr.map(function (value, index, arrSelf) {
            // console.log(value);      //数组的每一项
            // console.log(index);      //数组的下标
            // console.log(arrSelf);       //数组本身
            return value * 2
        })
        console.log(arr)
        console.log(arr1)

效果：
在这里插入图片描述

3. arr.map数组的应用：

        var oBtn = document.getElementsByClassName("btn")
        console.log(oBtn)
        var arr = [5, 2, 0, 1, 3, 1, 4]

        // var arr1 = [oBtn[0], oBtn[1], oBtn[2], oBtn[3]]
        var arr1 = [...oBtn]   //ES6解构与上一行相等
        var arr2 = arr1.forEach(function (item, index, arrSelf) {
            item.onclick = function () {
                alert(index)
            }
        })

截图：
输出button的下标
在这里插入图片描述

五、slice切割数组

        // slice切割(开始的点位,结束的点位)  左闭右开 ,不会改变原数组，返回了一个新的数组
        var arr = [1,22,32,34,55];
        console.log(arr.slice(1,3))// [22, 32]
        console.log(arr) // [1, 22, 32, 34, 55]

        var arr1 = [];
        var arr2 = {}; 
        console.log(Array.isArray(arr1))
        console.log(Array.isArray(arr2))

输出：
在这里插入图片描述

六、数组的方法：filter和find

区别：

filter:过滤满足条件的所有值
find:过滤数组，只返回满足条件的第一项

filter：过滤数组中的数字

        var arr = [520, false, null, 0, function fn() { }, '888']
        // 需求：过滤数组中的数字
        var fils = arr.filter(function (val, idx, arrself) {
            // return的返回接收值为true，会把满足条件的值进行过滤；

            // 过滤数组中的数字
            return typeof val === 'number'

            // 返回假值
            // return !val
        })
        console.log(fils)

效果：
在这里插入图片描述

find：过滤数组，只返回满足条件的第一项

        var arr = [520, false, null, 0, function fn() { }, '888'];
        var num = arr.find(function (val, idx, arrself) {
            // filter:过滤满足条件的所有值
            // find:过滤数组，只返回满足条件的第一项
            return val
        })
        console.log(num)

效果：
在这里插入图片描述

七、find和map的组合用法

        var list = [{
            name: '张三',
            age: '19',
            class: '数学'
        }, {
            name: '李四',
            age: '22',
            class: '语文'
        }, {
            name: '赵六',
            age: '14',
            class: '生物'
        }]
        var list2 = [{
            name: '张三',
            score: 90,
        }, {
            name: '李四',
            score: 92,
        },]
        var data = list.map((item) => {
            return {
                ...item,
                score: this.list2.find((_item) => _item.name = item.name).score,
            }
        })
        console.log(data)

输出：
在这里插入图片描述

八、数组去重

错误案例：

        var arr = ['火龙果', '菠萝', '草莓', '香蕉', '草莓', '草莓', '火龙果']

 			 // 数组的正向去重，ES5语法有问题的
        for (var i = 0; i < arr.length; i++) {
            for (var j = 1; j < i - 1; j++) {
                if (arr[i] == arr[j]) {
                    arr.splice(i, 1)
                    // console.log(arr)
                }
            }
        }
        console.log(arr)

效果：
在这里插入图片描述

错误原因：
切掉之后，不占位置，后面的数组内容会顶上，所以如果有上面“草莓”的情况，用这个方法的话，会出现仍然重复的效果

这种方法可以使用倒序去重来实现，因为这种情况下，前面没有相邻的两个一样的值
正确案例：

        // 用倒序去重来实现
        for (var i = arr.length - 1; i >= 0; i--) {
            for (var j = i - 1; j >= 0; j--) {
                if (arr[i] == arr[j]) {
                    arr.splice(i, 1)
                }
            }
        }
        console.log(arr)

效果：
在这里插入图片描述

九、冒泡排序

        /*
            交换位置：
            a = [3,b=2][0]
            a取值3，同时b取值2，0表示数组的第0个
        */
        var arr = [98, 69, 6, 99, 404, 200, 0]
        // 冒泡排序：两两比较，将最大的值放到最后

        for (var i = 0; i < arr.length; i++) {          //确定趟数
            for (var j = arr.length - 1; j > i; j--) {   //比较次数
                // console.log("i:" + i + ",J" + j)
                // 小于换位置，大于不换位置
                if (arr[j] < arr[j - 1]) {
                    arr[j] = [arr[j - 1], arr[j - 1] = arr[j]][0]
                }
            }
        }
        console.log(arr)

效果：
在这里插入图片描述

十、购物车和鲜花价格排序的案例

1.购物车

效果图：
在这里插入图片描述

我的代码：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #box {
            margin: 50px auto;
            width: 997px;
            height: 455px;
            user-select: none;
        }

        #box .head {
            width: 1000px;
            height: 50px;
        }

        #box .head li {
            float: left;
            width: 248px;
            height: 48px;
            border: 1px solid #fc87d8;
            border-right: 1px solid #fc87d8;
            background: #fc87d8;
            text-align: center;
            line-height: 50px;
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        #content {
            width: 998px;
            border-left: 1px solid #fc87d8;
            border-right: 1px solid #fc87d8;
            overflow: hidden;
        }

        #content ul {
            width: 1000px;
            border-bottom: 1px solid #fc87d8;
            overflow: hidden;
        }

        #content ul li {
            float: left;
            width: 248.75px;
            height: 100px;
            border-right: 1px solid #fc87d8;
            text-align: center;
            line-height: 100px;
            position: relative;
        }

        #content ul li img {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 90px;
        }

        #content ul li.num span {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            line-height: 30px;
            margin: 35px auto;
            font-weight: bold;
        }

        #content ul li.num span.jia,
        #content ul li.num span.jian {
            background: #ddd;
            cursor: pointer;
        }

        #content ul li.num span.shuliang {
            width: 70px;
        }

        #foot {
            /* margin: 10px auto; */
            width: 1000px;
            height: 50px;
            background: #fc87d8;
        }

        #foot p {
            width: 250px;
            float: right;
            text-align: center;
            line-height: 50px;
            color: white;
        }

        #foot p span {
            color: deeppink;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div id="box">
        <ul class='head'>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
        </ul>
        <div id="content">
            <ul>
                <li class='img'>
                    <img src="images/1.webp">
                </li>
                <li class='danjia'>8</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
            <ul>
                <li class='img'>
                    <img src="images/2.webp">
                </li>
                <li class='danjia'>10</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
            <ul>
                <li class='img'>
                    <img src="images/3.webp">
                </li>
                <li class='danjia'>12.5</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
            <ul>
                <li class='img'>
                    <img src="images/4.webp">
                </li>
                <li class='danjia'>23</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
        </div>
        <div id="foot">
            <p>合计费用￥ <span class='zongjia'>0</span></p>
            <p>已选中商品: <span class='zongshu'>0</span> 个</p>
        </div>
    </div>
    <script>
        var jia = document.getElementsByClassName("jia"),
            jian = document.getElementsByClassName("jian"),
            shuliang = document.getElementsByClassName("shuliang"),
            danjia = document.getElementsByClassName("danjia"),
            xiaoji = document.getElementsByClassName("xiaoji"),
            zongjia = document.getElementsByClassName("zongjia")[0],
            zongshu = document.getElementsByClassName("zongshu")[0];
        for (var i = 0; i < shuliang.length; i++) {
            jia[i].i = i
            jia[i].onclick = function () {
                shuliang[this.i].innerHTML++
                xiaoji[this.i].innerHTML = Number(danjia[this.i].innerHTML) * Number(shuliang[this.i].innerHTML)
                zongshu.innerHTML = Number(shuliang[0].innerHTML) + Number(shuliang[1].innerHTML) + Number(shuliang[2].innerHTML) + Number(shuliang[3].innerHTML)
                zongjia.innerHTML = Number(xiaoji[0].innerHTML) + Number(xiaoji[1].innerHTML) + Number(xiaoji[2].innerHTML) + Number(xiaoji[3].innerHTML)
            }
            jian[i].i = i
            jian[i].onclick = function () {
                if (shuliang[this.i].innerHTML != 0) {
                    shuliang[this.i].innerHTML--
                    xiaoji[this.i].innerHTML = Number(danjia[this.i].innerHTML) * Number(shuliang[this.i].innerHTML)
                    zongshu.innerHTML = Number(shuliang[0].innerHTML) + Number(shuliang[1].innerHTML) + Number(shuliang[2].innerHTML) + Number(shuliang[3].innerHTML)
                    zongjia.innerHTML = Number(xiaoji[0].innerHTML) + Number(xiaoji[1].innerHTML) + Number(xiaoji[2].innerHTML) + Number(xiaoji[3].innerHTML)
                }
            }
        }
    </script>

</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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #box {
            margin: 50px auto;
            width: 997px;
            height: 455px;
            user-select: none;
        }

        #box .head {
            width: 1000px;
            height: 50px;
        }

        #box .head li {
            float: left;
            width: 248px;
            height: 48px;
            border: 1px solid #fc87d8;
            border-right: 1px solid #fc87d8;
            background: #fc87d8;
            text-align: center;
            line-height: 50px;
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        #content {
            width: 998px;
            border-left: 1px solid #fc87d8;
            border-right: 1px solid #fc87d8;
            overflow: hidden;
        }

        #content ul {
            width: 1000px;
            border-bottom: 1px solid #fc87d8;
            overflow: hidden;
        }

        #content ul li {
            float: left;
            width: 248.75px;
            height: 100px;
            border-right: 1px solid #fc87d8;
            text-align: center;
            line-height: 100px;
            position: relative;
        }

        #content ul li img {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 90px;
        }

        #content ul li.num span {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            line-height: 30px;
            margin: 35px auto;
            font-weight: bold;
        }

        #content ul li.num span.jia,
        #content ul li.num span.jian {
            background: #ddd;
            cursor: pointer;
        }

        #content ul li.num span.shuliang {
            width: 70px;
        }

        #foot {
            /* margin: 10px auto; */
            width: 1000px;
            height: 50px;
            background: #fc87d8;
        }

        #foot p {
            width: 250px;
            float: right;
            text-align: center;
            line-height: 50px;
            color: white;
        }

        #foot p span {
            color: deeppink;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div id="box">
        <ul class='head'>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
        </ul>
        <div id="content">
            <ul>
                <li class='img'>
                    <img src="images/1.webp">
                </li>
                <li class='danjia'>8</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
            <ul>
                <li class='img'>
                    <img src="images/2.webp">
                </li>
                <li class='danjia'>10</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
            <ul>
                <li class='img'>
                    <img src="images/3.webp">
                </li>
                <li class='danjia'>12.5</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
            <ul>
                <li class='img'>
                    <img src="images/4.webp">
                </li>
                <li class='danjia'>23</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
        </div>
        <div id="foot">
            <p>合计费用￥ <span class='zongjia'>0</span></p>
            <p>已选中商品: <span class='zongshu'>0</span> 个</p>
        </div>
    </div>

    <script>

        var jia = document.getElementsByClassName('jia'),
            jian = document.getElementsByClassName('jian'),
            shuliang = document.getElementsByClassName('shuliang'),
            xiaoji = document.getElementsByClassName('xiaoji'),
            zongshu = document.getElementsByClassName('zongshu')[0],
            zongjia = document.getElementsByClassName('zongjia')[0],
            danjia = document.getElementsByClassName('danjia');

        for (var i = 0; i < shuliang.length; i++) {
            // console.log( i )
            /*
                jian[0].i = 0
                jian[1].i = 1
                jian[2].i = 2
                jian[3].i = 3
            */
            jia[i].i = i;
            jian[i].i = i;
            jia[i].onclick = function () {


                var num = 0;
                var tot = 0;

                shuliang[this.i].innerHTML++
                //shuliang * danjia = xiaoji
                xiaoji[this.i].innerHTML = shuliang[this.i].innerHTML * danjia[this.i].innerHTML;

                for (var i = 0; i < danjia.length; i++) {

                    // console.log( i )
                    /*
                        shuliang[0].innerHTML
                        shuliang[1].innerHTML
                        shuliang[2].innerHTML
                        shuliang[3].innerHTML
                    */
                    // num += parseFloat(  shuliang[i].innerHTML );
                    num += shuliang[i].innerHTML * 1;
                    tot += xiaoji[i].innerHTML / 1

                }

                // console.log( typeof shuliang[0].innerHTML )
                zongshu.innerHTML = num
                zongjia.innerHTML = tot

            }
            jian[i].onclick = function () {

                var num = 0;
                var tot = 0;

                shuliang[this.i].innerHTML--
                //shuliang * danjia = xiaoji

                if (shuliang[this.i].innerHTML < 0) {
                    shuliang[this.i].innerHTML = 0
                }

                xiaoji[this.i].innerHTML = shuliang[this.i].innerHTML * danjia[this.i].innerHTML;

                for (var i = 0; i < danjia.length; i++) {

                    num += shuliang[i].innerHTML * 1;
                    tot += xiaoji[i].innerHTML / 1

                }
                zongshu.innerHTML = num
                zongjia.innerHTML = tot
            }
        }
    </script>
</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>Document</title>
    <style>
    
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        #box {
            margin: 50px auto;
            width: 997px;
            height: 455px;
            user-select: none;
        }
        #box .head {
            width: 1000px;
            height: 50px;
        }
        #box .head li {
            float: left;
            width: 248px;
            height: 48px;
            border: 1px solid #fc87d8;
            border-right: 1px solid #fc87d8;
            background: #fc87d8;
            text-align: center;
            line-height: 50px;
            color: white;
            font-weight: bold;
            font-size: 14px;
        }
        #content {
            width: 998px;
            border-left: 1px solid #fc87d8;
            border-right: 1px solid #fc87d8;
            overflow: hidden;
        }
        #content ul {
            width: 1000px;
            border-bottom: 1px solid #fc87d8;
            overflow: hidden;
        }
        #content ul li {
            float: left;
            width: 248.75px;
            height: 100px;
            border-right: 1px solid #fc87d8;
            text-align: center;
            line-height: 100px;
            position: relative;
        }
        #content ul li img {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 90px;
        }
        #content ul li.num span {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            line-height: 30px;
            margin: 35px auto;
            font-weight: bold;
        }
        #content ul li.num span.jia, #content ul li.num span.jian {
            background: #ddd;
            cursor: pointer;
        }
        #content ul li.num span.shuliang {
            width: 70px;
        }
        #foot {
            /* margin: 10px auto; */
            width: 1000px;
            height: 50px;
            background: #fc87d8;
        }
        #foot p {
            width: 250px;
            float: right;
            text-align: center;
            line-height: 50px;
            color: white;
        }
        #foot p span {
            color: deeppink;
            font-size: 20px;
            font-weight: bold;
        }
    
    </style>
</head>
<body>

    <div id="box">
        <ul class='head'>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li style='border-right:1px solid #c36;'>小计</li>
        </ul>
        <div id="content">
            <ul>
                <li class='img'>
                    <img src="images/1.webp">
                </li>
                <li class='danjia'>8</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
            <ul>
                <li class='img'>
                    <img src="images/2.webp">
                </li>
                <li class='danjia'>10</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
            <ul>
                <li class='img'>
                    <img src="images/3.webp">
                </li>
                <li class='danjia'>12.5</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
            <ul>
                <li class='img'>
                    <img src="images/4.webp">
                </li>
                <li class='danjia'>23</li>
                <li class='num'>
                    <span class='jian'>-</span>
                    <span class='shuliang'>0</span>
                    <span class='jia'>+</span>
                </li>
                <li class='xiaoji'>0</li>
            </ul>
        </div>
        <div id="foot">
            <p>合计费用￥ <span class='zongjia'>0</span></p>
            <p>已选中商品: <span class='zongshu'>0</span> 个</p>
        </div>
    </div>

    <script>

        var jia = document.getElementsByClassName('jia'),
            jian =document.getElementsByClassName('jian'),
            shuliang = document.getElementsByClassName('shuliang'),
            xiaoji = document.getElementsByClassName('xiaoji'),
            zongshu = document.getElementsByClassName('zongshu')[0],
            zongjia = document.getElementsByClassName('zongjia')[0],
            danjia = document.getElementsByClassName('danjia');


        for( var i = 0; i < shuliang.length; i++){

            //绑定自定义属性;
            jia[i].i = i;
            jian[i].i = i;
            //右边+
            jia[i].onclick = function(){
                //绑定自定义属性，做为参数传值;
                var idx = this.i;
                shuliang[idx].innerHTML++
                Change(idx)

            }
            //左边-
            jian[i].onclick = function(){
                var idx = this.i;
                if(  --shuliang[idx].innerHTML < 0 ){shuliang[idx].innerHTML=0}
                Change(idx)
            }
        }

        function Change(idx){
            //定义初始值num , tot保存总量; 
            var num = 0;
            var tot = 0;

            //xiaoji的计算;
            xiaoji[idx].innerHTML=shuliang[idx].innerHTML*danjia[idx].innerHTML;
            for( var i = 0 ; i< danjia.length ; i++){
                num += shuliang[i].innerHTML*1; 
                tot += xiaoji[i].innerHTML/1
            }
            zongshu.innerHTML = num
            zongjia.innerHTML = tot
        }
    </script>
</body>
</html>

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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Microsoft YaHei, serif;
        }

        li {
            list-style: none;
        }

        #box {
            width: 1000px;
            margin: 50px auto;
        }

        #top {
            width: 100%;
            background: #f8f8f8;
            border: 1px solid #ddd;
            height: 40px;
        }

        #top li {
            position: relative;
            float: left;
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            cursor: pointer;
        }

        #top li span.red {
            color: red;
        }

        #top li div {
            display: none;
            position: absolute;
            z-index: 99;
            top: -1px;
            left: 0;
            width: 100px;
            height: 80px;
            font-size: 14px;
            border: 1px solid #ddd;
            background: #ffffff;
        }

        #content {
            width: 100%;
            margin-top: 10px;
        }

        #content li {
            position: relative;
            float: left;
            margin: 5px 14px;
            width: 200px;
            height: 230px;
            padding: 10px;
            border: 1px solid #eee;

        }

        #content li img {
            width: 200px;
            height: 200px;
        }

        #content li p {
            font-size: 14px;
        }

        #content li div {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50px;
            height: 50px;
            background: url("images/price.png");
            text-align: center;
            line-height: 50px;
            color: #fff318;
            font-size: 14px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div id="box">
        <ul id="top">
            <li>流行</li>
            <li>热销</li>
            <li>上新</li>
            <li class="price">
                <span>价格</span>
                <div class="hide">
                    <p>从高到底</p>
                    <p>从低到高</p>
                </div>
            </li>
        </ul>
        <ul id="content">
            <li>
                <img src="images/xh_img1.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>500</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img2.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>100</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img3.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>300</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img4.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>700</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img5.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>130</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img6.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>215</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img7.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>97</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img8.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>99.5</span>
                </div>
            </li>
        </ul>
    </div>
    <script>
        var price = document.getElementsByClassName('price')[0],
            priceSpan = price.getElementsByTagName('span')[0],
            hide = document.getElementsByClassName('hide')[0],   //oHiden = hide
            p = hide.getElementsByTagName('p'),   //btns = p
            content = document.getElementById('content'),       //content = con
            lis = content.getElementsByTagName('li'),
            spans = content.getElementsByTagName(('span')),      //spanS = span
            arr = [];
        // 之前做的点击事件，后来发现教学讲的是鼠标事件
        price.onmouseenter = function () {
            hide.style.display = 'block';
        }
        price.onmouseleave = function () {
            hide.style.display = 'none';
        }
        // 之后将价格放入数组中,我之前是与spans绑定，教学里是与li相绑定，是为了可以直接控制li的显示
        // 我之前的:也可以
        // for (var i = 0; i < spans.length; i++) {
        //     // *1让arr里面是数字类型
        //     arr[i][0] = spans[i].innerHTML * 1
        //     arr[i][1] = lis[i].innerHTML
        // }
        // 讲解的:构建双层数组
        for (var i = 0; i < lis.length; i++) {
            arr.push([])
            arr[i][0] = spans[i].innerHTML * 1
            arr[i][1] = lis[i].innerHTML
        }

        //   点击事件：从高到低和从低到高
        for (var i = 0; i < p.length; i++) {
            p[i].i = i
            p[i].onclick = function () {
                // 刚开始这里的i我也搞不明白，不过觉得这里直接取i时会报错，取this.i不会报错，可能是因为方法内i未定义吧。
                hide.style.display = 'none'
                // priceSpan.innerHTML = p[this.i].innerHTML//或者
                priceSpan.innerHTML = this.innerHTML
                priceSpan.className = 'red'
                // 判断是哪个选项：从高到低还是从低到高
                priceSort(this.i)
                // 商品信息置空
                content.innerHTML = ''
                // 显示商品
                console.log(arr[1][1])
                for (var i = 0; i < arr.length; i++) {
                    content.innerHTML += '<li>' + arr[i][1] + '</li>'
                }
            }
        }

        // 在外面封装一个函数
        function priceSort(idx) {
            arr.sort(function (a, b) {
                // 这里的a,b表示的是二维数组里面嵌套的小数组，所以这里想要取值的话，需要使用下标
                // 判断升序还是降序，是0的话从高到低，降序:b[0]-a[0]；是1的话，从低到高，升序：a[0]-b[0]；
                return idx ? a[0] - b[0] : b[0] - a[0]
            })
            console.log(arr)
        }
    </script>
</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>Document</title>
    <style>
        *{margin:0;padding:0;font-family: Microsoft YaHei,serif;}
	    li{list-style: none;}
        #box{
            width:1000px;
            margin:50px auto;
        }
        #top{
            width:100%;
            background: #f8f8f8;
            border:1px solid #ddd;
            height: 40px;
        }
        #top li{
            position: relative;
            float: left;
            width:80px;
            height: 40px;
            text-align: center;
            line-height:40px;
            font-size:14px;
            cursor: pointer;
        }
       #top li span.red{
            color:red;
        }
        #top li div{
            display: none;
            position: absolute;
            z-index: 99;
            top:-1px;
            left:0;
            width: 100px;
            height: 80px;
            font-size:14px;
            border:1px solid #ddd;
            background: #ffffff;
        }
        #content{
            width:100%;
            margin-top:10px;
        }
        #content li{
            position: relative;
            float: left;
            margin:5px 14px;
            width:200px;
            height: 230px;
            padding:10px;
            border:1px solid #eee;
            
        }
        #content li img{
            width: 200px;
            height: 200px;
        }
        #content li p{
            font-size:14px;
        }
        #content li div{
            position: absolute;
            bottom:0;
            right:0;
            width: 50px;
            height: 50px;
            background: url("images/price.png");
            text-align: center;
            line-height: 50px;
            color: #fff318;
            font-size:14px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    
    <div id="box">
        <ul id="top">
            <li>流行</li>
            <li>热销</li>
            <li>上新</li>
            <li class="price">
                <span>价格</span>
                <div class="hide">
                    <p>从高到底</p>
                    <p>从低到高</p>
                </div>
            </li>
        </ul>
        <ul id="content">
            <li>
                <img src="images/xh_img1.jpg" alt=""> 
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>500</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img2.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>100</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img3.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>300</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img4.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>700</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img5.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>130</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img6.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>215</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img7.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>97</span>
                </div>
            </li>
            <li>
                <img src="images/xh_img8.jpg" alt="">
                <p>甜美七分袖荷叶边条纹设</p>
                <div>
                    ￥<span>99.5</span>
                </div>
            </li>
        </ul>
    </div>

    <script>

        var price = document.getElementsByClassName('price')[0],
            PriceSpan = price.getElementsByTagName('span')[0],
            oHiden = document.getElementsByClassName('hide')[0],
            btns = oHiden.getElementsByTagName('p'),
            con = document.getElementById('content'),
            lis = con.getElementsByTagName('li'),
            spanS = con.getElementsByTagName('span'),
            arr = [];
        price.onmouseenter = function(){
            oHiden.style.display = 'block';
        }
        price.onmouseleave = function(){
            oHiden.style.display = 'none';
        }
        /*
            [
                [ 价格 , 对应整个li样式 ],
                [ 97 , 对应整个li样式 ],
                [ 97 , 对应整个li样式 ],
                [ 97 , 对应整个li样式 ],
				....
            ]
        */
        // class {}
        for( var i = 0; i < lis.length; i++){

            arr.push([])
            // console.log(arr[i])
            // console.log( i )
            arr[i][0] = spanS[i].innerHTML*1;
            arr[i][1] = lis[i].innerHTML;

        }
        // console.log( arr )
        for( var i = 0; i < btns.length;i++){
         
            btns[i].i = i;  // 0 1 
            btns[i].onclick = function(){
                oHiden.style.display = 'none'
                PriceSpan.innerHTML = this.innerHTML;
                PriceSpan.className = 'red'
                // console.log( this.i )
                PriceSort( this.i )
            }
        
            // console.log( i )
        }
        //升 ， 降 ？
        function PriceSort( idx ){
            // console.log( idx )
            arr.sort(function(  a , b ){
                // console.log( a )
                // 0 : 降
                // 1 : 升
                return idx ? a[0] - b[0] : b[0] - a[0]
            })
            console.log( arr )
            con.innerHTML = ''
            for( var i = 0 ; i <arr.length ; i++){
                con.innerHTML += "<li>"+ arr[i][1]+"</li>";
            }
        }
    </script>
</body>
</html>