常见前端手写代码总汇（持续更新中...）

1、删除数组的第一个元素，不改变原数组，返回一个新数组。

方法一：slice(start,end)，选取数组的一部分，返回一个新数组。

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

 方法二：filter() 过滤下标，返回满足不等于0的元素。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter((val,index,arr) => {
    return index !== 0;
})
console.log(newArr);

方法三：push.apply() 合并数组 + shift() 方法

// push.apply: 合并数组，把后一个数组合并进前一个数组，使前一个数组发生改变。
// shift(): 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var arr = [1, 2, 3, 4, 5];
let newArr = [];
newArr.push.apply(newArr,arr);
newArr.shift();
console.log(newArr);

方法四：concat() 合并数组 + shift() 方法

// concat: 合并2个或多个数组，返回的是一个浅拷贝
var arr = [1, 2, 3, 4, 5];
let newArr = arr.concat();
newArr.shift();
console.log(newArr);

方法五：迭代拷贝

var arr = [1, 2, 3, 4, 5];
let newArr = [];
for(var i = 1; i < arr.length; i++){
   newArr.push(arr[i]);
}
console.log(newArr);

2、数组去重

方法一：双重for循环

var arr = [1,3,2,4,5,5,6,6]; 
function noRepeat(arr){
   for (var i = 0; i < arr.length; i++) {
       for (var j = 0; j < arr.length; j++) {
           if (arr[i] == arr[j] && i != j) { 
              arr.splice(j, 1);
            }
       }
    }
    return arr;
}
console.log(noRepeat(arr));   

方法二：for 循环 + indexOf

var arr = [1,3,2,4,5,5,6,6];
function noRepeat(arr) {
    let newArr = []
    for(let i = 0;i<arr.length;i++){
        newArr.indexOf(arr[i]) === -1 ? newArr.push(arr[i]) : newArr
    };
    return newArr
}
console.log(noRepeat(arr));

方法三：forEach + indexOf  

var arr = [1,3,2,4,5,5,6,6];	
function noRepeat(arr) {
    let newArr = [];
    arr.forEach(item=>{
        newArr.indexOf(item) === -1 ? newArr.push(item) : newArr;
    })
    return newArr;
}
console.log(noRepeat(arr));

方法四：for 循环 + sort 排序 

var arr = [1,3,2,4,5,5,6,6];	
function noRepeat(arr) {
    arr = arr.sort()
    let newArr = []
    for(let i = 0;i<arr.length;i++){
        arr[i] === arr[i-1] ? newArr : newArr.push(arr[i])
    };
    return newArr
}
console.log(noRepeat(arr));

方法五：Set()  +  扩展运算符

// ES6 提供了新的数据结构 Set,它类似于数组,成员的值都是唯一的,没有重复值。
// Set方法，返回是一个类数组，需要结合扩展运算符...转成真实数组
var arr = [1,3,2,4,5,5,6,6];	
var newArr = [...new Set(arr)];
console.log(newArr);

方法六：Set()  +  Array.from()

var arr = [1,3,2,4,5,5,6,6];	
var newArr = Array.from(new Set(arr));
console.log(newArr);

方法七： filter + indexOf

var arr = [1,3,2,4,5,5,6,6];    
let newArr = arr.filter(function(item,index,arr){ 
    return arr.indexOf(item) == index;
});
console.log(newArr);

3、数组冒泡排序

var arr = [12, 23, 44, 53, 67, 65, 78, 123, 2, 4, 7]
function fn(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr.length; j++) {
            if (arr[j] < arr[j + 1]) {
                var test = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = test
            }
        }
    }
}
fn(arr)
console.log(arr);

 4、实现一个字符串转驼峰，列如border-bottom-color => borderBottomColor

var str = "border-bottom-color"
function toHump(str) {
    var test = str.split("-")
    for (var i = 1; i < test.length; i++) {
        test[i] = test[i][0].toUpperCase() + test[i].slice(1)
    }
    return test.join("")
}
console.log(toHump(str));

5、实现一个函数计算求和，支持这两个情况：sum(2,3) 和sum(2)(3)

function sum() {
    var num = arguments[0];
    if (arguments.length == 1) {
        return function (sec) {
            console.log(num + sec);
        }
    } else {
        for (var i = 1; i < arguments.length; i++) {
            num += arguments[i]
        }
        console.log(num);
    }
}
sum(2, 3);
sum(2)(3);

6、只用递归实现杨辉三角

1
1 2
1 2 3
.....

let num = 0;
let arr = [];
function fn(num){
    if(num<=10){
        num++;
        arr.push(num);
        console.log(...arr);
        fn(num);
	}	
}
fn(num);

7、使用JS打印实时时间,时间格式为yyyy-mm-dd

let time = new Date();
let year = time.getFullYear(); // 获取年
let mount = time.getMonth()+1; // 获取月
let date = time.getDate();     // 获取日
let hour = time.getHours();    // 获取小时
let min = time.getMinutes();   // 获取分
let sec = time.getSeconds();   // 获取秒
function fn(num) {
    let str = String(num);
    return str.length < 2 ? "0" + str : str;
}
let t = `${year}-${fn(mount)}-${fn(date)} ${hour}:${fn(min)}:${fn(sec)}`;
console.log(t);  

8、判断字符串"xyzxxz"中出现次数最多的字符，并统计出现次数

方法一：

let str1 = "abcdefgadddaddefea"
let obj = {}
for (let i = 0; i < str1.length; i++) {
    let chars = str1.charAt(i)
    if (obj[chars]) {
        obj[chars]++;
    } else {
        obj[chars] = 1
    }
}
let max = 0;
let ch = ''
for (let key in obj) {
    if (obj[key] > max) {
        max = obj[key]
        ch = key
     }
}
console.log(`字符串中出现次数最多的字符是${ch}，出现的次数是${max}次`)

方法二：

var str = "zasdfghiksdsdadjadjasdksadasd";     
var arr = str.split('');  //字符串转成数组
var obj = {};
arr.forEach((item)=>{
    if(obj[item]){
        obj[item]++;
    }else{
        obj[item] = 1;
    }
})
var a = Object.values(obj); //获取对象的key的value值
var m = Math.max(...a);  //解构出最大的value值
for (key in obj){   //迭代obj对象
    if (obj[key] === m ) {
        console.log(`出现最多的字母是${key}最多的次数是${m}`); 
    }
}