微信扫一扫打赏支持

ES6课程---9、三点运算符

ES6课程---9、三点运算符

一、总结

一句话总结:

三点运算符作用有两个,一是做可变参数,替代arguments,二是做扩展运算符
1、rest(可变,剩余)参数
用来取代arguments,但比arguments灵活,只能是最后部分形参参数
function add(...values) {
  let sum = 0;
  for(value of values) {
      sum += value;
  }
  return sum;
}
console.log(add(1,23,4,5,6));

2、扩展运算符
let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);

 

1、三点运算符的实质是什么?

调用iterator接口,来遍历,所以,只要有iterator接口的结构,都能够用...运算符来展开,比如数组、Set等
// console.log(...'www.fanrenyi.com');
// console.log(new Set([1,2,2,3]));
// console.log(...new Set([1,2,2,3]));
// console.log(...{name:'fan',age:11});// Uncaught TypeError: Found non-callable @@iterator

 

 

 

 

二、三点运算符

博客对应课程的视频位置:9、三点运算符
https://www.fanrenyi.com/video/24/206

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>三点运算符</title>
 6 </head>
 7 <body>
 8 <!--
 9 1、rest(可变,剩余)参数
10 用来取代arguments,但比arguments灵活,
11 限制:只能接收最后部分形参参数
12 function add(...values) {
13   let sum = 0;
14   for(value of values) {
15       sum += value;
16   }
17   return sum;
18 }
19 console.log(add(1,23,4,5,6));
20 
21 2、扩展运算符
22 let arr1 = [1,3,5];
23 let arr2 = [2,...arr1,6];
24 arr2.push(...arr1);
25 
26 3、三点运算符的实质
27 调用iterator接口,来遍历
28 所以,只要有iterator接口的结构,都能够用...运算符来展开
29 
30 4、实际应用
31 
32 -->
33 <script>
34     //一、rest(可变)参数
35     // function fun(...values) {
36     //     console.log(arguments);
37     //     // arguments.forEach(function (item, index) {
38     //     //     console.log(item, index);
39     //     // });
40     //     console.log(values);
41     //     values.forEach(function (item) {
42     //         console.log(item);
43     //     })
44     // }
45     // fun(1, 2, 3);
46 
47 
48     //2、只能做最后部分的参数
49     // function add(a,b,...values) {
50     //     console.log(a);
51     //     console.log(b);
52     //     console.log(values);
53     //     let sum = 0;
54     //     for(let value of values) {
55     //         sum += value;
56     //     }
57     //     return sum;
58     // }
59     // console.log(add(1,2,4,5,6));
60 </script>
61 
62 <script>
63     //2、扩展运算符
64     // let arr = [2,3,4,5,6];
65     // let arr1 = ['abc',...arr, 'fg'];
66     // //let arr1 = ['abc',2,3,4,5,6, 'fg'];
67     // console.log(arr1);
68     // arr1.push(...arr);
69     // //arr1.push(2,3,4,5,6);
70     // console.log(arr1);
71 
72     // console.log(...'www.fanrenyi.com');
73     // console.log(new Set([1,2,2,3]));
74     // console.log(...new Set([1,2,2,3]));
75     // console.log(...{name:'fan',age:11});// Uncaught TypeError: Found non-callable @@iterator
76 </script>
77 </body>
78 </html>

 

 

 

 

 
posted @ 2020-04-30 22:09  范仁义  阅读(270)  评论(0编辑  收藏  举报