一些前端编程题目（一）

￡神魔★判官ぃ 2023-01-14 14:57 127阅读 0赞

# 题目和解题代码 #

> 1、如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1

// 解法一
    function indexOf(arr, item){ 
    	return arr.indexOf(item);
    }
    // 解法二 若不支持indexOf
    function indexOf(arr, item) { 
                if (Array.prototype.indexOf) {  // 判断浏览器是否支持indexOf
                    return arr.indexOf(item);
                } else { 
                    for (var i = 0; i < arr.length; i++) { 
                        if (arr[i] === item) { 
                            return i;
                        }
                    }
                }
                return -1;
            }

> 2、计算给定数组 arr 中所有元素的总和

// 普遍解法
    function sum(arr) { 
        var num=0;
        for(var i=0;i<arr.length;i++){ 
            num=num+arr[i];
        }
        return num;
    }
    // forEach遍历
    function sum(arr) { 
        var s = 0;
        arr.forEach(function(value, index, arr) { 
            s += value;
        }, 0);
      
        return s;
    }

> 3、移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组

// 解法一 push()： 在数组末尾添加元素
    function remove(arr,item){ 
        var newArr = [];
        for(var i=0;i<arr.length;i++){ 
            if(arr[i] != item){ 
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    // 解法二 
    function remove(arr, item) { 
        var newArr=[];
        for(var i=0;i<arr.length;i++){ 
            if(arr[i]!==item){ 
                newArr[newArr.length]=arr[i];
            }
        }
        return newArr;
    }
    // 解法三 splice(index,num)：index：数组元素的位置，num：删除几位元素
    function remove(arr,item){ 
        var newArr = arr.slice(0);
        for(var i=0;i<newArr.length;i++){ 
            if(newArr[i] == item){ 
                newArr.splice(i,1);
                i--;
            }
        }
        return newArr;
    }

> 4、移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果返回

/*前道题不同之处在于要求给定数组上进行操作*/
    // splice()
    function removeWithoutCopy(arr, item) { 
       for(var i=0;i<arr.length;i++){ 
           if(arr[i]==item){ 
               arr.splice(i,1);
               i--;
           }
       }
        return arr;
    }

> 5、在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组

// 解法一 利用concat将item连接到数组arr上，返回新的数组，不会更改现有数组
    function append(arr, item) { 
       return arr.concat(item);
    }
    // 解法二 普通的迭代拷贝 push()
    function append(arr, item) { 
        var newArr=[];
        for(var i=0;i<arr.length;i++){ 
            newArr.push(arr[i]);
        }
        newArr.push(item);
        return newArr; 
    }

> 6、删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组

// 解法一 pop()
    function truncate(arr) { 
     var newArr = arr.slice(0);
         newArr.pop();
         return newArr;
     }
    // 解法二 slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
    // slice(begin,end) end被删除
    function truncate(arr) { 
            return arr.slice(0,arr.length-1);
    }

> 7、 封装函数 f，使 f 的 this 指向指定的对象

// 解法一 使用call方法 注意arguments对象的参数形式
    function bindThis(f, oTarget) { 
    	return function(){ 
    		return f.call(oTarget,...arguments)
    	}
    } 
    // 解法二 使用apply方法
    function bindThis(f, oTarget) { 
    	return function(){ 
    		return f.apply(oTarget,arguments)
    	}
    } 
    // 解法三 bind方法 直接绑定this方向
    function bindThis(f, oTarget) { 
    	return f.bind(oTarget)
    }
    /*考察点：call，apply和bind的作用和区别？ 相同点：1：都能改变this指向 2：都能传递参数 3：都能通过方法"."方法名调用 不同点：1：函数名不同 参数传递方式不同（注意看第二个） 改变this指向的时机不同(bind在复制时改变，其他两个在调用时改变) 参数传递时机不同（注意看第三个） */