练习

1-1 数组的方法

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);

1-2 ==运算

// 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 不能转化为其他值
*/

1-3 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);

1-4 sort 练习

1-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);

1-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>

1-5 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} */

/* var res = []
  for(var key in arr){
    arr[key].value = parseInt(arr[key].value)*2;
    res.push(arr[key])
  }
    console.log(res);
 */

1-6 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);

1-7 输入框获取对应数据

<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>

1-8 分割数组

var arr = [1,2,3,4,5,6,7,8,9]
// [1,2,3] [4,5,6] [7,8,9]
// 0  2    
// 3  5
// 6  8
var sum = []
for(var i =0;i<arr.length;i=i+3){
  var item = arr.slice(i,i+3)
  sum.push(item)
}
console.log(sum);

1-9 数组去重

# 方法一
var arr = [1,2,1,4,5,6,4]
var res=[]
arr.forEach(item=>{
  if(res.indexOf(item) ==-1){
    res.push(item)
  }
})
console.log(res)

# 方法二
// set--类数组对象 里面的值不重复
// ... 展开语法也适用于set对象

var s = new Set([2,3,2,1])
console.log(s)  // {2,3,1}

var arr = [1,2,1,4,5,6,4]
var s = new Set(arr)
console.log(s) // {1,2,4,5,6}
console.log([...s]) // [1,2,4,5,6]