开课吧前端1期.阶段2：ES6详解-2 解构赋值 数组 字符串

4、解构赋值

• 解构可以理解把东西拆了
  • 比如小时候把家里闹钟拆了
• 解构复制：注意
  • 1.左右两边结构必须一样
  • 2.右边必须是个东西
  • 3.声明和赋值不能分开（必须在一句话里完成）　　

let arr=[1,2,3] 
//把数组里面的东西，分别放到3个变量里面，传统写法
let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log(a,b,c)  //能输出，但是太麻烦了
//我可以这么写
let [a,b,c]=[1,2,3] //abc就等于123  //说白就是右边给左边的，左右两边必须一样

//json 也一样可以
let {a,c,d} = {a:12,c:5,d:6}

//左右结构一样
let [{a,b},[n1,n2,n3],num,str]=[{a:12,b:5},[12,5,8],8,'cxzcv']
console.log(a,b,n1,n2,n3,num,str)

//可以拆分，粒度
//例如我想放一个json
let [json,[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'cxzcv']
 　　//输出: Object{a:12,b:5},12 5 8 8 "cxzcv"
     //例如，我数组不想拆了
      let [json,arr,num,str] = [{a:12,b:5},[12,5,8],8,'cxzcv']
　　  //输出: Object{a:12,b:5},[12,5,8] 8  "cxzcv"

 

4.1.解构赋值总结

1. 左右两边解构必须一样
2. 右边必须是个东西 【JSON，数组】

 　　3. 声明和赋值不能分开（必须在一句话里完成，声明和赋值一块办了）

 

　　

5、数组

• ES6里面新增了许多方法，对数组非常的好。这些方法可能在Python，Java里面可能玩烂了，并不意味着这些方法不好用，相反非常好用，几乎是其他语言的标配。

　　

• 多了4个东西：
  • map,reduce,filter,forEach

 

5.1、map

 如果非要中文的叫法：映射 【个人理解】

映射：一个对一个，给你10个返回来还是10个

//假设我定义一个学生分数数组
[12,58,99,86,45,91] 
[不及格,不及格,及格,及格,不及格,及格]  //映射对应一个及格和不及格数组

//举例，数组里面东西变成2倍
let arr=[12,4,5]
let result =arr.map(function(item){
　　//每个元素都会进入到function
　　return item * 2;
}); 
alert(result)

//简写
let result=arr.map(item=>item*2)
alert(result)

//及格，不及格
let score=[19,85,99,25,90]
let result=score.map(item=>item>=60?'及格':'不及格')
alert(score);
alert(result);

 

5.2、reduce

 如果非要中文的叫法：汇总【reduce本意是减少】

 reduce:汇总，一堆出来一个

场景：购物车，求平均分

算个总数（多个银行卡都有钱，算个总数）

[12,13,14] => 39 //一堆变1个

算个平均数
[12,59,99] => 56.6666666

//演示
let arr=[12,69,180,8763]
arr.reduce(function(a,b,c){
　　alert(a+','+b+','+c);  
})

//输出：
　　　第1次：12,69,1
　　　第2次：undefined,180,2
     第3次：undefined,8763,3
//c 可以看出是下标，b每次带入的值，tmp是临时结果，最后一个才是最终结果

//累加
let arr=[12,69,180,8763]
let result= arr.reduce(function(tmp,item,index){ //tmp最终结构，上一次算好的值
    return tmp + item  //累加，把这次加上上次结果
});
alert(result)

//平均数---累加后/数量
let arr=[12,69,180,8763]
let result= arr.reduce(function(tmp,item,index){ //tmp最终结构，上一次算好的值
     if(index!=arr.length-1){ //不是最后一次
          return tmp+item;
     }else{ //最后一次求平均
         return (tmp+item)/arr.length 
     }
});
alert(result)

理解reduce图解

 

 

5.3、filter

  如果非要中文的叫法：过滤器【过滤一部分消失一部分】

//过滤，能被3整除
let arr=[12,5,8,99,27,36,75]
let result = arr.filter(item=>{ 
    if(item%3==0)return true  //通过return true和false来决定留不留
    else return false
});

//简写
let result = arr.filter(item=>{ 
　　return item%3==0;
});

 

5.4、forEach

   如果非要中文的叫法：循环（或迭代），跟for循环一样

//
let arr=[12,5,8,9]
arr.forEach((item,index)=>{
  alert(item+":"+index)
});

 

6、字符串

• 多了2个新方法
  • startsWith  以XX开头  boolean
  • endsWith   以XX结尾  boolean
• 字符串模板（特别的好用，没有他人生都灰暗不少）　　　　

//startsWith
let str='asdfasfw'
alert(str.startsWith('a')) //true

//判断以什么协议开头
let url = 'http://baidu.com'
if(url.startsWith('http://')){
   alert（'普通80'）
}else if(url.strtsWith('ftp://')){
   alert('ftp21')
}


//endsWith
let str = '1.txt'
if(str.endsWith('.txt')){
　　alert('文本')
}else if(str.endsWith('.jpg')){
　　alert('图片')
}

• 字符串模板
  • 以前都是在做 字符串连接

//在js里面单引号和双引号没区别
let str = 'abc';
let str = "abc";

//反单引号 ``
    let str = `abc`;
    let a = 12
    let str = `a${a}bc`; //把数值替换进去 ，a12bc  // ${} 就是把变量塞里面去

//原来的字符串连接很麻烦
　　let title='标题'
　　let content = '内容'
　　let  divstr = '<div><h1>'+title+'</h1><p>'+content+'</p></div>';

//有模板就很简单
let str2 = `<div><h1>${title}</h1><p>${content}</p></div>` //举例html使用
    
    
 模板功能：
     1.直接把东西塞到字符串里面 ${东西}
     2.可以拆行