1 // 1.扩展运算符 2 // const yougers=['bobo','dalei','damao']; 3 // const olders=['hehe','wo','mimi']; 4 // const members=[...yougers,'mama',...olders]; 5 // // console.log(members); 6 // const currentMembers=[...members]; 7 // currentMembers[0]="yang"; 8 // console.log(currentMembers); 9 // console.log(members); 10 11 2.hover变化的字 12 <style> 13 html,body{ 14 font-size: 50px; 15 color:white; 16 text-shadow: 3px 3px 0 rgba(0,0,0,.2); 17 background: yellow; 18 text-align: center; 19 margin-top: 200px; 20 } 21 .heading span{ 22 cursor: pointer; 23 display: inline-block; 24 transition: transform 0.25s; 25 } 26 .heading span:hover{ 27 transform:translateY(-20px) rotate(10deg) scale(2); 28 } 29 </style> 30 </head> 31 <body> 32 <h2 class="heading">BOBOlove</h2> 33 <script> 34 const heading=document.querySelector('.heading'); 35 heading.innerHTML=wrapWithSpan(heading.textContent); 36 function wrapWithSpan(word) { 37 return [...word].map(letter=>`<span>${letter}</span>`).join(''); 38 } 39 </script> 40 41 3.扩展运算符的应用 42 <body> 43 <ul> 44 <li>bobo</li> 45 <li>lala</li> 46 <li>haha</li> 47 </ul> 48 <script> 49 const todos=[...document.querySelectorAll('li')]; 50 const name=todos.map(todo=>todo.textContent); 51 console.log(name); 52 //["bobo", "lala", "haha"] 53 </script> 54 </body> 55 4.扩展运算符扩展对象的属性 56 const favorites={ 57 color:['yellow','blue'], 58 fruits:['banana','mongo'] 59 } 60 const shoppingList=['milk','sweets',...favorites.fruits]; 61 console.log(shoppingList) 62 //["milk", "sweets", "banana", "mongo"] 63 5.const todos=[ 64 {id:1,name:'go to store',completed:false}, 65 {id:2,name:'go to shopping',completed:true}, 66 {id:3,name:'watch tv',completed:false}, 67 ] 68 const id=2; 69 const todoIndex=todos.findIndex(todo=>todo.id===id); 70 const newTodos=[...todos.slice(0,todoIndex),...todos.slice(todoIndex+1)]; 71 this.setState({todos:newTodos}); 72 </script> 73 6，扩展运算符在函数中的应用 74 <script> 75 const fruit=['apple','bananas','pear']; 76 const newFruit=['orange','mango']; 77 fruit.push(...newFruit); 78 const dateFields=[2017,5,6]; 79 const date=new Date(...dateFields); 80 console.log(fruit); 81 console.log(date); 82 </script> 83 8.<script> 84 // 在对象字面量上的改进:当属性名字与变量名字一样的时候可以省略掉一个 85 // 在对象字面量上的改进:当属性名字与变量名字一样的时候可以省略掉一个 86 const name='bobo'; 87 const age=2; 88 const birthday='2034-23'; 89 const yang={ 90 name, 91 age, 92 birthday, 93 greet:function(){ 94 console.log(`hello ${this.name}`); 95 }, 96 getAge(){ 97 console.log(`${this.age}`); 98 } 99 } 100 yang.greet(); 101 yang.getAge(); 102 </script> 103 9.计算属性 104 <script> 105 const keys=['name','age','birthday']; 106 const values=['lala',3,'2013-02']; 107 const lala={ 108 [keys.shift()]:values.shift(), 109 [keys.shift()]:values.shift(), 110 [keys.shift()]:values.shift(), 111 } 112 console.log(lala); 113 //{name: "lala", age: 3, birthday: "2013-02"} 114 </script> 115 10.