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

Home > List of blog posts > JavaScript 字符串与数组方法、队列与循环队列、类（class）

Blogger Information

Blog 29

fans 0

comment 0

visits 11138

Special Recommendation

More>

Related recommendations

字符串方法

字符串长度：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 */

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

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

2023-03-15 16:15:07