codewars闯关小记录之一：首字母大写

写在前头

• 身为一个JS学渣，每天都在冥思苦想怎么变成一个大师，在看到“学一门后端语言，有助于进阶Js水平”这类话后，开始兴冲冲地学习后端语言
  （怎么说前端后端真的差很多啊(´･_･`)后端输出好少嘤嘤婴，暂时感受不到成就感的说）
  （一天打渔，一星期晒网中）
  （认真过一遍《JS高级程序设计》才是正途吧呀喂＼(｀0´)／）。

--------话说作为一枚小前端，也应该了解一些后端语言嚯！(ง •̀_•́)ง--------

• 言归正传，不知为啥虽然看不下那么厚一本《J高》，但是还是要有点追求啊！！
• 于是某天，我发现了Codewars!
• Codewars是啥？看标题(〜￣▽￣)〜 就是各类代码的小测试小闯关啦
• 卧槽！搞起！

好吧，那就搞起呗(*ﾉ▽ﾉ)

---

请听题！

一、创建一个方法来接收数组，并返回值为首字母为大写，其余字母小写的数组。

Create a method that accepts an array of names, and returns an array of each name 
with its first letter capitalized.
example

capMe(['jo', 'nelson', 'jurie'])     // returns ['Jo', 'Nelson', 'Jurie']
capMe(['KARLY', 'DANIEL', 'KELSEY']) // returns ['Karly', 'Daniel', 'Kelsey']

( ｣ﾟДﾟ)｣＜

• 碎碎念部分：作为一个渣，第一个想法就是，so easy，恩，先把值拆成两部分，第一个部分就是首字母啦，然后把它变成大写哒，剩下都变成小写哒，恩，直观又简单！搞起呀！
• 涉及到的方法等：
• toUpperCase()转换为大写
• toLowerCase()转换为小写
• charAt()返回给定位置的单个字符串（从0个开始算就不说啦┐(‘～`；)┌）
• slice(3,7)返回给定位置开始的字符串
  （如果有两个值，就是给定位置之间字符串，这里给的就是返回第4~7这四位字符串）
  （注意：slice()计算位置包括空格，若要不包括，要使用substring()）
  （我们这边暂时用啥都可以啦，因为，没有空格嘛(≧∇≦)/）
• 我的代码：

function capMe(names) {
  for (var i = 0; i < names.length; i++){
    var firstLetter = names[i].charAt(0).toUpperCase();
    var remainLetter = names[i].slice(1).toLowerCase();
    names[i] = firstLetter + remainLetter;
    names = names.slice();
  }
  return(names);
}

中间用了concat()来传递字符串，然后写错了一些代码，结果就在数组末尾多了一个undefined
WHY！！！(ಥ_ಥ)
不过！终于通过了！（・∀・）
然后，我就提交了，再然后，就可以看到一些大师的代码(#／。＼#)
看完感觉写了好多废代码的说，虽然通过了还是有点小问题，看了别人的代码以后自己改进了一下。

function capMe(names) {
  for (var i = 0; i < names.length; i++){
    names[i] = names[i].charAt(0).toUpperCase() + names[i].slice(1).toLowerCase();
  }
  return(names);
}

然后，想了想，应该也可以用传说中吊吊的正则，不过，这个暂时放后吧，不大懂不大懂。

• 先来个版本，这是先都小写再首字母大写，substring里面的names[i].length可以去了

 function capMe(names) {
  for (i = 0; i < names.length; i++)
  {
    names[i] = names[i].toLowerCase();
    names[i] = names[i].substring(0, 1).toUpperCase() + names[i].substring(1, names[i].length);
  }
  return names;
 }

• 再来个版本，俩map也是晕了

function capMe(names) {
   return names.map(function(name) {
      return name[0].toUpperCase() + name.slice(1).split('').map(function(elem, index) {
         return elem.toLowerCase();
      }).join('');
   });
}

• 再看看赞最多的代码

function capMe(names) {
  return names.map(
    function (n) { return n.charAt(0).toUpperCase() + n.substring(1).toLowerCase();
 });
}

为什么这么短！！！ _(:з」∠)_

容我仔细瞅瞅，哎哟喂~思路跟我一样嘛（(」ﾟヘﾟ)」这很正常吧）
看来我很有当大神的潜质嘛！（凑不要脸눈눈）_

这么多人用map!醉了醉了醉了！
我要翻翻我的《J高》了（Σ(っ °Д °;)っ你刚刚写代码的时候不是一直在翻吗！！）

⊙︿⊙没找到

那就只好谷歌一下了。
这就是map() 的介绍啦。

打不开的我把相关介绍附在后面了(๑´ㅂ`๑)
看他们举的例子就造了（map()相当于把数组的每个元素的值，以及索引，以及数组本身都传了进去）

function fuzzyPlural(single) {
  var result = single.replace(/o/g, 'e');  
  if( single === 'kangaroo'){
    result += 'se';
  }
  return result; 
}

var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural));

// ["feet", "geese", "meese", "kangareese"]

很炫酷的样子嘛。

话说Jquery也有个map()，这两者有啥不同吗？

JQuery map()

定义和用法

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

语法

.map(callback(index,domElement))

参数

callback(index,domElement)

描述

对当前集合中的每个元素调用的函数对象。

对比一下上下这俩解释，差不多嘛（・∀・）就是JQ中不返回数组本身罢了。

Array.prototype.map()

概述

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

语法

array.map(callback[, thisArg])

参数

• callback

原数组中的元素经过该方法后返回一个新的元素。

• currentValue

callback 的第一个参数，数组中当前被传递的元素。

• index

callback 的第二个参数，数组中当前被传递的元素的索引。

• array

callback 的第三个参数，调用 map 方法的数组。

• thisArg

执行 callback 函数时 this 指向的对象。

描述

• map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
• callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。
• 如果 thisArg 参数有值，则每次 callback 函数被调用的时候，this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined，则 this 指向全局对象 。
• map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）。
• 当一个数组运行 map 方法时，数组的长度在调用第一次 callback 方法之前就已经确定。在 map 方法整个运行过程中，不管 callback 函数中的操作给原数组是添加还是删除了元素。map 方法都不会知道，如果数组元素增加，则新增加的元素不会被 map 遍历到，如果数组元素减少，则 map 方法还会认为原数组的长度没变，从而导致数组访问越界。如果数组中的元素被改变或删除，则他们被传入 callback 的值是 map 方法遍历到他们那一刻时的值。

那今天就写到这啦。

晚安么么哒(ﾉ´∀｀*)ﾉ

补一句：自己写完看别人的代码，感慨万千，写法千千万啊(￣(エ)￣)ゞ