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>