ES6 Day02

傷城~ 2023-10-13 17:54 14阅读 0赞

#### 文章目录 ####

*  ES6基础语法
 *  1.解构
 *  2.对象
 *  3.数组

## ES6基础语法 ##

## 1.解构 ##

> ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。

1.数组解构
    等号左边的变量放到中括号内部，匹配右侧数组中的元素。
        1.let [a,b,c]=[1,2,3];
        console.log(a,b,c);
    
        2.let [a,b,c,d,e]=[1,2,3,[4,5],6];
        console.log(a,b,c,d,e);
    
    	3.不完全解构
        let [a,b,c,[d],e]=[1,2,3,[4,5,6],7];
    	console.log(a,b,c,d,e);
    
    	4.集合解构 ...扩展运算符
        let [a,...b]=[1,2,3,4,5];
    	console.log(a,b);
    
    	5.默认值解构（当匹配值严格等于undefined时，默认值生效）
        let [a=1,b=2,c=3]=[4,5,6];
    	console.log(a,b,c);
    	let [a=1,b=2,c=3]=[];
    	console.log(a,b,c);
    
    	6.默认值也可以是函数
        function test(){
        console.log('hello')}
        let [a=test()]=[1];
    	console.log(a);
    	let [a=test()]=[];
    	console.log(a);
    	
    	7.let arr=[1,2,3,4];
    	 let [...a]=arr;
    	 console.log(a===arr);//false

2.对象解构
    	等号左边的变量放到大括号内部，匹配右侧对象中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值
    	1.let {
        foo,bar}={
        foo:'hello',bar:"world"};
    	console.log(foo,bar);
    
    	2.如果变量名和属性名不一致，需要重命名
        let {
        foo:baz}={
        foo:"hello",bar:"world"};   baz:hello
        
        3.对象的解构赋值是下面形式的简写 前面属性名后边变量名
        let {
        foo:foo,bar:bar}={
        foo:'hello',bar:"world"};
    
    	4.嵌套结构
        let obj={
        p:['hello',{
        y:"world"}]};
    	let {
        p:[a,{
        y:b}]}=obj;
    	console.log(a,b);hello world
        
        5.默认值结构
        let {
        x:y=3}={
        };
    	console.log(y);3
    
    	经典面试题:
    	const [a, b, c, ...d] = [1, 2, 3, 11, 999];
        const {
         e, f,f1, g, ...h } = {
         f: 4, g: 5, i: 6, j: 7 };
        console.log(a, b, c, d, e, f1, g, h);

3.字符串解构
    	1.可以使用对象解构或者是数组解构，使用数组结构可以获取指定字符；使用对象结构可以获取实例属性方法;
    	let [a,b,c]='hello';
    	console.log(a,b,c);h e l
        
        2.也可以将string字符串转换为数组
        let [...arr]='hello';
    	console.log(arr);
    	
    	3.使用对象解构
          let {
        toString,valueOf,length}='hello';//相当于把‘hello’当成String基本包装器类型
       	 console.log(toString,valueOf,length)

4.数值解构  可以获取到数值包装器构造函数原型中指定的方法。
     	let {
        toString,valueOf}=10;
        console.log(toString,valueOf)
    5.布尔值解构
    	let {
        toString,valueOf}=true;
     	console.log(toString,valueOf);

## 2.对象 ##

> ES6中对于Object的拓展主要是静态方法的拓展。

1.对象简写
      ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法，此时属性名为变量名, 属性值为变量的值。对象简写在未来的使用频率极其高。
        let name='larry';
    	let age=12;
    	let obj={
        
    		name,
    		age,
        	//es5 sayName:function(){}
        	// sayName(){
        
            //     console.log(this.name) --按照这种形式写this依然指向调用者
            // },
    		// sayName:()=>{
        
    		// 	console.log(this)
    		// }
    		sayName(){
        
                //this-->obj
    			return ()=>{
        
    				console.log(this)
    			}
    		}
    	}
    	obj.sayName()();
    ----------------------------------------------------------
    	let name='larry';
        let age=12;
        let sayName=()=>{
        
            console.log(this)
        }
            let obj={
        
                name,
                age,
                //es5 sayName:function(){}
                // sayName(){
        
                //     console.log(this.name)
                // },
                // sayName:()=>{
        
                // 	console.log(this)
                // }
                sayName(){
        
                    return sayName
                }
            }
            // obj.sayName()()
        //箭头函数没有自己的this，内部this指向声明箭头函数时外部作用域中的this。
        obj.sayName()()

