🔒 ES6基础知识点

字符串 => 模板字符串

字符串

模板字符串

let a = world;
let str = `hello ${a}`;
console.log(str); // "hello world"

模板字符串甚至可以调用函数。

function fn() {
  return "World";
}
`hello ${fn()}`; //"hello world"

将数组变成字符串

var arr = [1,2,3];
var str = `${arr}`; //'1,2,3'

解构赋值

对象的解构赋值

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

---

var hash={name:'stage',city:'shanghai'}

let {name,city}=hash; //name等于hash里的name，city等于hash里的city
等同于
var name = hash['name'];
var city = hash['city'];

---

var url = response.config.url;
var data = response.config.data;
等同于
let {config:{url,data}} = response;

如果
function (response){
	xxx
}
则形参可以直接替换成
function ({config:{url,data}}){
	xxx
}

---

函数形参的解构赋值

function user(data){
	var name = data.name;
	var age = data.age;
	console.log(name,age)
}
user({name:'stage',age:24})
等同于
function user({name,age}){
	console.log(name,age)
}
user({name:'stage',age:24})





----------------
function (data){
	let {id,name,singer,pic} = data;
	console.log("name:",name);
}
等同于
function ({id, name, singer, pic}){
	console.log("name:",name);
}

函数参数json的解构赋值
ES5中用这种方法：

var data1 = {a:1}
var data2={a:{b:2}}
var data3 = {a:{b:{c:'得到c啦'}}}

function test(data){
	if(data.a && data.a.b && data.a.b.c){
		return data.a.b.c;
	}else {
		return '默认值'
	}
}
等同于
function test(data){
	return data.a && data.a.b && data.a.b.c || '默认值'
}

test(data1)
test(data2)
test(data3)

Es6中可以这样写

let data={x:{a:1,b:2,c:{d:3,e:4,f:5}}}

function test({ x: {c} }){ //获取data里的、x里的c
console.log(c)
}

test(data); // {d: 3, e: 4, f: 5}

ES6学习——新的语法：对象解构（Object Destructuring）

对象的操作

Object.assign()的用法（合并）

不建议使用该方法，因为这会导致原始数据被修改

let obj = {},
obj.a = 1;
obj.b = 2;
obj.c = 3;

等同于

//将哈希合并进obj内，此时obj改变了
Object.assign(obj,{
	a:1,
	b:2,
	c:3
	})
//obj={a:1,b:2,c:3}

解决低版本浏览器不支持的问题pollyfill：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Browser_compatibility

---

let a = {x:1,y:2}
let b = {x:3,z:4}

Object.assign(b,a)//将a合并进b，此时a改变，b没有变
//{x: 1, z: 4, y: 2}

key与value同名可省略value

ES5
var obj = {
	name:name,
	age:age,
	city:city
}

ES6
let obj = {
	name,
	age,
	city
}

…运算符（拷贝对象）

var a = {e:1,f:2}
var b = {g:3,h:4,i:{j:5,k:6}}


var c = {
	e:a.e,
	f:a.f,
	g:b.g,
	h:b.h,
	i:b.i
}

等同于

let c = {...a, ...b}//将a和b里所有的键值对拷贝过来
//c={e: 1, f: 2, g: 3, h: 4, i: {j:5,k:6}}

module

只导出1个对象

//创建a.js
export default {
	a:1
}

//创建b.js
import obj from './a,js';
console.log(obj)

导出多个对象

//创建a.js
export function fn1(){
	alert(1);
}

export function fn2(){
	alert(2);
}

//创建b.js
import { fn1,fn2 } from './b,js';
fn1();
fn2();