函数和数组，字符串逻辑题

函数和数组逻辑题

函数
- 预解析
- 递归求兔子序列
数组
- 选项卡
- 全选和反选
- 点击更换背景颜色
- 简易日历
- 30个整型元素的数组,每五个数求出一个平均值，存入新数组
- 二维数组
- 找出数组中小于10 的数据
- 编写函数has(arr , 60) 判断数组中是否存在60这个元素，返回布尔类型
- 编写函数norepeat(arr) 将数组的重复元素去掉，并返回新的数组
- 有一个从小到大排好序的数组。现输入一个数，要求按原来的规律将它插入数组中
- 求godlist之中的总价格
- 求两个数组的交集
- 找到所有数组中消失的数字
- 统计数组中元素出现的次数
字符串
- 过滤掉全部的 "SM"
- 翻转字符串
- aabccd，去掉重复的字符，使结果显示 abcd
- 回文数
- 要求：检查一个字符串是否以指定的字符串结尾
- 随机生成一个五位以内的数，然后输出该数共有多少位，每位分别是什么
- 寻找连续5位数中的最大数

函数

预解析

// 第一题// a();// var a = 10;// function a() {//   console.log(1);// }// a();/*01  var a;02  a = {//函数地址给了变量aconsole.log(1);}03  a();//调用函数04  a = 10;//最后给a赋值05  a();//会报错，因为上面已经把a变量赋值为一个值10预解析：01: var a 把变量a提升，但是没有赋值02：把函数a（这个变量）提升，并且把函数的地址赋值给变量a03: 最后调用的函数，由于上面预解析的时候，把变量a预解析之后，但是还有最初的a的值为10，需要在函数提升完毕后，再进行赋值04：最后输出的是 一个函数的返回值注意点1：预解析只能针对var定义的变量或者函数注意点2：+   1.：通过var定义变量,可以重复定义同名的变量,并且后定义的会覆盖先定义的+   2：如果通过let定义变量,  "相同作用域内"不可以重复定义同名的变量*///第二题：// console.log(num);// var num = 10;//最后打印的结果为：undefined ，这是因为var声明的变量，先把num提升到前面（没有赋值），然后打印（输出未定义），最后赋值num = 10;//第三题：// fun();// function fun() {//   console.log(1);// }//最后的结果：先提升这个变量fun，里面有着一个函数地址（并且打印一个结果为1），最后调用函数fun() ---输出1//第四题：// console.log(fn);// fn();// var fn = function () {//   console.log(2);// }//先把fn这个变量提升，但是没有赋值，然后打印fn---输出的是undefined，然后调用函数，显示报错//最后的结果：打印fn---输出的是undefined。 fn()---fn is not a function//第五题：fun(); //65行fn(); //66行function fun() { //67行console.log('我是一个fun 函数'); //68行}var fn = function () { //70行console.log('我是 fn函数'); //71行}fn(); //73行fn = 100; //74行fn(); //75行console.log(fn); //76行/*分析：01：fun这个变量提升（里面是一个函数地址）02：fn这个变量提升（里面未赋值）03：然后开始执行65行的代码，调用函数，输出68行的代码 ---结果为：我是一个fun 函数04：在执行66行代码，调用fn函数 ---结果为报错：fn不是一个函数注意点：报错后，后续的代码是不执行的，因为没有抛出错误 所以需要把报错的代码注释掉后，再向下面执行代码05：执行70行代码，给变量fn赋值一个函数地址06:执行73行代码，调用函数fn，执行71行代码 ---结果为：我是 fn函数07：给fn变量赋值，原本为函数地址，修改为值10008：执行75行代码，调用函数fn,由于fn已经修改为值100了，不再是函数地址 ---结果为：报错，fn不是一个函数09：执行76行代码，输出的值为100；*//*输出的结果：01:65行--- 结果为：我是一个fun 函数02：66行 ---结果为报错：fn不是一个函数 注意点：报错后，后续的代码是不执行的，因为没有抛出错误03：73行 ---结果为：我是 fn函数04：75行 ---结果为：报错，fn不是一个函数05：76行 ---结果为：100；*/

递归求兔子序列

    // 需求：求兔子序列  1 1 2 3 5 8 13 21.......// 推导公式：fib(m) = fib(m-1) + fib(m-2)function fib(n) {if (n <= 2) {return 1}return fib(n - 2) + fib(n - 1)}console.log(fib(5));

数组

