search

博客列表 >JavaScript 字符串与数组方法、队列与循环队列、类（class）

JavaScript 字符串与数组方法、队列与循环队列、类（class）

尹辉
尹辉原创
2023年03月28日 14:22:34250浏览

字符串方法

  • 字符串长度：str.length，返回字符串长度值

    1. let str = 'php中文网';
    2. console.log(str.length);    /* 6 */

  • 字符串长度：str.length，返回字符串长度值

    1. let str = 'php中文网';
    2. console.log(str[3]);    /* 中 */

  • 查找某个字符的位置：str.search()，返回被查找字符的位置索引

    1. let str = 'php中文网';
    2. console.log(str.search('文'));    /* 4 */

  • 替换：str.replace()，两个参数，第一个是字符串中存在的字符，第二个参数是新的字符，返回替换后的整个字符串

    1. let str = 'php中文网';
    2. console.log(str.replace('中文网', '.cn'));    /* php.cn */

  • 获取子字符串（一部分）：str.slice()，两个参数，第一个是开始位置，第二个是结束位置加1，返回获取的子字符串

    1. let str = 'php中文网';
    2. console.log(str.slice(0,3));    /* php */

  • 获取字符串（一部分）：str.substr()，两个参数，第一个是开始位置，第二个是字符数量，返回获取的子字符串

    1. let str = 'php中文网';
    2. console.log(str.substr(3,3));    /* 中文网 */

  • 字符串转换为数组：str.split()，返回数组

    1. let str = 'php中文网';
    2. console.log(str.split(''));    /* ['p', 'h', 'p', '中', '文', '网'] */

  • 全部转为大写：toUpperCase()，返回大写的字符串

    1. let str = 'php中文网';
    2. console.log(str.toUpperCase());    /* PHP中文网 */

  • 全部转为小写：toLowerCase()， 返回小写的字符串

    1. let str = 'php中文网';
    2. console.log(str.toLowerCase());    /* php中文网 */
    4. // 应用：格式化用户输入的内容
    5. let url = 'Php.cN';    // 用户输入的内容不规范
    6. switch (url){
    7.     case 'pnp.cn':
    8.         console.log('php中文网');
    9.         break;
    10.     case 'PHP.CN':
    11.         console.log('php中文网');
    12.         break;
    13.     // ...... 需要列举出各种情况
    14.     default:
    15.         console.error('输入错误！')
    16. }
    17. // 可以将用户输入的内容格式化，全部转为小写
    18. url = url.toLowerCase();    // 全部转为小写
    19. switch (url){
    20.     // 此时只需判断一次
    21.     case 'php.cn':
    22.         console.log('php中文网');
    23.         break;
    24.     default:
    25.         console.error('输入错误！')
    26. }

    数组方法

  • push() ，在数组尾部添加元素（参数可以是1个，也可以是多个），返回新数组的长度

    1. let arr = [];
    2. console.log(arr.push(200));    /* 1 */
    3. console.log(arr);/* [200] */

  • pop() ，在数组尾部删除最后一个元素（无需参数），返回被删除的元素

    1. let arr = ['a','b','c'];
    2. console.log(arr.pop());    /* c */
    3. console.log(arr);    /* ['a', 'b'] */

  • unshift()，在数组头部添加元素（参数可以是1个，也可以是多个），返回新数组的长度

    1. let arr = ['a','b','c'];
    2. console.log(arr.unshift('C'));    /* 4 */
    3. console.log(arr);    /* ['C', 'a', 'b', 'c'] */
    4. // 注意参数位置顺序
    5. console.log(arr.unshift('A', 'B'));    /* 6 */
    6. console.log(arr);    /* ['A', 'B', 'C', 'a', 'b', 'c'] */

  • shift()，在数组头部删除第一个元素（无需参数），返回被删除的元素

    1. let arr = ['a','b','c'];
    2. console.log(arr.shift());    /* a */
    3. console.log(arr);    /* ['b', 'c'] */

  • delete arr[]，删除指定位置的元素，仅删除对应元素的值（改为空值），原来的元素保留

    1. let arr = ['a','b','c'];
    2. console.log(delete arr[1]);    /* true */
    3. console.log(arr);    /* ['a', 空, 'c'] */
    5. // 注，可以用 filter() 方法过滤掉空元素
    6. console.log(arr.filter(item => item));    /* ['a', 'c'] */

  • keys()，获取数组元素键（key）的迭代器，通过 for of 来逐个访问

    1. let arr = ['red','green','blue'];
    2. console.log(arr.keys());    /* Array Iterator {} */
    3. for (let key of arr.keys()){
    4.     console.log(key);
    5. }
    6. /* 输出：
    7.  * 0
    8.  * 1
    9.  * 2
    10.  */

  • values()，获取数组元素值（value）的迭代器，通过 for of 来逐个访问

    1. let arr = ['red','green','blue'];
    2. console.log(arr.values());    /* Array Iterator {} */
    3. for (let value of arr.values()){
    4.     console.log(value);
    5. }
    6. /* 输出：
    7.  * red
    8.  * green
    9.  * blue
    10.  */

  • entries()，获取数组元素键值对（[key, value]）的迭代器，通过 for of 来逐个访问

    1. let arr = ['red','green','blue'];
    2. console.log(arr.entries());    /* Array Iterator {} */
    3. for (let item of arr.entries()){
    4.     console.log(item);
    5. }
    6. /* 输出：
    7.  * [0, 'red']
    8.  * [1, 'green']
    9.  * [2, 'blue']
    10.  */

  • slice()，获取子数组，两个参数，第一个是开始位置，第二个是结束位置加1，结束位置可以省略（取到最后一个）

    1. let arr = ['red','green','blue'];
    2. console.log(arr.slice(0, 2));    /* ['red', 'green'] */
    3. console.log(arr.slice(1));    /* ['green', 'blue'] */
    4. // 也可以用逆序下标（负数），最后一个元素是 -1，倒数第二个元素是 -2，...
    5. console.log(arr.slice(-3, -1));    /* ['red', 'green'] */

  • inclues()，判断数组元素是否含有指定的值，返回 true / false

    1. let arr = ['red','green','blue'];
    2. console.log(arr.includes('red'));    /* true  */
    3. console.log(arr.includes('re'));    /* false */

  • splice()，删除、添加、更新数组元素

    1. // 删除，第一个参数起始位置，第二个参数删除数量，返回被删除元素的数组
    2. let arr = [1,2,3,4,5,6,7,8];
    3. console.log(arr.splice(1,3));    /* [2, 3, 4] */
    4. console.log(arr);    /* [1, 5, 6, 7, 8] */
    6. // 添加，第一个参数起始位置，第二个参数删除数量（添加时写 0，删除 0 个），第三个参数起时要添加的新元素
    7. let arr = [1,2,3];
    8. console.log(arr.splice(1,0,11,12));    /* 返回被删除元素的数组，因为没有删除，所以返回空数组：[] */
    9. console.log(arr);    /* [1, 11, 12, 2, 3] */
    10. // 添加的元素可以是数组
    11. let arr = [1,2,3];
    12. let n = ['a','b','c']
    13. console.log(arr.splice(1,0,n));
    14. console.log(arr);    /* [1, Array(3), 2, 3] */
    15. // 展开添加的数组
    16. let arr = [1,2,3];
    17. console.log(arr.splice(1,0,...n));
    18. console.log(arr);    /* [1, 'a', 'b', 'c', 2, 3] */
    20. // 更新，先删除，然后再删除的位置添加
    21. let arr = [1,2,3,4,5,6,7,8];
    22. console.log(arr.splice(1,2,11,12));    /* [2, 3] */
    23. console.log(arr);;    /* [1, 11, 12, 4, 5, 6, 7, 8] */

  • sort()，升序排序

    1. let arr = [9,15,8,3,23];
    2. // 默认全部视为“字符串”按 ASCII 码排序，此时数字不会正确排序
    3. console.log(arr.sort());    /* [15, 23, 3, 8, 9] */
    4. // 用自定义函数解决数字排序
    5. console.log(
    6.     arr.sort (
    7.         function (a,b){
    8.             return a - b;    // 升序
    9.         }
    10.     )
    11. )    /* [3, 8, 9, 15, 23] */
    12. console.log(
    13.     arr.sort( (a,b) => b - a )    // 降序
    14. )    /* [23, 15, 9, 8, 3] */

  • 回调方法，遍历：forEach()，不会返回执行结果，而是返回 undefined。

    1. // 语法：forEach(function(值, 该值的索引, 正在遍历的当前数组){})
    2. // 只有第一个参数（值）是必选的，后面两个是可选
    3. let sum = 0;
    4. let arr = [1,2,3,4,5];
    5. // arr.forEach(function (elem){return sum += elem});  /* 匿名函数 */
    6. // arr.forEach((elem) => {return sum += elem});  /* 箭头函数 */
    7. arr.forEach(elem => sum += elem);  /* 箭头函数简写 */
    8. console.log(sum);    /* 15 */
    9. console.log(arr.forEach(elem => sum += elem));  /* 返回 undefined */
    11. // 改变原数组
    12. arr.forEach((value,key) => arr[key] = value * 2);
    13. console.log(arr);    /* 返回 [2, 4, 6, 8, 10] */
    14. // 注意：不能使用 arr = arr.forEach((value,key) => arr[key] = value * 2);，因为 forEach() 返回 undefined，赋值后 arr = undefined。

  • 回调方法，遍历：map()，返回新数组。

    1. // 语法：map(function(值, 该值的索引, 正在遍历的当前数组){})
    2. // 只有第一个参数（值）是必选的，后面两个是可选
    3. let numbers = [1, 4, 9];
    4. // const doubles = numbers.map(function (num) { return num * 2});  /* 匿名函数 */
    5. // const doubles = numbers.map((num) => { return num * 2});  /* 箭头函数 */
    6. const doubles = numbers.map(num => num * 2);  /* 箭头函数简写 */
    7. console.log(doubles);    /* [2, 8, 18] */
    9. // 改变原数组
    10. numbers = numbers.map((value,key) => numbers[key] = value * 3);
    11. console.log(numbers);    /* 返回 [3, 12, 27] */

  • 回调方法，断言：every()，所有元素都满足指定条件，返回 true，否则返回 false。类似 “与”。

    1. // 语法：every(function(值, 该值的索引, 正在遍历的当前数组){})
    2. // 只有第一个参数（值）是必选的，后面两个是可选
    3. let numbers = [1,2,3,4,5];
    4. console.log(numbers.every( value => value > 0 ));    /* true */
    5. console.log(numbers.every( value => value > 3 ));    /* false */

  • 回调方法，断言：some()，所有元素中只要一部分满足指定条件，就返回 true，全不满足条件返回 false。类似 “或”。

    1. // 语法：some(function(值, 该值的索引, 正在遍历的当前数组){})
    2. // 只有第一个参数（值）是必选的，后面两个是可选
    3. let numbers = [1,2,3,4,5];
    4. console.log(numbers.some( value => value > 3 ));    /* true */
    5. console.log(numbers.some( value => value > 5 ));    /* false */

  • 回调方法，过滤：filter()，返回满足指定条件的元素组成的新数组

    1. let numbers = [1,2,3,4,5];
    2. let subNumbers = numbers.filter( value => value > 3 );
    3. console.log(subNumbers);    /* [4, 5] */
    4. // 获取满足条件的第一个元素，等同于 find()
    5. let firstNumber = numbers.filter( value => value > 3 )[0];
    6. console.log(firstNumber);    /* 4 */

  • 回调方法，过滤：find()，返回满足指定条件的第一个元素

    1. let numbers = [1,2,3,4,5];
    2. let firstNumber = numbers.find( value => value > 3 );
    3. console.log(firstNumber);    /* 4 */

  • 回调方法，过滤：findlast()，返回满足指定条件的最后一个元素

    1. let numbers = [1,2,3,4,5];
    2. let lastNumber = numbers.findLast( value => value > 3 );
    3. console.log(lastNumber);    /* 5 */

  • 回调方法，累加：reduce()

    1. let numbers = [1,2,3,4,5];
    2. let sum = numbers.reduce((acc, cur) => acc + cur);
    3. console.log(sum);    /* 5 */

