ES6+(7,8,9,10,11,12)的一些新增知识

ES7：

一、includes包含

// includes 包含 和indexOf用法相同 查找某条数据是否包含在一个对象或者数组或者字符串种
// 不同为：
// indexOf 包含时返回所在的位置 不包含时返回-1
// includes 包含时返回true 不包含时返回false 返回布尔类型

const arr = [1,2,3];
arr.includes(2);  // 返回true
arr.includes(4);  // 返回false

arr.includes(1); // 返回true
includes可传俩个参数： 1参为要查找的值 2参为重第几个位置开始查找 默认从0 

二、乘方运算符（指数运算符）

// 之前在获取一个数字的几次方时需要调用Math.pow()方法
const num = Math.pow(3,3);

// 乘方运算符用法
let num2 = 3;
num2 = num2 ** num2

// 结果是一样的 也是求3的3次方

... 

ES8：

一、Object.values 获取对象的所有属性值

// 在ES5中 有Object.keys(目标对象) 来获取对象的所有key值 并以数组的格式返回
const obj = {
    name: '小明',
    age: 18,
};

const dataKey = Object.keys(obj);
console.log(dataKey);     // ['name','age']

// 在ES8中 也新增了一个 Object.values(目标对象) 来获取对象的所有属性值 并以数组的格式返回
const dataValue = Object.values(obj);
console.log(dataValue);     // ['小明',18]

//Object.values(传值)  传值为对象时返回对象的所有value值,为数组时返回传入数组无操作,传入字符串时会把每个字符分开返回数组格式
  
   

二、Object.entries 和 Object.formEntries

// Object.entries(目标对象)  会把把该对象以二维数组的形式进行返回
const obj = {
    name: '小明',
    age: 18,
};

const newObj = Object.entries(obj);
console.log(newObj); // [ [ 'name', '小明' ], [ 'age', 18 ] ]

// Object.formEntries(目标对象) 会把转为二维数组的对象转成对象并返回
const newObj2 = Object.fromEntries(newObj);
console.log(newObj2); // { name: '小明', age: 18 }

 三、padStart和padEnd

// padStart和padEnd为字符串前后添加字符 并返回新的字符串
// 俩个参数 1为添加后的字符串长度，2为填充数据
let message = 'xiaoming';

let newMessage = message.padStart(10,'-');
let newMessage2 = message.padEnd(10,'-');

console.log(newMessage);   // --xiaoming
console.log(newMessage2);   // xiaoming--

 四、Object.getOwnPropertyDescriptors 获取对象所有属性的属性描述符

属性描述符设置文章地址:  http://t.csdn.cn/JslOs

// 获取对象所有属性的属性描述符并返回
// 属性描述符 使用Object.defineproperty(目标对象，'key'{属性描述符})新增时的属性描述设置
const obj = {
  name: '小明',
  age: 18
};

// console.log(Object.getOwnPropertyDescriptors(obj));
const data = Object.getOwnPropertyDescriptors(obj);

console.log(data); 
// {
//   name: { value: '小明', writable: true, enumerable: true, configurable: true },
//   age: { value: 18, writable: true, enumerable: true, configurable: true }      
// }

... 

ES9：

一、对象扩展运算符

//在ES9之前为数组扩展运算符 用法和数组扩展运算符一样
const obj = {
  name: '小明',
  age: 18
};

const newObj = {...obj} // newObj就为浅拷贝后的obj

...

ES10：

一、降维数组 flat() 和 flatMap()映射降维

// 在数组中新增了降维函数 flat() 参数为降几维 默认为一维 降维后返回新的数组
const arr = [1,2,[3,4],5,[6,[7,8]]];
const newArr = arr.flat();
const newArr2 = arr.flat(2);

console.log(newArr); // [ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]
console.log(newArr); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]

// flatMap() 映射降维 就是降维时可对每个数据进行操作

二、trimStart 和 trimEnd 字符串前后去除空格

// trim去除空格 trimStart 和 trimEnd 字符串前后去除空格 并返回去除后的数据 
const message = '   xiaoming   ';
const newMessage = message.trim();
const newMessage1 = message.trimStart();
const newMessage2 = message.trimEnd();

console.log(message);       // '   xiaoming   '
console.log(newMessage);    // 'xiaoming'
console.log(newMessage1);   // 'xiaoming   ' 
console.log(newMessage2);   // '   xiaoming'

