ES5-ES10部分学习笔记

ES6-ES10

ES6

• let&&const
• delete 全局变量不能删除，用var 定义的全局变量不能删除；没有用var 定义的可以用delete 删除，是定义到window上的属性,不是正真意义上的全局变量，不管是在函数内部还是函数外部
• this作用域 动态作用域
• bind call apply的区别
• 用var定义的全局变量a可以用window.a访问，用let定义的全局变量c不可以用window.c访问；用var定义的变量可以重复定义，let定义的变量不可以重复定义
• let 定义的变量是有作用域，没有变量提升，不可以重复定义
• const具有let的特点，必须定义时赋值，且不能修改，是常量
• js的词法作用域与动态作用域 作用域链 this关键字

数组

• es5数组遍历有几种？优势和缺点？

1、for支持break，continue 2、forEach不支持break，只能遍历到结束 3、every()
arr.every(function(item){//只输出一个
  console.log(item)
})// every遍历数组能不能继续遍历取决于返回值，默认是false，只遍历一次，要想遍历所有元素，只能返回true；
arr.every(function(item){
  if(item===2){
    return false;
  }
  console.log(item);
  return true;
})
//数组是对象的一种
4、for in//遍历object遍历;可以遍历数组，但是会有瑕疵，主要是数组的下标是任意的，arr.a = 8, 支持break和continue,但是注意获取的index是字符串；输出键；遍历常规数据结构，比如数组、对象
  var a = {
    name: '111',
    age: '222'
  }
  for(let i in a){
    console.log(i)//输出 name age
  }
 for(let index in arr){
   if(index == 2){
     continue;
   }
   console.log(index, arr[index])
 }

* ES5中遍历数组的7个方法 
* 1. forEach
* 2. map (映射)  有返回值(数组),  个数和之前的一样，返回处理后的值
* 3. filter (过滤)  有返回值(数组) 个数和之前的可能不一样  
* 
* 判断
* 4. some  判断是否有一个以上(>=1)满足条件的 true/false
* 5. every 判断是否都满足条件.  true / false
	  
* 查找
* 6. find : 查找满足条件的的一个元素 (找不到undefined)
* 7. findIdex : 查找满足条件的一个索引

• 对象是否可遍历
• es6 遍历方法

1、for of遍历 //输出值
var a = {
    name: '111',
    age: '222'
  }
for(let i of a ) {// 遍历object或其他数据结构(自定义)，
  console.log(i)//输出111 222
}

• es6允许自定义数据结构 可以用for of遍历
• ES5将伪数组转成数组

1、let arrs = [].slice.call(arguments);//将arguments转成数组,arguments是以个伪数组

• es6将伪数组转成数组

1、Array.from(arguments);//将伪数组转数组
Array.from(arrLike,mapFn,thisArg);//三个参数，第二个是遍历函数，如果第三个参数存在，第二个函数的this就指向它

let arr = Array.from({length: 5}, function() {return 1;})//初始化一个长度为5的数组，初始值为1

let arr = Array(5)//初始化数组长度为5

• es5如何创建一个新数组

1、let array = []//不能指定长度，除非填充数值 
2、let arr = Array(5);//可以用for循环初始化数值

• es6如何创建新数组

1、let arr = Array.from({length: 5}, function() {return 1;})//初始化一个长度为5的数组，初始值为1
2、(Array.prototype.of)查MDN 
let arr = Array.of(1,2,3,4,5);//生成数组，可以接受一个或多个参数
3、(Array.prototype.fill);//填充数组
let arr = Array(5).fill(1);//生成一个长度为5的数组，并填充1
Array.fill(value,start,end);//从start开始填充，不包括end

• ES5如何查找一个元素

1、通过遍历查找
2、var arr = [];
let find = arr.filter(function(item){//将所有满足条件的元素返回，不是高效的
  return item%2 === 0;
});

• es6新增查找方法

1、let find = arr.find(function(item){//查找 但是只执行一次,只查找满足条件的第一个值
  return item%2 === 0
});
2、查找位置 Array.prototype.findIndex()//查找位置,只查找满足条件的第一个值
let index = arr.findIndex(function(item){
  return item === 2;
})

document.querySelector(’.red’);//NodeList可以遍历

• es5如何声明一个类 操作属性

