(4.3)数组、对象及类数组对象，set的用法，正则表达式的常用方法，蓝桥杯备赛-(生成数组、数组去重、实现模板字符串的解析、新课上线啦)

标签：set console log height 蓝桥 width 数组 margin

1.1数组、对象及类数组对象

1.数组：

数组是有序的数据集合，其中的索引值从0开始递增，并且数组有length属性，可以获取数组内的元素个数，其中的值可以是任何的数组类型。

2.对象：

对象是无序的是由一个或多个键值对组成的数据集合，对象没有length属性。

3.伪数组(类数组对象)：

类数组对象首先它还是一个对象，但是它具有对象的某些特点。以下特征：

类数组对象中的键(属性名)都改为从0开始递增的数值型或字符串型的数字，也就是说该属性名可以加引号也可以不加。
该类数组对象必须拥有length属性，由于指定数组的长度，若没有该属性，那么转化为数组后就是一个空数组。
不能调用数组上的方法。

4.类数组对象转化为数组的方法：

(1).Array.from：

        let arrayLike={
            '0':'李华',
            '1':15,
            '2':'班长',
            '3':['英语','语文','数学'],
            length:4
        }
        let arr=Array.from(arrayLike)
        console.log(arr)//['李华', 15, '班长', ['英语','语文','数学']]
        console.log(Object.prototype.toString.call(arrayLike))//[object Object]
        console.log(Object.prototype.toString.call(arr))//[object Array]

(2).拓展运算符：

        function fn(){
            console.log(arguments)//Arguments(5) [1, 2, 3, 4, 5]
            console.log(Object.prototype.toString.call(arguments))//[object Arguments]
            // 此时使用拓展运算符，将其转化为真正的数组
            console.log([...arguments])//[1, 2, 3, 4, 5]
            console.log(Object.prototype.toString.call([...arguments]))//[object Array]
        }
        fn(1,2,3,4,5)

(3).数组方法：

        // 使用数组的slice方法
        let sliceResult=Array.prototype.slice.call(arrayLike)
        console.log(sliceResult)//['李华', 15, '班长', ['英语','语文','数学']]
        console.log(Object.prototype.toString.call(sliceResult))//[object Array]

        // 使用数组的splice方法
        let spliceResult=Array.prototype.splice.call(arrayLike,0)//['李华', 15, '班长', ['英语','语文','数学']]
        console.log(spliceResult)
        console.log(Object.prototype.toString.call(spliceResult))//[object Array]

1.2set的用法

1.定义：

set是ES6新增的一种数据类型，类似于数组，但它的一大特性就是其中所有的元素都是唯一的，没有重复的值，相当于集合的存在。我们一般使用set来进行数组、字符串等的去重以及得出并集、交集及差集。

2.基本使用：

        let list=new Set([1,2,10,15])
        // 使用add()添加元素
        list.add(3)
        console.log(list)
        // 可同时添加多个，但是要注意的是如果该元素已经存在，就不会再添加。
        list.add(4).add(5)
        console.log(list)

        // 使用detele()进行元素的删除
        list.delete(3)
        console.log(list)

        // 使用has()判断某元素是否存在,返回true或者false
        let result=list.has(5)
        console.log(result)//true

        // 使用clear()清除所有元素
        list.clear()
        console.log(list)//{}

3.常见用法：

        let a=new Set([1,2,3])
        let b=new Set([3,4,5])

        // 求并集
        let union=new Set([...a,...b])
        console.log(union)//{1, 2, 3, 4, 5}

        // 求交集
        let jiaoji = new Set([...a].filter(x => b.has(x)))
        console.log(jiaoji)//{3}

        // 求差集
        let chaji = new Set([...a].filter(x => !b.has(x)))
        console.log(chaji)//{1, 2}

1.3正则表达式

1.正则表达式的常用方法：

