访问器属性与字符串,数组常用方法

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
Js 基本语法 - 5访问器属性
  1.  语法糖
  2.  1. getter: getAge() => get age()
  3.  2. setter: setAge(value) => set age(value)
  5. 按照“属性来访问”，按照“方法”来声明
  6. 做判断的话提示错误优先策略
  8. let user = {
  9.     data: {
  10.     firstName: "John",
  11.     names: "墨仔",
  12.     },
  13.     //读取
  14.     get us() {
  15.     return this.data.names + " " + this.data.firstName;
  16.     },
  18.     //设置
  19.     set us1(name) {
  20.     this.firstName = name;
  21.     },
  22.     };
  23.     //   console.log(user.us);
  25.     user.data.firstName = "Liang";
  27.     //输出读取的方法
  28.     console.log(user.us); ////墨仔 Liang
常用字符串方法
  1. let str = "钩针王国";
  2.     // 1. 长度: length
  3.     console.log(str.length)
  4.     console.log("=========================");
  5.     // 2. search: 字符-> 引索 
  6.     console.log(str.search('王'))
  7.     console.log("=========================");
  8.     // 3. replace: 替换 旧值 => 新值
  9.     console.log(str.replace('王','小'))
  10.     console.log("=========================");
  11.     // 4. slice: 子串, 起始索引,结束索引(忽略结束引索的值)
  12.     console.log(str.slice(0,2))
  13.     console.log("=========================");
  14.     // 5. substr: 子串 起始索引,获取的数量  (不用知道到哪结束)
  15.     console.log(str.substr(2,2))
  16.     console.log("=========================");
  17.     // 6. split: string -> array 字符串变数组
  18.     console.log(str.split(' '))
  19.     console.log("=========================");
  20.     // 7. toLowerCase()小写 / toUpperCase()大写
  21.     str = 'Crochet Charts'
  22.     console.log(str.toLowerCase())
  23.     console.log(str.toUpperCase())
数组常用的方法-1
  1. // 1. 在尾部追加与删除 push() 追加 pop() 删除
  2. let arr = ['1','2','3','4','5']
  3. console.log(arr.push('6'))
  4. console.log(arr)
  5. console.log(arr.pop())
  6. console.log("=========================");
  8. // 2. 头部添加与删除  unshift()添加 shift()删除
  9. console.log(arr.unshift('0'))
  10. console.log(arr)
  11. console.log(arr.shift())
  12. console.log(arr)
  13. console.log("=========================");
  15. // 尾进头出 push + shift
  16. arr = []
  17. arr.push(1,2,3)
  18. console.log(arr.shift())
  20. //删除任意位置
  21. arr = ['1','2','3','4','5']
  22. console.log(delete arr[2])
  23. //删除后位置还在但是只是一个占位符空白
  24. console.log(arr); //['1', '2', 空白, '4', '5']
  26. //使用filter过滤掉占位符
  27. let c1 = arr.filter(item => item) 
  28. console.log(c1) // ['1', '2', '4', '5']
作业循环队列
  1. arr = [];
  2.     for(let i = 0; i < 5; i++){
  3.     arr.push(i);
  4.     console.log(arr)
  5.     let c = arr.pop()
  6.     arr.unshift(c)
  7.     }
  8.     console.log(arr) //[4, 3, 2, 1, 0]
作业2
  1. //作业2
  2. //at()接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。
  3. arr = ['1','2','3','4','5']
  4. console.log(arr.at(2)) //3
  5. console.log(arr.at(-2)) //4
  6. //toString() 返回一个字符串，表示指定的字符串
  7. console.log(arr.toString()) 
  8. //trim() 从字符串的两端清除空格，返回一个新的字符串
  9. const greeting = '   Hello world!   ';
  10. console.log(greeting.trim())
