一、解构赋值

解构赋值语法是一个js表达式，这使得可以将值从数组或属性从对象提取到不同的变量中

1、数组的解构赋值

  1. const arr = [1,2,3,4,5]
  2. let [a,b,c,d,e] = arr
  4. //1、更复杂的匹配规则
  5. const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g'] ] ]
  6. const [ , b ] = arr   //b = 'b'
  7. const [ , , g ] = ['e', 'f', 'g']   //g = 'g'
  8. const [ , , g ] = ['c', 'd', ['e', 'f', 'g'] ]   //g = ['e', 'f', 'g']
  9. const [ , , [ , , [ , , g ] ] ] = arr  //g = 'g'
  11. //2、扩展运算符 ...
  12. const arr1 = [1, 2, 3]
  13. const arr2 = ['a', 'b']
  14. const arr3 = ['zz', 1]
  15. const arr4 = [...arr1, ...arr2, ...arr3]  //arr4 = [7]> [    1, 2, 3, 'a', 'b', 'zz', 1]
  16. const arr = [1, 2, 3, 4, 5, 6]
  17. const [a, b, ...c] = arr  //c = [    1, 2, 3, 'a', 'b', 'zz', 1]
  19. //3、默认值 
  20. const arr = [1, undefined, null];
  21. const [a, b, c, ,d] = arr //a = 1, b = undefined, c = null, d = undefined 
  22. const [a, b = 123, c = 3, d] = arr //a = 1, b = 2, c = null, d = undefined 
  23. PS：只有当undefined才会取默认值，null是不行的
  25. //4、交换变量
  26. [a, b] = [b , a] 
  28. //5、接收多个 函数返回值
  29. function getUserInfo(id){
  30.   //  ...get请求
  31.   return [
  32.       true,
  33.     {
  34.         name: '小明',
  35.       gender: '女',
  36.       id: id
  37.     },
  38.     '请求成功'
  39.   ]
  40. }
  41. const [status, data, msg] = getUserInfo(123)
  42. //output=> status = true, data = { name: '小明', gender: '女', id: id }, msg = '请求成功'

2、对象的解构赋值

  1. //等号左右两边都为对象结构 - const{ a, b } = {a:1, b:2 } 左边的{}中为需要赋值的变量，右边为需要解构的对象；
  3. //1、对象结构赋值的用法
  4. const obj = {
  5.   saber: '阿尔',
  6.   archer: '卫宫',
  7. };
  9. const { saber, archer} = obj //output: saber="阿尔"，archer="卫宫" 注意：属性名称要一致，否则拿不到值；
  11. //2、稍微复杂的解构条件
  12. const player = {
  13.     nickname: '感情的戏',
  14.   skill: [{
  15.       skillName: '龙吟',
  16.     mp: '100',
  17.     time: 3000,
  18.   },{
  19.       skillName: '龙腾',
  20.     mp: '400',
  21.     time: 20000,
  22.   }]
  23. };
  25. const { nickname } = player //output: nickname="感情的戏"
  26. const { skill } = player //output: skill=[{skillName: '龙吟',mp: '100',time: 3000,},{skillName: '龙腾',mp: '400',time: 20000,}]
  27. const {skill: [ skill1, { skillName } ] } = player; //output: skillName="龙吟"
  29. //3、扩展运算符
  30. const obj = {
  31.     saber: '阿尔',
  32.   archer: '卫宫',
  33.   lancher： '呼呼呼',
  34. };
  36. const { saber, ...oth } = obj //output:saber="阿尔", oth="{archer:"卫宫"},{lancher:"呼呼呼"}"
  38. //4、如何对已经申明的变量进行对象的解构赋值
  39. let age;
  40. const obj = {
  41.     name: '阿尔',
  42.   age: 22,
  43. };
  44. ({ age } = obj ); //output:age = 22
  46. //5、默认值
  47. const obj = {
  48.     name: 'name',
  49.   age: undefined,
  50. };
  52. const { name, age = 24, hobby = ['学习'] } = obj //output: age = 24
  54. //6、提取对象
  55. const { name, hobby:[hobby1], hobby } = {
  56.     name: '小红',
  57.   hobby: ['学习'],
  58. }; //output: name = "小红", hobby1="学习"， hobby=["学习"]
  60. //7、使用对象传入乱序的函数参数
  61. function AJAX({
  62.       url,
  63.     data,
  64.     type='get'}) {
  65.     console.log(type);
  66. };
  67. AJAX({
  68.     url: '/getinfo',
  69.   data: {
  70.       a: 1,
  71.     b: 2,
  72.   }
  73. });
  75. //8、获取多个 函数返回值
  76. function getUserInfo(){
  77.     //...ajax
  78.   return {
  79.       status: true,
  80.     data: {
  81.         name: '小明',
  82.       gender: '女',
  83.       id: id
  84.     },
  85.     msg: '请求成功'
  86.   };
  87. };
  89. const { status, data, msg: message } = getUserInfo(123);
  91. //9、动态插入属性名和属性值：
  92. for (var i = 1; i < 3; i++) {
  93.         var app['app' + i] = {
  94.             text: window.appInfo[i].appName,
  95.             imageUrl: '/src/assets/images/chihoi/workbench/test.png',
  96.             ...createAction('custom:App', '已选APP', 'app', window.appInfo[i].appName, window.appInfo[i].id),
  97.         };
  98.     }
  99. console.log(app)
  100. //output: 见下图

