JS封装函数练习(一)

目录

一、数组编程题

1.移除数组 arr 中的所有值与 item 相等的元素

2.找出元素 item 在给定数组 arr 中的位置 , 如果数组中存在 item,则返回元素在数组中的位置,否则返回 -1

3.实现 fizzBuzz 函数,参数 num 与返回值的关系如下

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

5.自己实现数组官方函数reverse 的功能,改变原数组

6.计算数组 arr中所有元素的总和(数组中的元素均为 Number类型)

7.将数组中每个元素的值都加'10'

8.统计数组arr中值等于item的元素出现的次数

9.只留下数组中的偶数(过滤)

10.为数组 arr 中的每个元素求二次方

11.在数组arr末尾添加元素item

12.删除arr的第一个元素,不修改原数组,返回新数组

二、字符串编程题

1.统计字符串每个字符的个数

2.文本替换

3.编写一个加密程序,加密方法将明文的字母变成其后的第四个字母

4.输入不定长度的金额字符串,千位分割符实现

一、数组编程题

1.移除数组 arr 中的所有值与 item 相等的元素

注意:不要直接修改数组 arr,结果返回新的数组。

function removeWithoutCopy(arr, item) {
    let NewArr = [];
    for (let i in arr) {            //for...in...遍历下标
        if (arr[i] != item) {       //如果下标对应的元素与指定元素不符合
            NewArr.push(arr[i]);    //就将其尾插至新的空数组里面,此时新数组里已经没有指定元素
        }
    }
    return NewArr;        
}

2.找出元素 item 在给定数组 arr 中的位置 , 如果数组中存在 item,则返回元素在数组中的位置,否则返回 -1

function indexOfFn(s, item) {
    if (s.indexOf(item) > 0) {    //如果指定元素存在且>0
        return s.indexOf(item)    //返回数组中指定元素的下标
    } else {
        return -1;                //否则返回-1(没找到)
    }
}

解题关键:

indexOf(目标元素)

返回值:找到返回对应元素的下标,找不到返回-1

3.实现 fizzBuzz 函数,参数 num 与返回值的关系如下

a、如果 num 能同时被 3 和 5 整除,返回字符串 fizzbuzz

b、如果 num 能被 3 整除,返回字符串 fizz

c、如果 num 能被 5 整除,返回字符串 buzz

d、如果参数为空或者不是 Number 类型,返回 false

e、其余情况,返回参数 num

function fizzBuzz(num) {
    if (num && typeof num == 'number') {    //如果数字存在且为number类型
        if (num % 3 == 0 && num % 5 == 0) {
            return 'fizzbuzz';              //同时被3和5整除
        } else if (num % 3 == 0) {
            return 'fizz';                  //只能被3整除
        } else if (num % 5 == 0) {
            return 'buzz';                  //只能被5整除
        } else {
            return num;                     //其他情况
        }
    } else {
        return false;                       //参数为空或者不是number类型
    }
}

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

function insertNum(arr, item) {
    for (var i = 0; i < arr.length; i++) {     //for循环遍历数组元素
        if (item < arr[i]) {                   //判断要item要插入的位置 
            arr.splice(i, 0, item);            //方法splice操作插入数item
            return arr;                        //操作好后,返回新数组,停止循环
        }
    }
}
//arr.splice(i, 0, item):在i的位置插入要放入的指定元素

补充:

splice(起始位置,偏移量,[x1,x2,x3....])  偏移量指一共几个元素

功能:删除并替换(改变原数组)

返回值:被删除的元素

5.自己实现数组官方函数reverse 的功能,改变原数组

function reverse(arr) {
    let New = [];
    for (let i = 0; i < arr.length; i++) {
        New.unshift(arr[i]);            // 头插原数组在一个新数组即为数组的逆序
    }
    return New;
}
//将原数组第1个元素头插在新数组第1个位置;将原数组第2个元素头插在新数组已有元素的前面,以此类推

6.计算数组 arr中所有元素的总和(数组中的元素均为 Number类型)

  function sumFn(arr) {
        var sum = 0;
        arr.forEach((item) => {   //遍历数组中的每一个元素
            sum += item;          //数组元素之和
        })
        return sum;
    }
 console.log(sumFn([1, 2, 3, 4])); // 结果:  10

7.将数组中每个元素的值都加'10'

  let arr = [5, 6, 7, 4, 8, 3, 9];
    function add(x, index, arr) {
        arr[index] += 10;
    }
    arr.forEach(add);
    console.log(arr); // [15, 16, 17, 14, 18, 13, 19]

8.统计数组arr中值等于item的元素出现的次数

    function sum(arr, item) {
        var count = 0;
        arr.forEach((a) => {
            //        if(a==item){
            //            count++;
            //        }
            a == item ? count++ : 0;  //等同于上式
        });
        return count;
    }
    console.log(sum([1, 3, 4, 3, 6, 8, 3, 9], 3));//3