...

ES11：

一、bigInt 大数字

// bigInt 大数字
// 在js中存在最大数字的限制 当超出最大范围进行计算时 会出现错误 bigInt大数字就可以实现不出错

// 创建时 在数字后加个n 就是大数字类型
const bigNum = 100000000000000000n;

// 大数字在计算时 不会隐式转换 需要手动转换 也在需要进行计算的数字后加个n
console.log(bigNum + 2n);

// 在进行变量相加时 需要用到BigInt(变量) 这个函数来对变量进行转换为大数字
const num = 10;
console.log(bigNum + BigInt(num));

二、空值合并操作符

// 空值合并操作符 ??

// ?? 空值合并可以解决之前 || 的不严谨的地方

// 在或赋值时 会出现 前面只要为false就会赋值后面的数据
m = m || 10; // 当m为 0 或 空字符串 时,m都会被赋值为10

// 利用空值合并操作符就可以解决这个弊端 ??
m = m ?? 10; // 只有当m为 null 或 undefined 时,m才会被赋值为10

三、可选链选取属性

// 可选链获取属性   ?
const obj = {
    name: '小明',
    age: 18,
    girlFriend: null,
    firend: {
      name: '逍遥',
      girlFriend: {
        name: '遥逍'
      },
    },
};
// 当我们获取小明这个对象的firend的girlFriend的name时 可以获取到的情况下 会直接拿到 
// 如果小明这个对象没有firend属性或者firend没有girlFriend的情况下 就会阻断js执行过程
console.log(obj.firend.girlFriend.name)
// 可选链获取属性可以解决 查看当前对象下有没有朋友属性 有的话继续往下找 没用的话返回undefined 不会阻断js执行进程
console.log(obj.firend?.girlFriend?.name)

四、globalThis 全局对象

// 在浏览器执行js代码环境中 获取全局对象为：
console.log(window);
console.log(this);

// 在node执行js代码环境中 获取全局对象为：
console.log(global);

// 想要一份代码在这俩个环境上都获取到全局对象就可以用 globalThis
console.log(globalThis);

...

ES12：

一、FinalizationRegistry 类

// FinalizationRegistry是ES12新增的一个类 可以监听到内存释放后回调new时的函数

// new一个实例对象
const finalRegistry = new FinalizationRegistry((value) => [
// value 为 register的第二个参数 标识对象的字符等
  console.log(`释放了一个注册在finalRegistry中的${value}内存` )
]);

let obj = {name: '小明'}

// 利用 register方法来对某个对象进行监听 
finalRegistry.register(obj)

// 当这个对象的数据不在被引用时 就会被js垃圾回收来清除掉这个对象在内存中所占的内存 
// 此时就会回调 FinalizationRegistry中的回调函数 
// 可以传唯一标识来查看哪个对象被回收了 register(目标对象，'标识对象的字符等')

obj = null

二、弱引用对象 WeakRef

// WeakRef 为ES12中新增的一个 类 
// 他的作用是可以为一个对象赋值给其他对象是形成弱引用
// 弱引用：在js垃圾回收器的机制中，它会根据根对象开始一层一层往下寻找所引用的地方就不会被回收掉
// 弱引用垃圾回收也会当作没被引用来对待 当一个内存只被弱引用所指向时 那么这个内存将会被释放

// 用法：
const obj = {
  name: '小明',
  age: 18,
};

const newObj = new WeakRef(obj)
// 此时 newObj就是obj的弱引用对象

// 获取弱引用对象时需要：info.deref().属性名
console.log(info.deref().name)
console.log(info.deref().age)

// 当obj不在引用 这个对象的内存地址
obj = null
// 这个内存就会被回收 

三、赋值运算

// 逻辑或赋值运算符 ||=   逻辑与赋值运算符 &&=  逻辑空赋值运算符 ??=

// 逻辑或赋值运算符 ||= 
// 原： 
message = message || 'default Message';
// 语法糖：
message ||= 'default Message'


// 逻辑与赋值运算符 &&= 
// 原： 
message = message &&  m = m + 1;
// 语法糖：
message &&= m = m + 1;


// 逻逻辑空赋值运算符 ??=
// 原： 
message = message ?? 'default Message';
// 语法糖：
message ??= 'default Message'

...