单元练习题

一、 数组的方法

var arr = [1,2,3,4,5,7]  //[1,2,7]
arr.splice(2,3)
console.log(arr);
var arr = [1,2,3,4,5,7]  //[1,8,9,7]
arr.splice(1,4,8,9)
console.log(arr);

二、 ==运算

// Number(""),Number(" "),Number(null) => 输出 0
console.log(false == ""); // true
console.log(true == 1); // true
console.log(null == undefined);  // true
console.log(undefined == false);  // false
console.log(1 == "1"); // true
/* 1.只有有一边为 boolean 先两边转为number 
   2.一边为string，一边为number，先将两遍转为number

   // 两边都先转为number
   3. null == undefined
   4. null 和 undefined 不能转化为其他值
*/

三、 join 练习

var data ={
  country:"美国",
  year:1994,
  story:"犯罪"
}
// 美国/1994/犯罪
/* 先将对象转为数组 在进行字符串拼接*/
var arr = []
for(var i in data){
  arr.push(data[i])
}
var str = arr.join("/")
console.log(str);

四、sort 练习

4-1 、练习1 根据年龄升序、降序

var students = [
  {name:"zhang",age:20},
  {name:"li",age:18},
  {name:"wang",age:9},
  {name:"chen",age:14}
]
/* 
    根据年龄升序
    根据年龄降序
*/
var result = students.sort((a,b)=>{
  return a["age"]-b["age"]
})
console.log(result);

var result2 = students.sort((a,b)=>{
  return b["age"]-a["age"]
})
console.log(result2);

4-2、 练习2 根据相应的值排序

<button id="like">通过好评数排序</button>
<button id="price">通过价格排序</button>
<script>
  var like = document.getElementById("like")
var price = document.getElementById("price")
var sales = [
  {name:"张三",like:40,distance:1000,price:10},
  {name:"李四",like:60,distance:500,price:50},
  {name:"王五",like:30,distance:600,price:40}
]

/* 升序 */
function addOrder(arr,value){
  if(Array.isArray(arr)){
    var str = arr.sort((a,b)=>{
      return a[value]-b[value]
    })
    return str
  }else{
    return null
  }
}
like.onclick = function(){
  console.log(addOrder(sales,"like"));
}
price.onclick = function(){
  console.log(addOrder(sales,"price"));
}
</script>

五、map 练习

var arr = [
  {name:"html",value:"12px"},
  {name:"css",value:"13px"},
  {name:"vue",value:"11px"}
]
arr.map(item =>{
  var result = parseInt(item["value"])*2
  return item["value"] = result
})
console.log(arr);
/* {name: "html", value: 24}
   {name: "css", value: 26}
   {name: "vue", value: 22} */

六、filter 练习

var arr = [
  {name:"小米",price:1999},
  {name:"红米",price:999},
  {name:"iphone",price:9999},
  {name:"华为",price:3000},
]
var res = arr.filter(item =>{
  return item["price"]>1000
})
console.log(res);

七、输入框获取对应数据

<input type="text" id="input">
  <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位以...结尾
  */

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