选项卡

  <div class="box"><ul class="tab-hd"><li class="active">体育</li><li>游戏</li><li>运动</li><li>凉凉</li></ul><div class="tab-con"><div class="item">体育</div><div class="item">游戏</div><div class="item">运动</div><div class="item">凉凉</div></div></div>.active {background: orange;}* {margin: 0;padding: 0;}ul,li {list-style: none;}.box {margin: 0 auto;width: 800px;min-height: 50px;background: pink;}.tab-hd {height: 50px;}.tab-hd li {box-sizing: border-box;float: left;width: 200px;height: 50px;text-align: center;line-height: 50px;text-decoration: none;color: #000;}.active {background: orange;border: 1px solid red;}.tab-con {position: relative;height: 300px;width: 100%;background: green;}.tab-con .item {position: absolute;top: 0;left: 0;display: none;}.tab-con .item:nth-child(1) {display: block;}let box = document.querySelector(".box");let tab_hd = box.querySelector(".tab-hd");let tab_con = box.querySelector(".tab-con");let lis = tab_hd.querySelectorAll("li");let items = tab_con.querySelectorAll(".item")// console.log(items);lis.forEach((v, i) => {//点击上面的选项栏目lis[i].onclick = function () {let index = i;lis.forEach((v, i) => { //排他思想lis[i].className = "";items[i].style.display = "none"})this.className = "active";//下面的对应的itemitems.forEach((v, i) => {// console.log(i);items[index].style.display = "block"})}})

全选和反选

  <button class="checkAll">全选</button><button class="checkAllNo">全不选</button><button class="checkInverse">反选</button><br><input checked class="ckBox" type="checkbox" name="" id=""><input type="checkbox" name="" id=""><input type="checkbox" name="" id=""><input type="checkbox" name="" id=""><input type="checkbox" name="" id=""><input type="checkbox" name="" id=""><input type="checkbox" name="" id=""><input type="checkbox" name="" id="">let checkAll = document.querySelector(".checkAll");let checkAllNo = document.querySelector(".checkAllNo");let checkInverse = document.querySelector(".checkInverse");let inputs = document.querySelectorAll("input");checkAll.onclick = function () { //全选按钮inputs.forEach((v, i) => {inputs[i].checked = true;})}checkAllNo.onclick = function () { //全不选按钮inputs.forEach((v, i) => {inputs[i].checked = false;})}checkInverse.onclick = function () { //反选inputs.forEach((v, i) => {inputs[i].checked = !inputs[i].checked;})}

点击更换背景颜色

  <button class="btn">点击按钮</button><script>let body = document.body;let btn = document.querySelector(".btn");btn.onclick = function () {body.style.background = `rgb(${randomNum(0,255)},${randomNum(0,255)},${randomNum(0,255)})`// body.style.background = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0,//   255) + ')';}function randomNum(n, m) {let min = n < m ? n : m; //最小值let max = n > m ? n : m //最大值return parseInt((Math.random() * (max - min + 1) + min))}</script>

简易日历

 * {padding: 0;margin: 0;}li {list-style: none;}body {background: #f6f9fc;font-family: arial;}.calendar {width: 210px;margin: 0 auto;padding: 10px 10px 20px 20px;background: #eae9e9;}.calendar ul {width: 210px;overflow: hidden;padding-bottom: 10px;}.calendar li {float: left;width: 58px;height: 54px;margin: 10px 10px 0 0;border: 1px solid #fff;background: #424242;color: #fff;text-align: center;cursor: pointer;}.calendar li h2 {font-size: 20px;padding-top: 5px;}.calendar li p {font-size: 14px;}.calendar .active {border: 1px solid #424242;background: #fff;color: #e84a7e;}.calendar .active p {font-weight: bold;}.calendar .text {width: 178px;padding: 0 10px 10px;border: 1px solid #fff;padding-top: 10px;background: #f1f1f1;color: #555;}.calendar .text h2 {font-size: 14px;margin-bottom: 10px;}.calendar .text p {font-size: 12px;line-height: 18px;}

HTML

  <div id="tab" class="calendar"><ul id="ul"><li class="active"><h2>1</h2><p>JAN</p></li><li><h2>2</h2><p>FER</p></li><li><h2>3</h2><p>MAR</p></li><li><h2>4</h2><p>APR</p></li><li><h2>5</h2><p>MAY</p></li><li><h2>6</h2><p>JUN</p></li><li><h2>7</h2><p>JUL</p></li><li><h2>8</h2><p>AUG</p></li><li><h2>9</h2><p>SEP</p></li><li><h2>10</h2><p>OCT</p></li><li><h2>11</h2><p>NOV</p></li><li><h2>12</h2><p>DEC</p></li></ul><div class="text" id="txt"><h2 id="month">1月活动</h2><p id="title">快过年了，大家可以商量着去哪玩吧～</p></div></div>

 // 【1】点击月份按钮的时候切换 class名 active//  1】获取元素var lis = document.getElementsByTagName('li');var arr = ['1月份活动的数据是好好过年','2月份活动的数据是好好过年','3月份活动的数据是好好过年','4月份活动的数据是好好过年','5月份活动的数据是好好过年','6月份活动的数据是好好过年','7月份活动的数据是好好过年','8月份活动的数据是好好过年','9月份活动的数据是好好过年','10月份活动的数据是好好过年','11月份活动的数据是好好过年','12月份活动的数据是好好过年']//  2】绑定点击事件for (var i = 0; i < lis.length; i++) {// 给每一个按钮添加一个index属性，属性值为他的索引lis[i].index = i;lis[i].onclick = function () {// 排他思想for (var j = 0; j < lis.length; j++) {lis[j].className = '';}this.className = 'active';// this.index 获取当前点击的index 的属性值month.innerHTML = this.index + 1 + '月份活动'// 用index 的属性值来去数组中对应的数据title.innerHTML = arr[this.index];}}

30个整型元素的数组,每五个数求出一个平均值，存入新数组

需求：定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数（就是把偶数的放入数组之中）；
然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程。

    var arr = []; //定义一个数组var arrAverage = []; //平均值的数组var sum = 0;var avg;for (var i = 0; i <= 60; i++) {if (i % 2 === 0 && i !== 0) {arr.push(i)}}// console.log(arr); //arr现在为带有偶数的数组 2 -58for (var i = 0; i < arr.length; i++) { //遍历偶数的数组sum += arr[i];if ((i + 1) % 5 === 0) {// console.log(sum);// console.log(avg = sum / 5);arrAverage.push(avg = sum / 5);sum = 0;}}console.log(arrAverage);

二维数组

通过循环按行顺序得到一个5×5的二维数组赋值1到25的自然数，然后输出该数组的左下半三角。
试编程。提示：多维数组，也就是数组里面的数据也是数组（二维数据），会涉及数据的存储区别
// 结果
// [
// [1, 2, 3, 4, 5],
// [6, 7, 8, 9, 10],
// [11, 12, 13, 14, 15],
// [16, 17, 18, 19, 20],
// [21, 22, 23, 24, 25]
// ]
// 1
// 6 7
// 11 12 13
// 16 17 18 19
// 21 22 23 24 25

//第一步：先创建一个1-25的数组let arr = []; //定义一个空数组for (var i = 1; i <= 25; i++) {arr.push(i) //往数组推入1-25}// console.log(arr);数组[1-25]//第二步：循环数组arr，每5个元素推入一个数组，到了第五个后，就直接把数组设置为空let newArr = []; //这个数组里面的元素 存入的是几个数组let arr0 = []; //存放5个元素的数组let sum = "";for (var i = 0; i < arr.length; i++) { //先把5个元素推入一个数组里面let n = i + 1;let sum = arr0.push(n) //sum为推入数组中的每一个元素// console.log(arr0);if ((i + 1) % 5 === 0) { //5个元素为一组，当到5的倍数的时候，就推入下一个数组newArr.push(arr0)// console.log(newArr);arr0 = [] //就直接把数组设置为空，重新给这个数组添加一个数组的地址！（新开辟的空间哦）}}console.log(newArr);//newArr 这个数组 是一个数组里面含有5个元素！ 元素里面试数组！//第三步 newArr数组 遍历数组的元素， // 从数组里面，第一元素，拿到第一个值，第二个元素，拿到第一个和第二个值！let res0 = "";for (var m = 0; m < newArr.length; m++) {// console.log(newArr[m]); //拿到每一个数组中每一个元素！ 再遍历这些数组的每一个元素，for (var j = 0; j <= m; j++) {// console.log(newArr[m][j]);//这是拿到第一个元素的第一个值，第二个元素的第一个值和第二个值！res0 += newArr[m][j] + " ";// console.log(res0);}res0 = res0 + '\n'// console.log(res0);}console.log(res0);

找出数组中小于10 的数据

方法1：// var arr = [10,15,2,32,5,4,20,8,48,54,6];找出数组中小于10 的数据，并组成一个新的数组var arr = [10, 15, 2, 32, 5, 4, 20, 8, 48, 54, 6];let newArr = [];for (var i = 0; i < arr.length; i++) {if (arr[i] < 10) { //小于10的，直接推入新数组之中！newArr.push(arr[i])}}console.log(newArr);方法2：var arr = [10, 15, 2, 32, 5, 4, 20, 8, 48, 54, 6];var newArr = arr.filter(function (item, i) {return item < 10})console.log(newArr); //[2, 5, 4, 8, 6]

编写函数has(arr , 60) 判断数组中是否存在60这个元素，返回布尔类型

    // 方法1let arr = [1, 3, 5, 66, 60];function has(arr, num) {let flag; //1:用来输出返回的布尔值！for (var i = 0; i < arr.length; i++) {//2：判断数组是否含有该元素，若是有就flag为true，并且break 跳出循环!if (arr[i] === num) {flag = true;break //找到了这个num，就直接break ，记住啊!} else {flag = false;}}return flag;}let res = has(arr, 60);console.log(res);方法2： 直接使用some方法let arr = [1, 3, 5, 66, 60];var res = arr.some(function (item) {return item === 60})console.log(res); //true

编写函数norepeat(arr) 将数组的重复元素去掉，并返回新的数组

  // 方法1let arr = [1, 3, 5, 7, 1, 2, 5, 3, 1, 1]function norepeat(arr) {//第一步：定义一个新的数组let newArr = [];//遍历原数组for (var i = 0; i < arr.length; i++) {// console.log(arr[i]);//每一项//第二步：遍历数组，查找新数组中是否含有数组元素！，若是没有就推入该元素，若是有就直接替换！//查找的数组是否含有该元素，直接使用 newArr.indexOf(原数组的元素) === -1 就是代表没有新数组没有该元素！if (newArr.indexOf(arr[i]) === -1) {newArr[newArr.length] = arr[i];}}return newArr}let res = norepeat(arr);console.log(res);//方法2let arr = [1, 3, 5, 7, 1, 2, 5, 3, 1, 1]let newArr = []newArr = arr.reduce(function (pre, cur) {return pre.indexOf(cur) === -1 ? pre.concat(cur) : pre}, [])console.log(newArr);

有一个从小到大排好序的数组。现输入一个数，要求按原来的规律将它插入数组中

HTML

  <p><input id="num1" type="text"><button class="insert">插入</button></p><span></span>

CSS

    * {margin: 0;padding: 0;}p {margin-top: 10px;height: 30px;line-height: 30px;}#num1 {float: left;border: 0;height: 30px;line-height: 30px;width: 200px;background: pink;}.insert {border: 0;float: left;height: 30px;line-height: 30px;width: 60px;background: green;user-select: none;}span {margin-top: 5px;user-select: none;display: block;height: 30px;line-height: 30px;background: #ccc;}

    //第一步：定义一个数组 然后把数组的数据渲染到span标签let span = document.querySelector("span");let inp = document.querySelector("input") //表单输入框let insert = document.querySelector(".insert"); //插入按钮let arr = [1, 3, 66, 99, 32, 10];//第二步：对插入的数组中的数据进行排序1let res = arr.sort(function (a, b) {return a - b;})span.innerHTML = res;//第三步： 再表单中输入一个数，要求按原来的规律将它插入数组中//01：获取到表单的值，但是需要的是给插入添加点击事件内1insert.onclick = function () {let inpVal = inp.value; //01：拿到表单的输入值！//02：把表单的拿到的值，推入原本的数组之中arr.push(inpVal);let res1 = arr.sort(function (a, b) {return a - b;})//03：最后把排序好的数据，在插入span之中！span.innerHTML = res1;//04：插入之后，把输入框的值，清空inp.value = ""}

求godlist之中的总价格

var goodlist = [{name: '圣罗兰小羊皮304',price: 340,qty: 2},{name: '兰蔻大眼精华',price: 680,qty: 3},{name: '小棕瓶',price: 700,qty: 4}]//需求：求godlist之中的总价格let sum = goodlist.reduce(function (pre, cur, index) {// console.log(cur);return pre + cur.price * cur.qty}, 0)console.log(sum);

求两个数组的交集

需求：求两个数的交集
var arr1 = [1, 2, 2, 3, 4, 5];
var arr2 = [2, 2, 3, 4, , 6, 7, 8];

方式1：var arr1 = [1, 2, 2, 3, 4, 5];var arr2 = [2, 2, 3, 4, , 6, 7, 8];let res = arr1.filter(function (items) {return (arr2.indexOf(items) !== -1)}).reduce(function (pre, cur) {return (pre.indexOf(cur) === -1) ? pre.concat(cur) : pre}, [])console.log(res);

找到所有数组中消失的数字

输入: [4,3,2,7,8,2,3,1] 输出【5,6】

方式1：let arr = [4, 3, 2, 7, 8, 2, 3, 1]//第一步：对数组排序arr.sort(function (a, b) {return a - b;})// console.log(arr);let min = arr[0];let max = arr[arr.length - 1];let newArr = []for (var i = min; i <= max; i++) {newArr.push(i)}console.log(newArr); //拿到1-8的数组 //第二步：拿newArr来查询arr中元素，若是arr在完整的数组之中查询不到，就返回这个没有查询到的元素let res = newArr.filter(function (items, i) {return (arr.indexOf(items) === -1)})console.log(res);

统计数组中元素出现的次数

[1,2,3,1,1,1,2,2,3,3,4]
// 1出现的次数 4
// 2出现的次数 3
// 3出现的次数 3
// 4出现的次数 1

let arr = [1, 2, 3, 1, 1, 1, 2, 2, 3, 3, 4]//第一步：遍历数组，创建一个对象obj let obj = {}arr.reduce(function (pre, cur) {//第二步：假如对象里面含有该属性，就+=1，否则就赋值  obj[cur] ---代表属性值if (cur in obj) {obj[cur] += 1;} else {obj[cur] = 1;}})// console.log(obj);for (var k in obj) {console.log(k + "的出现次数为" + obj[k]);}

字符串

过滤掉全部的 “SM”

 var str = 'asdasdSMasdasdasdSMsdasdasdSMsadasd'while (str.indexOf('SM') !== -1) {str = str.replace("SM", "*")}console.log(str); //asdasd*asdasdasd*sdasdasd*sadasd

翻转字符串

var str = ‘abcdefg’
要求结果 gfedcba

    var str = 'abcdefg'// var res = ""// for (var i = str.length - 1; i > 0; i--) {//   res += str[i]// }// console.log(res); //gfedcblet arr = str.split("").reverse().join("")console.log(arr);

aabccd，去掉重复的字符，使结果显示 abcd

    var str = "aabccd";var arr = str.split("")// console.log(arr);let res = arr.reduce(function (pre, cur) {return (pre.indexOf(cur) === -1) ? pre.concat(cur) : pre}, [])// console.log(res);let str2 = res.join("")console.log(str2);

回文数

编写函数，判断一个字符串是否是 “可回文字符串”
- 可回文字符串：正着和反着一样

例如： abcba / 你好世界世好你
返回值是布尔值
var str = “abdx”

var str = "你好世界世好你"var flag = true;function palindrome(str) {var arr = str.split(""); //01：转化为数组var arrStr = arr.join("")// console.log(arr);// console.log(arrStr);//02：翻转数组var newArr = arr.reverse();var newArrStr = newArr.join("")// console.log(newArr);// console.log(newArrStr);if (arrStr === newArrStr) {// alert(str + "：是回文数")flag = true;} else {// alert(str + "：不是回文数")flag = false;}return flag;}palindrome(str)if (flag) {alert(str + "：是回文数")} else {alert(str + "：不是回文数")}

要求：检查一个字符串是否以指定的字符串结尾

如果是，返回true;如果不是，返回false。

var str = "abcdfaaffccd"var value = "c"var flag = true;function fun(str, value) {var arr = str.split("")// console.log(arr);for (var i = 0; i < arr.length; i++) {if (value === arr[arr.length - 1]) {// console.log(value);// console.log(arr[arr.length - 1]);flag = true;break;} else {flag = false;}}return flag;}fun(str, value)if (flag) {alert(str + "是以字符" + value + "结尾")} else {alert(str + "不是以字符" + value + "结尾")}

随机生成一个五位以内的数，然后输出该数共有多少位，每位分别是什么

var str = (Math.random() * 100000).toFixed(0)var res = ""function randomNum(str) {//01：首先把str转化为数组var arr = String(str).split("") //数组var length = arr.length; //长度// console.log(arr, length);//02：遍历数组，拿到每一个元素，输出每一个元素！for (var i = 0; i < arr.length; i++) {// console.log("第" + i + "个数为" + arr[i]);res += "第" + i + "个数为" + arr[i] + "\n"}// console.log(res);res = "这个数字为" + str + "\n" + "长度为： " + length + "\n " + res;//  re = "这个数字为" + length + "位数" + resconsole.log(res);return res}randomNum(str)

寻找连续5位数中的最大数

    var res = '9234567890';// 假设maxNum为一个最大值var maxNum = 0;for (var i = 0; i < res.length - 4; i++) {var num = res.substr(i, 5);// 组成的5位数为 字符串 ，当字符串的比较不会比较大小，而是比较他们ASCII码// 把字符串转换为数值 在进行比较// 如果num的值比maxNum的值大，把num的值赋值给maxNumif (maxNum < Number(num)) {maxNum = Number(num);}}console.log(maxNum);