ES6的小知识

1：函数的默认参数

function foo(x = 20, y = 30) {
    console.log(x, y);
}
foo(50)
foo(undefined, '') //解决了之前的弊端
    //默认值和解构结合
function bar({ name, age } = { name: 'tyy', age: 20 }) {
    console.log(name, age);
}

function bar2({ m = 'tyy', n = 20 } = { m, n }) {
    console.log(m, n);
}
bar()
bar2()

 

 2：函数的剩余参数 ...args 和arguments不同的是arguments是所有的参数

 

function foo(m, n, ...args) {
    console.log(m, n, args);
}
foo(1, 2, 3, 4, 5, 6, 7)

 

 3：函数箭头函数

箭头函数上面没有prototype,所以不能作为构造函数使用new来创造对象

var foo = () => {
    console.log(this);
}
console.log(foo.prototype);
var f = new foo()

 

 4：展开语法

var names = ['tyy', 'tsf', 'zjj']
var name = 'hei'
var obj = { mood: 'happy', age: 20 }
    //1函数调用时    
function foo(x, y, z) {
    console.log(x, y, z);
}
foo(...names)
foo(...name)
    //构造数组时
const newArr = [...name, ...names]
console.log(newArr);
//创建字面量对象时 会自动给数组添加索引
var newobj = {...obj, address: '广州市', ...names }
console.log(newobj);

特别注意的是展开运算符是一个浅拷贝

var obj = { mood: 'happy', age: 20, friends: { name: 'lili', age: 20 } }
var newobj = {...obj, address: '广州市'}
console.log(obj);
newobj.friends.name = 'happing'
console.log(newobj);
console.log(obj);

 

 我们可以看到代码中只是把newobj里面的friends的name改变了，但是obj里面也改变了，这其实是一个浅拷贝，原理如下

 

 

 

 5：Symbol的使用---用来生成一个独一无二的值

const s1 = Symbol()
const s2 = Symbol()
const s3 = Symbol()
const s4 = Symbol()
const s5 = Symbol()
const obj = {}
    //写法一属性名赋值
obj[s1] = 'abc'
obj[s2] = 'cba'
console.log(obj);
//写法二 
Object.defineProperty(obj, s3, {
        value: 'qwe',
        enumerable: true
    })
    //写法三 定义字面量直接使用
const info = {
    [s4]: 'iop',
    [s5]: 'wer'
}
console.log(obj);
console.log(Object.getOwnPropertySymbols(info));
const Symbolkeys = Object.getOwnPropertySymbols(info)
for (const key of Symbolkeys) {
    console.log(info[key]);
}