let Aminal = function(name, age){
  this.name = name;
  this.age = age;
 // this.eat = function(){//不建议写在这里面 实例方法
   // console.log('吃饭');
  //}
}
Animal.say = function(){//静态方法
  console.log('哈哈哈')
}
Animal.prototype.eat = function(){//函数复用，原型链继承 实例方法
  console.log('吃饭')
}
let dog = new Aminal('dog',3);
console.log(Animal.say());
//所有的公用的东西(函数)，放在prototype上，不放在函数体上
//独用的东西放在函数体上

//继承
let Dog = function(){//继承父类部分属性
  Animal.call(this,'dog');//初始化父类的构造函数，执行父类的造函数传参
}
Dog.prototype = Animal.prototype;
Dog.prototype.constructor

• es6如何声明一个类 操作属性

class Animal {
  let _age = 4;//私有属性private
  constructor(name){
    this.name = name;//public属性
  }
  eat(){//各自的方法 
    console.log(this.name+'吃饭')
  }
  static say(){//静态方法
    console.log('aaa')
  }
  get age(){
    return _age;
  }
  set age(val){
    _age = val;
  }
  
}
let dog = new Animal();
console.log(dog.age);
console.log(dog.eat())
console.log(Animal.say())
dog._age;//获取不到值，私有属性获取不到
class声明的类属于function
> es6的getter与setter

//继承
class Cat extends Animal {
  constructor(name){
    super(name); 
  }
}

• ES6函数参数默认值

function f(x = 1, y = 2, z=x+y){//若是不传参数，默认值x=1,y=2
    console.log(f.length);//输出的是没有默认值的参数的数量??arguments呢？
}
f(1,undefined, 2);//传undefined就会默认值

• ES5函数参数默认值