image.png

3、字符串的解构赋值

  1. //1、解构赋值
  2. const str = 'I am fy';
  3. const [ a, b, c, ...oth ] = str; // a="I",b=" ",c="a",oth=['m',' ','f','y']
  5. const [ ...spStr1 ] = str
  6. const spStr2 = str.split('');
  7. const spStr3 = [ ...str ];  //output: spStr1=spStr2=spStr3=[7>]['....']
  9. //2、提取属性
  10. const { length, split } = str

二、ES6扩展

1、字符串扩展

（1）模板字符串

  1. 符号：``
  2. const xiaoming = {
  3.     name: 小明',
  4.   age : 13,
  5.   say1: function(){
  6.     console.log('我叫' + this.name + ', 今年' + this.age + '岁');
  7.    }
  8.     say2 function(){
  9.     console.log(`我叫 ${this.name}, 我今年 ${this.age}岁`);
  10.      }
  11. }
  12. xiaoming.sya1();
  13. xiaoming.say2(); //我叫小明，我今年13岁

（2）部分新的方法

  1. // 1.padStart--从头部补充字符串   padEnd--从尾部补充字符串
  2. let str = 'i';
  3. let str1 = str.padStart(6, 'mooc');
  4. console.log(str1); // str1 = moocmi
  6. let str2 = str.padEnd(5, 'mooc');
  7. console.log(str2); // str2 = imooc
  9. // 2.repeat--相当于复制粘贴(不能写负数，小数的话回自动取整)
  10. console.log('i', repeat(10) ); // iiiiiiiiii
  12. function repeat(str, num){
  13.     return new Array(num + 1).join(str);
  14. }
  15. console.log(repeat('s', 5) ); // sssss
  17. // 3.startsWith--判断字符串以什么开头  endsWith--判断字符串以什么结尾（输出为布尔值）
  18. const str = 'A process'
  19. console.log(str.startsWith('B')); //false
  20. console.log(str.endsWith('cess')); //true
  22. // 4.includes
  23. const str = 'A process'
  24. if(str.indexOf('process') !== -1){
  25.     console.log(" 存在 "); //存在
  26. }
  27. if(str.includes('process')){
  28.     console.log(" 存在 "); //存在
  29. }

（3）新的Unicode表示法和遍历方式

  1. // 1. 转成数组遍历循环字符串
  2. let str = 'PROMISE';
  3. var oStr = Array.prototype.slice.call(str);
  4. console.log(oStr);  //[7>]['P','R','O','M','I','S','E']
  6. // 2.扩展运算符实现
  7. var oStr = [...str]; //[7>]['P','R','O','M','I','S','E']
  9. //需求:有时候需要对字符串加密解密
  10. var oStr = 'BD';
  11. const map = {A: '100', B: '99', C: '98', D: '97', E: '96'};
  12. const words = 'ABCDE';
  13. oStr.forEach(function(word, index){
  14.     if(words.includes(word))
  15.     oStr[index] = map[word];
  16. });
  17. console.log(oStr.join(''));  // join方法是用来连接字符串，output:9997
  19. // 3.for-of遍历字符串实现对字符串加密解密
  20. let newStr = '';
  21. for(let word of oStr){
  22.   if(words.includes(word))
  23.     newStr += map[word];
  24. }
  25. console.log(newStr); // output:9997
  27. // Unicode是一项标准 包括字符集、编码方案等，为了解决传统的字符编码方案的局限二产生的，为每个语言
  28. 中的每个字符设定了统一并且唯一的二进制编码。
  29. '\u{1f436}' //ES6 提供 \u{} 来支持Unicode编码  output："🐶"
  31. // codePointAt() 获取字符串中对应字符的一个码点；
  32. "🐶".codePointAt(0);

