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

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

博主信息

博文 29

粉丝 0

访问量 19617

专题推荐

更多>

字符串方法

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

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

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

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

查找某个字符的位置：str.search()，返回被查找字符的位置索引
```
let str = 'php中文网';
console.log(str.search('文'));    /* 4 */
```
替换：str.replace()，两个参数，第一个是字符串中存在的字符，第二个参数是新的字符，返回替换后的整个字符串
```
let str = 'php中文网';
console.log(str.replace('中文网', '.cn'));    /* php.cn */
```
获取子字符串（一部分）：str.slice()，两个参数，第一个是开始位置，第二个是结束位置加1，返回获取的子字符串
```
let str = 'php中文网';
console.log(str.slice(0,3));    /* php */
```
获取字符串（一部分）：str.substr()，两个参数，第一个是开始位置，第二个是字符数量，返回获取的子字符串
```
let str = 'php中文网';
console.log(str.substr(3,3));    /* 中文网 */
```

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

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

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

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

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

let str = 'php中文网';
console.log(str.toLowerCase());    /* php中文网 */
// 应用：格式化用户输入的内容
let url = 'Php.cN';    // 用户输入的内容不规范
switch (url){
    case 'pnp.cn':
        console.log('php中文网');
        break;
    case 'PHP.CN':
        console.log('php中文网');
        break;
    // ...... 需要列举出各种情况
    default:
        console.error('输入错误！')
}
// 可以将用户输入的内容格式化，全部转为小写
url = url.toLowerCase();    // 全部转为小写
switch (url){
    // 此时只需判断一次
    case 'php.cn':
        console.log('php中文网');
        break;
    default:
        console.error('输入错误！')
}

数组方法

push() ，在数组尾部添加元素（参数可以是1个，也可以是多个），返回新数组的长度
```
let arr = [];
console.log(arr.push(200));    /* 1 */
console.log(arr);/* [200] */
```

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

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

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

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

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

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

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

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

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

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

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

let arr = ['red','green','blue'];
console.log(arr.values());    /* Array Iterator {} */
for (let value of arr.values()){
    console.log(value);
}
/* 输出：
 * red
 * green
 * blue
 */

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

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

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

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

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

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

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

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

sort()，升序排序

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

回调方法，累加：reduce()

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

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

  // 顺序列队
  let numList = [1,2,3,4,5,6];
  function queue(newMember) {
      numList.shift();
      numList.push(newMember);
  }
  console.log(numList);    /* [1, 2, 3, 4, 5, 6] */
  queue(7);
  console.log(numList);    /* [2, 3, 4, 5, 6, 7] */
  queue(8);
  console.log(numList);    /* [3, 4, 5, 6, 7, 8] */
  // 循环列队
  let letterList = ['a','b','c','d','e','f',];
  function circleQueue(){
      let lastLetter = letterList.slice(letterList.length - 1, letterList.length);
      letterList.unshift(lastLetter[0]);
      letterList.pop();
  }
  console.log(letterList);    /* ['a', 'b', 'c', 'd', 'e', 'f'] */
  circleQueue();
  console.log(letterList);    /* ['f', 'a', 'b', 'c', 'd', 'e'] */
  circleQueue();
  console.log(letterList);    /* ['e', 'f', 'a', 'b', 'c', 'd'] */

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

声明

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

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

class UserChild extends User{
 // 属性
 constructor(uname, email, age) {
     // 父类原有的属性需要重新定义，使用 super()
     super(uname, email);
     /**
      * 相当于：
      * this.uname = uname;
      * this.email = email;
      */
     // 定义子类专有属性（扩展了父类的功能）
     this.age = age;
 }
 // 扩展父类的方法
 show(){return `${this.uname} : [${this.email}], ${this.age}`};
 // ${this.uname} : [${this.email}]，这些是父类的方法，可以简写为 super.show()
 show(){return `${super.show()}, ${this.age}`};
}
let userChild = new UserChild('annie', 'annie@qq.com', 28)
console.log(userChild.age);    /* 28 */
console.log(userChild.show());    /* annie : [annie@qq.com], 28 */

类也可以使用访问器属性

class User{
 constructor(uname, email, age) {
     this.uname = uname;
     this.email = email;
     this._age = age;
 }
 get age(){
     return this._age;
 }
 set age(age){
     if (age < 18 || age > 60){
         console.log('年龄输入错误！');
         return false;
     }
     this._age = age;
 }
}
let user = new User('annie', 'annie@qq.com', 28);
console.log(user.age);    /* 28 */
user.age = 18;
console.log(user.age);    /* 18 */

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Chrome 和 VS Code 的安装与常用配置

2023-03-15 16:15:07