2.箭头函数
    	es5函数内部属性有this和arguments,箭头函数内arguments不再保存实参,如果想接受实参，可以使用rest参数
    	let test=(a,...b)=>{
        
    		//console.log(this,arguments);
            console.log(a,b);a--1 b--[2,3,4,5]
        }
        test(1,2,3,4,5)

3.扩展运算符
    	使用拓展运算符可以解构数组和对象，并返回解构后的新数组或者新对象
        //...用到左侧是聚合 用到右侧是展开 
        let arr=[1,2,3,4,5]
        let [...a]=arr;
        console.log(a);
        console.log(a===arr);//false
    
        let obj={
        name:'zhangsan',age:12};
        let {
        ...b}=obj;
        console.log(b);
        console.log(b===obj);//false

4.函数参数解构
    	1.函数参数对象解构
        function test({
         name,age,...a}){
         ...a解构剩余对象中的属性并返回一个新对象
            console.log(name,age,a)
        }
    	test({
        name:"zhangsan",age:12,gender:1})
    	2.函数参数对象默认值解构
         function test({
         name,age=1,...a}){
        
            console.log(name,age,a)
        }
    	test({
        name:"zhangsan",gender:1})
    	3.函数参数数组解构
       	function test([a,b,c,d]){
        
            console.log(a,b,c,d)
        }
    	test([1,2,3,4])
    
    	ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。通常情况下，定义了默认值的参数，应该是函数的尾参数，函数的length属性，将返回没有指定默认值的参数个数
        function log(x, y = 'World',d) {
         
            console.log(x, y);
        }
        // log(1,2)
        console.log(log.length)

5.对象API拓展j
    	1.Object.is(a,b); 判断a和b的值是否相等
        	例子1:
            console.log(1===1);//true
            console.log(Object.is(1,1));//true
            console.log(Object.is(1,2));//false
            console.log(+0===-0)//true
            console.log(Object.is(+0,-0));//false
            console.log(NaN===NaN);//false
            console.log(Object.is(NaN,NaN));//true
    	2.Object.assign(o,obj); 两个参数实现对象复制、拷贝 第一个参数是目标对象
          1.let o={
        };
    		let obj={
        
                name:"zhangsan",
                age:12,
            }
          let result=Object.assign(o,obj);把obj中的内容复制到o对象当中并返回o对象
          console.log(o)
          console.log(result)
    	  console.log(o===result)
    	  2.Object.assign(o,obj,obj1); 三个参数代表的是合并对象obj,obj1到o当中并返回o对象
    	 let o={
        }
    	 let obj={
        
    	 name:"zhangsan",
            age:12
         
         }
         let obj1={
        
             name:"lisi"
    		gender:1
         
         }
         let result=Object.assign(o,obj,obj1);
    	 console.log(o)
         console.log(result)
    	3.获取原型对象中的方法
        Object.getPrototypeOf()
    	let obj={
        
        name:"",
        age:1
        }
        console.log(obj.__proto__);
        console.log(obj.constructor.prototype)
        console.log(Object.getPrototypeOf(obj))
    	4.设置原型对象中的方法
        Object.setPrototypeOf(obj,obj1) 设置obj的原型对象为obj1
    	Object.setPrototypeOf(obj,obj1);
    	console.log(obj.__proto__);
        console.log(obj.constructor.prototype)
        console.log(Object.getPrototypeOf(obj));
    	5.Object.keys() Object.values()  Object.entries()
    	let obj={
        
        name:'terry',
        age:12
        }
        // 获取所有属性名组成的数组
        console.log(Object.keys(obj));
        // 获取所有属性值组成的数组
        console.log(Object.values(obj));
        // 获取键值对组成的数组
        console.log(Object.entries(obj));
    	6.Object.fromEntries()用于把键值对还原成对象结构。
        console.log(Object.fromEntries(Object.entries(obj)));

## 3.数组 ##

> 数组在静态方法与实例方法中都有所拓展