数组方法应用：列队与循环列队

  1.   // 顺序列队
  2.   let numList = [1,2,3,4,5,6];
  3.   function queue(newMember) {
  4.       numList.shift();
  5.       numList.push(newMember);
  6.   }
  7.   console.log(numList);    /* [1, 2, 3, 4, 5, 6] */
  8.   queue(7);
  9.   console.log(numList);    /* [2, 3, 4, 5, 6, 7] */
  10.   queue(8);
  11.   console.log(numList);    /* [3, 4, 5, 6, 7, 8] */
  13.   // 循环列队
  14.   let letterList = ['a','b','c','d','e','f',];
  15.   function circleQueue(){
  16.       let lastLetter = letterList.slice(letterList.length - 1, letterList.length);
  17.       letterList.unshift(lastLetter[0]);
  18.       letterList.pop();
  19.   }
  20.   console.log(letterList);    /* ['a', 'b', 'c', 'd', 'e', 'f'] */
  21.   circleQueue();
  22.   console.log(letterList);    /* ['f', 'a', 'b', 'c', 'd', 'e'] */
  23.   circleQueue();
  24.   console.log(letterList);    /* ['e', 'f', 'a', 'b', 'c', 'd'] */

类：class，其本质还是构造函数

  1. 声明

    1. class User{
    2.  // 创建属性： 构造器 construction(){}，使用 new 创建实体时自动调用
    3.  // 属性之间不能由逗号（,）
    4.  constructor(uname, email) {
    5.      this.uname = uname;
    6.      this.email = email;
    7.  }
    9.  // 创建方法（原型方法，自动定义在原型上，会被实体对象继承）
    10.  // 在 ES6 中不允许使用完整语法，必须简化
    11.  show(){return `${this.uname} : [${this.email}]`};
    13.  // 创建静态成员：static，也是自动定义在原型上，但会被实体成员继承
    14.  // 访问静态成员需要使用类名（构造函数名）来访问，不能用实体对象名来访问
    15.  static nation = '中国';
    16. }
    17. // 创建实体对象
    18. const user = new User('admin', 'admin@qq.com');
    19. console.log(user);    /* User {uname: 'admin', email: 'admin@qq.com'} */
    20. console.log(user.uname);    /* admin */
    21. console.log(user.show());    /* admin : [admin@qq.com] */
    22. console.log(User.nation);    /* 中国 */    // 注意：调用的是类的属性

  2. 类的继承：extends （本质是扩展了父类的功能）

    1. class UserChild extends User{
    2.  // 属性
    3.  constructor(uname, email, age) {
    4.      // 父类原有的属性需要重新定义，使用 super()
    5.      super(uname, email);
    6.      /**
    7.       * 相当于：
    8.       * this.uname = uname;
    9.       * this.email = email;
    10.       */
    11.      // 定义子类专有属性（扩展了父类的功能）
    12.      this.age = age;
    13.  }
    15.  // 扩展父类的方法
    16.  show(){return `${this.uname} : [${this.email}], ${this.age}`};
    17.  // ${this.uname} : [${this.email}]，这些是父类的方法，可以简写为 super.show()
    18.  show(){return `${super.show()}, ${this.age}`};
    19. }
    20. let userChild = new UserChild('annie', 'annie@qq.com', 28)
    21. console.log(userChild.age);    /* 28 */
    22. console.log(userChild.show());    /* annie : [annie@qq.com], 28 */

  3. 类也可以使用访问器属性

    1. class User{
    2.  constructor(uname, email, age) {
    3.      this.uname = uname;
    4.      this.email = email;
    5.      this._age = age;
    6.  }
    7.  get age(){
    8.      return this._age;
    9.  }
    10.  set age(age){
    11.      if (age < 18 || age > 60){
    12.          console.log('年龄输入错误！');
    13.          return false;
    14.      }
    15.      this._age = age;
    16.  }
    17. }
    18. let user = new User('annie', 'annie@qq.com', 28);
    19. console.log(user.age);    /* 28 */
    20. user.age = 18;
    21. console.log(user.age);    /* 18 */
上一条：Laravel框架结构目录下一条：元素的查询,遍历和增删改,插入等操作.
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多