原生JS第6周

前言: 上周除了正常的项目进度,剑指offer–二叉树!,红宝书进度–正则表达.

1.原生JS嵌套循环方式

先循环外面部分的,渲染,再独自循环里面的;迭代插入.
具体如下:
本次循环是把城市列表循环出来,属性有首字母和城市名.原生JS无时无刻不在体现它的强大......

外循环部分:
 if (newArr.length != 0) {
                var cityStr = cityList.cityNameList(newArr, x);
                htmlStr += `<div><p class="pl-15">${x}</p>
                <ul class="flex list-${x}">${cityStr}</ul></div>`
                var $list = document.querySelector('.allCityList');
                $list.innerHTML = htmlStr;
            }
        }

内循环用函数得出.由首字母和选择器关联起来的.并迭代插入.
        cityNameList: function (list, first) {
        var htmlStr = ``;
        var newArr = list.filter(function (city) {
            return city.first === first;
        })
        newArr.forEach(cityName => {
            htmlStr += `
            <li  class="flex w100pc"><span>${cityName.name}</span></li>`
        })
        console.log(htmlStr);
        return htmlStr;
    }

2.数组去重

理解:item是对象,把数组的元素看成item 的下标,每一次for循环对item的index下标进行判定,如果不存在,则把这个元素加入到一个空数组中.

var x = "szdfhEWKJngeKJGbkjdsgnkdsjalskflsajd";
    var y = x.split("");
    var item = {};
    var newArr = [];
    for (i = 0; i < y.length; i++) {
        if (!item[y[i]]) {
            item[y[i]] = true;
            newArr.push(y[i]);
        }
    }
    document.write(newArr);

3.字符串常用方法

抓取url:
var url = localtion.href;
下标:
var str= "iloveyou";
str.substring();//
str.indexOf('o');//2
str.lastIndexOf('o');//6;
截取:
str.substring(2,5);//下标2-5
str.substring(2);//2以后的所有
str.substring(-4)//后四位

4.日期方法

var today = new Date();
var s = now.Data();
var day = new Date("12345671234");
var day1 = new Date("1996-02-27")

5.数组方法

var a = [2,4];
a.push(4)//末尾添加
a.unshit(0);//前面添加
a.pop();//删除最后
a.shift();//删除第一个
a.reverse();//反转
var found = a.find(functuin(item){
return item===2;
})返回数组
 var index = a.findIndex(functuin(item){
	return item===2;
})返回对应下标;
 a.slice(2)//截取到最后
 a.splice(1,1)删除对应下标
 a.splice(1,1,1)添加对应下标
 a.join('');变字符串
 map对数组操作,返回操作完的数组;
 return 是条件;
 filter对数组进行过滤,返回过滤完的数组.
 a.indexOf("4"),返回对应下标.
 a.includes("4");判断数组是否包含指定值;
 Array.isArray(a);是否为数组.

…
排序
升序:

a.sort(function(a,b){
return b-a;
})

…
降序:

 a.sort(function(a,b){
return a-b;
})

…
push和pop实现栈操作:
栈操作的原则是先进后出.

<script>
    var a = [];
    var stack = {
        created() {
        },
        insert(item, array) {
            array.push(`${item}`);
        },
        delete(array) {
            array.pop();
        }, show() {
            console.log(a);
        }
    }
    stack.created();
</script>

.
push(入队)和shift(出队)方法实现队列操作:

<script>
    var a = [];
    var queue = {
        created() {
        },
        insert(item, array) {
            array.push(`${item}`);
        },
        delete(array) {
            array.shift();
        }, show() {
            console.log(a);
        }
    }
</script>

物流程序进度:主页,login.