字符串和数组常用API实例（控制台效果在注释里）

字符串和数组常用API实例（控制台效果在注释里）

1.字符串

    <script>
      let str = 'Hello 北京欢迎您！';
      //长度
      console.log(str.length);
      // 索引 -> 元素
      console.log(str[6]); //北
      // console.log(str.charAt(6));
      // 元素 -> 索引
      console.log(str.indexOf('北')); // 6
      console.log(str.search('l')); // 2
      // 字符串拼接
      console.log(str.concat('<a>', 'china', '</a>'));
      console.log(str + ' welcome to china');
      console.log(`${str} welcome to china`);
      // 替换 Hello -> 您好
      console.log(str.replace('Hello', '您好'));
      // slice 取子串，忽略结束索引对应的值，返回字符串
      console.log(str.slice(0, 3)); //从0开始取3个
      console.log(Object(str.slice(0, 3))); //返回 string类型
      // substr 取指定区间，不知到哪结束,但是知道取多少 返回字符串
      console.log(str.substr(0, 7));
      console.log(str.substr(3, 6));
      console.log(str.substr(0, 3) + str.substr(3, 2));
      // 从后往前取,取出"北京"
      console.log(str.substr(-6, 2));
      // split: string -> array
      let s = '1-2-3-4';
      console.log(s.split('-')); // [1,2,3,5]
      console.log(str.split('', 4)); // [h,e,l,l]
      // toLowerCase 转为小写， toUpperCase 转为大写
      console.log(str.toLowerCase());
      console.log(str.toUpperCase());
      // 添加链接
      console.log(str.link('http://www.xinhuanet.com'));
      // 插入到BODY标签之后
      document.body.insertAdjacentHTML(
        'afterbegin',
        str.link('http://www.xinhuanet.com')
      );
      console.log(str.bold()); //加粗
      document.body.insertAdjacentHTML('afterbegin', str.bold());
    </script>

2.数组

    <script>
      // 增删仅限于数组两端的操作
      // push,pop  unshift,shift
      let arr = [];
      console.log(arr);
      // 返回数组的元素数量
      // push 尾部追加
      // pop 尾部删除
      console.log(arr.push(10)); // 返回1，1个数组元素
      console.log(arr.push(20, 30)); // 返回3,3个数组元素
      console.log(arr); // [10,20,30]
      console.log(arr.pop()); // 返回30  表明已经从尾部删除了30这个元素
      console.log(arr); // [10,20]
      console.log(arr.pop());
      console.log(arr.pop());
      console.log(arr.pop());
      // unshift 头部追加
      // shift 头部删除
      console.log(arr); // []
      console.log(arr.unshift(10)); // 返回1，当前数组1个元素
      console.log(arr); // [10]
      console.log(arr.unshift(30, 20)); // 返回3 ,当前数组3个元素
      console.log(arr); // [30,20,10]
      console.log(arr.shift()); // 返回30， 删除了30这个头部元素
      console.log(arr.shift()); // 20
      // push + shift ,就像是排队，尾部进入，头部删除
      // 遍历数组
      // 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(function (item, index, arr) {
      //   console.log(item, index, arr);
      // });
      // 改为箭头函数
      // 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]);
      // 将每个元素返回一个新数组，[1,2,3,4,5] => [2,4,6,8,10]
      res = arr.map((item) => item * 2); // [2,4,6,8,10]
      console.log(res);
      // every, some
      // every:数组成员全部满足条件，则返回 true,否则 false
      console.log(arr.every((item) => item >= 0)); // true
      console.log(arr.every((item) => item >= 3)); // false
      // some 满足1个即成立
      console.log(arr.some((item) => item > 6)); // false
      console.log(arr.some((item) => item >= 3)); // true
      // filter,只返回为真的元素组成的数组
      console.log(arr.filter((item) => item > 3)); //[4,5]
      // find,返回满足条件的第一个
      console.log(arr.find((item) => item >= 3)); // 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}`);
        return acc + item;
      }, 1000); // 1000 是可选初始值，比如做投票点击率之类的
      // acc:结果累加器
      res = arr.reduce((acc, item) => acc + item);
      console.log(res);
      // sort
      let arr = [1, 10, 20, 6, 13];
      // sort,默认按字符串来排序
      console.log(arr.sort()); // [1,10,13,20,6]
      // 升序效果 asc
      console.log(arr.sort((a, b) => a - b)); // [1,6,10,13,20]
      // 降序效果 desc
      console.log(arr.sort((a, b) => b - a)); // [20,13,10,6,1]
      // join:array -> string
      // string: split
      arr = ['red', 'green', 'blue'];
      console.log(arr.join());
      console.log(arr.join(','));
      console.log(arr.join('--'));
      console.log(typeof arr.join('--')); // string
      // slice: 取子元素，字符串也有一个slice
      arr = [1, 2, 3, 4, 5, 6, 7, 8];
      console.log(arr);
      console.log(arr.slice(2, 5)); // [3,4,5]
      console.log(arr.slice(2)); // [3,4,5,6,7,8]
      // -6,-3 ===> 2,5
      console.log(arr.slice(-6, -3)); // [3,4,5]
      // splce: 删除，新增，替换
      // 默认删除，返回被删除的元素
      console.log(arr.splice(1, 2)); // [2,3]
      console.log(arr); // [1,4,5,6,7,8]
      // 更新
      // 4,5 被 a,b 替换，被更新了
      // 从第1个元素后面更新2个
      console.log(arr.splice(1, 2, 'a', 'b')); //[4,5]
      console.log(arr); // [1,a,b,6,7,8]
      // 新增，不要删除
      // 从第2个元素后面新增2个
      console.log(arr.splice(2, 0, 'red', 'green'));
      console.log(arr); // [1,'a','red','green','b',6,7,8]
      // 反转
      console.log(arr.reverse()); //[8,7,7,'b','green','red','a',1]
    </script>