对象字面量的增强与函数参数的默认值

课程简介

对象字面量的增强

属性和方法的简洁表示法
方括号语法

函数参数的默认值

函数参数的默认值是什么
函数参数默认值的注意事项
函数参数默认值的应用

1.属性和方法的简洁表示法

对象字面量是什么
属性的简洁表示法
方法的简洁表示法

1.对象字面量是什么

实例化构造函数生成对象

const person = new Object();
person.age = 18;
person.speak = function () {};

对象字面量

const person = {
    name:"yunmu",
    age: 18,
    speak: function () {}
};

2.属性的简洁表示法

键名和变量或常量名一样的时候，可以只写一个

const age = 18;
const person = {
    // age: age
    age
};
console.log(person);

3.方法的简洁表示法

方法可以省略冒号和 function 关键字

const person = {
    // speak: function () {}
    speak() {}
};
console.log(person);

2.方括号语法

方括号语法的用法
方括号中可以放什么
方括号语法和点语法的区别

1.方括号语法的用法

const prop = 'age';
const person = {};

person.prop = 18; //这样只能添加prop的属性名
person[prop] = 18; //这个能求值 添加age
console.log(person);

//方括号语法可以写在对象字面量中
const prop = 'age';
const person = {
    [prop]: 18
};
 console.log(person);

2.方括号中可以放什么

类似${} [值或通过计算可以得到值的（表达式）]

const prop = 'age1';
const func = () => 'age2';
const person = {
    [prop]: 18,
    [func()]: 18,
    ['sex']: 'male',
    ['s' + 'ex']: 'male'
};
console.log(person);

3.方括号语法和点语法的区别

点语法是方括号语法的特殊形式
属性名由数字、字母、下划线以及 $ 构成，并且数字还不能打头的时候可以使用点语法
当你的属性或方法名是合法标识符时，可以使用点语法，其他情况下请使用方括号语法

const person = {};
person.age 等价于 person['age']

//合法标识符可以用来作为变量或常量名
age18_$ √
18age ×

3.对象新增的方法

Object.assign()

用来合并对象

1.基本用法

Object.assign(目标对象, 源对象1,源对象2,...): 返回目标对象

const apple = {
    color: '红色',
    shape: '圆形',
    taste: '甜'
};
const pen = {
    color: '黑色',
    shape: '圆柱形',
    use: '写字'
};
console.log(Object.assign(apple, pen));

//Object.assign 直接合并到了第一个参数中，返回的就是合并后的对象

console.log(apple);
console.log(Object.assign(apple, pen) === apple);

可以合并多个对象

console.log(Object.assign({}, apple, pen)); //返回最前面的空对象

2.注意事项

2.1.基本数据类型作为源对象

先转换成对象，再合并

console.log(Object.assign({}, undefined));
console.log(Object.assign({}, null));
console.log(Object.assign({}, 1));
console.log(Object.assign({}, true));
console.log(Object.assign({}, 'str'));

2.2.如果只有一个参数，Object.assign会直接返回该参数。

const obj = {a: 1};
Object.assign(obj) === obj // true

由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。

Object.assign(undefined) // 报错
Object.assign(null) // 报错

2.2.同名属性的替换

后面的直接覆盖前面的

const apple = {
    color: ['红色', '黄色'],
    shape: '圆形',
    taste: '甜'
};
const pen = {
    color: ['黑色', '银色'],
    shape: '圆柱形',
    use: '写字'
};
console.log(Object.assign({}, apple, pen));

3.应用

合并默认参数和用户参数

const logUser = userOptions => {
    const DEFAULTS = {
        username: 'xxxxx',
        age: 0,
        sex: 'male'
    };

    const options = Object.assign({}, DEFAULTS, userOptions);
    
    console.log(options);
};
logUser(); //相当于 const options = Object.assign({}, DEFAULTS, undefined);
// logUser({});
// logUser({ username: 'yunmu' });

Object.keys()、Object.values() 和 Object.entries()

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for...of循环使用

1.基本用法

