文章目录
- 一、算法
- 1.1 计算给定数组 arr 中所有元素的总和
- 1.2 超出范围用省略号代替
- 1.3 数组去重
- 1.4 删除数组区间外的所有值
- 1.5 统计字符在字符串出现的位置
- 二. 实战
- 2.1 全选与反选
提示:以下是本篇文章正文内容,下面案例可供参考
一、算法
1.1 计算给定数组 arr 中所有元素的总和
<script>
function sum(arr) {
let s = 0;
for (let i = 0; i < arr.length; i++) {
s += arr[i]
}
return s;
}
let sum = sum([1, 2, 3, 4]);
console.log(sum); // 10
// 变量冲突
</script>
解析
1.将给定的数组传入sum这个函数中
2.定义一个变量,将它的值设置为0
3.循环遍历数组,进行累加
4.将累加的值返回
提示:
我用let声明的变量sum和定义的函数sum会有变量冲突的问题,这也是留的一个小坑
如果将 let 改为 var 的话就不会报错
1.2 超出范围用省略号代替
要求如下:
- 创建一个函数truncate(str, maxlength),来检查 str 的长度。
- 如果超过 maxlength —— 应使用 “…” 来代替 str 的结尾部分,长度仍然等于 maxlength。
- 函数的结果应该是截断后的文本。
<script>
function truncate(str, maxlength) {
if(str.length>maxlength){
let str1= str.substring(0,maxlength-1)+"\u2026";
return str1;
}
return str
}
let str1 = truncate("What I'd like to tell on this topic is:", 20);
console.log(str1); // "What I'd like to te…"
let str2 = truncate('Hi everyone!', 20);
console.log(str2); // "Hi everyone!"
解析
1.向truncate 函数传入两个实参,分别用str 和 maxlength 这两个形参来接收
2.如果传入字符串的长度比 maxlength 大的话,就用 substring 方法来进行截取,
这里的长度要减一是因为,省略号要占一个位置,我这里使用的是省略号的Unicode
编码来占据一个位置。
3.如果传入的字符串长度比 maxlength 来的小的话就不需要修改。
1.3 数组去重
要求如下:
数组去重,编写一个函数unique(arr),将数组中有重复出现的元素,只保留一个。
<script>
function unique(arr) {
let arr1=[];
for(let i=0; i<arr.length;i++){
if(arr1.indexOf(arr[i])==-1){
arr1.push(arr[i])
}
}
return arr1;
}
let rs3 = unique([1, 2, 3, 4, 2]);
console.log(rs3); // [1, 2, 3, 4]
解析
1.在 unique 函数中,声明一个空数组
2.遍历传入的数组,使用indexOf方法来判断空数组中是否有这个元素,如果
有就不添加,如果没有就添加
1.4 删除数组区间外的所有值
要求如下:
- 写一个函数,该函数获取一个数组arr,并删除其中介于a和b区间以外的所有值
- 检查:a <= x <= b。该函数应该只修改数组,不应该返回任何值。
<script>
function filterRangeInPlace(arr, item1, item2) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] < item1 || arr[i] > item2) {
console.log(arr[i]);
console.log(i);
arr.splice(i, 1);
i--;
}
}
}
let arr4 = [2, 3, 4, 5, 6, 1];
filterRangeInPlace(arr4, 1, 4);
console.log(arr4); // [2, 3, 1]
</script>
解析
1.遍历数组,找寻不符合区间的数
2.使用splice() 方法,删除该数
3.这里的 i-- 是为了,返回上一层循环
1.5 统计字符在字符串出现的位置
要求如下:
- 获取字符串里出现子串的位置。
- 写一个函数appear(str, str_target),返回str_target子串在str中出现的所有位置
<script>
function appear(str, str_target) {
let index = str.indexOf(str_target);
let arr = [];
while (index != -1) {
arr.push(index)
console.log(str_target + "出现的位置是" + index);
index = str.indexOf(str_target, index + 1)
}
return arr;
}
let arr5 = appear('abascbascbabasbascbascascbab', 'ab');
console.log(arr5);
</script>
解析
1.声明一个变量,使用 indexOf 来判断字符串中该字符的位置
2.用 while 循环来检索index的值
3.只要符合条件,index+1
二. 实战
2.1 全选与反选
要求如下:
1. 当用户选中“全选”时,自动选中所有语言,并把“全选”变成“全不选”;
2. 当用户去掉“全不选”时,自动不选中所有语言;
3. 但该用户点击“反选”时,自动把所有语言的复选框状态反转(选中的变为未选,未选的变为选中);
4. 当用户把所有语言都手动勾上是,“全选”被自动勾选,并变为“全不选”;
5. 当用户手动去掉选中至少一种语言时,“全不选”自动变为“全选”,且全选复选框不选中;
6. 点击提交按钮后,弹框将所有选中的语言展示出来。
这里主要用 jQuery 的方式实现
代码如下:
- 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>
<!-- 引入 jq 的库-->
<script src="jquery-3.6.0.min.js"></script>
<!-- 引入自己的js文件-->
<script src="./DT.js"></script>
<style>
legend {
font-size: 16px;
line-height: 30px;
}
div {
font-size: 14px;
line-height: 2;
}
pre {
background-color: #f2f2f2;
padding: 10px 0;
}
</style>
</head>
<body>
<form action="#" id="testForm">
<legend>请选择想要学习的编程语言:</legend>
<fieldset>
<div>
<input type="checkbox" id="checkAll" class="q_check"><label for="checkAll" class="nocheck">全选</label>
<input type="checkbox" id="reverse" class="f_check"><label for="reverse">反选</label>
</div>
<div>
<input type="checkbox" name="lang" value="javascript" class="item"> JavaScript
</div>
<div>
<input type="checkbox" name="lang" value="python" class="item"> Python
</div>
<div>
<input type="checkbox" name="lang" value="ruby" class="item"> Ruby
</div>
<div>
<input type="checkbox" name="lang" value="java" class="item"> Java
</div>
<div>
<input type="checkbox" name="lang" value="php" class="item"> PHP
</div>
<div>
<input type="button" value="提交" id="sub">
</div>
</fieldset>
</form>
<pre>
<b>要求:</b>
自行创建外部js文件:answer.js文件,并引入到本html文件中。实现下列功能的代码请写在js文件中。为了方便阅卷,js文件请和html文件放在同一级目录下。
绑定合适的事件处理函数,实现一下逻辑:
1. 当用户选中“全选”时,自动选中所有语言,并把“全选”变成“全不选”;
2. 当用户去掉“全不选”时,自动不选中所有语言;
3. 但该用户点击“反选”时,自动把所有语言的复选框状态反转(选中的变为未选,未选的变为选中);
4. 当用户把所有语言都手动勾上是,“全选”被自动勾选,并变为“全不选”;
5. 当用户手动去掉选中至少一种语言时,“全不选”自动变为“全选”,且全选复选框不选中;
6. 点击提交按钮后,弹框将所有选中的语言展示出来。
</pre>
</body>
</html>
- js 代码如下:
//jq 的入口函数
$(function() {
// 获取复选框
let $items = $(".item");
// 获取全选框的值
let $quanxuan = $(".nocheck");
console.log($items);
// 点击全选时
$(".q_check ").click(function() {
// 让复选框的checked属性等于全选的checked
$items.prop("checked", $(this).prop("checked"));
//判断全选框的cheeked,
//如果是选中状态就将它的值改为全不选
//如果是未选中状态,则反之
if ($(this).prop("checked")) {
$quanxuan.text("全不选");
} else {
$quanxuan.text("全选");
}
})
// 当用户把所有语言都手动勾上时,
// “全选”被自动勾选,并变为“全不选”
// 这里封装成一个方法
function yes() {
let len1 = $items.length;
// console.log(len1);
let len2 = $('.item:checked').length;
// console.log(len2);
if (len1 == len2) {
$('.q_check').prop('checked', true);
$('.nocheck').text('全不选')
} else {
$('.q_check').prop('checked', false);
$('.nocheck').text('全选')
}
}
// 点击反选
$(".f_check").click(function() {
// 遍历复选框元素,让它们的checked值与自身相反
$items.each(function() {
this.checked = !this.checked;
})
// 如果点击反选时,
// 复选框中中没有一个元素被选中时触发
yes();
})
// 复选框全部勾选时触发
$items.click(function() {
yes();
})
// 点击提交时触发
let $sub = $("#sub");
$sub.click(function() {
// 声明一个变量存储选中的值
let str = '';
// 遍历复选框,将复选框中带有checked属性的筛选出来
$items.each(function(index, val) {
// each 遍历的是dom对象,所以要转换为jq对象
if ($(val).prop("checked")) {
str += $(val).val() + " ";
}
})
// 判断str有没有值
// 如果有就输出
// 没有则提示
if (str != '') {
alert("你选中的有 " + str)
} else {
alert("你没有选中任何数")
}
})
})