访问器属性、字符串和数组方法、实战之循环队

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、访问器属性1.1、传统访问器属性
  1. let staff = {
  2.     data: {
  3.         age: 28,
  4.     }
  5. }
  6. console.log(staff.data.age)
  7. // update属性
  8. staff.data.age = 30
  9. console.log(staff.data.age);

1.2、创建方法接口访问

传统访问器属性，层级过深，可以创建访问接口

  1. staff = {
  2.     data: {
  3.         age: 40,
  4.     },
  6.     // 读写age属性访问接口
  7.     // getter 读取：
  8.     getAge: function() {
  9.         return this.data.age
  10.     },
  12.     // setter 设置
  13.     setAge: function(age) {
  14.         // 错误优先策略
  15.         if (age<18 || age>60) {
  16.             console.error('年龄必须在18-60岁之间')
  17.             return false
  18.         }
  19.         this.data.age = age
  20.     }
  21. }
  22. console.log(staff.getAge())
  23. // 方法获取 -> 属性获取
  24. staff.setAge(30)
  25. console.log(staff.getAge())

1.3、创建属性接口访问
  1. // 访问器属性
  2. staff = {
  3.     data: {
  4.         age: 40
  5.     },
  7.     // getter 读取：
  8.     get age() {
  9.         return staff.data.age
  10.     },
  12.     // setter 设置
  13.     set age(age) {
  14.         if (age<18 || age>60) {
  15.             console.log('年龄必须在18-60岁之间')
  16.             return false
  17.         }
  18.         this.data.age = age
  19.     },
  20. }
  21. console.log(staff.age)
  22. staff.age = 78
  23. console.log(staff.age)

1.4、访问器属性与原有同名属性优先级
  1. const obj = {
  2.     // 普通属性
  3.     uname: '张三',
  5.     // 访问属性：
  6.     get uname() {
  7.         return '李四'
  8.     },
  9. }
  10. // 访问器属性 > 原有同名属性
  11. console.log(obj.uname)

小总结：
  1. /**
  2.  * 一、访问器属性：
  3.  * 1. getter: getAge() => get age()
  4.  * 2. setter: setAge(age) => set age(age)
  5.  *
  6.  * 披着“属性”外衣的“方法
  7.  * 按”属性“来访问，按”方法“来声明
  8.  */
  10. /**
  11.  * 二、优先级
  12.  * 访问器属性 > 原有同名属性
  13.  */
二、字符串常用方法
  1. // ! 字符串常用方法：
  2. /*
  3. 1. `str.length`
  4. 2. `str.search()`
  5. 3. `str.replace()`
  6. 4. `str.slice()`
  7. 5. `str.substr()`
  8. 6. `str.split()`
  9. 7. `str.toLowerCase()`
  10. 8. `str.toUpperCase()`
  11. */
  13. let str = 'hello world';
2.1、str.length
  1. // 1. str.length
  2. // 获取字符串长度
  3. console.log(`length：`+ str.length);

2.2、str.search
  1. // 查找某个字符的索引号，若无则返回-1
  2. console.log(str.search('orld'));
  3. console.log(str.search('aaa'));

2.3、str.replace
  1. // 替换字符
  2. console.log(str.replace('world', 'php'));
  3. console.log(str);

2.4、slice
  1. // 查找字符串并显示：起始索引，结束索引
  2. console.log(str.slice(0, 3));

2.5、substr
  1. // 获取字符串，起始索引，获取多少个
  2. console.log(str.substr(2,3));

2.6、split
  1. // 字符串 -> 数组
  2. console.log(str.split(''));

2.7、tolowerCase/toUpperCase
  1. // 转为小写：
  2. console.log('Hworld'.toLowerCase());
  3. // 转为大写
  4. console.log('Hworld'.toUpperCase());

三、数组的常用方法
  1. /**
  2.     1. `arr.push()/arr.pop()`
  3.     2. `arr.unshift()/arr.shift()`
  4.     3. `arr.keys()/arr.values()/arr.entries()`
  5.     4. `arr.slice()`
  6.     5. `arr.splice()`
  7.     6. `arr.sort()`
  8.     7. `arr.forEach()/arr.map()`
  9.     8. `arr.some()/arr.every()`
  10.     9. `arr.filter()/find()/findLast()/findIndex()`
  11.     10. `arr.reduce()`
  12.  */
  14. let arr = [1, 2, 3, 4, 5];
3.1、push() / pop()：尾部添加删除
  1. // 尾部添加
  2. console.log(arr.push('a')); //当前数组中的元素数量
  3. console.log(arr);
  5. // 尾部删除
  6. console.log(arr.pop()); // 被删除的元素
  7. console.log(arr.pop()); // 被删除的元素
  8. console.log(arr.pop()); // 被删除的元素
  9. console.log(arr);

3.2、unshift() / shift()：头部添加删除
  1. // 头部添加
  2. console.log(arr.unshift('a'));  // 当前数组中的元素数量
  3. console.log(arr);
  4. console.log(arr.unshift('b','C'));  // 当前数组中的元素数量
  5. console.log(arr);
  6. // 头部删除
  7. console.log(arr.shift());   // 删除b
  8. console.log(arr.shift());   // 删除C
  9. console.log(arr);