三、扩展

1、正则扩展

  1. const regexp1 = /^a/g; //g代表全局意思，全局匹配开头为 a 的字符串
  2. const regexp2 = new RegExp('^a', 'g');
  3. const regexp3 = new RegExp(/^a/g);  //全局匹配 a 的字符串
  5. console.log('aaabbccdd'.match(regexp1)); // ['a'];
  6. console.log('aaabbccdd'.match(regexp3)); // ['a', 'a', 'a'];
  8. // u（unicode）修饰符作用将两个字符当作一个字符
  9. console.log(/^\ud83d/u.test('\ud83d\udc36')); // false;
  11. // y 粘连修饰符
  12. const r1 = /imooc/g;
  13. const r2 = /imooc/y;
  14. const str = 'imoocimooc-imooc';
  15. console.log(r1.exec(str)); // ['imooc', 'imooc', 'imooc']
  16. console.log(r2.exec(str)); // ['imooc', 'imooc']

2、数值扩展

（1）新的进制表示法

  1. //八进制以 0o（0O）开头
  2. //二进制以 0b（0B）开头

（2）新的方法与安全数

  1. //Number.parseInt() 转换整数； Number.parseFloat()
  3. //Number.isNaN() 判断是不是NaN
  5. //Number.isFinite() 判断是不是有限的
  7. //Number.MAX_SAFE_INTEGER() 判断是不是安全数，范围 (2^53) -1 ~ (- 2^53) + 1
  8. //Number.MIN_SAFE_INTEGER()
  10. //Number.isSafeInteger() 
  12. //幂运算(默认右边开始计算)
  13. let a = (2 ** 10) ** 0;
  14. console.log( a ) = 1024

3、函数扩展之默认参数

（1）默认参数

  1. function add(a, b=999){
  2.     //如果不给b传值，默认为999
  3. }

（2）与扩展运算符的结合（剩余参数…）

  1. function sun(){
  2.   let args = Array.prototype.slice.call(argu); // 转换成数组
  3.   //等价于 let args = [...agru]
  4.     console.log(argu);
  5. }
  6. sum(1,2,3,'345');
  8. function op(type, ...nums){
  9.     console.log(type);  // type = 'sum'
  10.   console.log(nums);    // nums = [1, 2, 3, 4, 5]
  11. }
  12. op('sun', 1, 2, 3, 4, 5);

（3）箭头函数（=>）

  1. const add1 = (a, b) => a + b;
  2. //等价于 :
  3. const add2 = function(a, b){
  4.     return a + b;
  5. }
  7. //函数不返回值
  8. const pop = arr => void arr.pop();
  9. console.log(pop([1, 2, 3])); // arr = undefine
  11. //与普通函数的区别：箭头函数没有arguments参数，需要使用扩展运算符...args
  12. const log = () => {
  13.     console.log(arguments);
  14. };
  15. log(1, 2, 3); // 控制台报错。修改为：const log = (...args) =>
  17. //箭头函数没有自己的this
  18. const xiaoming = { 
  19.     name: '小明',
  20.   say1: function(){
  21.       console.log(this);
  22.   },
  23.   say2: () => {
  24.       console.log(this);
  25.   },
  26. }
  27. xiaoming.say1();
  28. xiaoming.say2(); //结果见下图；

image.png

4、对象扩展

（1）简洁表示法

  1. //老式写法
  2. const getUserInfo = (id = 1) =>{
  3.     const name = 'xiaoming';
  4.   age = age;
  5.   return {
  6.         name: name,
  7.     age: age,
  8.     say: function(){
  9.         console.log(this.name + this.age);
  10.     }
  11.   }
  12. }
  13. const xiaoming = getUserInfo();
  15. //ES6写法
  16. const getUserInfo = (id = 1) =>{
  17.     const name = 'xiaoming';
  18.   age = age;
  19.   return {
  20.         name,  //会自动去找同名变量
  21.     age,
  22.     say(){
  23.         console.log(this.name + this.age);
  24.     }
  25.   }
  26. }
  27. const xiaoming = getUserInfo();
  29. // 属性名表达式
  30.   const obj = {
  31.     a: 1,
  32.     $abc: 2,
  33.     'uiasfuafyhahfio': 3,
  34.   }
  35. // 可以通过obj.a拿到a的值
  36. // 但是乱码的就不能通过这种形式拿到对应的值，需要通过obj['属性名']的方式取到值

