本地存储
元素属性
高阶函数（了解）
重绘和回流（了解）
事件绑定和取消绑定
事件流动（三个阶段）
字符串转换
正则表达式

本地存储

1、本地存储特性

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大，sessionStorage和localStorage约 5M 左右

2、 localStorage

生命周期永久生效，除非手动删除否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

清空数据：

localStorage.clear();

①存储复杂数据类型存储

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
JSON.stringify(复杂数据类型)

将复杂数据转换成JSON字符串存储本地存储中
JSON.parse(JSON字符串)

将JSON对象时候使用

    <script>
      // 1 还是正常定义对象
         const obj = {
         name: '路飞',
         height: 100,
         weight: 200,
       };

       // 2 有好用的代码 ，可以帮我们快速把一个对象转成字符串
        const objStr = JSON.stringify(obj);

       // 3 本地存储 可以存储字符串类型的数据
        localStorage.setItem("obj",objStr);

      // 4 把本地存储的数据重新读取出来
        const newObjStr =  localStorage.getItem("obj");
        console.log(newObjStr);

       // 5 你能不能帮 我 重新把 这个 字符串 解析成原来的对象 
        const newObj = JSON.parse(newObjStr);
        console.log(newObj);
    </script>

3、 sessionStorage（了解）

生命周期为关闭浏览器窗口(关闭页面后数据就丢失)
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
用法跟localStorage 基本相同

<script>
      //本地存储的技术 sessionStorage  会话（打开页面到关闭页面之间过程 一次会话  ajax node）存储

      //  存数据
      sessionStorage.setItem("ss",123);
      //  取数据
      console.log(sessionStorage.getItem("ss"));
      // 删除一个
      sessionStorage.removeItem("ss")
      // 清空
      sessionStorage.clear();
    </script>

元素属性

1、固有属性:

标签天生自带的属性比如class id title href src 等, 可以直接使用点语法操作

<body>
    <a id="nav" href="http://www.baidu.com">跳转</a >
    <script>
      // 获取 dom元素的固有属性  通过点语法来获取
      const a = document.querySelector('a');
      // 获取固有属性
       console.log(a.href);
       console.log(a.id);
      // 直接修改
       a.href="http://www.qq.com";
       a.id="top";
    </script>
  </body>

2、自定义属性:

由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API
getAttribute('属性名') // 获取自定义属性
setAttribute('属性名', '属性值') // 设置自定义属性
removeAttribute('属性名') // 删除自定义属性

<body>
    <a id="nav" hello="no" aa="bb" >跳转</a >

    <script>
      // 自定义属性 不能直接通过点语法来获取和设置
       console.log(a.hello);//错误的
       console.log( a.getAttribute("hello") );//正确
       console.log( a.getAttribute("aa") );//正确

      // 设置 setAttribute(key,value)
       a.setAttribute("hello","123");

      // 删除掉属性 removeAttribute(key)
       a.removeAttribute("hello");
    </script>
  </body>

3、 h5 建议的自定义属性

data-自定义属性 :

传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

<body>
    <a data-index="0" id="nav" aa="bb" >跳转</a >

    <script>
      // 属性的时候 data-xxx 开头
      //  获取的时候  a.dataset.xxx
      //  设置  a.dataset.index = 3;

       console.log(a.dataset.index);//获取
       a.dataset.index = 3;//设置
    </script>
  </body>

注意：最强大是（getAttribute） setAttribute removeAttribute ，这个方式，可以获取到任意的属性（固有属性和h5建议的自定义属性）

<a data-index="0" id="nav" href="http://www.baidu.com" hello="no" aa="bb" >跳转</a >
<script>
      console.log( a.getAttribute("data-index") );
      console.log( a.getAttribute("id") );
      console.log( a.getAttribute("href") );
      console.log( a.getAttribute("hello") );
      console.log( a.getAttribute("aa") );
</script>

高阶函数（了解）

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。
高阶函数的应用在react阶段（培训过程最后一个阶段）大量的应用

①函数表达式

函数也是【数据】
把函数赋值给变量
函数表达式和普通函数并无本质上的区别：

普通函数的声明与调用无顺序限制，推荐做法先声明再调用

函数表达式必须要先声明再调用

//函数表达式与普通函数本质上是一样的
let counter = function (x, y) {
    return x + y
}
//调用函数
let result = counter(5, 10)
console.log(result)

