57:ES6中常用的基础知识(大佬整理es6知识点)

温故而知新

大佬整理知识点必看http://es6.ruanyifeng.com

解构赋值主要是针对于数组和对象的:
真实项目中,一般常用于把从服务器获取的JSON数据进行快速解构,赋值给对应的变量,帮助我们快速拿到对应的结果

		 let arr = [10, 20, 30, 40];
		 let [a, b, c, d] = arr;
		 console.log(a, b, c, d); //10 20 30 40
		 
	     let [a, , , b] = arr;
		 console.log(a, b); //10 40
		 
		  let [a] = arr;
		 console.log(a); //10

		 let [a, ...b] = arr;
		 console.log(a, b); //=>b=[20,30,40] 

		  let [a] = arr.reverse();
		 console.log(a); //40

a/b互换值

 // a/b互换值
	 let a = 10,
		b = 20; 
       
		// 传统互换方法
		let c = a;
		a = b;
		b = c;
		console.log(a, b); 

    // 后台互换思路
		a = a + b;
		b = a - b;
		a = a - b;
		console.log(a, b); 

     // ES6互换方法
	    [b, a] = [a, b];
		console.log(a, b); 

对象解构赋值,创建的变量名需要和属性名保持一致

let obj = {
			id: 1,
			name: '学习交流',
			age: 10
		}; 
//=>对象解构赋值,创建的变量名需要和属性名保持一致
		let {
			id,
			name,
			sex
		} = obj;
		console.log(id, name, sex); 
		//结果:1 学习方法 undefined
		
		//=>赋值默认值 
		let {
			sex = 0
		} = obj;
		console.log(sex); */

		// 设置别名
	     let age = 0;
		let {
			age: age1
		} = obj;
		console.log(age1); 

真实项目中,一般常用于把从服务器获取的JSON数据进行快速解构,赋值给对应的变量,帮助我们快速拿到对应的结果**

let data = [{
	id: 1,
	name: '李伊扎古'
	}, {
	id: 2,
	name: '周一娜拉'
	}];
 //注意:很有可能数据是null
    let str = ``;
	data.forEach((item) => {
			let {
				id,
				name
			} = item || {};
			str += `<div>
				<span>${id}</span>
				<span>${name}</span>
			</div>`;
		});
         
       //也可以不用体现item 直接结构赋值
	 let str = ``;
	 data.forEach(({
			id,
			name
		}) => {
			str += `<div>
				<span>${id}</span>
				<span>${name}</span>
			</div>`;
		});
  • …运算符
    * 1.扩展运算符 let […arr]=[10,20,30,40];
    * 2.剩余运算符 函数的形参赋值上
    * 3.展开运算符 展开数组或者对象中的每一项
	 let fn = (n, ...m) => {
	  // 箭头函数中没有arguments
			console.log(n, m);
		};
		fn(10, 20, 30, 40); 
		//m代表20,30 40

		// 数组克隆 (展开运算符)
	let arr1 = [10, 20, 30];
	let arr2 = [...arr1];
	//注意call的参数是一个一个上传的
	fn.call(obj,...arr1);  // fn(10,20,30) */

Array.from() 把一个类数组集合(Set集合)转换为数组 Array.of() 把一组值转换为数组
ES5中Array常用的一个方法:Array.isArray()验证是否为数组

Array.prototype新增的方法
new Array(3).fill(null) 创建集合长度为3,每一项都填充为null includes
flat() 数组扁平化
entries(),keys(),values()
find / findIndex =>数组的遍历迭代方法
forEach/map/filter/find/some/every/reduce…

	// Object.assign([obj1],[obj2]) 合并对象,把[obj2]的信息替换[obj1]
	// Object.create([obj]) 创建一个空对象,让其__proto__指向[obj]
	// Object.defineProperty([obj],[key],[options]) 监听一个对象某个属性的处理操作
	// Object.entries([obj]) 获取一个对象所有的键值对
	// Object.keys([obj])
	// Object.values([obj])
	// Object.freeze([obj]) 冻结对象,让其所有操作都不能进行
	// Object.is([value1],[value2]) 比较两个值是否相等,比==/===更准确 

const创建的变量不能更改变量的指针指向,但是对于对象来说可以操作其堆内存中的信息

	 const obj = {
		 	id: 1
		 };
	 obj.id = 2;
	 console.log(obj);
	//结果:Object 
	//  id: 2
	//  [[Prototype]]: Object

数组去重

  • 对象键值对
  • 双循环
 let arr = [1, 1, 1, 2, 3, 2, 3, 4, 5, 3, 2, 1];

// Set数据结构中的每一项都是唯一的(类数组)
  arr = [...new Set(arr)];
  console.log(arr);
  arr = Array.from(new Set(arr));
  console.log(arr);

		// 传统对象结构中 键不能是对象
		 let n = {
			x: 10
		 };
		let obj = {
		 	id: 1
		 };
		 obj[n] = 10;

		// map支持属性名是对象
		 let n = {
		 	x: 10
		 };
		 let obj = new Map();
		 obj.set(n, 10);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值