function f(x, y, z){
  x= x || 1;
  y = y || 2;
}
console.log(f(,,2);

• es5如何处理不确定参数：使用arguments

function sum(){
  let num = 0;
  // ES5写法
  Array.prototype.forEach.call(arguments,function(item){
    num+=item;
  })
  // ES6写法
  Array.prototype.from(arguments).forEach(function(item){
    num+=item;
  })
}
console.log(sum(1,2,3))

• es6不让使用arguments获取不定参数 ,改用参数剩余法

function sum(base,...nums){
  let num = 0;
  nums.forEach(function(item){
    num+=item
  });
  return base*2+num;
}
console.log(sum(1,2,3,4,5));
let data = [1, 2, 3];
> console.log(sum(...data));
> console.log(sum.apply(this,data));

• es6中的箭头函数

let say = () => {
  console.log('哈哈哈哈')
}
say();

• es6 Object属性能简写吗？

 let x = 1, let y = 2; let z = 3;
let obj = {
  'x': x,
  y,//属性简写
  [z + Y]: 6,//特殊写法，属性值支持遍历与表达式
  * hello(){//用*表示异步方法
    console.log('hello');
  },
  say(){
    console.log('哈哈')
  }
}
function *hello(){//generator函数 简写成*
  
}

• es6 Set数据结构

set数据唯一，不允许重复
let s = new Set([1,2,3,4]);将数组转成set结构
s.add('hello');//添加数据
s.add('1').add(2);//支持级联操作
s.delete('hello')//删除指定数据
s.clear();//清空数据

s.has('hello');//判断set是否含有输入的数据
s.size;//获取有多少项数据
遍历：
s.keys();//输出键
s.values();//输出值
s.entries();//输出键跟值
s.forEach( item => {
  console.log(item);//遍历
})
for(let i of s){
  console.log(i);//输出值
}
set没有提供修改数据的方法，若要修改必须先删除在修改
数组去重：
let arr = [1, 2, 3, 5, 2, 1];
arr = Array.from(new Set(arr));或arr = [...new Set(arr)]

• ES6 map数据结构(必须是key value形式)

let map = new Map([[1, 2], [3, 4]);
其中1跟3是键，2、4是值
map.set(5, 6);//5是键，6是值，添加数据
map.clear();//清空数据
map.set(1, 3);//修改数据，只要键值存在
map.delete(3);//删除数据，根据键来删除
map.keys();//输出所有键
map.size;//获取数据条数
map.has(3);//查找键值是否有3；
map.get(1);//获取索引为1的值
map.values();//输出所有值
map.entries();//输出所有键跟值
map.forEach((value, key) => {//遍历，注意第一个参数是值
    console.log(value, key);
});
for(let [key, value] of map){//遍历
    console.log(key, value)
}
// map的键值(key)是任意的, 
let o = function(){
    console.log('0');
}
map.set(o, 2);
//键的顺序：按照初始化的顺序来遍历，不是按照键值大小
// map一般比object性能好一点(大家认为) 

• es5对象复制到另一个对象(对象拷贝)

遍历再拷贝，深度拷贝

• es6 复制对象

const target = {}
const source = {b: 4, c: 5}
const source1 = {d: 3, e: {f: {g: 5}}}
Object.assign(target, source);//将source数据拷贝到target,soouce后面还可以有参数，都把他复制到target上
Object.assign(target, source, source1);//有缺陷，可以拷贝复杂数据，如果target目标对象为空； 如果target目标对象不为空，源对象会覆盖目标对象，将目标对象的数据都被删除了
Object.assign();//是浅复制，如果是值类型，就值替换，如果是引用类型，就将引用地址替换
？？如果目标对象或源对象传入undefined或null会怎样，
？？如果目标对象是个嵌套对象，子对象的属性会被覆盖吗？
WeakSet,WeakMap()??基本一样，api一样，
WeakSet只允许接收对象，WeakMap只允许接收对象类型的key

• es6中的y修饰符是什么含义？es5支持y修饰符吗？

let str = 'aaa_aaa_a';
const reg = /a+/g;
const reg2 = /a+/y;
console.log(reg.exe(str));//从0开始匹配
console.log(reg2.exe(str));//第一次结果一样

console.log(reg.exe(str));//从4开始匹配
console.log(reg2.exe(str));//结果为null 
y表示sticky，粘连的意思，从当前字符串条到下一个断开的位置开始，比如空格隔开的
？？es5如何在正则中处理中文字符，如果是多个字节呢？可以使用unicode编码匹配，但是不能匹配多个字节
？？es6有什么高招？

• es5如何在正则中处理中文字符，如果是多个字节呢？

可以使用unicode编码匹配，但是不能匹配多个字节

• es6如何处理多字符字节识别？

使用u修饰符  能识别\uffff以上的字符
吉的异性字：𠮷,上土下口的字，unicode编码：'\uD842\uDFB7'
let s = '𠮷';
let s2 = '\uD842\uDFB7'
console.log(/^\uD842/.test(s2)); 结果：true//es5匹配一个字符（2个字节）
console.log(/^\uD842/u.test(s2));结果：false;//匹配四个字节，一个字，只要中文，都添加u修饰符，就可以了
console.log(/^.$/.test(s));//es5输出false，这个正则是匹配任意字符
console.log(/^.$/u.test(s));//es6输出true
console.log(/\u{20BB7}/u.test(s));//输出true，匹配到那个中文字符
如果向用unicode马甸匹配zifu,必须按上述那样做

console.log(/𠮷{2}/u.test('𠮷𠮷'));
es6正则表达式要在后面加u，以防出问题（unicode）
？？js中一个字符是几个字节？
？？sticky模式有什么实际应用场景吗？

• es5字符串换行、包含变量或表达式、逻辑运算呢？

字符串拼接

• es6对字符串换行处理 模板字符串

let a = 3;
let b = 4;
const str = `my age is ${a + b}`;

>>>> function Price(strings, type){
           // typr值为‘retail’；
           // strings[0]值为：‘您此次消费
            let s1 = strings[0];
            const retailPrice = 20;
            let showText = '';
            retrun `${s1}${showText}`
        }
        let showText = Price`您此次消费${ 'retail '}`;
        console.log(showText)
es6: ``模板字符串可以两行写，默认换行

• ES6: Deatructure: 解构赋值

let obj = {
    name: 'lily',
    age: 13
}
//隐式赋值
for(let [k,v] of Object.entries(obj)){//遍历
    console.log(k, v)
}
let arr = [1, 2]
let { name: name2, age=12 } = obj;//给对象属性取别名，默认值
[obj.name, obj.age] = [1, 2]
let {first, second} = arr;
let [ first, second ] = new Set([1, 2, 3, 4]);
console.log(first, second);//输出 1 2
//自己试一试map

let obj3 = {
    items: [1, 2, 3],
    user: {
        name: 'haha'
    }
}
let {user: {name}, item: [first]} = obj2
console.log(name, first)

• 异步加载js

function loadScript(src, callback){
  let script = document.createElement('script');
  script.scr = src;
  script.async = true;
  script.onload = () => {
    callback();//加载完成
  }
  document.head.append(script);
  console.log('加载')
  // callback()
}

• ES异步操作

function loadScript(src) {
  return new Promise((resolve, reject) => {
    let script = document.createElement("script");
    script.src = src;
    script.onload = () => {
      resolve(src); //加载完成
    };
    script.onerror = (err) => {
      reject(err);
    };
    document.head.append(script);
  });
}

loadScript("./1.js")
  .then(
    (data) => {
      console.log(data);
      return loadScript("./2.js");
    },
    (err) => {
      console.log(err.message);
    }
  )
  .then((data) => console.log(data))
  .catch((err) => console.log(err))

Promise.resolve(43);//将同步数据改造成异步数据
Promise.reject();//promise的静态方法

• es6 promise

let p1 = Promise.resolve(1);
let p2 = Promise.resolve(2);
let p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then((data) => console.log(data));//输出[1,2,3] 并行，一个异常就报错
===========================================================
let p1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(function() { resolve(2) }, 0);
  })
}
let p2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(function(){
      resolve(3)
    }, 3)
  })
}
Promise.race([p1(), p2()]).then((data) => {//返回2 先到先得
  console.log(data)
})