<body>
    <button>按钮</button>
    <script>
      //把一个函数 看成是个普通数据，应用在 参数 或者返回值  技术  
        function f1(callback) {
          callback();
        };
        function f2() {
          console.log("我就是高阶函数");
        };
        f1(f2);// f2 当成是一个普通的参数来使用（形参来使用）
       setInterval(f2,1000);// 把f2 当成是一个普通参数  传递给别人使用

        const btn=document.querySelector("button");
        btn.addEventListener("click",f2);// f2 也是高阶函数
    </script>
  </body>

②回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
把函数当做另外一个函数的参数传递，这个函数就叫回调函数
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见

常见的使用场景：

function fn() {
    console.log('我是回调函数...')
}
//fn 传递给了setInterval ， fn就是回调函数
setInterval(fn, 1000)

box.addEventListener('click', funnction(){
  coonsole.log('我也是回调函数')
 })

重绘和回流 -了解

1、浏览器是如何进行界面渲染的

解析（Parser）HTML，生成DOM树(DOM Tree)
同时解析（Parser） CSS，生成样式规则 (Style Rules)
根据DOM树和样式规则，生成渲染树(Render Tree)
进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
Display: 展示在页面上

2、重绘和回流(重排)

①回流(重排)

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。

②重绘：

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。

③重绘不一定引起回流，而回流一定会引起重绘。

④会导致回流（重排）的操作：简单理解影响到布局了，就会有回流

页面的首次刷新
浏览器的窗口大小发生改变
元素的大小或位置发生改变
改变字体的大小
内容的变化（如：input框的输入，图片的大小）
激活css伪类（如：:hover）
脚本操作DOM（添加或者删除可见的DOM元素）

事件绑定和取消绑定

addEventListener 可以绑定多个同名事件
removeEventListener 可以取消对应的事件类型和事件处理函数
无法取消 addEventListener 事件对应的匿名函数

<body>
    <button>点击我 输出时间</button>
    <script>
       const btn = document.querySelector('button');

       // 普通函数
       function func() {
         console.log('2022-04-15 14:32:26');
       }
       function func2() {
         console.log("func2");
       }

       // 绑定事件
       btn.addEventListener('click', func);

       // addEventListener 可以绑定多个同名事件
       btn.addEventListener('click', func2);

       setTimeout(function () {
         // 取消这个事件绑定
         btn.removeEventListener('click', func);
       }, 5000);

		
       //无法取消 addEventListener 事件 对应的匿名函数 
       const btn=document.querySelector("button");
       btn.addEventListener("click",function () {
         console.log("你好");
       })
      //  想要取消 这个 输出你好的行为
      btn.removeEventListener("click",???);

    </script>
  </body>

事件流动（3个阶段）

冒泡阶段（最重要）
捕获阶段（addEventListener 第三个参数 true|false 来进行切换）
目标阶段（了解）

<body>
    <div class="a">爷爷
      <div class="b">爸爸
        <div class="c">儿子</div>
      </div>
    </div>
    <script>
      const a=document.querySelector(".a");
      const b=document.querySelector(".b");
      const c=document.querySelector(".c");
      a.addEventListener("click",function () {
        console.log("爷爷");
      })
      b.addEventListener("click",function () {
        // 这个c 是最底层的元素 
        console.log("爸爸");
      })
      c.addEventListener("click",function () {
        // 这个c 是最底层的元素 
        console.log("儿子 目标阶段");
      })
    </script>
  </body>

字符串转换

1、转大写 toUpperCase()

let sm = 'afsmdkkl'
//  sm 大写
console.log(msg.toUpperCase());

2、转小写 toLowerCase()

let msg = 'HELLODFDFDFDFDFD';
// msg 转小写
console.log(msg.toLowerCase()); //转成小写

3、字符串转数组 str.split('')

str.split('') 按照什么来分割你的字符串变成数组

       // 字符串 转数组  // split("")   分割
       const str="abcdefg"; //=> ["a","b","c","d","e","f","g"]
       console.log(str.split(""));

       const str = 'a-b-c-d-e-f-g'; // ["a","b","c","d","e","f","g"]
       console.log(str.split('-'));

4、数组转字符串 join () concat()

concat()可以转字符，也可以合并（少用）

