Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS基本语法5：JS访问器属性/字符串和数组方法/循环队列
Blogger Information
Blog 27
fans 0
comment 0
visits 19032
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS基本语法5：JS访问器属性/字符串和数组方法/循环队列
茂林
Original
618 people have browsed it

JS访问器属性/字符串和数组方法/循环队列

JS访问器属性

1.这个属性不包含数据值，包含的是一对get和set方法，在读写访问器属性时，就是通过这两个方法来进行操作处理的。

  1. 传统访问属性
  2.   let staff = {
  3.         data: {
  4.           age: 30,
  5.         },
  6.        //获取age访问接口
  7.         getAge: function () {
  8.           return this.data.age;
  9.         },
  10.         //设置age接口
  11.         setAge: function (age) {
  12.         if(age<18||age>=60){    // 错误优先策略
  13.         console.log("年龄不符要求！");
  14.         return false;
  15.         }else{
  16.         this.data.age = age;
  17.         }
  18.         },
  19.       };
  20.       console.log(staff.data.age);  // 30
  21.       //更新age
  22.       staff.setAge(20);
  23.       console.log(staff.data.age);//20
  24. ------------
  25. 访问器属性
  26. let staff = {
  27.   data: { age: 40 },
  28.   get age() {
  29.     return this.data.age;
  30.   },
  31.   set age(age) {
  32.   // 错误优先策略
  33.     if (age <= 18 || age >= 60) {
  34.       console.log("年龄必须在18-60之间");
  35.       return false;
  36.     }
  37.     this.data.age = age;
  38.   },
  39. };
  40. console.log(staff.age);
  41. staff.age = 76;
  42. console.log(staff.age);

访问器属性

  1. getter: getAge() => get age()
  2. setter: setAge(value) => set age(value)

披着”属性”外衣的”方法”，
按”属性”来访问, 按”方法”来声明
说一套,做一套,表里不一

如果对象中存在与”访问器属性”同名的”属性”,访问器属性 > 原有同名属性

字符串和数组常用方法

字符串

字符串常用方法介绍地址

  1. let str = "我在php中文网学编程";
  2. console.log(str.length);  //11
  3. //字符串是由一个个字符组成的字符数组
  4.  console.log(str[0], str[1], str[2], str[3], str[4]);//我 在 p h p
  6. //1.length,查询字符串的长度
  7. console.log(str.length);  //11
  9. //2.查找字符串中的单个字符索引,str.search('string')
  10. // string:单个字符(单个字符) => 索引;
  11.  console.log(str.search("中文"));
  13. //3.replace
  14. //str.replace('被替换的字符','替换字符')
  15.  console.log(str.replace("中文网", ".cn"));
  17. //4.slice: 子串,起始索引,结束索引(忽略结束索引的值)
  18. //只有一个参数
  19.  console.log(str.slice(4)); //p中文网学编程,
  20.  console.log(str.slice(0, 4)); //我在ph
  22. //5.substr: 子串,起始索引和获取的数量,不用知道到哪结束
  23. //2个参数时，第1个：开始截取的索引,第2个：截取字符串的长度
  24. //当1个参数时，表示从这个索引一直截取到最后一个字符
  25. console.log(str.substr(3, 3));// hp中
  26. console.log(str.substr(7));//网学编程
  28. //6.split:将一个字符串转成一个数组  string --> array
  30.  str = "php编程";
  31.  console.log(str.split(""));
  32. //[ 'p', 'h', 'p', '编', '程' ]
  33. str = "p-h-p-编-程";
  34.  console.log(str.split(""));
  35. /* [
  36.     'p',  '-', 'h',
  37.     '-',  'p', '-',
  38.     '编', '-', '程'
  39.   ] */
  41. console.log(str.split("-"));
  42. //[ 'p', 'h', 'p', '编', '程' ]
  44. //7.toLowerCase():将字符串转成小写字母
  45. //toUpperCase()：将字符串转成大写字母
  47. str = "Php.cN";
  48. console.log(str.toLowerCase()); //php.cn
  49. console.log(str.toUpperCase()); //PHP.CN
  51. // 将字符串转为统一格式
  52. let url = "php.cn";
  53. switch (url.toUpperCase) {
  54.   case "php.cn":
  55.     console.log("php中文网");
  56.     break;
  57.   default:
  58.     console.log("输入错误");
  59. }

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()：累加数组元素

