ES6 

  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.

 

posted @ 2018-04-01 16:30  前端极客  阅读(223)  评论(0)  编辑  收藏  举报