补充:6、7、8题都应用到了ES5新增API

forEach

功能:遍历数组

参数:arr.forEach(回调函数)

返回值:无

这里的回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])

9.只留下数组中的偶数(过滤)

let arr = [6, 5, 7, 4, 8, 3, 9, 0];
    function fun(x) {
        if (x % 2 == 0) {       //只留下偶数(函数体内的功能可以自定义)
            return true;
        } else {
            return false;
        }
    }
    let arr1 = arr.filter(fun);
    console.log(arr1); //6,4,8,0[只留下了偶数]

补充:

filter 

功能:过滤

参数arr.filter(回调函数)

返回值:根据回调函数返回的布尔值,决定元素是否被存入新的数组

10.为数组 arr 中的每个元素求二次方

注意:不要直接修改数组arr,结果返回新的数组。

function square(arr) {
        var arr_new = [];
        for (var i = 0; i < arr.length; i++) { //循环数组直接遍历
            arr_new[i] = arr[i] * arr[i];
        }
        return arr_new;
    }
    console.log(square([1, 2, 3, 4])); //1,4,9,16
    function square(arr) {
        //return arr.map(item => item*item);	//使用箭头函数,等同于下式
        return arr.map(function(item) {         //map遍历数组
            return item * item;
        })
    }
    console.log(square([1, 2, 3, 4]));//1,4,9,16

补充:

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测;map() 不会改变原始数组。

它和forEach()的区别是:

它的返回值:在回调函数添加return,返回一个新数值,而forEach()没有返回值。

11.在数组arr末尾添加元素item

注意:不要直接修改数组arr,结果返回新的数组.

function append(arr, item) {
        return arr.concat(item);
    };
 console.log(append([4, 6, 7, 8, 9], 10));

12.删除arr的第一个元素,不修改原数组,返回新数组

法一: 1、slice() 浅克隆去复制 arr 元素从第二个开始到最后一个


    var arr = [1, 2, 3, 4, 5];
    var newArr = arr.slice(1);
    console.log(newArr);         //[2,3,4,5]

法二:shift() 删除数组的首个元素

   var arr = [1, 2, 3, 4, 5];
    var newArr = arr.slice(0);     //slice()浅克隆出新数组(或者)
    var newArr = arr.concat();     //concat()数组链接出新数组
    newArr.shift();      //用头插法实现(或者)
    newArr.splice(0, 1); //从下标0开始,偏移量为1进行删除也可以实现
    console.log(newArr); //[2,3,4,5]

二、字符串编程题

1.统计字符串每个字符的个数

function countChar(str) {
    let obj = {};
    for (let i = 0; i < str.length; i++) {
        if (obj[str[i]]) {             
            obj[str[i]]++;               // 存取json对象中同一属性的多次出现个数,并自加
        } else {
            obj[str[i]] = 1;             // 一个数时就是1
        }
    }
    return JSON.stringify(obj);          //将JSON对象转为字符串
}

2.文本替换

JS封装函数练习(一)_第1张图片

如图所示,请在点击替换按钮时,将文本框中的参数dest替换为参数src.

function replace(str, dest, src) {
    while (str.indexOf(dest) != -1) {    //当字符串里的旧词存在时
        str = str.replace(dest, src);    //用新词将旧词进行替换
    }
    return str;                          //不知道循环次数用while
}
//如果条件为真,则执行循环体,执行完循环体后,代码再次判断条件真假,直至条件为假跳出循环。

3.编写一个加密程序,加密方法将明文的字母变成其后的第四个字母

注意:(大写的变成小写,小写的变成大写)字母表首尾相连, 非字母符号不加密

function convert(str) {
    let bcryptStr = "";
    let ywArr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let number = 26;
    for (let i = 0; i < str.length; i++) {
        let index = (ywArr.indexOf(str.charAt(i)) + 4);   //获取自身下标+4
                                                          // 通过下标考虑转为大写?小写?
        index = index >= number ? index - number : index + number;                                 
        bcryptStr += ywArr.charAt(index);        // 将通过的下标整合在一起成为加密后的密文
    }
    return bcryptStr;
}

4.输入不定长度的金额字符串,千位分割符实现

function toMoneyStr(str) {
    let obj = [];
    for (var i = 0; i < str.length; i++) {
        if (i % 3 === 0 && i !== 0) {   //被3整除且存在
            obj.push(',');              // 一直尾插str[i],下标遇到3的倍数时尾插一个','
        } 
        obj.push(str[i]);               //元素也要一直尾插,因为数组开始就被逆序了一次    
    }
    return obj.reverse();               //将反着的数组正回来即可
}

待更新......

你可能感兴趣的:(前端,数组,数据结构,算法,numpy)