数组回调方法

  1.    * 1. 遍历: forEach / map
  2.    * 2. 断言: every / some
  3.    * 3. 过滤: filter / find /findLast
  4.    * 4. 累加: reduce

1. arr.push()/arr.pop()：尾部增加与删除元素
arr.push() 方法：将一个或多个元素添加到数组的末尾，并返回该数组的新长度
参数:被添加到数组末尾的元素。
arr.pop()方法：从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
参数：没有参数

  1. const arr = ["a", "b", "c"];
  2. console.log(arr.push("a1")); //4   a1添加到数组尾部
  3. const arr1 = ["a1", "a2", "a3"];
  4. console.log(arr.push(...arr1)); // ...arr1解构添加到arr尾部,返回值 7
  5. console.log(arr); //['a',  'b',  'c','a1', 'a1', 'a2', 'a3' ]
  7. console.log(arr.pop()); // a3
  8. console.log(arr.pop()); //a2
  9. console.log(arr.pop()); //a1
  10. console.log(arr.pop()); //a1
  11. console.log(arr.pop()); //c
  12. console.log(arr); //  [ 'a', 'b' ]

2. arr.unshift()/arr.shift()：头部添加与删除元素
unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度

  1. const arr = ["a", "b", "c"];
  2. console.log(arr.unshift("c1")); //4
  3. const arr1 = ["a1", "a2"];
  4. console.log(arr.unshift(...arr1)); //6,将arr1 解构添加到arr头部
  6. console.log(arr.shift()); //a1 ,删除a1,并返回删除的值
  7. console.log(arr.shift()); //a2 ,删除a2,并返回删除的值
  8. console.log(arr.shift()); //c1 ,删除c1,并返回删除的值
  9. console.log(arr.shift()); //a ,删除a,并返回删除的值
  10. console.log(arr); //[ 'b', 'c' ]

循环队列

出队的元素,再重新回到队的尾部重新进队,首尾相连
队列: 尾进头出, push + shift

  1. /**
  2.  * 10,20,30,40,50
  3.  * 20,30,40,50,10
  4.  * 30,40,50,10,20
  5.  * 40,50,10,20,30
  6.  * 50,10,20,30,40
  7.  * 10.20.30.40.50
  8.  */
  9. let num = ["10", "20", "30", "40", "50"];
  10. for (let i = 0; i <= 3; i++) {
  11.   for (let j = 0; j <= num.length; j++) {
  12.     let k = num.shift();//获取shift删除返回的元素
  13.     num.push(k);//将获取的元素添加到数组尾部
  14.     console.log(num);
  15.   }
  16. }

3. arr.keys()/arr.values()/arr.entries()：获取数组键(索引)/值/键值对
keys() 方法返回一个包含数组中每个索引键的 Array Iterator 对象
values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值
entries() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键/值对
使用 for…of 循环迭代器查徇返回结果

  1. const arr = ["a", "b", "c", "d", "e"];
  2. let keys=arr.keys()
  3. for(let item of keys){
  4.     console.log(item);
  5. }
  6. /*
  7. 0
  8. 1
  9. 2
  10. 3
  11. 4
  12. */
  14. let values = arr.values();
  15. for (let item of values) {
  16.   console.log(item);
  17. }/*
  18. a
  19. b
  20. c
  21. d
  22. e
  23. */
  25. let ent = arr.entries();
  26. for (let item of ent) {
  27.   console.log(item);
  28. }
  29. /*
  30. [ 0, 'a' ]
  31. [ 1, 'b' ]
  32. [ 2, 'c' ]
  33. [ 3, 'd' ]
  34. [ 4, 'e' ]
  35. */