（2）扩展运算符

  1. // 复制对象-- 浅拷贝（拷贝后对象值改变也会修改被拷贝的对象）
  2. const obj = {
  3.   a: 1,
  4.   b: 2,
  5.   d：{ a: 3 },
  6. }
  8. const cobj = { ...obj }   // 这样可以完成对象的复制 
  9. cobj.d.a = 999; // 此时obj和cobj的 d.a 的值都会被修改为999
  11. // 合并对象(也是浅拷贝)-- 同名属性时取后一个为最终结果(与合并写的顺序有关)
  12. const obj1 = {
  13.   a: 1,
  14.   b: 2,
  15. }
  17. const obj2 = {
  18.   a: 9,
  19.   c: 3,
  20. }
  22. const newObj = { ...obj1, ...obj2 } // 此刻输出{ a=9,b=2,c=3 } 
  24. // 部分新的方法和属性
  25. // Object.is()-- 浅拷贝
  26. console.log(Object.is(+0, -0)) // false
  27. console.log(+0 === -0) // true
  28. console.log(Object.is(NaN, NaN)) // true
  29. console.log(NaN === NaN) // false
  31. // Object.assign
  32. const o = Object.assign({a: 1}, {b: 2}) // o就是合并后的结果；
  34. // Object.keys-- 返回数组, 返回自身对应的key
  35. // Object.values-- 返回数组, 返回自身对应的value
  36. // Object.entries-- 返回数组, 每个数组包括key和value
  37. 效果如下：
  38. console.log(Object.keys(obj1));
  39. console.log(Object.values(obj1));
  40. console.log(Object.entries(obj1));

image.png 

  1. // Object.setPrototypeOf 设置对象的原型 
  2. // Object.getPrototypeOf 获取对象的原型 
  4. // super 一个关键字，可以拿到原型对象
  5. const obj = { name: 'xiaoming' };
  6. const cObj = {
  7.   say() {
  8.     console.log(`My name is ${super.name}`)
  9.   }
  10. }
  11. Object.setPrototypeOf(cObj, obj); // 将cObj以obj为原型设置
  12. cObj.say();
  13. // 结果见下：

image.png

5、数组扩展

（1）结合扩展运算符使用

  1. function foo (a, b, c) {
  2.   console.log(a);
  3.   console.log(b);
  4.   console.log(c);
  5. }
  6. foo(...[1, 2, 3]);
  8. // apply的使用
  9. const arr = [1, 255, 5];
  10. console.log(Math.max(...arr));
  11. console.log(Math.max.apply(null, arr)); // 输出结果一致，都是255
  13. // 生成器函数-- 生成迭代器函数
  14. function *g() {
  15.   console.log(1);
  16.   yield 'hi~';
  17.   console.log(2);
  18.   yield 'lethe';
  19. }
  21. const arr = [...g()]; // arr = ['hi~', 'lethe'] ;
  23. // new Set() -- 可以实现数组去重
  24. let set = new Set([1, 2, 2, 3]);
  25. console.log(set); // { 1, 2, 3 }

（2）数组新的方法

  1. // Array.from-- 把类数组(ArrayLike)或者Iterable对象转换成数组形式
  2. const obj1 = {
  3.   0: 1,
  4.   1: 'jj',
  5.   2: false,
  6.   length: 3
  7. };
  8. console.log(Array.from(obj, item => item*2)); // 输出 [2, 44]
  10. // Array.of-- 连接为数组
  11. console.log(Array.of(1, 2, 3); // 输出 [1, 2, 3]
  13. // Array#fill-- 用来填充数组值，会覆盖数组原有的值
  14. const arr = new Array(10).fill(0) // 创建一个长度为10并填充为0数组
  16. // Array.includes()-- 用来箭簇数组中包含什么指定的值，成功true，失败false
  18. // Array.find()-- 根据条件（回调）按顺序遍历数组，当回调返回true时，返回的当前遍历到的值
  19. const arr = [1, 2, 3]
  20. const res = arr.find((value, index, arr) => value % 2 === 0 ); // 输出6
  22. // Array.findIndex()-- 根据条件（回调）按顺序遍历数组，当回调返回true时，返回的当前遍历到的下标
  23. const res = arr.findIndex((value, index, arr) => value % 2 === 0 ); // 输出1
  25. // Array.keys-- 返回数组, 需要通过for-of遍历返回自身对应的key(下标)
  26. // Array.values-- 返回数组, 需要通过for-of遍历返回自身对应的value
  27. // Array.entries-- 返回数组, 需要通过for-of遍历每个数组包括key和value
  28. const arr = [1, 2, 3]
  29. console.log(arr.keys());
  30. console.log(arr.values());
  31. console.log(arr.entries());

四、Promise

1、回调与promise