web全栈体系

外观

目录

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

课程简介 ​

对象字面量的增强 ​

属性和方法的简洁表示法

方括号语法

函数参数的默认值 ​

函数参数的默认值是什么

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

函数参数默认值的应用

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

  • 对象字面量是什么

  • 属性的简洁表示法

  • 方法的简洁表示法

1.对象字面量是什么 ​

实例化构造函数生成对象

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

对象字面量

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

2.属性的简洁表示法 ​

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

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

3.方法的简洁表示法 ​

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

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

2.方括号语法 ​

方括号语法的用法

方括号中可以放什么

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

1.方括号语法的用法 ​

js
const prop = "age";
const person = {};

person.prop = 18; //这样只能添加prop的属性名
person[prop] = 18; //这个能求值 添加age
console.log(person);
js
//方括号语法可以写在对象字面量中
const prop = "age";
const person = {
  [prop]: 18,
};
console.log(person);

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

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

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

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

点语法是方括号语法的特殊形式

属性名由数字、字母、下划线以及 $ 构成，并且数字还不能打头的时候可以使用点语法

当你的属性或方法名是合法标识符时，可以使用点语法，其他情况下请使用方括号语法

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

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

3.对象新增的方法 ​

Object.assign() ​

用来合并对象

1.基本用法 ​

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

js
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);

可以合并多个对象

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

2.注意事项 ​

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

先转换成对象，再合并

js
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 会直接返回该参数。 ​
js
const obj = { a: 1 };
Object.assign(obj) === obj; // true

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

js
Object.assign(undefined); // 报错
Object.assign(null); // 报错
2.2.同名属性的替换 ​

后面的直接覆盖前面的

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

3.应用 ​

合并默认参数和用户参数

js
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.基本用法 ​

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

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

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

js
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 循环遍历对象 ​

js
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 身上的是哪个方法解构出来

js
// 解构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 认识函数参数的默认值 ​

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

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

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

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

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

es6 函数默认值

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

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

  • 默认值的生效条件

  • 默认值表达式

  • 设置默认值的小技巧

1.默认值的生效条件 ​

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

js
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.设置默认值的小技巧 ​

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

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

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

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

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

logUser("云牧", 18, "male");
logUser();

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

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

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

logUser({
  username: "云牧",
});
//不传参数会报错 可以给一个函数参数的默认值
js
const logUser = (options = {}) => {
  console.log(options.username, options.age, options.sex);
};

logUser();

通过解构赋值

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

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

还可以添加默认值

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

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

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

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

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

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

课程总结 ​

对象字面量的增强

函数参数的默认值

对象字面量的增强 ​

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

DEawK1.png

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

DEay5D.png

方括号语法可以写在对象字面量中

方括号中可以放值或通过计算可以得到值的（表达式)

属性或方法名是合法标识符时，可以使用点语法

函数参数的默认值 ​

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

传递的参数严格等于 undefined 时，默认值才会生效

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

May all encounters not be in vain