一道国外前端面试题引发的Coding...

刚刚看到CSDN微信公众号一篇文章,关于国外程序员面试前端遇到的一道测试题,有点意思,遂写了下代码,并记录一下~

题目是这样的:

[‘Tokyo‘, ‘London‘, ‘Rome‘, ‘Donlon‘, ‘Kyoto‘, ‘Paris‘]
// YOUR ALGORITHM
[
    [‘Tokyo‘, ‘Kyoto‘],
    [‘London‘, ‘Donlon‘],
    [‘Rome‘],
    [‘Paris‘]
]

也就是说给定一个字符串数组:

[‘Tokyo‘, ‘London‘, ‘Rome‘, ‘Donlon‘, ‘Kyoto‘, ‘Paris‘]

经过自己写的算法变换后,要得到下面这个数组:

[
    [‘Tokyo‘, ‘Kyoto‘],
    [‘London‘, ‘Donlon‘],
    [‘Rome‘],
    [‘Paris‘]
]

经过观察,原来题目要求把原数组中“相关”的元素组成新的数组,并作为最终答案数组的一个元素。

“相关”的意思是指:如果一个长度为 N 的字符串 A,依次将最左边的字符挪到最右边,重复 N-1 遍,得到 N 个(包含原字符串)字符串中的任意一个,跟字符串 B 相同(不考虑大小写),则认为 A 跟 B “相关”。

于是,先来一个比较函数:

/**
 * 匹配函数 compareString
 * @param strA 要比较的字符串
 * @param strB 要比较的另一个字符串
 * @return 0: 表示匹配, -1: 表示不匹配
 */
function compareString(strA, strB) {
    if(strA.length !== strB.length)return -1;//长度不相等肯定不会匹配,立即返回

    var a = strA.toLowerCase();//先将要比较的字符串转换成小写,下同
    var b = strB.toLowerCase();
    var i = 0;

    do{
        if(a === b)return 0;//匹配,返回 0
        b = b.substr(1) + b.substr(0, 1);//将第一个字符转移至尾部
        i++;
    }while(i < b.length);

    return -1;//360 度检查还没认出来,那 A、B 两个是无缘了~
}

假设原数组是:

var dataArr = [‘Tokyo‘, ‘London‘, ‘Rome‘, ‘Donlon‘, ‘Kyoto‘, ‘Paris‘]; 

结果存入:

var result = [];

那么可以如下处理:

while(dataArr.length > 1) {
    var str = dataArr.shift();//取数组第一个元素,与后续元素逐个对比
    var newArr = [];//本轮匹配结果存储的数组
    newArr.push(str);//先将要对比的 str 存入数组
    var i = 0;

    //为什么不用 for 循环呢?
    //因为在循环体内可能“剪切”元素导致数组长度变小,所以不能用固定次数循环
    while(i < dataArr.length) {
        if(compareString(str, dataArr[i]) == 0) {//匹配
            newArr.push(dataArr[i]);//将匹配元素加入新数组
            //从原数组中移除当前元素
            //当前元素移除后,后面的元素依次往前移动一格,因此下一次遍历的下标不变
            dataArr.splice(i, 1);
        }else{
            i++;//本轮循环没有匹配上,下一轮匹配轮到后面一个元素,因此下标要加 1
        }
    }

    result.push(newArr);//将本次匹配数组加入 result 数组
}

if(dataArr.length > 0)result.push(dataArr);//落单的跟上

用 node 执行,结果如下图:

完整代码如下:

/*
[‘Tokyo‘, ‘London‘, ‘Rome‘, ‘Donlon‘, ‘Kyoto‘, ‘Paris‘]
// YOUR ALGORITHM
[
    [‘Tokyo‘, ‘Kyoto‘],
    [‘London‘, ‘Donlon‘],
    [‘Rome‘],
    [‘Paris‘]
]
*/

//======================================

/**
 * Coding by Jaffray Tan
 * 2018.07.03
 */
var dataArr = [‘Tokyo‘, ‘London‘, ‘Rome‘, ‘Donlon‘, ‘Kyoto‘, ‘Paris‘];
console.log(‘\nInit array:\n‘, dataArr);//先输出原数组
var result = [];

while(dataArr.length > 1) {
    var str = dataArr.shift();//取数组第一个元素,与后续元素逐个对比
    var newArr = [];//本轮匹配结果存储的数组
    newArr.push(str);//先将要对比的 str 存入数组
    var i = 0;

    //为什么不用 for 循环呢?
    //因为在循环体内可能“剪切”元素导致数组长度变小,所以不能用固定次数循环
    while(i < dataArr.length) {
        if(compareString(str, dataArr[i]) == 0) {//匹配
            newArr.push(dataArr[i]);//将匹配元素加入新数组
            //从原数组中移除当前元素
            //当前元素移除后,后面的元素依次往前移动一格,因此下一次遍历的下标不变
            dataArr.splice(i, 1);
        }else{
            i++;//本轮循环没有匹配上,下一轮匹配轮到后面一个元素,因此下标要加 1
        }
    }

    result.push(newArr);//将本次匹配数组加入 result 数组
}