<script>
      // 数组 补充 常用
      // const arr = ['a', 'b', 'c', 'd'];

      // console.log(arr.join('')); // join 数组转字符串
      // console.log(arr.join('-')); // a-b-c-d 数组转字符串

      // 连接  数组和数组之间连接
       const arr1 = ['1', '2', '3'];
       const arr2 = ['a', 'b', 'c'];
      // 将两个数组合并成一个数组
       console.log(arr1.concat(arr2));

      //字符串也有一个 concat 也是表示合并
      const str1 = '123';
      const str2 = 'abc';
      // console.log(str1.concat(str2));// 很少用  有什么用？ 当你的键盘 + 键坏  使用它 
      console.log(str1 + str2); // 更加简单好理解
    </script>

正则表达式

1、介绍

正则表达式在 JavaScript中的使用场景：

例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)
比如用户名: /^[a-z0-9_-]{3,16}$/
过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

2、语法

JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法：

①定义正则表达式语法： / / 是正则表达式字面量

let 变量名 = /表达式/

let reg = /前端/

②判断是否有符合规则的字符串：

test() 方法用来查看正则表达式与指定的字符串是否匹配
如果正则表达式与指定的字符串匹配，返回true，否则false

regObj.test(被检测的字符串)

<script>
        //正则的作用 ：寻找字符串 检测 这个字符串有没有我想要的文字
        const str = `金钱对你意味着什么？你有梦想吗？等等等等。一下子都让我陷入了沉思。真的需要好好的想想，然后写下来`;

        //判断这个字符串有没有梦想两个字
        //定义规则
        const reg = /梦想/   //两个反斜杠固定写法

        //规则和字符串 匹配 test
        console.log(reg.test(str));  //有就返回true  ，没有就返回 false
    </script>

3、元字符

①边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
如果 ^ 和 $ 在一起，表示必须是精确匹配。

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

<script>
    const str = `12金来`;
    // 你检测的字符串 必须要以 “梦” 开头  以 “想” 结尾
    // const reg = /^金来$/; // 只能匹配 "金来"
    // const reg = /^金来/; // `金来123`;  以'金来'为开头true
    const reg = /金来$/; //  `1234323金来`; 以'金来'为结尾true
    console.log(reg.test(str));
  </script>

②量词(修饰符)

量词用来设定某个模式出现的次数
注意：逗号左右两侧千万不要出现空格

量词	说明
*	重复0次或更多次
+	重复1次或更多次
?	重复0次或1次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n次到m次

<script>
      // const str="路飞";
      // const reg=/路飞/;
      // console.log(reg.test(str));

      //  *  表示 放在它前面那一个字符 可以出现0次或者多次
      // /^路*$/   => ""，  路，路路，路路路
      // console.log(/^路*$/.test('')); // true
      // console.log(/^路*$/.test('路')); // true
      // console.log(/^路*$/.test('路路')); // true
      // console.log(/^路*$/.test('路路路')); // true

      // + 表示 放在它前面那一个字符 可以出现1次或者多次
      // console.log(/^路+$/.test(''));
      // console.log(/^路+$/.test('路'));
      // console.log(/^路+$/.test('路路'));
      // console.log(/^路+$/.test('路路路'));

      // ？ 表示出现0次或者1次
      // console.log(/^路?$/.test(''));// true
      // console.log(/^路?$/.test('路')); // true
      // console.log(/^路?$/.test('路路')); // false
      // console.log(/^路?$/.test('路路路')); // false

      // {n} 放在它前面的那一个字符 出现n次
      // console.log(/^路{2}$/.test('')); // false
      // console.log(/^路{2}$/.test('路')); // false
      // console.log(/^路{2}$/.test('路路')); // true
      // console.log(/^路{2}$/.test('路路路')); // false

      // {n,} 放在它前面的字符 最少出现n次
      // console.log(/^路{2,}$/.test('')); // true
      // console.log(/^路{2,}$/.test('路')); // true
      // console.log(/^路{2,}$/.test('路路'));// true
      // console.log(/^路{2,}$/.test('路路路')); // true

      // {n,m} 放在它前面的字符 最少出现n次，最大是m次
      console.log(/^路{0,2}$/.test('')); // true
      console.log(/^路{0,2}$/.test('路'));  // true
      console.log(/^路{0,2}$/.test('路路')); // true
      console.log(/^路{0,2}$/.test('路路路'));  // false 

    </script>

③字符类(占位符)

