其他语法和模块的导出导入

目录

一、其他语法

1.  includes

2.  **幂运算

 3.  flat数组降维

3.1:  扁平化嵌套数组

3.2:  扁平化与数组空项  

3.3:  替代方案

 4.  flat和map的一个结合

 二、对象的扩展方法

1.  Object.keys

2.  Object.values

3.  entries用来创建map

4.  Object.getOwnPropertyDescriptors

5.  Object.create()

5.1:  writable

 5.2：configurable

5.3： enumerable 

6.  Object.fromEntries()

7.  Object.trim()

8.  可选链操作符 ( ?. )

三、模块的导出导入

1.  ES6模块的特点

2.  export 和 import

2.2： as的用法

2.3： import 命令的特点

2.4： export default 命令

---

一、其他语法

1.  includes

判断2是否在arr数组中 在就返回true反之为false

        let arr=[1,2,3];

        console.log(arr.includes(2));  //true

2.  **幂运算

        console.log(10**3); //1000   10*10*10

        console.log(2**3); //8

 3.  flat数组降维

本小节内容可参考：  Array.prototype.flat() - JavaScript | MDN

flat作用：会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

返回值：一个包含将数组与子数组中所有元素的新数组,flat会移除数组的空项。不会改变原有数组

        let array=[1,[2,3],4];

        console.log(array);      //[1, Array(2), 4]

        console.log(array.flat());     //[1, 2, 3, 4]   数组降维，二维数组变为一维

        let arr=[1,[[2],3],4];

        console.log(arr);     //[1, Array(2), 4]

        console.log(arr.flat());    //[1, Array(1), 3, 4]   三维下降了一维，成二维

        console.log(arr.flat(2));    //[1, 2, 3, 4]   三维降维成一维，深度为2

        console.log(arr.flat(3));    //[1, 2, 3, 4]   降为一维

3.1:  扁平化嵌套数组

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

3.2:  扁平化与数组空项  

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

3.3:  替代方案

 使用 reduce 与 concat

var arr = [1, 2, [3, 4]];

// 展开一层数组
arr.flat();
// 等效于
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]

// 使用扩展运算符 ...
const flattened = arr => [].concat(...arr);

reduce + concat + isArray + recursivity 

// 使用 reduce、concat 和递归展开无限多层嵌套的数组
  var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatDeep(arr, d = 1) {
   return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
                : arr.slice();
};
flatDeep(arr1, Infinity);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

forEach+isArray+push+recursivity 

// forEach 遍历数组会自动跳过空元素
const eachFlat = (arr = [], depth = 1) => {
  const result = []; // 缓存递归结果
  // 开始递归
  (function flat(arr, depth) {
    // forEach 会自动去除数组空位
    arr.forEach((item) => {
      // 控制递归深度
      if (Array.isArray(item) && depth > 0) {
        // 递归数组
        flat(item, depth - 1)
      } else {
        // 缓存元素
        result.push(item)
      }
    })
  })(arr, depth)
  // 返回递归结果
  return result;
}

// for of 循环不能去除数组空位，需要手动去除
const forFlat = (arr = [], depth = 1) => {
  const result = [];
  (function flat(arr, depth) {
    for (let item of arr) {
      if (Array.isArray(item) && depth > 0) {
        flat(item, depth - 1)
      } else {
        // 去除空元素，添加非 undefined 元素
        item !== void 0 && result.push(item);
      }
    }
  })(arr, depth)
  return result;
}

使用堆栈 stack 

// 无递归数组扁平化，使用堆栈
// 注意：深度的控制比较低效，因为需要检查每一个值