Blogger Information
Blog 28
fans 0
comment 0
visits 13048
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
class类与extends,super等用法以及字符串,数组常用API实例演示
手机用户1594223549
Original
358 people have browsed it

一.class类与extends,super等的用法

1.输出结果

2.代码部分

  1. // ! class类与extends,super等的用法
  2. let User = class {
  3. // ? 构造函数:声明属性
  4. constructor(uname, email) {
  5. // (1) 属性
  6. this.uname = uname
  7. this.email = email
  8. }
  9. // (2) 方法
  10. say() {
  11. return `${this.uname}: ( ${this.email} )`
  12. }
  13. // (3) 静态成员
  14. static nation = 'china'
  15. }
  16. // ? 类的实例化创建对象
  17. const user = new User('张山', 'mmm@163.com')
  18. console.log(user.say())
  19. console.log(User.nation)
  20. console.log('-----------------------')
  21. // * 继承
  22. // extends
  23. class Child extends User {
  24. constructor(uname, email, sex) {
  25. // super 调用父类成员
  26. super(uname, email)
  27. // 子类扩展的属性
  28. this.sex = sex
  29. }
  30. say() {
  31. // super.say() 父类中的say()
  32. return `${super.say()}, (${this.sex})`
  33. }
  34. }
  35. const child = new Child('玛丽', 'shg@163.com', '女')
  36. console.log(child.say())

二.字符串,数组常用API (至少5个以上)

1.输出结果


2.代码部分

  1. // ! 字符串,数组常用API (至少5个以上)
  2. // * 字符串常用API
  3. let str = '我love中国'
  4. // 1. length 属性
  5. console.log('length =', str.length)
  6. // 2. charAt(), 索引 -> 成员
  7. console.log(str.charAt(4))
  8. // 3. indexOf(): 成员 -> 索引
  9. console.log(str.indexOf('o'))
  10. // 4. replace()替换
  11. console.log(str.replace('love', '爱'))
  12. // 5. substring() ,必须去掉(忽略)结束索引
  13. console.log(str.substr(0,4));
  14. // 6. split: 字符串 -> 数组
  15. console.log(str.split('', 5))
  16. // 7. 大小写 toLowerCase() toUpperCase()
  17. console.log('LOVE'.toLowerCase())
  18. console.log('darren'.toUpperCase())
  19. // ! 字符串,数组常用API (至少5个以上)
  20. // * 字符串常用API
  21. let str = '我love中国'
  22. // 1. length 属性
  23. console.log('length =', str.length)
  24. // 2. charAt(), 索引 -> 成员
  25. console.log(str.charAt(4))
  26. // 3. indexOf(): 成员 -> 索引
  27. console.log(str.indexOf('o'))
  28. // 4. replace()替换
  29. console.log(str.replace('love', '爱'))
  30. // 5. substring() ,必须去掉(忽略)结束索引
  31. console.log(str.substr(0,4));
  32. // 6. split: 字符串 -> 数组
  33. console.log(str.split('', 5))
  34. // 7. 大小写 toLowerCase() toUpperCase()
  35. console.log('LOVE'.toLowerCase())
  36. console.log('darren'.toUpperCase())
  37. console.log('--------------------')
  38. // * 数组常用API
  39. // 包括对象在内, 尽量只用字面量来声明
  40. let arr = [1, 2, 3, 4, 5]
  41. // 1. ...rest 压缩与展开
  42. let arr1 = [...arr]
  43. console.log(arr1)
  44. arr = [...arr, 6, 7]
  45. console.log(arr)
  46. console.log('--------------------')
  47. // 2. Array.of 打包
  48. let items = [1, 2, 3, 4, 5, 6]
  49. console.log(Array.of(...items))
  50. console.log('--------------------')
  51. // 3. Array.from(): 类数组(对象) -> 包装成一个真正的数组
  52. const Arr1 = {
  53. 0: 'cat',
  54. 1: 'dog',
  55. 2: 'pig',
  56. length: 3,
  57. }
  58. // 为什么要转为真数组?
  59. // 因为数组上有非常多的方法可以使用
  60. const data = Array.from(Arr1)
  61. console.log(Array.isArray(data) ? 'Array' : 'No Array');
  62. // 遍历
  63. for (let item of data) {
  64. console.log(item)
  65. }
  66. console.log('--------------------')
  67. // 4. every,some: 断言,true /false
  68. // every(): 全部满足条件才返回 true, 否则 false
  69. console.log(arr.every(item => item >= 0)) // true
  70. // some(): 只要有一个满足条件,就返回 true
  71. console.log(arr.some(item => item >= 3)) // true
  72. console.log('----------------------')
  73. // 5. map: 有返回值
  74. // 给个变量接收
  75. let result = arr.map(function (item, key, arr) {
  76. return item * 2
  77. })
  78. console.log(result)
Correcting teacher:PHPzPHPz

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