第16章 0407-常用字符串数组API-PHP课程网总结-前端部分-郭俊杰的知识库

第16章 0407-常用字符串数组API

Data: 2021-06-15 09:13:09Form: JournalClick: 2

问题集合：

1. reduce(元素的值，元素的索引，数组)其中第一个和第二和是不是可以自定义吧？

答：可以

2. 获取p的元素怎么是-1啊而获取字就不是？

答：-1就是没找到，用小写去匹配大写, 当然找不到

3. 看构造函数创建类和模板字面量时，怎么访问或者内部调用私有变量？

答：外部没有办法直接调用类的私有变量，可以通过调用类内的公有方法的方式间接访问私有变量

4. 内部怎么调私有变量？

答：私有变量也是变量，${this.#salary}

5. 实参怎么传里面那？实参没有显示出来，还是私有变量，外部不能传实参进去？

答：构造函数别只传参，不进行任何赋值，对象无法正常保存

6. 这样不能拼接嘛？

答：注意 f.shift()返回的是删除的元素（也就是'1'），f.push()返回的是数组操作后数组长度（也就是'5') ，f(1,5)是什么意思？f是一个变量，为何f()

demo1：js单线程异步的演示: 选学

<form action="" style="display: grid; gap: 1em; width: 20em">
    <input type="text" onkeydown="console.log(this.value)" placeholder="同步" />

        <!-- 慢半拍 -->
        <!-- 分析为什么表单输入第一次获取不到?
            因为console.log(this.value).是同步的
      1. 当按下某个键时, 它会触发keydown事件,事件循环将事件方法从任务队列添加到主线中,并立即调用,即console.log立即执行
      2. 但是此时这个键对应的值,例如1, 还没有被DOM渲染到input输入框中,所以console.log获取不到值,或获取一个空值
      3. 因为"按下1" 和 "显示1" 是2步操作,而console.log是在第1步结束后一瞬间执行,而值还没被显示到input框中
      4. 所以, console.log()执行时机,是在"按下"与"显示"之间,所以无法获取到用户输入的内容或获取到一个空值
      5. 为什么第2次按下时,console.log()可以获取到了呢?
      6. 是因为当用户再次按下时, console.log()立即执行,此时input中已经有了内容,就是上一次的输入内容,所以就正常输出了 -->

        <!-- 解决方案: 让console.log异步执行, 等Input中的内容渲染完成 dom -->
        <!-- 必知内容:
      1. DOM渲染是同步任务, 这里的dom渲染,是指将内容显示到input框中
      2. DOM事件是异步任务, 使用keydown
      3. 异步必须在同步完成后执行 
      -->

        <!-- 最简单的异步就是定时器 -->
        <input type="text" onkeydown="setTimeout(()=>console.log(this.value),0)" placeholder="异步" />

        <!-- onkeydown="setTimeout(()=>console.log(this.value),0)" 用 input 事件  -->

        <input type="text" oninput="console.log(this.value)" placeholder="input" />
    </form>

    <!-- input = keydown + setTimeout -->

demo2：字符串常用 api(简单的理解为函数/方法)

    <script>
        let str = 'php中文网';
        // console.log(str[0], str[1], str[2], str[3], str[4], str[5]);
        // 索引取值范围: [0, 5], [0, str.length - 1];

        // 长度
        console.log(str.length);

        // 索引->元素
        console.log(str[3]);
        // console.log(str.charAt(3));

        // 元素->索引
        console.log(str.indexOf('网'));
        console.log(str.search('网'));

        // 字符串拼装
        console.log(str.concat('<a>', 'php.cn', '</a>'));
        console.log(str + 'php.cn');
        console.log(`${str}php.cn`);

        // php中文网  -> php.cn
        console.log(str.replace('中文网', '.cn'));

        // slice 取子串,忽略结束索引对应的值
        console.log(str.slice(0, 3));

        // substr: 不知到哪结束,但是知道取多少
        console.log(str.substr(0, 3));
        console.log(str.substr(3, 3));
        console.log(str.substr(0, 3) + str.substr(3, 3));
        // 从后往前取,取出"中文网"
        console.log(str.substr(-3, 3));

        // split: string -> array
        let s = '1-2-3-4';
        console.log(s.split('-'));
        console.log(str.split('', 4));
                //全部字符变为大写
        // toLowerCase,toUpperCase
        console.log(str.toUpperCase());

        // let url = `<a href="https://php.cn">${str}</a>`;
        // console.log(url);
        // document.body.insertAdjacentHTML('afterbegin', url);
        //添加链接
        console.log(str.link('https://php.cn'));
        document.body.insertAdjacentHTML('afterbegin', str.link('https://php.cn'));
        //文字加粗
        console.log(str.bold());
        document.body.insertAdjacentHTML('afterbegin', str.bold());
    </script>