数组常用的方法-2
  1. // 1. 键，值，键值对
  2. arr = [1,2,3,4]
  3. //输出 
  4. // 0键: 1值
  5. // 1: 2 键值对
  7. // arr.keys() 键
  8. // console.log(arr.keys())
  9. for(let item of arr.keys()){
  10. console.log(item)
  11. }
  12. console.log("=========================");
  13. // arr.values() 值
  14. // console.log(arr.values())
  15. for(let item of arr.values()){
  16. console.log(item)
  17. }
  18. console.log("=========================");
  19. // arr.entries() 键值对
  20. // console.log(arr.entries())
  21. for(let item of arr.entries()){
  22. console.log(item)
  23. }
  24. console.log("=========================");
  26. // 2. 获取子元素
  27. // arr.slice()
  28. // 返回: 包含起始索引值，但不包括结束索引的值组成的新数组
  29. console.log(arr.slice(1,3)) //[2,3]
  31. // 3. 数组的增删改
  33. // 返回被删除的元素，原数组被改变
  34. // 有三个参数 
  35. // 3.1 删除元素
  36. // 1: 起始位置
  37. // 2: 删除数量
  38. // 3: 附加元素,可选
  39. console.log(arr.splice(1,1))
  40. console.log(arr)
  41. // 3.2 添加操作
  42. // 第2个参数为0：表示不删除
  43. console.log(arr.splice(1,0,'a','b','c'))
  44. console.log(arr) //[1, 'a', 'b', 'c', 3, 4]
  46. // 3.3 更新操作
  47. // 1. 删除 2. 添加
  48. // 先删除1个，在原位置上再添加2个新元素，实现更新
  49. console.log(arr.splice(1,1,'new1','new2','new3'))
  50. console.log(arr) //[1, 'new1', 'new2', 'new3', 'b', 'c', 3, 4]
  52. // 4. 排序 sort 可传入自定义函数
  53. arr = [5,10,6,58,4];
  54. // 小到大
  55. console.log(arr.sort((a,b) =>a-b))
  56. //大到小
  57. console.log(arr.sort((a,b) =>b-a))
数组常用的方法-3
  1. // 数组回调
  2. // 1. 遍历 forEach / map
  3. // forEach 无返回值 map 有返回值
  4. arr.forEach((item)=>console.log(item*2))
  5. let res = arr.map(item => item*2)
  6. console.log(res)
  8. // 2. every :所有成员要满足条件才返回true
  9. // some: 只要有一个满足就返回true
  10. console.log(arr.every(item => item > 0))
  11. console.log(arr.some(item => item > 10))
  13. // 3. filter / find
  14. // 返回满足条件的元素组成的新数组
  15. // 获取第一个满足条
  16. res = arr.find(item => item >= 0)
  17. console.log(arr)
  18. console.log(res)
  19. // 获取最后个满足条
  20. res = arr.findLast(item => item>=0)
  21. console.log(res)
  22. // 获取第一个满足条件的索引
  23. res = arr.findIndex(item => item>=0)
  24. console.log(res)
  25. // 获取最后一个满足条的索引
  26. // 先拿到最后一个元素的值，再根据这个值来获取对应的索引
  27. let value = arr.findLast(item => item >= 0)
  28. res = arr.lastIndexOf(value)
  29. console.log(res)
  31. // 4. 累加器 reduce(callback,init)
  32. // 语法: reduce(function(前一个值,当前一个值){
  33. // ...
  34. // 最终的累加结果 ,由前一个值返回
  35. //})
  37. res = arr.reduce(function(prev,curr){
  38. return prev + curr
  39. },20)
  40. console.log(res)
总结1. 访问器属性
  1. getter
  2. setter
2. 字符串常用方法
  1. str.length
  2. str.search()
  3. str.replace()
  4. str.slice()
  5. str.substr()
  6. str.split()
  7. str.toLowerCase()
  8. str.toUpperCase()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

3. 数组的常用方法
  1. arr.push()/arr.pop()
  2. arr.unshift()/arr.shift()
  3. arr.keys()/arr.values()/arr.entries()
  4. arr.slice()
  5. arr.splice()
  6. arr.sort()
  7. arr.forEach()/arr.map()
  8. arr.some()/arr.every()
  9. arr.filter()/find()/findLast()/findIndex()
  10. arr.reduce()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

【文章出处:滨海网页开发 http://www.1234xp.com/binhai.html 欢迎留下您的宝贵建议】
更多阅读