• es6: Reflect反射

console.log(Reflect.apply(Math.floor, null, [3.72]));//
console.log(Math.floor.apply(null, [3.72]));

function getValue(fn, value){
  return Reflect.apply(fn, null, value);//可以使用三元表达式
}

console.log(getValue(Math.ceil, [3.21]));//4
console.log(getValue(Math.floor, [3.72]));//3

let d = Reflect.construct(Date, []);
console.log(d.getTime())

给对象增加属性属于Object.defineProperty()??测试vue 实时更新界面

let stu = {};//注意：是在浏览器上的,node显示不出来
Object.defineProperty(stu, 'name', { value: 'lily'});
Object.defineProperty(stu, 'age', { value: 90});
console.log(stu);

const r = Reflect.defineProperty(stu, 'color', {value: 'blue'});
console.log(r);//输出true
console.log(stu);//输出{name: "lily", age: 90, color: "blue"}

const obj = { x: 1, y: 2}
Reflect.deleteProperty(obj, 'x');//注意：第二个数据必须是字符串,相当于 delete 属性
console.log(obj);//输出{y: 2}
console.log(Reflect.has(obj, 'y'));//判断obj上是否有y属性
console.log(Reflect.isExtensible(obj));//判断obj是否可扩展的
console.log(Reflect.get(obj, 'y'));//读取对象的另一个方法 输出2

let arr = [2, 3, 4];
console.log(Reflect.get(arr, 2));//读取数组，输出4
？？如何读取代理数据


console.log(Reflect.getOwnPropertyDescriptor(obj, 'y'));//输出{value: 2, writable: true, enumerable: true, configurable: true}

console.log(Reflect.getPrototypeOf(arr));//输出：[constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …];获取实例对象的原型对象， 获取原型对象的方法

const d = new Date();
console.log(Reflect.getPrototypeOf(d));//输出一堆d的方法

Object.freeze(obj);//冻结obj
obj.z = 3;//这个操作没用，z属性补货扩展到obj上
console.log(Reflect.get(obj, 'y'));//读取对象的另一个方法
console.log(Reflect.has(obj, 'y'));// true
console.log(Reflect.isExtensible(obj));// false

console.log(Reflect.ownKeys(obj));//获取对象本身的属性，不是原型链上的属性 输出['y']
console.log(Reflect.ownKeys([1, 2]));//输出["0", "1", "length"]

Reflect.preventExtensions(obj);//组织扩展，跟freeze一样效果
console.log(Reflect.isExtensible(obj));//false

Reflect.set(obj, 'value', 6);//可以修改或增加数据
console.log(obj);//{y: 2, value: 6}

Reflect.set(obj, 'y', '22222');
console.log(obj);//{y: "22222", value: 6}

let a = [1, 2, 3];
Reflect.set(a, 2, 6);
console.log(a);// [1, 2, 6]

Reflect.setPrototypeOf(a, String.prototype);//修改原型对象
console.log(Reflect.getPrototypeOf(a));//String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}

• ES6 Symbol
• ES6 proxy代理

let obj = {
  name: "lily",
  age: 90,
};

let d = new Proxy(obj, {
  get(target, key) {
    if (key === 'age') {
      return target[key] + 20;
    }else {
      return target[key];
    }
  },
  set(target, key, value){//禁止修改数据
    return false;
  }
}); //第一个是被代理对象，第二个参数是干什么
console.log(d.age);//输出110
console.log(obj)//obj数值不变

