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

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

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

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）前言第十二节课：字符串、数组的方法一、字符串的方法1.定义/声明方式2.length长度3.charAt返回指定索引的字符串（输入下标返回字符）4.concat字符串拼接/合并字符串5.indexOf查找字符串（输入字符返回下标）6.charCodeAt(index)返回指定索引的ASCII编码（了解即可，不详解）7.formCharCode:返回指定ASCII编码的字符串（了解即可，不详解）8.substring：截取字符串（根据下标截取字符串，左闭右开）和substr9.slice截取字符串(根据下标截取字符串，前闭后开)10.str.toLocaleUpperCase():小写转大写; str.toLocaleLowerCase():大写转小写11.match匹配的值：正则用的多12.search返回检索字符串首次出现的位置；未找到返回-113.replace替换：输入替换字符，返回替换后的字符串14.str.split()分割成字符串数组：去掉当前字符，然后数组输出其他字符组成的串15.字符串拼接 二、Array()数组1.定义/声明方式2.length长度3.通过数组索引，访问值4.在数组后面添加项5.concat数组拼接6.join：将数组拼接成字符串7.indexOf查找数组里面的数据8.delete删除项9.unshift()向数组的头部添加一个或更多元素，并返回新的长度10.push(item 1,item 2, ...)向数组的尾部添加一个或更多元素，并返回新的长度11.shift()删除数组的第一个元素(返回删除对象)12.pop()删除数组的最后一个元素(返回删除对象) 三、arr.splice：数组的增加替换删除（重难点）四、数组的排序：sort和map（重难点）五、slice切割数组六、数组的方法：filter和find七、find和map的组合用法八、数组去重九、冒泡排序十、购物车和鲜花价格排序的案例1.购物车2.鲜花价格排序

前言

差两节课

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

一、字符串的方法

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 = '514';//length /返回字符串的长度console.log(str1.length); //7console.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 = '514'// 查找字符串，返回查找字符串首次出现的位置；console.log(str.indexOf('1')) //value匹配字符console.log(str.indexOf('1', 4)) //index 开始检索的位置，合法值是0到string.length-1，默认0// 若匹配失败返回-1console.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 = '514'console.log(str.lastIndexOf('1'))

效果：

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

// 返回指定索引的ASCLL编码var str = '5314'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 = '514'// 截取字符串，从start开始，截止到end前，不包含endconsole.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)); // 正则写法，不区分大小写 // 如果匹配不到对应的情况，返回nullconsole.log(str3.match('1'));// 在使用正则的时候，用的比较多。

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

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

var str1 = 'coisini'var str2 = '514'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 = '514'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 = '514'// str.split(value/RegExp,length-1) 方法用于把一个字符串分割成字符串数组，返回分割后的数组// 第二个参数是可选参数，是指定返回数组的长度，最大为str.length-1,不写默认str.length-1console.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] = 8888console.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 + arr3console.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); //返回删除对象

效果：

三、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 0return 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 - breturn 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 = ijia[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 = ijian[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 = 0jian[1].i = 1jian[2].i = 2jian[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 = xiaojixiaoji[this.i].innerHTML = shuliang[this.i].innerHTML * danjia[this.i].innerHTML;for (var i = 0; i < danjia.length; i++) {// console.log( i )/*shuliang[0].innerHTMLshuliang[1].innerHTMLshuliang[2].innerHTMLshuliang[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 = numzongjia.innerHTML = tot}jian[i].onclick = function () {var num = 0;var tot = 0;shuliang[this.i].innerHTML--//shuliang * danjia = xiaojiif (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 = numzongjia.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 = numzongjia.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 = hidep = hide.getElementsByTagName('p'), //btns = pcontent = document.getElementById('content'), //content = conlis = content.getElementsByTagName('li'),spans = content.getElementsByTagName(('span')),//spanS = spanarr = [];// 之前做的点击事件，后来发现教学讲的是鼠标事件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 * 1arr[i][1] = lis[i].innerHTML}// 点击事件：从高到低和从低到高for (var i = 0; i < p.length; i++) {p[i].i = ip[i].onclick = function () {// 刚开始这里的i我也搞不明白，不过觉得这里直接取i时会报错，取this.i不会报错，可能是因为方法内i未定义吧。hide.style.display = 'none'// priceSpan.innerHTML = p[this.i].innerHTML//或者priceSpan.innerHTML = this.innerHTMLpriceSpan.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>

预习：从零开始学前端：json对象，对象的序列化和反序列化 — 今天你学习了吗？（JS：Day15）