const person = {   
    name: 'yunmu',
    age: 18
};


console.log(Object.keys(person));   //得到对象键组成的数组
console.log(Object.values(person)); //得到对象值组成的数组
console.log(Object.entries(person)); //得到对象键值组成的二维数组

2.与数组类似方法的区别

console.log( [1, 2].keys());
console.log( [1, 2].values());
console.log( [1, 2].entries());
console.log(person.keys);


// 数组的 keys()、values()、entries() 等方法是实例方法，返回的都是 Iterator
// 对象的 Object.keys()、Object.values()、Object.entries() 等方法是构造函数方法，返回的是数组

3.使用 for...of 循环遍历对象

const person = {
    name: 'yunmu',
    age: 18,
    sex: "男"
};

// 遍历属性
for (const key of Object.keys(person)) {
    console.log(key); // name age sex
}

// 遍历属性值
for (const value of Object.values(person)) {
    console.log(value);   // yunmu  18  男
}

// 遍历键值对
for (const entries of Object.entries(person)) {
    console.log(entries);    // ["name", "yunmu"] ["age", 18] ["sex", "男"]
}

// 解构遍历的键值对
for (const [key, value] of Object.entries(person)) {
    console.log(key, value); //  name yunmu age 18 sex 男
}

// Object.keys()/values()/entires() 并不能保证顺序一定是你看到的样子，这一点和 for in 是一样的

也可以通过解构将Object身上的是哪个方法解构出来

// 解构Object身上的方法
let {keys,values,entries} = Object;

let json = {
    name: "yunmu",
    age : 18,
    sex: "男"
}
// 遍历属性
for(let key of keys(json)){
    console.log(key);   // name age sex
}

// 遍历属性值
for(let val of values(json)){
    console.log(val);   // yunmu  18  男
}

// 遍历键值对
for(let item of entries(json)){
    console.log(item);   // ["name", "yunmu"] ["age", 18] ["sex", "男"]
}
// 解构遍历的键值对
for(let [key,value] of entries(json)){
    console.log(key,value);   // name yunmu age 18 sex 男
}

4.函数参数的默认值

1.函数参数的默认值是什么

认识函数参数的默认值
函数参数默认值的基本用法

1认识函数参数的默认值

调用函数的时候传参了，就用传递的参数；如果没传参，就用默认值

multiply(2, 1);
multiply(2);

1函数参数默认值的基本用法

//es5之前的写法
const multiply = (x, y) => {
    if (typeof y === "undefined") {
        y = 2;
    }
    // y = y || 2;
    return x * y;
};

console.log(multiply(2, 1));

es6函数默认值

const multiply = (x, y = 1) => x * y;
console.log(multiply(2));

2.函数参数默认值的注意事项

默认值的生效条件
默认值表达式
设置默认值的小技巧

1.默认值的生效条件

不传参数，或者明确的传递 undefined 作为参数，只有这两种情况下，默认值才会生效

const multiply = (x, y = 1) => x * y;
console.log(multiply(2, 0));
console.log(multiply(2, null));
console.log(multiply(2, undefined));
console.log(multiply(2));

2.默认值表达式

如果默认值是表达式，默认值表达式是惰性求值的

3.设置默认值的小技巧

函数参数的默认值，最好从参数列表的右边开始设置

const multiply = (x = 1, y) => x * y;
console.log(multiply(undefined, 2)); //左边必须传值undefined

const multiply = (x, y = 1) => x * y;
console.log(multiply(2));

3.函数参数默认值的应用

1.接收很多参数的时候

const logUser = (username = 'xxxx', age = 0, sex = 'male') =>{
    console.log(username, age, sex);
}

logUser('tian', 18, 'male');
logUser();

//传参需要记录参数的顺序

2.接收一个对象作为参数

const logUser = (options) => {
    console.log(options.username, options.age, options.sex); //写起来繁琐
}
logUser({
    username: 'tian',
    age: 18,
    sex: 'male'
});

logUser({
    username: "tian",
});
//不传参数会报错 可以给一个函数参数的默认值