es5写法：
for([key] of Object.entries(obj)) {//拦截所有场景，使用proxy比较好
    Object.defineProperty(o, key, {
        writeble: false;
    })
}

let d = Proxy.revocable(obj, {//可撤销代理操作(临时代理)
    get (target, key) {
    if (key === 'age') {
      return target[key] + 20;
    }else {
      return target[key];
    }
  },
  set (target, key, value){//禁止修改数据
    return false;
  }
});

console.log(d.proxy.age);//获取代理数据
console.log(d)
console.log(d.revoke());//撤销代理
console.log(d)//报错
？？临时代理有哪些应用场景？
？？如何把接口的数据用代理进行包装？

window.addEventListerner(‘error’, (e) => { console.log(e)}, true);//监听错误

TypeError(‘么么么么’)

• es6 如何让遍历停下来？generator

function * loop(){
	for(let i = 0; i < 3; i++) {
		yield console.log(i);//循环受控
	}
}
const l = loop();//空
l.next();//输出0
l.next();//输出1
l.next();//输出2
l.next();//没值

function * gen(){
	let val;
	val = yield 1;
	console.log(val);
}
const a = gen();
a.next();//空
a.next();//undefined

function * gen(){
	let val;
	val = yield * [1, 2, 3];//添加*号后变成遍历对象，yield *后面可以嵌套一个generator对象
	console.log(val);
}
const a = gen();
console.log(a.next());
console.log(a.next());

l.next(20);//next可以传参
l.return();//控制流程提前结束
l.return(100);

//下面是一个无线循环函数，不会死机
function * gen(){
    while(true){
        try{
            yield 1;//相当于返回值
        }catch(e){
            console.log(e);
        }
    }
}

const g = gen();
console.log(g.next())
console.log(g.next())
console.log(g.next())
g.throw(new Error('sss'))
console.log(g.next());//抛出异常后不受影响，继续向下执行

yield会有返回值

??用generator实现斐波那契数列
？？用generator实现自定义数据结构的遍历
let authors = {
  allAuthors: {
    fiction: ["Angl", "Skks"],
    fantasty: ["J.R.Role", "Neal"],
  },
  Address: [],
};
authors[Symbol.iterator] = function () {//可迭代协议
  //自定义遍历接口
  let allAuthors = this.allAuthors;
  let keys = Reflect.ownKeys(allAuthors);
  console.log(keys);
  let values = [];
  return {
    next() {
      if (!values.length) {
        if (keys.length) {
          values = allAuthors[keys[0]];
          console.log(values)
          keys.shift();
        }
      }
      //必须要有
      return {
        done: !values.length, //必须
        value: values.shift(), //必须
      };
    },
  };
};

let r = [];
for (const v of authors) {
  r.push(v);
}
console.log(r.toString());

====迭代器的2中版本
authors[Symbol.iterator] = function * () {  
  let allAuthors = this.allAuthors;
  let keys = Reflect.ownKeys(allAuthors);
  let values = [];
  while(1) {
    if(!values.length){
      if(keys.length){
        values= allAuthors[keys[0]]
        keys.shift();
        yield values.shift();
      }else {
        return false;
      }
    }else {
      yield values.shift();
    }
  }
}
=====
??迭代协议？可迭代协议？
？？generator跟iterator的关系

• es7如何判断元素存在

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(6));//false

• es7数学乘方简写

Math.pow(2, 3) 2的3次方
2 ** 3;

• es7 async与await配套使用

async function getValue() {//将函数转成promise对象
  return 1;
}
getValue().then((data) => {
  console.log(data);
})

async function getPerson() {
  let promise = new Promise((resolve, reject) => {
    resolve('哈哈哈哈')
  });
  console.log(23)
  return await promise;
}

getPerson().then((data) => console.log(data))

• es8 Object快速遍历的方法

let grade = {
    'lilei': 99,
    'hanmeimei': 88
}

console.log(Object.keys(grade));//输出lilei/hanmeimei
console.log(Object.values(grade));//返回值是数组

for( let [k,v] of Object.entries(grade)){
    console.log(k,v);
}

• es8 字符串补充

const a = 3;
const b = 4;
a.toString().padStart(2,0);//不满足两位前面补0
b.toString().padEnd(2,0);//不满足2位后面补0

• es8如何获取Object数据的描述符

