部分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() =>10var 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);

原文地址:https://www.cnblogs.com/cqdd/p/10252798.html