const logUser = (options = {}) => {
    console.log(options.username, options.age, options.sex);
};

logUser();

通过解构赋值

const logUser = ({username, age, sex}) => {
    console.log(username, age, sex);
};

logUser({
    username: "tian",
    age: 18,
    sex: "male",
});

还可以添加默认值

const logUser = ({ username = "xxx", age = 0, sex = "???" }) => {
    console.log(username, age, sex);
};

logUser({}); //xxx 0 ???
logUser({
    username: "tian",
    age: 18,
});//tian 18 ???

logUser();//报错 但是此时什么都不传会报错 相当于对undefined进行解构赋值
//{ username = "xxx", age = 0, sex = "???" } = undefined  ×

对这个解构赋值对象添加默认值

const logUser = ({ username = "xxx", age = 0, sex = "???" } = {}) => {
    console.log(username, age, sex);
};
logUser();

//什么都没传相当于{ username = "xxx", age = 0, sex = "???" } = {};
//  这里既包括了解构赋值  也包括了解构赋值的默认值  函数参数的默认值

课程总结

对象字面量的增强
函数参数的默认值

对象字面量的增强

键名和变量或常量名一样时，可以只写一个
方法可以省略冒号和function关键字
方括号语法可以写在对象字面量中
方括号中可以放值或通过计算可以得到值的（表达式)
属性或方法名是合法标识符时，可以使用点语法

函数参数的默认值

函数参数的默认值，最好从参数列表的右边开始设置
传递的参数严格等于undefined时，默认值才会生效
如果默认值是表达式，默认值表达式是惰性求值的

对象字面量的增强与函数参数的默认值 #

课程简介 #

对象字面量的增强 #

函数参数的默认值 #

1.属性和方法的简洁表示法 #

1.对象字面量是什么 #

2.属性的简洁表示法 #

3.方法的简洁表示法 #

2.方括号语法 #

1.方括号语法的用法 #

2.方括号中可以放什么 #

3.方括号语法和点语法的区别 #

3.对象新增的方法 #

Object.assign() #

1.基本用法 #

2.注意事项 #

2.1.基本数据类型作为源对象 #

2.2.如果只有一个参数，Object.assign会直接返回该参数。 #

2.2.同名属性的替换 #

3.应用 #

Object.keys()、Object.values() 和 Object.entries() #

1.基本用法 #

2.与数组类似方法的区别 #

3.使用 for...of 循环遍历对象 #

4.函数参数的默认值 #

1.函数参数的默认值是什么 #

1认识函数参数的默认值 #

1函数参数默认值的基本用法 #

2.函数参数默认值的注意事项 #

1.默认值的生效条件 #

2.默认值表达式 #

3.设置默认值的小技巧 #

3.函数参数默认值的应用 #

1.接收很多参数的时候 #

2.接收一个对象作为参数 #

课程总结 #

对象字面量的增强 #

函数参数的默认值 #

对象字面量的增强与函数参数的默认值

课程简介

对象字面量的增强

函数参数的默认值

1.属性和方法的简洁表示法

1.对象字面量是什么

2.属性的简洁表示法

3.方法的简洁表示法

2.方括号语法

1.方括号语法的用法

2.方括号中可以放什么

3.方括号语法和点语法的区别

3.对象新增的方法

Object.assign()

1.基本用法

2.注意事项

2.1.基本数据类型作为源对象

2.2.如果只有一个参数，Object.assign会直接返回该参数。

2.2.同名属性的替换

3.应用

Object.keys()、Object.values() 和 Object.entries()

1.基本用法

2.与数组类似方法的区别

3.使用 for...of 循环遍历对象

4.函数参数的默认值

1.函数参数的默认值是什么

1认识函数参数的默认值

1函数参数默认值的基本用法

2.函数参数默认值的注意事项

1.默认值的生效条件

2.默认值表达式

3.设置默认值的小技巧

3.函数参数默认值的应用

1.接收很多参数的时候

2.接收一个对象作为参数

课程总结

对象字面量的增强

函数参数的默认值