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

字符串方法

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

let str =青狐资源网;console.log(str.length);/* 6 */

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

let str =青狐资源网;console.log(str[3]);/* 中 */

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

let str =青狐资源网;console.log(str.search(文));/* 4 */

替换：str.replace()，两个参数，第一个是字符串中存在的字符，第搭建系统点我wcqh.cn二个参数是新的字符，返回替换后的整个字符串

let str =青狐资源网;console.log(str.replace(中文网,.cn));/* wcqh.cn */

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

let str =青狐资源网;console.log(str.slice(0,3));/* php */

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

let str =青狐资源网;console.log(str.substr(3,3));/* 中文网 *搭建系统点我wcqh.cn/

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

let str =青狐资源网;console.log(str.split());/* [p, h, p, 中, 文, 网] */

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

let str =青狐资源网;console.log(str.toUpperCase());/* PHP中文网 */

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

let str =青狐资源网;console.log(str.toLowerCase());/* 青狐资源网 */// 应用：格式化用户输入的内容let url =Php.cN;// 用搭建系统点我wcqh.cn户输入的内容不规范switch(url){casepnp.cn: console.log(青狐资源网);break;casePHP.CN: console.log(青狐资源网);break;// …… 需要列举出各种情况default: console.error(输入错误！)}// 可以将用户输入的内容格式化，全部转为小写url = url.toLowerCase();// 全部转为小写switch(url){// 此时只需判断一次casewcqh.cn: console.log(青狐资源网);break;default: console.error(输入错误！)}

数组方法

push() ，在数搭建系统点我wcqh.cn组尾部添加元素（参数可以是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搭建系统点我wcqh.cn));/* 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 =搭建系统点我wcqh.cn[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(搭建系统点我wcqh.cnkey);}/* 输出： * 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];conso搭建系统点我wcqh.cnle.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, b搭建系统点我wcqh.cnlue] */// 也可以用逆序下标（负数），最后一个元素是 -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()，删除、添加、更新数组元素

// 删除，第一个参数起始位置，第二个参数删除数量，返回被删除元素的数搭建系统点我wcqh.cn组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] */// 添加的元素可以是搭建系统点我wcqh.cn数组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] */co搭建系统点我wcqh.cnnsole.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,搭建系统点我wcqh.cn 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 =>su搭建系统点我wcqh.cnm+= 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 搭建系统点我wcqh.cn= 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搭建系统点我wcqh.cn);/* 箭头函数简写 */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搭建系统点我wcqh.cn];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 =>valu搭建系统点我wcqh.cne>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(fir搭建系统点我wcqh.cnstNumber);/* 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()搭建系统点我wcqh.cn

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]搭建系统点我wcqh.cn */ 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()搭建系统点我wcqh.cn; console.log(letterList);/* [f, a, b, c, d, e] */ circleQueue(); console.log(letterList);/* [e, f, a, b, c, d] */

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

声明

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

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

classUserChild extends User{// 属性 constructor(uname, email, age){// 父类原有的属性需要重新定义，使用 super() super(uname, email);/** * 相当于： * this.uname = uname; * this.email = email; */// 定义子类专有属性（扩展了父类搭建系统点我wcqh.cn的功能）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 =newUserChild(annie,annie@qq.com,28)console.log(userChild.age);/* 28 */console.log(userChild.s搭建系统点我wcqh.cnhow());/* annie : [annie@qq.com], 28 */

类也可以使用访问器属性

classUser{ constructor(uname, email, age){this.uname = uname;this.email = email;this._age = age;}get age(){returnthis._age;}set age(age){if(age <18|| age >60){ console.log(年龄输入错误！);returnfalse;}this._age = age;}}let user =newUser(annie,annie@qq.com,28);console.log(use搭建系统点我wcqh.cnr.age);/* 28 */user.age =18;console.log(user.age);/* 18 */