ES6的新特性

Posted 2022-03-11 遥岑.

目录

• ES6的新特性
• • let和const
  • 模板字符串
  • 箭头函数
  • 函数的默认参数值
  • 二进制和八进制的字面量
  • 解构赋值
  • 对象字面量的简写
  • for...of和for...in
  • ...循环
  • forEach循环
  • Map
  • Set
  • Symbol
  • 对象超类
  • set get访问器
  • 类

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()