4. arr.slice()：方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
参数：2个
参数1：begin,起始索引
参数2：end,结束索引，可选，不选即从起始索引到末尾全部元素
返回值
包含begin，不包括end索引的新数组

  1. const arr = [2, 6, 4, 7, 13, 5];
  2. console.log(arr.slice(1, 4));
  3. console.log(arr.slice(3));
  4. /*
  5. [ 6, 4, 7 ]
  6. [ 7, 13, 5 ]
  7. */

5. arr.splice()：对数组增删改操作
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。
3个参数
start
指定修改的开始位置（从 0 计数）。

deleteCount 可选
整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。

item1, item2, … 可选
要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值
由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

  1. const arr = [1, 2, 3, 4, 5];
  2. //增加元素
  3. let i = arr.splice(3, 0, "a", "b");
  4. console.log(i); //[] 返回空数组
  5. console.log(arr); //[ 1, 2, 3,'a','b',4,5]
  6. //删除元素
  7. i = arr.splice(2, 3);
  8. console.log(i); //[ 3, 'a', 'b' ] 返回被删除的元素
  9. console.log(arr); //[ 1, 2, 4, 5 ]
  10. //更新数组
  11. //分2步: 1.先删除元素 2.在删除的位置上增加新元素
  12. //把元素2,4更新为7,8
  13. console.log(arr.splice(1, 2)); //[ 2, 4 ]删除元素2,4
  14. console.log(arr.splice(1, 0, 7, 8));//[]返回空数组
  15. console.log(arr);//[ 1, 7, 8, 5 ]

6. arr.sort()：数组排序
对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的
3个参数
compareFn 可选
用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。
a
第一个用于比较的元素。
b
第二个用于比较的元素。

返回值
排序后的数组。请注意，数组已原地排序，并且不进行复制。

  1. let arr = [1, 7, 2, 12, 8, 5];
  2. let arr1 = arr.sort();
  3. console.log(arr1);//[ 1, 12, 2, 5, 7, 8 ],默认按字符串排序
  4. console.log(arr.sort((a, b) => a - b)); //从小到大 [ 1, 2, 5, 7, 8, 12 ]
  5. console.log(arr.sort((a, b) => b - a));//从大到小[ 12, 8, 7, 5, 2, 1 ]

7. arr.forEach()/arr.map()：遍历数组
forEach() 方法对数组的每个元素执行一次给定的函数,无返回值
map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

参数
callbackFn
生成新数组元素的函数，使用三个参数：

currentValue
callbackFn 数组中正在处理的当前元素。

index
callbackFn 数组中正在处理的当前元素的索引。

array
map 方法调用的数组。

thisArg 可选
执行 callbackFn 函数时被用作 this 的值。

返回值
一个新数组，每个元素都是回调函数的返回值

  1.  // 箭头函数
  2. forEach((element) => { /* … */ })
  3. forEach((element, index) => { /* … */ })
  4. forEach((element, index, array) => { /* … */ })
  5. // 回调函数
  6. forEach(callbackFn)
  7. forEach(callbackFn, thisArg)
  9. // 内联回调函数
  10. forEach(function(element) { /* … */ })
  11. forEach(function(element, index) { /* … */ })
  12. forEach(function(element, index, array){ /* … */ })
  13. forEach(function(element, index, array) { /* … */ }, thisArg)
  15.  // 箭头函数
  16. map((element) => { /* … */ })
  17. map((element, index) => { /* … */ })
  18. map((element, index, array) => { /* … */ })
  20. // 回调函数
  21. map(callbackFn)
  22. map(callbackFn, thisArg)
  24. // 内联回调函数
  25. map(function(element) { /* … */ })
  26. map(function(element, index) { /* … */ })
  27. map(function(element, index, array){ /* … */ })
  28. map(function(element, index, array) { /* … */ }, thisArg)
  1. const arr = [1, 7, 2, 12, 8, 5];
  2. arr.forEach(function (values, index) {
  3.   console.log(values * 2, index);
  4. });
  5. /*
  6. 2 0
  7. 14 1
  8. 4 2
  9. 24 3
  10. 16 4
  11. 10 5
  12. */
  13. console.log(arr.map((values) => values * 2));//[ 2, 14, 4, 24, 16, 10 ]