(1).text()使用正则去匹配字符串，返回true或flase。
(2).search()使用正则去匹配字符串，匹配成功返回第一个匹配成功的位置，匹配失败返回-1。
(3).match()使用正则去匹配字符串，匹配成功返回成功的数组，匹配失败则返回null。
(4).replace()使用正则去匹配字符串，匹配成功的使用新的字符串替换。

        // 1.text()使用正则去匹配字符串，返回true或flase。
        var reg = /\$/
        var result = reg.test('${name}')
        console.log(result)//true

        // 2.search()使用正则去匹配字符串，匹配成功返回第一个匹配成功的位置，匹配失败返回-1。
        var reg1 = /\&/
        var str = 'name&age'
        var result1 = str.search(reg1)
        console.log(result1)//4

        // 3.match()使用正则去匹配字符串，匹配成功返回成功的数组，匹配失败则返回null。
        var str1 = "dgfhfgh254bhku289fgdhdy675";
        var reg2 = /\d+/g;
        var result2=str.match(reg2)
        console.log(result2);

        // 4.replace()使用正则去匹配字符串，匹配成功的使用新的字符串替换。
        var str2='aaabbbccc'
        var reg3=/b/g
        var result3=str2.replace(reg3,'z')
        console.log(result3)//aaazzzccc

2.相关问题及解决

3.学习拓展

3.1生成数组

1.常用写法：

function createArr(n) {
  let list =[]
  for(var i=1;i<n+1;i++){
    list.push(i)
  }
  return list
}

2.使用Array.from的写法：

function createArr(n) {
  return Array.from({ length: n }, (item, i) => i + 1);
}

3.2数组去重

1.常用写法：

function myUniq(arr) {
    let result=[]
  arr.forEach(item => {
    if(result.indexOf(item)==-1){
        result.push(item)
    }
  });
  return result
}

2.使用set的写法：

function myUniq(arr) {
  return Array.from(new Set(arr));
}

3.3实现模板字符串解析

function strRender(str, data) {
  // 补充代码

  // 使用正则找出{}
  let re=/\$\{(\w+)\}/

  // 判断其中是否含有{}中的内容
  if(re.test(str)){
      // 使用match进行执行查找，并将包含查找的结果作为数组返回
      let key=str.match(re)[1]

      // 将str进行替换,在data中找出对象key的value值进行替换
      str=str.replace(re,data[key])

      // 使用递归继续调用自身的方法，直到str中{}都被替换完毕
      return strRender(str,data)
  }
  return str
}

3.4新课上线啦(页面设计)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>新课上线啦</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <!-- TODO：待补充代码 -->
    <div class="headContainer" >
      <div class="headWord"></div>
      <div class="longContainer">
        <div class="leftBigC">
          <div class="leftC">
            <img class="smallImg" src="./images//shouzhi.png" alt="">
            <p class="smallWard">扫描资讯</p>
          </div>
          <div class="longWard">
            购买成功后,一定要扫码添加班主任，获得<a class="inner">Java进阶资料</a>,并加入学习群，不错过直播课。
          </div>
        </div>
        <div class="rightC">
          <img src="./images/erweima.png" alt="">
        </div>
      </div>
    </div>

    
    <div class="centerC">
      <img class="centerimg1" src="./images/left.png" alt="">
    </div>

    <div class="centerC1">
      课程大纲
    </div>

    <div class="centerC2">
      <img class="centerimg1" src="./images/right.png" alt="">
    </div>


    <div class="footC">
      <div class="bigC">
        <div class="topC">
          <div class="left"></div>
          <div class="right"></div>
        </div>
        <div class="BottomC"></div>
      </div>
    </div>
</body>

</html>

/* TODO：待补充代码 */
* {
    margin: 0;
    padding: 0;
    /* background-color: #F8FAFB; */
}

.headContainer {
    width: 1920px;
    height: 500px;
    background-image: url(../images/bg.png);
    position: relative;
}

