垃圾球浅谈Javascript（一）

垃圾球浅谈Javascript（一）

（浅谈，呸，不过是自己遇到的一些bug罢了）

(2017-7-12)

    垃圾球在这几天学习了javascript之后，弄懂了好多之前在学习C++时对对象琢磨不透的的地方，果然，理论离不开实践，没有自己多多动手操作，是不可能完全理解某门语言的。

该编程场景主要依赖于商店里的收银机需要pos机来打印清单列表并进行输出商品总额以及小计

    在假期便开始重新入门javascript，看了六章《javascript入门基础》并按照自己的理解完成了老师布置的pre_pos作业，在自己遇到完全不能解决的问题时，参考了某位大佬的作业，完全理解之后便重新按自己的思路解决了之前遇到的一些问题，具体代码如下：

const collection = [
    'a', 'a', 'a',
    'e', 'e', 'e', 'e', 'e', 'e', 'e',
    'h', 'h', 'h', 'h', 'h', 'h', 'h', 'h', 'h', 'h', 'h',
    't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't', 't',
    'f', 'f', 'f', 'f', 'f', 'f', 'f', 'f', 'f',
    'c', 'c', 'c', 'c', 'c', 'c', 'c', 'c',
    'g', 'g', 'g', 'g', 'g', 'g', 'g',
    'b', 'b', 'b', 'b', 'b', 'b',
    'd', 'd', 'd', 'd', 'd'
      ];//这是题目中输入的数组，现在需要构建函数统计collection中的字母和数目，并返回给key和value.
      //我的第一反应都是遍历整个数组然后建立新的数组来进行switch（传统的c语言思维）
      //而那位大佬的处理方式打开了我的眼界，一个计数变量就统计了数量并且解决了问题，方法具体代码如下:
      function countSameElements(collection) {
        let newArray=new Array();
        let count = 1;
        let array;
        let p = 0;
        for(let i=0;i<collection.length;i++)
        {
            var key = collection[i];
            if(key != collection[i+1])
                {
                    array = {
                        'key':key,
                        count:count};
                        newArray[p++]=array;
                        count = 1;
                }
            else{
                count++;}
        }
        return newArray;
        }

仅仅采用一点点小技巧便省去了很多麻烦，不用新建计数数组，不用储存那么多的数值，果然自己还需要学习别人的很多东西啊.

再到后来的pos_v0，听了仝老师说的编程是件很简单的事，有许多感触，也看了仝老师写代码的过程以及他写的代码的特点，我觉得这才是我想要的编程，没有那么多杂乱无章的字母，没有繁杂的函数，思路清晰，代码通俗易懂，这个时候更加觉得这个夏令营多么有意义。

有了清晰的思路之后，编程就没有我没想象的那样困难了，于是就按照老师们所说的商业化流程画起了tasking图，正如“磨刀不误砍柴功”，只有做好了tasking，将复杂问题逐步简单化之后才便于一一解决。话说了这么多，直接上pos_v0的重点代码进行详解。

function buildSingleItem(items) {
    return`名称：${items.name}，数量：
${items.price.toFixed(2)}(元)，
小计：${items.summary.toFixed(2)}(元)`;
}//采取了新的模板字符串输出方式，用'...'来表示

function buildItemsSring(items) {
    let itemsString ="";//这里注意下，因为是采取模板字符串的格式输出，因此前面数组必须为空，空格也不允许
    for(let index = 0; index <items.length;index++)
    {
        if (index != items.length-1) {//判断是否是最后一项，不是则需要换行
            itemsString += buildSingleItem(items[index])+'\n' ;
        } else {
            itemsString += buildSingleItem(items[index]);
        }
    }
    return itemsString;
}

在pos_v0.1中，输入方式变成了单个对象的数组，看上去问题复杂了很多，但函数实现上只需要将对象重新统计起来并按pre_pos那样附加count属性即可.在之前那位大佬的思路上我加上了sortllItems函数就输出成功了.

pos_v0.2也是如此，输入只不过变成了条形码，读取loadAlltems函数然后将数组扩展出来成V0.1那样的输入就顺利地解决了.

商业化应用也是这样，一步一步按自己构造的tasking流程来实现自己的功能，很快就能写出达到自己预期的代码.

而到了v1的时候，就不是一切都像之前那样得心应手了，条形码有了新的格式，虽然仝老师说编程其实就是对字符串进行不断地命令，让字符串去做不同的事情，但这个字符串就是不听我的命令啊怎么办呢，自己时常濒临崩溃，但以前的编程经验告诉我不能放弃，也许下一次debug就能成功，于是我还是没有放弃剩下的处理，结果当然是像大家看博客的套路那样，愉快地成功了，最后我发现toFixed（）原来返回的是一个字符串，而且自认为使用高级的方法处理的东西原来在其他文件中已经给明了，但自己仍然是乐在其中。

比别人都快一个题目的进度，但今天看来自己不过是重复自己会的东西，已经掌握的东西，于是就决定将作题节奏慢一慢，看一看周围大神们的代码，看看他们用什么方式来处理问题，以此来提升接下来写代码的效率.

于是看了同组的的梁大佬看懂了下面几项知识点：

1. for… in 与for…of的区别
2. 深拷贝与浅拷贝的区别
3. 数组与对象声明时的细节问题
   （均由梁大佬原创）

---

直接放代码

(for...in...)//for...in循环会遍历一个object所有的可枚举属性
var obj = {a:1, b:2, c:3};
    for (var prop in obj) {
      console.log("obj." + prop + " = " + obj[prop]);
     }
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"


(for...of...)//for...in 遍历（当前对象及其原型上的）每一个属性名称,
//而 for...of遍历（当前对象上的）每一个属性值
let iterable = [10, 20, 30];
for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

let deepCopy= function(source) {//深度拷贝
  let result={};
  for (let key in source) {
    result[key] = typeof source[key]==='object'?//key是识别result数组主码（这里其实不是很确定，现在先这么理解了，反正用法是差不多的，以后再深入了解数据库）
     deepCopy(source[key]): source[key];//递归，拷贝对象中包括对象的所有属性
  }
  return result;
}

let shoppingCart = [];
for(let item of items){
  if(!shoppingCart[item.barcode]){
    //注意这里
    shoppingCart[item.barcode] = item.name;
    shoppingCart[item.barcode].count = 1;
  }else {
    shoppingCart[item.barcode].count ++;
  }
}
//这段代码会在第五行报shoppingCart[item.barcode] undefined的错误
//数组中元素都为明确，无法赋予其属性，因此要先建立对象

不仅这些，我还在其他组讨论过程中听到了箭头函数（就是没有名字需要回调的函数），Map（）和Set（）对象，现在刚刚理解，仅仅知道Map（）是健值对类型，有key和value；Set（）中只有key，目前还未完全吃透，等自己多多使用完全理解之后再进行具体描述.

今天垃圾球学到的差不多就这么多，现在每天这样背着电脑去教室一个多小时，回来一个多小时，虽然忙碌，辛苦但十分充实，希望在接下来的时间里能继续保持现在的热情，深度钻研吧！

加油，垃圾球！