1.Array.from();//将类数组对象转换为数组  //NodeList
    //es5 Array.prototype.slice.call('类数组对象',0)
    2.Array.of();//参数是数组元素，为了解决new Array(10)传递一个数组,创建length
        let a=Array.of(10,'hello')
        console.log(a)
    3.Array.prototype.find((item)=>{
        }) find方法返回第一个满足条件的元素或者undefined 参数回调函数
      let arr=[1,2,3,2,3];
        let result=arr.find((item)=>{
        
            return item>2
        })
        console.log(result)
    4.Array.prototype.findIndex();//参数回调函数
    	findIndex返回第一个满足条件的元素的索引或者-1
     	let arr=[1,2,3,2,3];
        let result=arr.findIndex((item)=>{
        
            return item>2
        })
        console.log(result)
    5.Array.prototype.includes(); includes是否包含某个元素，返回true/false
    	console.log(arr.includes(300));
    6.Array.prototype.fill() 用来填充数组,修改原数组
    	arr.fill(8);
    	console.log(arr)  //参数 返回值 修改原数组
    7.Array.prototype.keys()
    8.Array.prototype.values()
    9.Array.prototype.entries()
    //keys,values,entries变量当前是迭代器对象
    let arr 	= [2, 3, 4, 5, 6, 2];
    let keys=arr.keys();
    let values = arr.values();
    let entries = arr.entries();
    console.log(keys, values, entries); // 迭代器实现了Iterator接口，只要有实现了Iterator接口就可以for-of遍历
    
    10.Array.prototype.flat() 
    把数组展平是Array原型给我们带来的新特性，通过传入层级深度参数（默认为1），来为下层数组提升层级。如果想提升所有层级可以写一个比较大的数字甚至是Infinity，当然不推荐这么做。
    [1, 2, [3, 4]].flat();           // [ 1, 2, 3, 4 ]
    [1, 2, [3, 4, [5, 6]]].flat(2);  // [ 1, 2, 3, 4, 5, 6 ]
    11.Array.prototype.flatMap() 
    它是 Array.prototype.map() 和Array.prototype.flat()的组合，通过对map调整后的数据尝试展平操作。
    [1, 2, [3, 4]].flatMap(v => {
        
      if (typeof v === 'number') {
        
        return v * 2
      } else {
        
        return v.map(v => v * 2)
      }
    })
    // [2, 4, 6, 8]

> **String.prototype.trimStart()/String.prototype.trimEnd()**
> 
> 在接收用户输入的文本，我们经常会把头尾的空格文本去掉，来规避展示的不受控情况。自ES5来，`String.prototype.trim()` 被用于去除头尾上的空格、换行符等，现在通过 `trimStart()`，`trimEnd()` 来头和尾进行单独控制。`trimLeft()`、`trimRight()` 是他们的别名。
> 
>     let str=' hello world! ';
>     console.log(str+'2');
>     let res=str.trimStart();
>     // let res=str.trimEnd();
>     console.log(res+'2');

> **String.prototype.padStart() / String.prototype.padEnd()**
> 
> 这两个函数的作用是在头尾添加字符串，它们接收两个参数 `str.padStart(targetLength [, padString])`，其中 `targetLength` 表示填充完的字符串长度，`padString` 表示填充的字符串，默认空格
> 
>     'es8'.padStart(4);          // ' es8'，默认填入空格
>     'es8'.padEnd(4, '0');       // 'es80'，填充自定义字符串
>     'es8'.padStart(2);          // 'es8'，如果长度小于原字符串，返回原字符串
>     'es8'.padStart(6, 'abcd');  // 'abces8'，如果填充字符串+原字符串长度大于给定长度，则从填充字符串左边开始截取
>     'es8'.padEnd(6, 'abcd');    // 'es8abc'，padEnd也是从填充字符串左边开始截取
>     'es8'.padStart(7, 'abc');   // 'abcaes8'，如果填充字符串+原字符串长度小于给定长度，则从填充字符串重复填充

> **Function.prototype.toString() 重新修订**
> 
> 从ES2019开始，`Function.prototype.toString()`将从头到尾返回源代码中的实际文本片段。这意味着还将返回注释、空格和语法详细信息。
> 
>     function /* a comment */ foo() {
>          }
>     之前，Function.prototype.toString()只会返回了函数的主体，但没有注释和空格。
>     foo.toString();  // 'function foo() {}'
>     但现在，函数返回的结果与编写的一致。
>     foo.toString();  // 'function /* a comment  */ foo () {}'