if(dataArr.length > 0)result.push(dataArr);//落单的跟上

console.log(‘\n\nResult array:\n‘, result);//输出结果

//=====================================

/**
 * 匹配函数 compareString
 * @param strA 要比较的字符串
 * @param strB 要比较的另一个字符串
 * @return 0: 表示匹配, -1: 表示不匹配
 */
function compareString(strA, strB) {
    if(strA.length !== strB.length)return -1;//长度不相等肯定不会匹配,立即返回

    var a = strA.toLowerCase();//先将要比较的字符串转换成小写,下同
    var b = strB.toLowerCase();
    var i = 0;

    do{
        if(a === b)return 0;//匹配,返回 0
        b = b.substr(1) + b.substr(0, 1);//将第一个字符转移至尾部
        i++;
    }while(i < b.length);

    return -1;//360 度检查还没认出来,那 A、B 两个是无缘了~
}

原文地址:https://www.cnblogs.com/Jaffray/p/9256653.html

时间: 2024-08-12 22:48:41

一道国外前端面试题引发的Coding...的相关文章

Web前端面试题集锦

Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScript: 数据类型.面向对象.继承.闭包.插件.作用域.跨域.原型链.模块化.自定义事件.内存泄漏.事件机制.异步装载回调.模板

前端面试题 -- JS篇

前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数据类型. 原始数据类型: null,undefined, string,number,boolean 引用数据类型:object 两者的区别:1)值存储方式不同: 原始数据类型:将变量名和值都存储在栈内存中 引用数据类型:将变量名存储在栈内存中,将值存储在堆内存中,并在栈内存中存储值的地址,该地址指

Web前端面试题-1

Web前端面试题 Web前端面试题 1 HTML/CSS部分 4 1.什么是盒子模型?有几种? 4 2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 4 3.CSS实现垂直水平居中 4 4.简述一下src与href的区别 5 5.什么是CSS Hack? 5 6.简述同步和异步的区别 6 7.px和em的区别 6 8. 什么叫优雅降级和渐进增强? 6 9.浏览器的内核分别是什么? 7 10.XHTML和HTML有什么区别 7 12.前端页面有哪三层构成,分别是什么?作用是什么?

一份来自于全球的前端面试题清单,看看老外喜欢考哪些题(部分有答案)

方括号中的蓝色标题是题目的出处,有些题目在原址内包含答案.搜集的大部分外国前端面试题没有做翻译,单词并不难,大家应该看得懂.题目旁边的方括号内, 简单记录了与此题相关的知识点.总共大概一千多道,包含国内的题目,如有错误,欢迎指正.有些原链可能已无法打开,有些可能需要代理才能查看. 一.HTML [HTML related interview questions] 1.What is doctype? Why do u need it? 2.What is the use of data-* at

经典前端面试题: Object.assign 是浅拷贝还是深拷贝?实现深拷贝的方法有哪些?

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖.后面的源对象的属性将类似地覆盖前面的源对象的属性. Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象.该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter.因此,它分配属性,而不仅仅是复制或定义新的属性.如果合并源包含getter,这可

最全的web前端面试题及答案整理 你不得不看

面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera. (Q2) 内核:Trident,Gecko,Presto,Webkit. 2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下) (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设

web前端面试题系列:(一)

1.作用域问题 var a = 6; setTimeout(function () { alert(a); a = 666; }, 1000); a = 66; 结果:66 2.语义化标签 1)tite与h1的区别 2)b与strong的区别 3)i与em的区别 PS:不要小看这些题,80%人答不上来 3.事件绑定 addEventListener,第三个参数是用来表示事件是以事件冒泡还是事件捕获这个各位都知道!但是他问的问题是: 我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你

web前端面试题整理(HTML篇)

web前端面试题整理(HTML篇)需要web前端课程工具和电子书,可以加: 33群105601600;  22群1203428331. h5的改进:新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ,  footer, section, aside, hgroup等.时间time 新属性拖放: draggable   <img draggable=&q

前端面试题2016--HTML

本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可能的! 前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增.正如赫门在2015深JS大会上的<前端服务化之路>主题演讲中说的一句话:“每18至24个月,前端都会难一倍”,这些变化使前端的能力更加丰富.创造的应用也会更加完美.所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前