3.3、keys() / values() / entries()：键值对
  1. let arr1 = ['red', 'green', 'blue'];
  2. console.log(arr1);
  3. // keys()
  4. console.log(arr1.keys());
  5. // 返回一个迭代对象，使用 for-of 遍历
  6. for (let item of arr1.keys()) {
  7.     console.log(item);
  8. }
  10. // values()
  11. console.log(arr1.values());
  12. for (let item of arr1.values()) {
  13.     console.log(item);
  14. }
  16. // entries()：键值对
  17. console.log(arr1.entries());
  18. for (let item of arr1.entries()) {
  19.     console.log(item);
  20. }

3.4、slice()
  1. arr = [2, 4, 5, 6, 9];
  2. // 第一个参数是从字符串开始位置起，第二个参数是字符串位置结束（不含该位置）
  3. console.log(arr.slice(1, 3));

3.5、splice()：数组增删改
  1. // 第一个参数是从字符串开始位置起，第二个参数是字符串位置结束
  2. // 5.1 删除
  3. console.log('------------删除-------------')
  4. console.log(arr);
  5. console.log(arr.splice(1,3));
  6. console.log(arr);
  8. console.log('------------添加-------------')
  9. // 第2个参数为0，表示不删除
  10. // 在第一个参数后面添加
  11. console.log(arr.splice(1,0,'a','b','c'));
  12. console.log(arr);
  15. console.log('------------更新-------------')
  16. // 第一个参数是起始位置，第二个参数是删除多少个
  17. // 先删除 后添加
  18. console.log(arr.splice(1,2,'red','green','blue'));
  19. console.log(arr);

3.6、sort()：排序
  1. arr = [10,2,5,3]
  2. // 将数组默认为”字符串“进行排序
  3. console.log(arr.sort());
  4. // 传入一个自定义排序规则
  5. console.log(
  6.     arr.sort(function(a,b){
  7.         return a-b;
  8.     })
  9. )
  10. // 简化：
  11. console.log(arr.sort((a,b)=>a-b));
  12. // 反向:
  13. console.log(arr.sort((a,b)=>b-a));

数组回调方法：
  1. /**
  2.  * 1. 遍历: forEach / map
  3.  * 2. 断言: every / some
  4.  * 3. 过滤: filter / find /findLast
  5.  * 4. 累加: reduce
  6.  */
  8. let arr2 = [1, 2, 3, 4, 5];
3.7、forEach() / map()
  1. rr2.forEach((item, index,arr2) => console.log(item, index,arr2));
  2. arr2.forEach(item => console.log(item * 2))
  3. // forEach无返回值，map有返回值
  4. let res = arr2.map(item => item * 2)
  5. console.log(res);

3.8、every() / some()
  1. // every：所有成员必须全部满足条件才返回true
  2. // some：与every相反，只要一个满足就返回true
  3. // 返回布尔值
  4. console.log(arr2)
  5. console.log(arr2.every(item => item > 0))
  6. console.log(arr2.every(item => item > 3))
  7. console.log(arr2.some(item => item > 3))
  8. console.log(arr2.some(item => item > 8))

3.9、filter() / find() / findLast()
  1. let arr3 = [1, 2, 3, 4, 5];
  3. // 返回满足条件的元素，组成新数组
  4. res1 = arr3.filter(item => item > 3)
  5. console.log(res1);
  6. // 获取第一个
  7. res1 = arr3.filter(item => item > 3)[0]
  8. console.log(res1);
  10. // find() = arr3.findIndex(item => item > 3)[0]
  11. res1 = arr3.find(item => item > 3)
  12. console.log(res1);
  13. // 获取第一个
  14. res1 = arr3.findIndex(item => item > 3)
  15. console.log(res1);
  16. // 获取最后一个
  17. res1 = arr3.findLast(item => item > 3)
  18. console.log(res1);

3.10、reduce()：累加器
  1. // reduce(callback, init)
  2. res2 = arr.reduce(function (prev, cur) {
  3.     return prev + cur;
  4.     // prev = 1, curr = 2 , prev = 1 + 2
  5.     // prev = 3, ...
  6. },20)
  7. console.log(res);

四、实战之循环队列
  1. let arr = [1,2,3,4,5,6,7,8,9];
  2. let arr1 = [];
  3. for (let i = arr1.length; i < arr.length; i ++){
  4.     // 创建一个新数组保存
  5.     let obj = [];
  6.     // 如果 i 长度少于 arr.length
  7.     if( i < arr.length ){
  8.         obj = arr[i]
  9.         // arr1在尾部添加新数据obj
  10.         arr1.push(obj)
  11.     }
  12.     // i 从0开始自增，一直少于，直到等于就开始从头部剔除
  13.     else{
  14.         obj = arr[i]
  15.         arr1.shift(obj)
  16.     }
  17. }
  18. console.log(arr1)

  1. 思路：
  2. 1、首先创建2个数组，一个是源数据数组 arr ，一个是空数组 arr1 ；
  3. 2、嵌套次循环判断：
  4.   2.1 若空数组 arr1 长度少于源数组 arr 长度，自增 arr1 长度
  5.   2.2 循环里创建一个空数组 obj
  6.   2.3 若 arr1 长度少于 arr，就保存此数据在 obj ，然后在 arr1 尾部push obj数据
  7.   2.4 若 arr1 长度等于 arr ，就保存此数据在 obj ，然后在arr1头部shift obj数据
  8. 3、进入下一次循环
大概思路是这样，不知道对不对，希望老师指导一下哈。" class="reference-link">大概思路是这样，不知道对不对，希望老师指导一下哈。【文章原创作者：大丰网站制作公司 http://www.1234xp.com/dafeng.html 提供，感恩】
更多阅读