一、

一、实现todoList(去重的todoList)

<input type="text" id="input">
<ul id="app">
</ul>
<script>
     var arr = []
  var input = document.getElementById("input")
  var app = document.getElementById("app")
  input.onkeydown = function(event){
    if(event.keyCode == 13){
      if(arr.indexOf(this.value) == -1 && this.value!=""){
        arr.push(this.value)
        var li = document.createElement("li")
        li.innerHTML = this.value
        app.append(li)
      }
      console.log(arr);
    }
  }
</script>

二、实现tab切换

<ul>
  <li class="current">html</li>
    <li>css</li>
</ul>
<div class="parent">
  <div class="html">html</div>
  <div class="css">css</div>
</div>

    <script>
        var lis = document.getElementsByTagName("li")
        var divs = document.querySelectorAll(".parent div")
        for(let i=0;i<lis.length;i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                for(let i=0;i<lis.length;i++){
                    lis[i].classList.remove("current")
                }
                this.classList.add("current")

                for(let i=0;i<divs.length;i++){
                    divs[i].style.display = "none"
                }
               divs[this.index].style.display = "block"
            }
        }
    </script>

三、 取最大值 && 求和

var arr = [10,22,14,4];
# 取最大值 (写两种方法)
# 求和(写两种方法)

var arr = [10,22,14,4]

/* 取最大值 */
//1.算法实现
var maxNum = arr[0]
for(var i=1;i<arr.length;i++){
  if(maxNum<arr[i]){
    maxNum = arr[i]
  }
}
console.log(maxNum);
// 2.数组方法实现
console.log(Math.max(...arr));

/* 求和 */
// 1.算法实现
var sum =0;
for(var i=0;i<arr.length;i++){
  sum+=arr[i]
}
console.log(sum);
// 2.数组方法实现
var sum1 = arr.reduce((a,b)=>{
  return a+b
})
console.log(sum1);

四、 排序

var obj = [{name:”cheng”,count:30},{name:”li”,count:12},{name:”zhang”,count:14}]
# 根据count值升序
# 根据count值降序

<script>
        var obj  = [
            {name:"cheng",count:30},
            {name:"li",count:12},
            {name:"zhang",count:14}
        ]
        var obj2  = [
            {name:"cheng",count:30},
            {name:"li",count:12},
            {name:"zhang",count:14}
        ]

        // 升序
        var res = obj.sort((a,b)=>{
            return a["count"]-b["count"]
        })
        console.log(res);

        var res2 = obj2.sort((a,b)=>{
            return b["count"]-a["count"]
        })
        console.log(res2);
</script>

五、数据处理

var obj =[
{
“isSelected”: true,
“name”: “纸上行舟”,
“count”: 3,
“id”: “0001”
},
{
“isSelected”: true,
“name”: “我可能得抑郁症了！舟”,
“count”: 2,
“id”: “0002”
},
{
“isSelected”: true,
“name”: “绕日飞行”,
“count” : 4,
“id”: “0003”
}
]
var obj = [{id:xxx,name:xxx},{id:xxx,name:xxx},{id:xxx,name:xxx}]

var res = []
for(var i=0;i<obj.length;i++){
  var {id,name} = obj[i]
  res.push({
    id,
    name
  })
}
console.log(res);

六、输入框,获取对应的数据

<input type="text" id="txt">

    <script>
        var arr = [
            {name:"你是谁,他在那里",id:1102},
            {name:"圈住你在那里",id:1102},
            {name:"hello在那里",id:1102},
            {name:"怪你",id:1102},
            {name:"world",id:1102},
        ]
        /* 1.enter回车获取关键字
        2.使用关键字,对数据查询,得到一个新的数组
        3.name的字符超过3位以...结尾
        */
        var txt = document.getElementById("txt")
        txt.onkeydown = function(event){
            if(event.keyCode == 13){
                var value = this.value
                if(value){
                    var res = arr.filter(item=>{
                        return item["name"].includes(value)
                    })
                    res.map(item=>{
                        if(item.name.length>3){
                            return item.name = item.name.slice(0,3)+"..."
                        }
                    })
                    console.log(res);
                }

            }
        }
</script>