Ⅰ、预定义：指的是某些常见模式的简写方式。

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[ ^0-9]
\w	匹配任意的字母、数字、下划线、相当于[A_Za-z0-9_]
\W	除所有的字母、数字、下划线以外的字符、相当于[ ^A_Za-z0-9_]
\s	匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]
\S	匹配非空格的字符，相当于[ ^\t\r\n\v\f]

<script>
      //  . 表示除了（换行符之外）任意字符
      // console.log(/路/.test('飞')); // false
      // console.log(/./.test('飞')); // true
      // console.log(/路.飞/.test('路大飞')); // true
      // console.log(/路.飞/.test('路小飞')); // true
      // console.log(/路.飞/.test('路中飞')); // true
      // console.log(/路.飞/.test('路不飞')); // true
      // console.log(/路.飞/.test('路飞')); // false
      // console.log(/路.飞/.test('路 飞')); // false

      // \d 表示数字
      // console.log(/\d/.test("路飞"));// false

      // console.log(/\d/.test("1路飞"));// true
      // console.log(/\d/.test("路3飞"));// true

      // \D 不是数字之外的任意1个字符
      // console.log(/\D/.test("123"));// false
      // console.log(/\D/.test("12a3"));// true
      // console.log(/\D/.test("12a3"));// true

      // \w  字母、数字、下划线
      // console.log(/\w/.test("123"));//  true
      // console.log(/\w/.test("%%"));//  false
      // console.log(/\w/.test("%1%"));//  true
      // console.log(/\w/.test("%a%"));//  true
      // console.log(/\w/.test("%_%"));//  true

      // \W  除去了 字母 、数字、下划线 之外字符
      // console.log(/\W/.test("123"));// false
      // console.log(/\W/.test("1%23"));// true

      // \s  匹配空格
      // console.log(/\s/.test("123"));// false
      // console.log(/\s/.test("1 23"));// true

      // \S 除了空格之外的字符
      // console.log(/\S/.test('123'));// true
      // console.log(/\S/.test(' '));// false
      // console.log(/\S/.test('   '));// false
    </script>

Ⅱ、[ ] 匹配字符集合

后面的字符串只要包含 abc 中任意一个字符，都返回 true
里面加上 ^ 取反符号比如[^a-z] 匹配除了小写字母以外的字符

 <script>
      // [ab]  => 可以匹配 a  或者 b
      // console.log(/[ab]/.test('a'));// true
      // console.log(/[ab]/.test('b'));// true
      // console.log(/[abc]/.test('c'));// true

      // 表示 a-z 任意的一个字母
      // console.log(/[a-z]/.test('c'));// true
      // console.log(/[a-z]/.test('d'));// true
      // console.log(/[a-z]/.test('123'));// false
      // console.log(/[a-d]/.test('a'));// true
      // console.log(/[a-d]/.test('g'));// false

      // 0-9 任意的一个数字
      // console.log( /[0-9]/.test("1") );// true
      // console.log( /[0-9]/.test("2") );// true
      // console.log( /[0-9]/.test("0") );// true

      // A-Z
      // console.log(/[A-Z]/.test("a"));// false
      // console.log(/[A-Z]/.test("B"));// true

      // 同时满足 0-9a-zA-Z
      console.log(/[0-9a-zA-Z]/.test('1'));// true
      console.log(/[0-9a-zA-Z]/.test('a'));// true
      console.log(/[0-9a-zA-Z]/.test('A'));// true
      console.log(/[0-9a-zA-Z]/.test(' '));// false
    </script>

4、修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

①替换 replace

字符串.replace(/正则表达式/, '替换的文本')

	<script>
      let str = '天文 今天请吃饭';

      // 吃饭 -> 上天台
      // "字符串".replace("待替换文字","替换什么样")    返回一个新的字符串
      let newStr = str.replace('吃饭', '上天台');
      console.log(newStr);
    </script>

②global 和 ignore

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果

	<script>
      let str = '天文 HEIGHT 180 ';

      // 将数字 替换成 *
      // str.replace("支持正则的方式来匹配文字","要替换成什么样");
      // str = str.replace(/\d+/, '*');// 找到一个或者多个数字，然后只替换成一个 * 
      // str = str.replace(/\d/g, '*');// g 属于正则中的 修饰符 表示 全局 global 
      // console.log(str);

      //  把英文字母替换成 * 
      // str=str.replace(/[a-zA-Z]/g,"*")
      str=str.replace(/[a-z]/gi,"*") // i ignore忽略  忽略大小写 
      console.log(str);
    </script>

wepApi第九天