ES6的新特性

ES6的新特性

let和const

let：

• 声明变量，但不进行变量提升
• 声明局部变量，在块级作用域内有效
• 不可以重复赋值

console.log(a) //undefined 变量提升
var a = 'hello'


console.log(b)  //报错 不进行变量提升
let b = 'hello'
let b = 'hell' //报错，不能重复赋值

const：

• 声明常量，声明后不可以修改，const 在声明时必须被赋值
• 块级作用域
• 声明时大写变量
• 不提升变量

if(true) {
    const m = 'hello'
}
console.log(m) //报错 块级作用域

模板字符串

基本的字符串格式化，将表达式嵌入字符串中进行拼接。

var name = '邓瑛'
console.log(`name:${name}`)

箭头函数

ES6 中，箭头函数就是函数的一种简写形式。
箭头函数不具备this变量指向改变。

// ES5
var add = function (a, b) {
    return a + b;
};
// 使用箭头函数
var add = (a, b) => a + b;
//当函数只有一个表达式时，可省略花括号，自带return效果

//箭头函数中没有隐藏的参数argumens
function f1() {
    console.log(arguments)
}
f1(1,2,3)

let f2 = () => {
    console.log(arguments)
}
f2(1,2,3)

// ES5
function Person() {
    this.age = 0;

    setInterval(function growUp() {
        // growUp() 函数的 this 指向 window 对象
        this.age++;
        console.log(this.age) //NAN
    }, 1000);
}
var person = new Person();


// ES6
function Person(){
    this.age = 0;

    setInterval(() => {
        // this指向 person 对象
        this.age++;
        console.log(this.age)
    }, 1000);
}

var person = new Person();

函数的默认参数值

function fun(name='遥岑',age=20,cb) {
    console.log(name,age)
}
fun('江絮')

//函数的不定参数：将函数的参数都放在默认的隐藏的参数arguments里面
function fn() {
    console.log(arguments)
    console.log(arguments[1])
}
fn('遥岑',20,'女')

二进制和八进制的字面量

ES6 支持二进制和八进制的字面量，通过在数字前面添加0o或者0O即可将其转换为八进制值。

let oValue = 0o10;
console.log(oValue); // 8

let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

解构赋值

对象或数组的解构赋值：

// 对象
const student = {
    name: 'Sam',
    age: 22,
    sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];

// ES5
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);

// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);

对象字面量的简写

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
    type: type,
    color: color,
    carat: carat
};

console.log(gemstone);

for…of和for…in

for…of 用于遍历一个迭代器。

let nicknames = ['1', '2', '3'];
for (let nickname of nicknames) {
    console.log(nickname);
}
// 1 2 3

for…in 用来遍历对象中的属性。

let map = {
    name:'邓瑛',
    age:27
}
for(let i in map) {
    console.log(map[i])
}
// 邓瑛 27

…循环

function foo(...args) {
    console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]


function foo(x,y,z) {
    console.log(x,y,z);
}

let arr = [1,2,3];
foo(...arr);

forEach循环

let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.forEach(item=>console.log(item)) //1 2 3

Map

ES6 中新的数据结构集：Map。每个对象都可以看作是一个 Map。
一个对象由多个键值对构成，在 Map 中，任何类型都可以作为对象的 key。

var map = new Map()
map.set('f','foo')
map.set('t','too')
console.log(map.get('f')) //foo
console.log(map.get('t')) //too

Set

let mySet = new Set([1, 1, 2, 2, 3, 3]);
console.log(mySet) //{1,2,3}
mySet.has(1); // true

mySet.add('strings');
mySet.add({ a: 1, b:2 });
console.log(mySet) //{1,2,3,'string',{a:1,b:2}}

Symbol

Symbol 是一种新的数据类型，它的值是唯一的，不可变的。
ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，但是访问不到这个标识符。

let obj = {
    [Symbol('name')]:'遥岑', //symbol作为属性名不会被for in循环打印返回
    age:20,
    height:'165cm'
}
for(let key in obj) {
    console.log(key)
}

var n = Symbol('t')
var s = Symbol('t')
console.log(n === s) //false Symbol是唯一的

对象超类

var parent = {
    foo() {
        console.log("Parent");
    }
}

var child = {
    foo() {
        super.foo();
        console.log("Child");
    }
}

Object.setPrototypeOf(child, parent);
child.foo(); //Parent Child

set get访问器

function Person(name) {
    this.name = name;
    this.age = 20
}

Person.prototype.fun = function() {
    console.log('ES5类定义')
}

let p1 = new Person();
p1.fun()


//ES6
class Person {
    constructor(name,myage) {
        this.name = name;
        this.myage = myage
    }
    get age() { //访问器
        return this.myage
    }
    set age(newage) { //修改器
        this.myage = newage
    }
    fn() {
        console.log('ES6')
    }
}
let p1 = new Person('江絮',20)
p1.fn()
console.log(p1.age)

p1.age = 18
console.log(p1.age)

类

//ES5
function Dad(name,age) {
    this.name = name;
    this.age = age;
}

function Son(name,age) {
    Dad.call(this,name,age); //对构造方法的继承
    this.height = '178'
}
Son.prototype.show = function() {
    console.log(this.name)
    console.log(this.age)
}

let s1 = new Son('遥岑',12)
s1.show()


//ES6
class Dad {
    constructor(name) {
        this.name = name
    }
    fun() {
        console.log('父类的成员方法')
    }
}

class Son extends Dad {
    constructor(name) {
        super(name);
    }
    hobby() {
        console.log('待到晴空月明日 正是人间相逢时')
    }
}

let s1 = new Son('江絮')
s1.hobby()
console.log(s1.name)

类的静态成员：

//类的静态属性、静态方法为类的所有对象共享，而不属于某个具体的对象
class Person {
    constructor(name,age) {
        this.name = name; //name属性是费静态属性 每个对象都有自己的name
        this.age = age;
    }
    static get school() {
        console.log('70')
    }; //不能用static定义静态属性

    static fn() { //静态的成员函数（方法）
        console.log('甲二十六')
    }
    show() {
        console.log(this.name)
    }
}

let hxm = new Person('hxm',21);
Person.school
Person.fn()
hxm.show()