.headWord {
    background-color: none;

    position: absolute;
    /* background-color:#ffffff; */
    width: 880px;
    height: 279px;
    margin: 100px 520px;
    background-image: url(../images/word.png)
}

.longContainer {
    position: absolute;
    height: 120px;
    width: 1200px;
    margin: 440px 360px;
    background-color: aqua;
    background-image: url(../images/small-bg.png)
}

.leftC {
    display: flex
}

.smallImg {
    height: 22px;
    width: 18px;
    /* margin: 34px 174px; */
    margin-top: 34px;
    margin-left: 174px;
}

.smallWard {
    height: 20px;
    width: 80px;
    margin-left: 10px;
    margin-top: 35px;
    color: #1E5EF5;
}

.longWard {
    height: 18px;
    width: 700px;
    margin-left: 172px;
    margin-top: 13px;
}

.inner {
    display: inline;
}

.longContainer {
    display: flex;

}

.rightC {
    height: 84px;
    width: 84px;
    margin-top: 18px;
    margin-right: 169px;
}

.inner {
    color: #1E5EF5
}

.centerC {
    height: 10.67px;
    width: 16.06px;
    margin-top: 128px;
    margin-left: 874px;
}

.centerimg1 {
    height: 100%;
    width: 100%;
}

.centerC1 {
    width: 104px;
    height: 26px;
    margin-top: -12px;
    margin-left: 908px;
    font-family: PingFangSC-Semibold;
    font-size: 26px;
    color: #1E5EF5;
    letter-spacing: 0;
    line-height: 26px;
    font-weight: 600;
    /* background-color: #1E5EF5; */
}

.centerC2{
    height: 10.67px;
    width: 16.06px;
    margin-top: -25px;
    margin-left: 1030.94px;
}

.footC{
    position: relative;
    width: 1200px;
    height: 456px;
    background-color: #ffffff;
    margin-top: 121px;
    margin-left: 360px;
    margin-bottom: 60px;
}
.topC{
    display: flex;
    position: absolute;
    width: 804px;
    height: 211px;
    background-color: ffffff;
    margin-left: 200px;
    margin-top: 48px;
    justify-content: space-between;
}

.BottomC{
    position: absolute;
    width: 804px;
    height: 106px;
    background-color: #1E5EF5;
    margin-left: 200px;
    margin-top: 310px;
}
.left{
    width: 390px;
    height: 211px;
    background-color: bisque;
}   
.right{
    width: 390px;
    height: 211px;
    background-color: bisque;
}

4.学习总结

今天主要还是进行蓝桥杯的备赛，主要是完成了ES6语法的几个小练习：生成数组、数组去重、实现模板字符串的解析；以及一个页面省级的模拟题—新课上线啦。其中涉及到的知识点主要有：1.数组、对象以及类数组对象 2. set的用法 3.正则表达式的相关常用方法 4.页面设计的相关样式使用。

今天主要的难点是关于ES6的一些新特性的学习，因为这些内容平时很少涉及所以用到的就很少，也很少会进行系统的学习，今天就较为系统的学习了其中的伪数组以及Set的使用。1.伪数组：首先伪数组又称类数组对象，所以伪数组本质上还是一个对象，，只是其中的key都是从0开始递增数值型或字符串型的数字，并且其中必须包含length的键值对，若无则转换后为一个空数组。以及将位数组转换为一个真正的数组可以使用Array.from方法、拓展运算符以及数组的一些常用方法例如slice。2.Set：set的用法类似于数组，但是它其中所有的元素都是唯一的，所以常常使用set进行数组的去重。主要是学习了使用set进行数组或字符串等的去重以及求出其中并集、交集或差集等。

综上所述，今天学习的内容不是很多，其中主要的重难点是与ES6的一些新特性相关的知识点。以及在页面设计上花费的时间比较多也不是很熟练，需要多加练习。

标签：set,console,log,height,蓝桥,width,数组,margin
From： https://www.cnblogs.com/haozhaotou/p/17284391.html