Day11

Day11

---

---

 1-使用 js 封装一个冒泡排序的方法

2-封装一个去除数组中重复元的的方法

3-封装一个将数组中的元组拼接为字符串的方法，并且弹框输出

4-封装一个 myQueryString 的方法，作用是将 url 种的参数解析为一个对象

1-使用 js 封装一个冒泡排序的方法

var arr = [3, 4, 1, 2];
function bubbleSort (arr) {
  var max = arr.length - 1;
  for (var j = 0; j < max; j++) {
    // 声明一个变量，作为标志位
    var done = true;
    for (var i = 0; i < max - j; i++) {
   //判断,如果数组中的当前一个比后一个大,那么两个交换一下位置
      if (arr[i] > arr[i + 1]) {
        var temp = arr[i];
        arr[i] = arr[i + 1];
        arr[i + 1] = temp;
        done = false;
      }
    }
    if (done) {
      break;
    }
  }
  return arr;
}
bubbleSort(arr);

总结

1、外层 for 循环控制循环次数
2、内层 for 循环进行两数交换，找每次的最大数，排到最后
3、设置一个标志位，减少不必要的循环

 详细解法

2-封装一个去除数组中重复元素的的方法

遍历数组法

　　建立一个新数组，然后循环遍历要去重的数组，每次判断新数组不包含旧数组的值时（新数组用indexOf方法检索旧数组的值返回结果等于-1）将该值加入新数组。

    let oldArr = [1, 2, 3, 4, 5, 5 , 6, 7, 8, 2, 3];
        let newArr = unique(oldArr);

        function unique(arr){
            let hash=[];
            for (let i = 0; i < arr.length; i++) {
                if(hash.indexOf(arr[i]) === -1){
                    hash.push(arr[i]);
                }
            }
            return hash;
        }

详细

3-封装一个将数组中的元组拼接为字符串的方法，并且弹框输出

JS字符串拼接/连接（3种方式）

1.使用加号运算符

2.使用concat()方法

使用字符串 concat() 方法可以把多个参数添加到指定字符串的尾部。该方法的参数类型和个数没有限制，它会把所有参数都转换为字符串，然后按顺序连接到当前字符串的尾部最后返回连接后的字符串。

3.使用join()方法

在特定的操作环境中，也可以借助数组的 join() 方法来连接字符串，如 HTML 字符串输出等。

js两种拼接字符串方法

function(msgArr) {

    //参数为一个数组，每一个对象为图片id和图片地址
    var len = msgArr.length;

    //第一种拼接方式，直接用“+”连接起来
    var htmlSpan = "";
    for (var j = 0; j < len - 1; j++) {
        htmlSpan += '<span>·</span>';
    }
    htmlSpan += '<span class="on">·</span>';

    //第二种拼接方式，用数组的.join('')方法
    var imgs = [];
    var img = [];

    img[0] = '<a href="' + ctx + '/webservice/dish/detail?id=';
    img[1] = '#';
    img[2] = '"><img src="';
    img[3] = '#';
    img[4] = '"></a>';

    for (var i = 0; i < len; i++) {
        img[1] = msgArr[i].id;
        img[3] = msgArr[i].pic;
        imgs.push(img.join(''));
    }

    //写到页面上，jq获取元素
    $("#banner_list").html(imgs.join(''));
    $(".dots").html(htmlSpan);
}

第一种方法是直接相加，第二种是利用数组的join()方法进行拼接，第二种效率要高些。

4-封装一个 myQueryString 的方法，作用是将 url 种的参数解析为一个对象

 将URL中？后面的字符获取到，将其使用split('&') 转换为一个数组格式的数据，然后对数据进行循环，处理其中的=，根据=将其转换为两个数据，下标为[0]作为对象的key，下标为[1]则是key对应的值。
总结为以下方法

function urlToObj(str){
　　var obj = {};
　　var arr1 = str.split("?");
　　var arr2 = arr1[1].split("&");
　　for(var i=0 ; i < arr2.length; i++){
　　　　var res = arr2[i].split("=");
　　　　obj[res[0]] = res[1];
　　}
　　return obj;
}
console.log(urlToObj('https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd=%E7%99%BE%E5%BA%A6'))
//{ie: "utf-8", f: "3", rsv_bp: "1", tn: "baidu", wd: "%E7%99%BE%E5%BA%A6"}

 详细解析