ES6基础语法

weixin_45753087

于 2022-09-14 23:33:41 发布

阅读量44

点赞数

文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/weixin_45753087/article/details/126862432

版权

一、解构

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

1.数组解构

等号左边的变量放到中括号内部，匹配右侧数组中的元素。

// 完全解构
    let [a,b,c]=[1,2,3];
    console.log(a,b,c);

    let [a,b,c,d,e]=[1,2,3,[4,5],6];
    console.log(a,b,c,d,e);

	// 不完全解构
    let [a,b,c,[d],e]=[1,2,3,[4,5,6],7];
	console.log(a,b,c,d,e);

	// 集合解构 ...扩展运算符
    let [a,...b]=[1,2,3,4,5];
	console.log(a,b);

	// 默认值解构（当匹配值严格等于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);

	// 默认值也可以是函数
    function test(){console.log('hello')}
    let [a=test()]=[1];
	console.log(a);
	let [a=test()]=[];
	console.log(a);
	
	 let arr=[1,2,3,4];
	 let [...a]=arr;
	 console.log(a===arr);//false

2.对象解构
等号左边的变量放到大括号内部，匹配右侧对象中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值

    let {foo,bar}={foo:'hello',bar:"world"};
	console.log(foo,bar);

	//如果变量名和属性名不一致，需要重命名
    let {foo:baz}={foo:"hello",bar:"world"};   baz:hello
    
    //对象的解构赋值是下面形式的简写 前面属性名后边变量名
    let {foo:foo,bar:bar}={foo:'hello',bar:"world"};

	//嵌套结构
    let obj={p:['hello',{y:"world"}]};
	let {p:[a,{y:b}]}=obj;
	console.log(a,b);hello world
    
    //默认值结构
    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);

二、对象

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)));

三、数组

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

//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]