JS基础———ES6新增

ES6新增

一 常量与变量

var的特点

1. 重复定义会覆盖
2. 存在变量提升机制
3. 污染全局作用域
4. 不能定义常量

let声明变量

1. 统一作用域下，不允许重复定义

let a = 10;
let a = 20;

2. 不存在变量提升

console.log( i );
let i = 10;

3. 不会污染全局作用域（windows上不挂载）

let a = 100;

4. 会产生块级作用域

for(let i = 0; i < 10; i ++){
  setTimeout(()=>{
    console.log(i);
  });
}

const声明常量

const声明的常量不能重新赋值（只针对基本数据类型），但是可以修改引用类型的属性

使用总结：var避免使用，优先使用const，需要重新赋值的变量用let

二 解构赋值（deconstruct）

对象解构

const {name, age} = { name: 'longge', age: 33};
const {name:myName, age} = {name: 'longge', age: 33};
const {name, age, sex='M'} = {name: 'longge', age: 33};

数组解构

const [name, age] = ['longge', 33];

嵌套解构

const {user: {userId}} = {user: {userId: '12345'}}

剩余运算符

const [num1,...nums] = [10,20,30];
const {name,...info} = {name: 'longge', age: 33, sex: 'M'};

展开运算符

const max = Math.max(...[1,-3,4,0]); // 4
const arr = [...[1,2,3],...[4,5,6]]; // [1,2,3,4,5,6]
const obj1 = {a:1};
const obj2 = {b:2};
const obj = {...obj1,...obj2}; // {a:1, b:2}
let [a, ...rest] = [1,2,3,4];
console.log(rest); // [2,3,4]
// 浅拷贝 深拷贝
// 对象的展开，数组展开，slice() 都是浅拷贝

三 箭头函数

箭头函数的特点

1 参数只有一个()可以不写
2 函数只有一句时可以不写{}会自动return函数
3 箭头函数没有this指向，使用上下文的this（它的this指向外部作用域的this），也因为箭头函数没有this指向，所以无法改变this指向
4 箭头函数没有arguments伪数组参数

四 函数默认值

函数的行参设置是可以预设默认值 如果不传参数则使用参数默认值
	fn(name='zhangsan', age=20) {
    console.log(`My name is ${name},my age is ${age}`)
  };

五 模版字符串``

1 支持换行书写
		const str = `这个是支持换行的
			这是支持换行的`;
2 可以用于变量的拼接 ${变量} 
		const name = 'zhangsan';
		console.log(`我是${name}`);
3 可以直接调用函数	

六 Set 数据类型，是一个集合，不允许重复，有去重效果

// Set  数据类型，是一个集合，不允许重复，有去重效果
const s = new Set();
console.log(s); // {}
// 传入一个数组 数组的每个元素就是集合的每个元素
const s2 = new Set([1,3,5,7,9]);
console.log(s2); // {1,3,5,7,9}
// 集合的数据不允许重复
const s3 = new Set([1,3,5,3,9,7,9]);
console.log(s3); // {1,3,5,9,7};
console.log([...new Set([1,2,3,2,4,5,6,9,6,5])]); // [1,2,3,4,5,6,7]
// Set相关api  add()/delete()/has()/clear()/forEach()/for of (for(let i of arr){})
// 属性： size

七 Map 一般对象的key只能存储字符串，Map可以把复杂数据类型作为key

const m = new Map([['name','zs'],[{a:10},{b: 20}]]);
console.log(m)

// Map相关api：  set()/get()/clear()/delete()/forEach()/for(let i of m)/has()
// 属性： size
m.set('age', 18);
console.log(m);

const object = {a:10}
const m1 = new Map([['name','zs'],['name', 'lisi'],[object,{b: 20}]]);
console.log(m1.get('name')); // lisi
console.log(m1.get(object)) // {b: 20}