demo3：数组api-1

    <script>
        // 字面量
        let arr = [
            1,
            2,
            'a',
            'b',
            true, [1, 2, 3], {
                x: 1,
                y: 2,
            },
            function() {},
        ];
        console.log(arr);

        // array.of
        // 服务器返回数组
        let a = [1, 2, 3, 4, 5];
        console.log(Array.of(1, 2, 3, 4, 5));
        console.log(Array.of(...a));

        // 类数组
        const arr1 = {
            0: 'red',
            1: 'blue',
            2: 'green',
            length: 3,
        };
        // 类数组本质上是一个对象
        console.log(arr1);
        // 转为真正的数组
        console.log(Array.from(arr1));

demo4：数组常用api-2

<script>
        // 增删仅限于数组二端的操作
        // push,pop, unshift,shift
        let arr = [];
        console.log(arr);
        // 返回数组的元素数量

        // push 尾部追加
        // pop  尾部删除
        console.log(arr.push(10));
        console.log(arr.push(20, 30));
        console.log(arr);
        console.log(arr.pop());
        console.log(arr.pop());
        console.log(arr.pop());
        console.log(arr.pop());

        // unsift: 头部追加
        // shift: 头部删除
        console.log(arr);
        console.log(arr.unshift(10));
        console.log(arr.unshift(30, 20));
        console.log(arr);
        console.log(arr.shift());
        console.log(arr.shift());
        console.log(arr.shift());

        // push + shift, 就像是排队, 尾部进入, 头部删除
    </script>

demo5：数组常用api-3

<script>
        // 遍历数组
        // 1. forEach,map
        // 2. every, some
        // 3. filter, find, findIndex
        // 4. reduce

        // forEach
        let arr = [1, 2, 3, 4, 5];

        // arr.forEach(function(元素的值,值对应的索引,数组本身) {
        // 对数组中的每个元素逐个调用回调方式进行处理
        // })
        // 三个参数,只有第一个必选的,其它可不写
        let res = arr.forEach((item, index, arr) => console.log(item, index, arr));
        console.log(res);
        // 需要返回值,就用map

        res = arr.map((item, index, arr) => [item, index, arr]);
        // 将每个元素乘2返回一个新数组, [1,2,3] => [2,4,6]
        res = arr.map(item => item * 2);
        console.log(res);

        // every, some
        // every: 数组成员全部满足条件,则返回 true , 否则 false 与
        console.log(arr.every(item => item >= 0));
        console.log(arr.every(item => item >= 3));

        console.log(arr.some(item => item >= 6));
        console.log(arr.some(item => item >= 3));

        // filter,只返回为真的元素组成的数组
        console.log(arr.filter(item => item >= 3));

        // find,返回满足条件的第一个
        // arr.filter(item => item >= 3)[0]
        console.log(arr.find(item => item >= 3));

        // 归并 reduce
        let acc = 0;
        for (let i = 0; i < arr.length; i++) {
            acc += arr[i];
        }
        console.log(acc);

        // arr.reduce(function(累加器,元素的值,值对应的索引,数组本身) {

        // })

        res = arr.reduce(function(acc, item, index, arr) {
            // console.log(`acc=${acc}, item=${item}, index=${index},arr=${arr}`);
            console.log(`acc=${acc}, item=${item}`);
            return acc + item;
        }, 1000);

        // acc: 结果累加器
        res = arr.reduce((acc, item) => acc + item);
        console.log(res);
    </script>

demo6：数组api-4

<script>
        // sort
        let arr = [1, 10, 20, 6];
        // let arr = ['1', '10', '20', '6'];
        // sort,默认按字符串来排
        console.log(arr.sort());
        // default: asc
        console.log(arr.sort((a, b) => a - b));
        // desc
        console.log(arr.sort((a, b) => b - a));

        // join: array -> string
        // string: split
        arr = ['red', 'green', 'blue'];
        console.log(arr.join());
        console.log(arr.join(','));
        console.log(arr.join('--'));

        // slice: 取子元素, 字符串也有一个slice
        arr = [1, 2, 3, 4, 5, 6, 7, 8];
        console.log(arr);
        console.log(arr.slice(2, 5));
        console.log(arr.slice(2));
        // -6,-3, ===> 2,5
        console.log(arr.slice(-6, -3));

        // splce: 删除,新增,替换
        // 默认删除,返回被删除的元素
        // 2,3
        console.log(arr.splice(1, 2));
        console.log(arr);

        // 更新
        // 4,5被 a,b替换, 被更新了
        console.log(arr.splice(1, 2, 'a', 'b'));
        console.log(arr);

        // 新增,不要删除
        console.log(arr.splice(1, 0, 'red', 'green'));
        console.log(arr);

        // 反转
    </script>