前端在线编程题4

101 阅读 0 评论 67 点赞

我是靠谱客的博主眯眯眼云朵，最近开发中收集的这篇文章主要介绍前端在线编程题4，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

目录：
10.颜色字符串转换
11.将字符串转换为驼峰格式
12.求二次方

10.颜色字符串转换

将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff

rgb 中每个 , 后面的空格数量不固定
十六进制表达式使用六位小写字母
如果输入不符合 rgb 格式，返回原始输入

function rgb2hex(sRGB) {
    var regexp=/rgb((d+),s*(d+),s*(d+))/;
    var ret=sRGB.match(regexp);
    if(!ret){
        return sRGB;
    }else{
        var str='#';
        for(var i=1;i<=3;i++){
            var m=parseInt(ret[i]);
            if(m<=255&&m>=0){
                str+=(m<16?'0'+m.toString(16):m.toString(16));
            }else{
                return sRGB;
            }
        }
        return str;
    }
}

11.将字符串转换为驼峰格式

css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能
1. 以 - 为分隔符，将第二个起的非空单词首字母转为大写
2. -webkit-border-image 转换后的结果为 webkitBorderImage

使用正则replace方法
replace第一项的值是一个正则，它的实现原理：首先我们和exec捕获一样，把所有和我们正则匹配的都捕获到，然后把捕获的内容替换成我们需要替换的新内容。

这里第一个replace的作用是：将第二个起的非空单词首字母转为大写。其中(?!^)表示不是开头。
第二个replace的作用是：将现在的字符串中的-去掉

function cssStyle2DomStyle(sName) {
    return sName.replace(/(?!^)-(w)(w+)/g, function(a, b, c){
            return b.toUpperCase() + c.toLowerCase();
        }).replace(/^-/, '');
}
cssStyle2DomStyle('-webkit-border-image');//"webkitBorderImage"

这里的a代表第一个匹配到的分组，b代表第二个匹配到的分组。也能写成下面这样，用$1,$2,$3表示：

function cssStyle2DomStyle(sName) {
    return sName.replace(/(?!^)-(w)(w+)/g, function($1, $2, $3){
            return $2.toUpperCase() + $3.toLowerCase();
        }).replace(/^-/, '');
}
cssStyle2DomStyle('webkit-border');

split() 方法：用于把一个字符串分割成字符串数组。
splice(n,m) 删除数组中指定的某些项，从索引n开始(包含n)，删除m个元素，把删除的内容当作一个新的数组返回，原有数组改变

function cssStyle2DomStyle(sName) {
    var arr = sName.split('');  //["w", "e", "b", "k", "i", "t", "-", "b", "o", "r", "d", "e", "r"]
    //判断第一个是不是 '-'，是的话就删除 
    if(arr.indexOf('-') == 0)
        arr.splice(0,1);
   //处理剩余的'-'
    for(var i=0; i<arr.length; i++){
        if(arr[i] == '-'){
            arr.splice(i,1);
            arr[i] = arr[i].toUpperCase();
        }
    }
    return arr.join('');
}

12.求二次方

为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组

1）map

function square(arr) {
    return arr.map(function(item,index,array){
        return item*item;
    })
}

2）forEach

function square(arr) {
   //声明一个新的数组存放结果
     var a = [];
     arr.forEach(function(e){
         //将arr中的每一个元素求平方后，加入到a数组中
         a.push(e*e);
     });
     return a;
 }