8. arr.some()/arr.every()：断言数组元素
some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试，它返回的是一个 Boolean 类型的值。
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

  1. const arr = [2, 6, 4, 7, 13, 5];
  2. //测试数组中的值是否有 > 15,有 返回 true,没有则 false
  3. console.log(arr.some((value) => value > 15)); //false
  4. //测试数组中的值是否都是 < 15,是 返回 true,否则 false
  5. console.log(arr.every((value) => value < 15)); //true
  6. console.log(arr.every((value) => value < 10)); //false

9. arr.filter()/find()/findLast()/findIndex()：过滤元素
filter() 方法返回满足条件的元素，并组成新数组
find()返回满足条件的第1个元素
findLast()返回满足条件的最后1个元素
findIndex()方法返回数组中满足条件的第1个元素的索引
lastIndexof()方法返回数组中满足条件的最后1个元素的索引(分2步获取)

  1. const arr = [2, 6, 4, 7, 13, 5];
  3. //返回数组中<5的元素
  4. let items = arr.filter((values) => values > 5);
  5. console.log(items);//[ 6, 7, 13 ]
  7. //找出数组中<5条件的第1个元素
  8. let items = arr.filter((values) => values > 5)[0];
  9. console.log(items); // 6
  11. //返回数组中<5条件的第1个元素
  12.  let items = arr.find((values) => values > 5);
  13. console.log(items); // 6
  15. //返回数组中<=5条件的最后1个元素
  16.  let items = arr.findLast((values) => values >= 5);
  17. console.log(items);//5
  18. //返回数组中满足条件的第1个元素的索引
  19. let items = arr.findIndex((values) => values >= 5);
  20. console.log(items);//1
  22. //获取最后一个满足条件的元素对应的索引,需要分2步
  23. //第1步,拿到最后满足条件的元素
  24. //第2步,通过元素获取索引
  26.  let items = arr.findLast((values) => values >= 5);
  27. console.log(items); //5
  28. //返回满足条件最后一个元素在数组中的索引
  29. console.log(arr.lastIndexOf(5)); //5

10. arr.reduce()：累加数组元素
reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，
每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
2个参数
1.回调函数
2.初始值,可选,默认初始值为0

  1. const arr = [2, 6, 4, 7, 13, 5];
  3. let res = arr.reduce((a, b) => a + b, 100);//设定起始值100
  4. console.log(res); //137
  5. let res = arr.reduce((a, b) => a + b);//没有设定默认
  6. console.log(res);  //37

累加数组元素使用案例

  1.     <script>
  2.       let links = ["首页", "公司简介", "视频课程", "开发社区", "文档中心"];
  3.       let res = links.reduce(function (prev, curr) {
  4.         return prev.link("#") + curr.link("#");
  5.       });
  6.       console.log(res);
  7.       res = "<ul>" + res + "</ul>";
  8.       console.log(res);
  9.       document.body.insertAdjacentHTML("afterbegin", res);
  10.     </script>

字符串/数组方法的扩展

数组方法

1.toString():方法返回一个字符串，表示指定的数组及其元素。
返回值
一个表示数组所有元素的字符串。

  1. const array1 = [1, 2, "a", "1a"];
  3. console.log(array1.toString()); //1,2,a,1a

2.copyWithin（）: 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
3个参数
target
0 为基底的索引，复制序列到该位置。
start
0 为基底的索引，开始复制元素的起始位置。
end
0 为基底的索引，开始复制元素的结束位置。

  1. const arr = [1, 2, 3, 4, 5, 6];
  2. console.log(arr);
  3. console.log(arr.copyWithin(0, 2));//[ 3, 4, 5, 6, 5, 6 ]
  4. console.log(arr.copyWithin(1, 2, 6));//[ 3, 5, 6, 5, 6, 6 ]

3.reverse（）:方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

  1. const arr = [1, 2, 3, 4, 5, 6];
  2. console.log(arr.reverse());//[ 6, 5, 4, 3, 2, 1 ]
Correcting teacher：PHPzPHPz

Correction status：Uncorrected

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