Blogger Information

Blog 13

fans 0

comment 0

visits 6605

Special Recommendation

More>

Related recommendations

字符串API

效果图

代码

<!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>字符串常用 api(简单的理解为函数/方法)</title>
  </head>
  <body>
    <script>
      let str = 'php中文网';
      //长度
      console.log(str.length);
      //索引->元素
      console.log(str[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('', 6));
      //toLowerCase , toUpperCase 大小写转换
      console.log(str.toLocaleLowerCase());
      console.log(str.toLocaleUpperCase());
      // 字符串link方式，字符串的内容会成为a标签的文本值
      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>
  </body>
</html>

数组api

效果图

代码

<!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>数组api</title>
  </head>
  <body>
    <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));
      //增删仅限于数组二端的操作
      //push,pop,unshift,shift
      let arr2 = [];
      console.log(arr2);
      //push 尾部追加
      //pop 尾部删除
      console.log(arr2.push(10));
      console.log(arr2.push(20, 30));
      console.log(arr2);
      console.log(arr2.pop());
      console.log(arr2.pop());
      console.log(arr2.pop());
      console.log(arr2.pop());
      // unsift :头部追加
      //shift：头部删除
      console.log(arr2);
      console.log(arr2.unshift(10));
      console.log(arr2.unshift(30, 20));
      console.log(arr2);
      //push + shift,就像是排队，尾部进入，头部删除
      //遍历数组
      //1.forEach,map
      //2.every,some
      //3.filter,find,findIndex
      //4.reduce
      let arr3 = [1, 2, 3, 4, 5];
      // arr.forEach(function(元素的值,值对应的索引,数组本身) {
      // 对数组中的每个元素逐个调用回调方式进行处理
      // })
      // 三个参数,只有第一个必选的,其它可不写
      let res = arr3.forEach((item, index, arr3) =>
        console.log(item, index, arr3)
      );
      console.log(res);
      //需要返回值，就用map
      res = arr3.map((item, index, arr3) => [item, index, arr3]);
      //将每个元素乘二返回一个新数组，[1，2，3]=>[2,4,6]
      res = arr3.map((item) => item * 2);
      console.log(res);
      //every,some
      //every:将数组成员全部满足条件，则返回 true，否则 false
      console.log(arr3.every((item) => item >= 0));
      console.log(arr3.every((item) => item >= 3));
      console.log(arr3.every((item) => item >= 6));
      console.log(arr3.every((item) => item >= 3));
      //filter,只返回为真的元素组成员的数组
      console.log(arr3.filter((item) => item >= 3));
      //find,返回满足条件的第一个
      console.log(arr3.find((item) => item >= 3));
      //归并 reduce
      let acc = 0;
      for (let i = 0; i < arr3.length; i++) {
        acc += arr3[i];
      }
      console.log(acc);
      // arr.reduce(function(累加器,元素的值,值对应的索引,数组本身) {})
      res = arr3.reduce(function (acc, item, index, arr3) {
        console.log(`acc=${acc}, item=${item}`);
        return acc + item;
      }, 1000);
      //acc:结果累加器
      res = arr3.reduce((acc, item) => acc + item);
      console.log(res);
      //sort
      let arr4 = [1, 10, 20, 6];
      //sort,默认按字符串来排
      console.log(arr4.sort());
      //升序
      console.log(arr4.sort((a, b) => a - b));
      //降序
      console.log(arr4.sort((a, b) => b - a));
      // join: array -> string
      // string: split
      arr5 = ['red', 'green', 'blue'];
      console.log(arr5.join());
      console.log(arr5.join('--'));
      //slice:取子元素，字符串也有一个slice
      arr6 = [1, 2, 3, 4, 5, 6, 7, 8];
      console.log(arr6);
      console.log(arr6.slice(2, 5));
      console.log(arr6.slice(2));
      //-6,-3 ==>2,5
      console.log(arr6.slice(-6, -3));
      //splce:删除，新增，替换
      //默认删除，返回被删除的的元素
      //2，3
      console.log(arr6.splice(1, 2));
      console.log(arr6);
      //更新
      //4，5被 a，b替换，被更新了
      console.log(arr6.splice(1, 2, 'a', 'b'));
      console.log(arr6);
      //新增，不删除
      console.log(arr6.splice(1, 0, 'red', 'green'));
      console.log(arr6);
      //反转
      //reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。
      let arr7 = [1, 2, 3];
      console.log(arr7);
      console.log(arr7.reverse(arr7));
    </script>
  </body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

布局实战代码

2022-03-28 12:57:53

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

字符串API

效果图

代码

数组api

效果图

代码