Object.defineProperty(obj, 'data', {
    enumerable: false,//可枚举
    writable:false,//可写的
    configurable: true//可配置的
})

Object.getOwnPropertyDescriptors(obj);//可以获取数据对象的所有信息
Object.getOwnPropertyDescriptor(obj, 'data');//获取data的信息

• ES9中异步操作集合的遍历: for await of

for of 遍历同步操作

function gen(time){
  return new Promise((resolve, reject)=> {
      resolve(time)
  })
}

async function test(){
  let arr = [gen(2000), gen(1000), gen(500)];
   for await (let item of arr){
     console.log(Date.now(), item);
   }
}
test();//输出
//1592285245011 2000
//1592285245019 1000
//1592285245019 500

• es5

/ES5方法：
//获取所有li标签
var Oli = document.getElementsByTagName("li");
//此方法需要的是真数组，所以先把Oli转真数组
Oli = [].slice.call(Oli);

• es9 遍历自定义数据结构

const obj = {
  count: 0,
    Gen(time){
      return new Promise((resolve,reject) => {
        setTimeout(() => {
          resolve({done:false,value: time });
        }, time)
      })
    },
    [Symbol.asyncIterator](){//钉钉一数据结构不支持遍历，也不支持for await of
      let self = this;
      return {
        next() {
          self.count++;
          if(self.count < 4 ){
            return self.Gen(Math.random() * 1000)
          }else {
            return Promise.resolve({done: true, value: ''});
          }
        }
      }
    }
}

async function test(){
  for await (let item of obj ){
    console.log(Date.now(), item);
  }
}

test();
//输出
1592288800038 356.9591797479703
1592288800046 0.627102740068386
1592288800698 651.5066612077622

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Es1YqNnb-1612268187164)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200616143513248.png)]

• es9 Object的rest跟spread方法、

参数剩余法。。。

• ES9 正则dotAll、命名分组捕获、后行断言

console.log(/foo.bar/s.test('foo\nbar'));//s修饰符是来解决.不能匹配\n \t这类转义字符的

const re = /foo.bar/s;
console.log(re.dotAll);//输出true
console.log(re.flags);//输出s;flag表示输出符的意思

• match()正则
• 命名分组捕获

const t = '2019-06-07'.match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/);
console.log(t[0]);//2019-06-07
console.log(t[1]);//2019
console.log(t[2])//06
console.log(t.groups.year);//2019
console.log(t.groups.day);//07

• 先行断言与后行断言

let str = 'hello world!';
console.log(str.match(/hello(?=\sworld)/));//现行断言
console.log(str.match(/(?<=hello\s)world/));//后行断言
console.log(str.match(/(?<!hells\s)world/));//后行断言不等于
？？1、请把'$foo %foo foo'字符串前面是$的foo替换程bar
？？2、请提取'$1 is worth about ￥123'字符中的美元数是多少

• es 10

let arr = [1, [2, 3], [4, 5, [6, 7]]];
console.log(arr.flat());//扁平化输出 [ 1, 2, 3, 4, 5, [ 6, 7 ] ]
console.log(arr.flat(2));//[1, 2, 3, 4, 5, 6, 7]

arr = [1, 2, 3]
console.log(arr.flatMap(item => [item * 2]));//[2， 4， 6]

let str = '    foo     ';
console.log(str.replace(/\s+/g, '_'));//去除所有空格
console.log(str.replace(/^\s+|\s+$/g, '_'));//去除所有空格

console.log(str.trimStart());//去除前面空格
console.log(str.trimLeft());//去除前面空格
console.log(str.trimEnd());//去除后面空格
console.log(str.trim());//去除首尾空格
console.log(str.trimRight());//去除后面空格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JxGjUXJv-1612268187168)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200616154546100.png)]

const arr = [['bar', 2], ['fpp', 1]];
const obj = Object.fromEntries(arr);//将数组转对象
console.log(obj.fpp);//输出1 

const obj = {
  abc: 1,
  def: 2,
  ghksks: 3
}
let res = Object.fromEntries(
  Object.entries(obj).filter(([key, value]) => key.length <= 3)
)
console.log(res);//输出{ abc: 1, def: 2 }，过滤器

• es10 try catch:可以如下写了

try{
    
}catch{
    
}

• es10 bigint 可以处理大于2的53次方的数字

console.log(11n);//11n 表示大数据 类型是bigint
??1.自己如何给Array实现一个Flat函数
？？2、利用Object.fromEntries把url的search部分返回一个Object?