ES6方法随笔

1.对象属性添加

const obj = {};
const index = 1;
const attr = `sun${index}`;

obj[attr] = '新增属性';

// es6对象属性名可以用表达式

obj[`sun${index}`] = '新用法';

2.解构

let obj = {
  a: 1,
  b: 2,
  c: 3
}
// 传统对象取值

const a = obj.a;
const b = obj.b;
const c = obj.c;

// 或者
const num = obj.a + obj.b
//代码雍总

//es6取值 ----解构

const {a,b,c} = obj;
const sum = a + b;
// 如果原对象中的属性名不是我想要的可以这样
const {a:a1} = obj;
console.log(a1); // 1

//无法解构 undefined 、 null,否则报错

const {a,b,c} = obj || {}

3.可选链操作符

const obj = {
    attr: {
        name: 'ddd'
    }
};
//这样获取可能会报错
let getName = obj.attr.name
// 这样就不会报错
let getName = obj && obj.attr && obj.attr.name
//es6简写
let getName = obj?.attr?.name

4.空值合并运输符

// 当运算符左边的值为undefined 和 null 时，返回右边的值，反之为左边


const foo = null

console.log(foo ?? 'xiaoning') // xiaoning

console.log( 0 ?? 42) // 0

// 经典用法 输入框非空判断

if(value !== undefined && value !== null && value !== '') {
    console.log('输入框不为空')
}

if ((value ?? '') !== '') {
    console.log('输入框不为空')
}

5.模板字符串

const mingzi = '小宁'

const age = 35;

// ${}中可以放入js任意的表达式

const result = `${mingzi}${age > 30?'的成绩不合格': '的成绩合格'}`;

console.log(result)// 小宁的成绩不合格

6.判断对象为空

var obj = {}
Object.keys(obj).length === 0; // true

7.展开运算符

// 以前合并数据和对象

const a = [1,3,5];
const b = [1,4,8];

const c = a.concat(b)// ][1,3,5,1,4,8]

// 数组还没有去重


const d = { a: 1};
const e = { b: 1};


const f = Object.assign({},d,e); // {a: 1, b: 1}

// es6 合并

const arr = [...new set([...a,...b])]

const obj = {...d,...e}

8.其他--画个三角形

.sanjiaoxing {
            width: 0;
            height: 0;
            border-bottom: 200px solid red;
            border-left: 200px solid transparent;
            border-right: 200px solid transparent;
        }

9.for..of 和 for..in 的区别

for...in 循环：只能获得对象的键名、数组和字符串的下标，不能获得键值

for...of 循环：允许遍历获得键值

var arr = ['red', 'green', 'blue']

var obj = {
	'name': 'Jim Green',
	'age': 12
  }
// for..in

//遍历数组
for(let item in arr) {
console.log('for in item', item)
}
	/*
		for in item 0
		for in item 1
		for in item 2
	*/

//遍历对象
for(let key in obj) {
	console.log('for in key', key)
}
	/*
		for in key name
		for in key age
	*/

// for of

//遍历数组
for(let item of arr) {
  console.log('for of item', item)
}
/*
  for of item red
  for of item green
  for of item blue
*/
//遍历对象
//对于普通对象，没有部署原生的 iterator 接口，直接使用 for...of 会报错
for(let key of obj) {
	console.log('for of obj', key)
}
// Uncaught TypeError: obj is not iterable

也可以使用 Object.keys(obj) 方法将对象的键名生成一个数组，然后遍历这个数组

for(let key of Object.keys(obj)) {
	console.log('key', key)
}
  /*
	key name
	key age
  */

for...in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键。for...of 则不会这样

let arr = [1, 2, 3]
arr.set = 'world'  // 手动添加的键
Array.prototype.name = 'hello'  // 原型链上的键
 
for(let item in arr) {
  console.log('item', item)
}
 
/*
  item 0
  item 1
  item 2
  item set
  item name
*/
 
for(let value of arr) {
  console.log('value', value)
}
 
/*
  value 1
  value 2
  value 3
*/