1 //1、解构数组 2 let arr1 = ['apple', 'coffee', 'cake']; 3 let [fruit, drink, dessert] = arr1; 4 console.log(fruit, drink, dessert); 5 //2、解构对象 6 let obj = { 7 fruit: 'apple', 8 drink: 'coffee', 9 dessert: 'cake' 10 }; 11 // 此键值对前面是对象中定义的属性，后面是定义的变量 12 let { 13 fruit: fruit1, 14 drink: drink1, 15 dessert: dessert1 16 } = obj; 17 console.log(fruit1, drink1, dessert1); 18 // 3、模版字符串,可以自由的使用换行符 19 let drink = 'coffee', 20 fruit = 'apple', 21 dessert = 'cake'; 22 let breakfast = `今天的早餐是 ${drink} 、 23 ${fruit}和${dessert}`; 24 console.log(breakfast); 25 // 4、带标签的模版字符串 26 let fruit = 'apple', 27 drink = 'coffee', 28 dessert = 'cake'; 29 let breakfast = kitchen`今天的早餐是\n ${fruit}、${drink}和${dessert}!`; 30 // 用于对输入的内容的单独处理，例如在货币前面加上货币符号，或者对很大的数字进行相应的转换 31 function kitchen(strings, ...values) { 32 // stings 是个数组，包含的是摸板字符串中的已知字符串，他还有个 raw 属性包含的是 本身输入的原内容 33 // console.log(strings); 34 // console.log(values); 35 let result = ''; 36 for (let i =0,len = values.length;i<len;i++) { 37 result += strings[i]; 38 result += values[i]; 39 } 40 result += strings[strings.length - 1]; 41 console.log(result); 42 } 43 // 5、判断字符串是否包含其他字符串，返回值均为布尔值 44 // 字符串的新方法：startsWith() 是否是以...为开始 45 // 字符串的新方法：endsWith() 是否是以...为结束 46 // 字符串的新方法：includes() 是否是包含... 47 let fruit = 'apple', 48 drink = 'coofee', 49 dessert = 'cake'; 50 let breakfast = `今天的早餐有${fruit}、${drink}、${dessert}!`; 51 console.log(breakfast.startsWith('今天')); 52 console.log(breakfast.endsWith('cake!')); 53 console.log(breakfast.includes('tea')); 54 // 6、函数的默认参数 Default Parameter Values 55 function breakfast(dessert = 'cake', drink = 'coffee') { 56 return `${dessert} ${drink}`; 57 } 58 console.log(breakfast()); 59 console.log(breakfast('icecream', 'beer')); 60 // 7、展开操作符 spread 61 let foods = ['cake', 'coffee'], 62 fruit = 'apple'; 63 console.log(...foods); 64 console.log(foods.join(' ')); 65 let allFoods = ['apple', ...foods]; 66 console.log(allFoods); 67 // 8、剩余操作符 rest 68 function breakfast(dessert, drink, ...foods) { 69 // 除了dessert和drink之外剩下的传入的参数为被包含到 foods 数组里 70 console.log(dessert, drink, foods); 71 } 72 breakfast('cake', 'coffee', 'tea', 'banana'); 73 // 9、解构参数 74 function breakfast(dessert, drink, {location, name}={}) { 75 console.log(dessert, drink, location, name); 76 } 77 breakfast('cake', 'cooffee', {location:'beijing', name:'cahtrine'}); 78 // 10、函数的名字 function 的 name 属性 79 function breakfast() {} 80 console.log(breakfast.name); 81 let letBreakfast = function (){}; 82 console.log(letBreakfast.name); 83 let newletBreakfast = function superBreakfast(){}; 84 console.log(newletBreakfast.name); 85 // 11、箭头函数 arrow function 86 //如果函数体只有一条return语句，可以简写成如下形式，该函数的返回值是 dessert 87 let breakfast = dessert => dessert; 88 // 等价于 89 var breakfast = function breakfast(dessert) { 90 return dessert; 91 } 92 //如果函数只有一个参数，则参数的括号可以省略；如果没有参数，则需要用空括号 93 let drink = (Parameter1,Parameter2) => { 94 //函数体 95 } 96 // 12、对象表达式 97 let dessert = 'cake',drink = 'coffee'; 98 let foods = { 99 dessert, 100 drink, 101 breakfast() {} 102 } 103 // 13、对象的可计算属性名 104 let food = {}; 105 let drink = 'hot drink'; 106 food[drink] = 'coffee'; 107 console.log(food); 108 // 14、对比两个值是否相等 Object.is(Parameter1,Parameter2) 109 console.log(+0 === -0); 110 console.log(NaN == NaN); 111 console.log(Object.is(+0, -0)); 112 console.log(Object.is(NaN, NaN)); 113 // 15、把对象复制到另一个对象里 Object.assign 114 let breakfast = {}, 115 drink = { 116 drink: 'beer' 117 } 118 Object.assign(breakfast, drink); 119 drink.drink = 'coofee'; 120 console.log(breakfast); 121 console.log(drink); 122 // 16、设置对象的 prototype，Object.setPrototypeOf() 123 let breakfast = { 124 getdrink() { 125 return 'coffee'; 126 } 127 }; 128 let dinner = { 129 getdrink() { 130 return 'tea'; 131 } 132 }; 133 let drink = Object.create(breakfast); 134 console.log(drink); 135 console.log(drink.getdrink()); 136 console.log(Object.getPrototypeOf(drink) === breakfast); 137 Object.setPrototypeOf(drink, dinner); 138 console.log(drink.getdrink()); 139 console.log(Object.getPrototypeOf(drink) === dinner); 140 // 17、可以直接设置对象的 __proto__ 141 let breakfast = { 142 getdrink() { 143 return 'coffee'; 144 } 145 }; 146 let dinner = { 147 getdrink() { 148 return 'tea'; 149 } 150 }; 151 let drink = { 152 __proto__: breakfast 153 }; 154 console.log(drink); 155 console.log(drink.getdrink()); 156 console.log(Object.getPrototypeOf(drink) === breakfast); 157 drink.__proto__ = dinner; 158 console.log(drink); 159 console.log(drink.getdrink()); 160 console.log(Object.getPrototypeOf(drink) === dinner); 161 // 18、super 162 let breakfast = { 163 getdrink() { 164 return 'coffee'; 165 } 166 }; 167 let sunday = { 168 __proto__: breakfast, 169 getdrink() { 170 return super.getdrink() + ' && milk'; 171 } 172 }; 173 console.log(sunday.getdrink()); 174 // 19、手动创建迭代器 iterators 175 // 迭代器特征：1、每次执行都会返回一个对像{value:value,done:true/false} 176 // 迭代器特征：2、next 方法，每次执行它返回 1 中的对象 177 // 在ES6 中 Generators 能够生成上述迭代器 178 function chef(foods) { 179 let i = 0; 180 return { 181 next() { 182 let done = i >= foods.length? true : false; 183 let value = !done? foods[i++] : undefined 184 return { 185 value: value, 186 done: done 187 } 188 } 189 } 190 } 191 let me = chef(['coffee', 'tea']); 192 console.log(me.next()); 193 console.log(me.next()); 194 console.log(me.next()); 195 // 20、生成器 Generators 196 function* chef(foods) { 197 for(let i = 0,len = foods.length;i<len;i++) { 198 yield foods[i]; 199 } 200 } 201 let me = chef(['coffee', 'tea']); 202 console.log(me.next()); 203 console.log(me.next()); 204 console.log(me.next()); 205 // 21、classes 类 206 class chef { 207 constructor(foods) { 208 // 类的初始值设置 209 this.foods = foods; 210 } 211 cook() { 212 console.log(this.foods); 213 } 214 } 215 let me = new chef('egg'); 216 me.cook(); 217 // 22、get 和 set 218 class chef { 219 constructor(foods) { 220 this.foods = foods; 221 this.dish = []; 222 } 223 get menu() { 224 return this.dish; 225 } 226 set menu(food) { 227 this.dish.push(food); 228 } 229 cook() { 230 console.log(this.foods); 231 } 232 } 233 let me = new chef('egg'); 234 me.menu = '七分熟的牛排'; 235 me.menu = '西红柿炒鸡蛋'; 236 console.log(me.menu); 237 // 23、类的静态方法 static，不需要实例化类，能够直接使用的方法 238 class chef { 239 static cook(food) { 240 console.log(food); 241 } 242 } 243 chef.cook('egg'); 244 // 24、继承 extends 245 class Person { 246 constructor(name, birthday) { 247 this.name = name; 248 this.birthday = birthday; 249 } 250 confir() { 251 console.log(`${this.name} ${this.birthday}`); 252 console.log(1); 253 } 254 } 255 class Chef extends Person { 256 constructor(name, birthday) { 257 super(name, birthday); 258 } 259 } 260 let me = new Chef('章三', '2016-01-01'); 261 me.confir(); 262 // 25、Set 元素不可重合,接收一个数组 263 let drinks = new Set(['coffee','tea','bear']); 264 // 添加 add 265 drinks.add('colar'); 266 // Set不能有重复的项 267 drinks.add('coffee'); 268 console.log(drinks); 269 // 删除 delete 270 drinks.delete('coffee'); 271 console.log(drinks); 272 // 查看是否有 has 273 console.log(drinks.has('colar')); 274 // 查看有几项 size 275 console.log(drinks.size); 276 // 循环处理 forEach 277 drinks.forEach(food => { 278 console.log(food); 279 }); 280 // 清空 clear 281 drinks.clear(); 282 console.log(drinks); 283 // 26、Map 对对象的扩展，使对象的key 可以是任何一个值 284 let food = new Map(); 285 let fruit = {}, cook = function(){}, dessert = '甜点'; 286 // 添加 set 287 food.set(fruit, 'apple'); 288 food.set(cook, '西红柿炒鸡蛋'); 289 food.set(dessert, 'cake'); 290 console.log(food); 291 // 查看键对应的值 get 292 console.log(food.get(fruit)); 293 console.log(food.get(function(){})); 294 // 查看有几项 size 295 console.log(food.size); 296 // 删除 delete 297 food.delete(fruit); 298 // 是否有 has 299 console.log(food.has(fruit)); 300 // 循环处理 forEach 301 food.forEach((value, key) => { 302 console.log(`${key} = ${value}`); 303 }) 304 // 27、Object.keys()、Object.values() 获取对象的所有键/值 305 const people= { 306 name: 'zhangsan', 307 sex: 'girl', 308 age: '22' 309 } 310 console.log(Object.keys(people)); 311 console.log(Object.values(people)); 312 // 实现数组去重 313 let arr = [1,2,2,1,4,5,7]; 314 let obj = {}; 315 arr.forEach(v => obj[v]=1); 316 console.log(Object.keys(obj)); 317 // 28、Object.entries() 将键值对换成数组 318 const people= { 319 name: 'zhangsan', 320 sex: 'girl', 321 age: '22' 322 } 323 console.log(Object.entries(people)); 324 // 29、... 扩展运算符 325 // 使用 ... 扩展符合并两个对象 326 const peop1 = {name:'zhangsan', age:22}; 327 const peop2 = {name: 'lisi', sex: 'girl'}; 328 console.log({...peop1, ...peop2, date:'2018-0101'}); 329 // 数组去重 330 let arr = [1,2,2,1,4,5,7]; 331 let newArr = [...new Set(arr)]; 332 console.log(newArr); 333 // 30、ES6 的模块化 334 // -------1.js------------------------- 335 export const name='123'; // 暴露一个模块的内容 336 exprot const fun = ()=>{console.log("hello")}; 337 // -------2.js------------------------- 338 import {name, fun} from './1.js';//引入一个模块 339 31、default 340 // -------1.js------------------------- 341 exprot default const test = ()=>{console.log('world')}; 342 // -------2.js------------------------- 343 import abc form './1.js'; 344 abc(); //执行1.js中的 test方法 345 32、模块化，用别名方式引用 346 // -------1.js------------------------- 347 export const name='123'; // 暴露一个模块的内容 348 exprot const fun = ()=>{console.log("hello")}; 349 exprot default const test = ()=>{console.log('world')}; 350 // -------2.js------------------------- 351 import * as mod1 from './1.js' 352 console.log(mod1); 353 // mod1 是个对象，包含了 1.js 中所有暴露的内容 354 // 33、Array.from 从一个类似数组或者一个可迭代对象中创建一个新的数组实例 355 console.log(Array.from({ 356 0:'zhangsan', 357 1:'lisi', 358 2:'wangwu', 359 length:3 360 })); 361 // 实现数组去重 362 var arr = [1,2,2,1,4,5,7]; 363 let newarrfun = (arr)=>{ 364 return Array.from(new Set(arr)); 365 } 366 console.log(new Set(arr)); 367 console.log(newarrfun(arr)); 368 // // 第二个参数是新数组每一项执行的回调函数--可选 369 let doubleArr = (arr) => { 370 return Array.from(new Set(arr), v => v*2) 371 } 372 console.log(doubleArr(arr)); 373 // 第三个参数是执行回调函数时指定的 this 对象--可选
扫一扫
1177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
