部分ES6介绍

ES6中增加了：   

1.let：

①let 不能变量提升
②let 在遇到{}，会形成块级作用域

 

/*console.log(a)
var a = 10;*/

/*console.log(a);
let a = 10;*/


/*function fn(){
let num = 5;
if(true){
let num = 10;
}
console.log(num);
}
fn();*/

/*for(var i = 1; i <= 3; i++){
for(var i = 0; i <= 3; i++){
console.log(i);
}
}*/

//0 1 2 3 
// i = 4

for(let i = 1; i <= 3; i++){
for(let i = 0; i <= 3; i++){
console.log(i);
}
}

// i = 1 0 1 2 3
// i = 2 0 1 2 3
// i = 3 0 1 2 3

 

2.const常量：

const定义的都是常量，不能再改变值

const PI = 3.1425;
PI = 2;
console.log(PI) 

3.ES5从数组给变量赋值；

var arr = [1,2,3];

var a = arr[0];

var b = arr[1];

var c = arr[2];

console.log(a,b,c);

 

4.数组解构

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

可以从数组中提取值，按照对应位置，对变量赋值；

数组的元素是按次序排列的，变量的取值由他的位置决定；

var arr = [1,2,3];

let[a,b,c] = arr;

console.log(a,b,c,); 

 

5.默认值（解构赋值允许指定默认值）

let[flag = true] = [ ];

console.log(flag);

let[name,age = 8] = ['zfpx'];

可以从数组中提取值，按照对应位置，对变量赋值；

数组的元素是按次序排列的，变量的取值由他的位置决定；

 

6.对象解构（解构不仅可以用于数组，还可以用于对象）

let obj = {name:'zfpx',age:8};

let {name,age} = obj;  //let{name:name,age:age};   变量名和属性名一样，可以把属性名省略；

console.log（name,age）;

对象的属性没有次序，变量必须与属性同名，才能取到正确的值；

 

7.变量名和属性名不一样

let obj = {name:'zfpx',age:8};

left {name:name1,age:age1} = obj;

console.log(name1,age1);

对象的解构赋值的内部机制，是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者，不是前者；

 

8.ES6模板字符串： ``  &{变量}

var obj = {uname:“jack”,age:8};

var str = `

　　<div>姓名：<span>${obj.uname}</span>年龄：<span>${obj.age}</span></div>

　　　　`;

　　document.body.innerHTML = str;

模板字符串是增强版的字符串，用反引号（`）标识，他可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量；

 

9.对象简写

//ES6中允许直接写入变量和函数，作为对象的属性和方法；

var name = 'zfpx';

var age = 8;

var obj = {name,age};

//方法也可简写

var obj = {

　　　　getName(){

　　　　return this.name;

　　}

　　}

//等同于

var obj = {

　　getName:function（）{

　　　　return this.name;

　　}

　　}

 

10.箭头函数

ES6允许使用箭头 => 定义函数；

var f = （v） => {

　　return v;

}

//等同于

var f = function（v）{

　　return v;

}

//如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分；

var fn（） =>10；

var sum = （num1,num2）=>num1 + num2;

//如果箭头函数的代码块部分多于一条语句，就要使用花括号将它们括起来，并且使用return语句返回；

var sum = (num1,num2)=>{return num1 + num2;}

//由于花括号被解析为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上小括号；

var getobjeck = id =>({id:id});

11.箭头函数中的this

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象；

function print（）{

　　setTimeout（）=>{

　　　　console.log（'name:',this.name）;

　　},100);

}

var name = '2f';

print.call（{name:'px'}）;

 

12.assign

Object.assign方法用于对象的合并，将源对象的所有可列举属性，复制到目标对象

Object.assign(target,a,b,c); 就是把a,b,c三个对象归并到 target目标对象里

var target = {pid : 1};
var a = {pname : "华为"};
var b = {price :　1200}
var c = {pid : 10}
console.log(Object.assign(target,a,b,c))

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象；

 

13.扩展运算符

扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中；

let obj = {name:'zfpx',age:8};

let obj2 = {...obj};

console.log（obj2）

//等同于

let obj2 = Object.assign（{}，obj）;

 

12.ES6提供了新的数据结构set,它类似于数组，但是成员的值都是唯一的，没有重复的值。

set 实例的属性和方法（set是一个集合，index和item是一样的）

①size:所有元素的个数；

②add（value）：添加某个值，返回set结构本身

③delete（value）：删除某个值，返回一个布尔值，表示删除是否成功

④has（value）:返回一个布尔值，表示该值是否为set的成员；

⑤clear（）：清除所有成员，没有返回值

 

遍历：forEach（）：使用回调函数遍历每个成员

Array.from（）将一个集合或者类数组转成数组 

map:

size

set（key.value）：添加某个元素   key为属性

get（key）

has（key）布尔值

clear（）无返回值

delete（key）返回值是布尔值

 

class 定义一个类
属性要放在 constructor里

/*function Animal(){ // 构造函数中的this都是实例
this.color = "白色";
this.age = 8;
this.say = function(){

}
}
var res = new Animal(); // 对象（实例） 一个属性 方法
console.log(res)*/

//es6
class Animal{
constructor(){
this.age = 5;
this.color = "黑色"
}
}

var res = new Animal();
console.log(res);