【Javascript】听课笔记：this用法\js解构的使用\...运算\for-in&for-of

课程视频

this的用法

‘this’ 用于为每个上下文段落？（execution context）创建一个特殊变量，其指向关键字的函数的所有者。可以获取此函数的所有者的值
代码示例：

const jonas = {
	year: 1991,
	calcAge: function () {
		console.log(this);
		console.log(2037 - this.year);
	},
};
jonas.calcAge();

内容输出：

可见输出内容为对象’jonas’本身。

规则：

• 对象中的方法：this指向对象本身（即函数的所有者）
• 简单函数调用：this = undefined（仅在严格模式下，非严格模式为’window’对象）
• 箭头函数：没有自己的this，其指向箭头函数上下文范围中的this，若上下文为全局，那么将返回’window’对象
• 事件监听器（Event listener）：this = DOM元素

解构的使用

• 解构可用于数组和对象

数组:

使用==， ,==可跳过某个元素，写几个就复制几个，可有默认值，可嵌套解构

const arr = [1,2,3,4];
let [i=50, ,j] = arr;//50为设置的默认值
console.log(i,j);
输出：1，3

对象

使用**{}**来进行解构，解构时直接写出想解构的对象内的具体属性名称即可。

可对属性名进行重命名，例如有原属性name，重命名为resName：

let {name: resName} = object;

可对对象进行默认值设置：

let {name:resName = []} = object;

对已经定义的变量使用解构进行覆盖时，在外层加括号，因为{}会被识别成一个代码块：

let a = 1;
let b = 1;
const obj = {a: 23, aa:24 , b:25};
( { a, b } ) = obj;

• 对象嵌套解构：

openingHours: {
	thu: {
		open: 12,
		close: 22
	},
	fri: {
		open: 11,
		close: 23
	},
	sat: {
		open: 0,
		close: 24
	}
}

const {fri : {open, close}} = openHours;//open和close被提取出来了
console.log(open,close);

数组与对象的entries()方法：

• 返回一个数组形式的迭代器
• 数组：返回 [下标,value]

 for (const [i, row] of rows.entries()) { 
 	}

‘…’ 运算符

用于展开数组、对象（于等号右边）或打包剩余参数（放在等号左边）
例：

//对象定义
const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0, // Open 24 hours
      close: 24,
    },
  },
};
//打包部分对象
const {sat, ...weekdays} = restaurant.openingHours;
console.log(weekdays);

openingHours的剩余两个元素被放到了weekdays这一对象中

“rest”用法：展开数组或对象

const arr = [1,2,3,4];
const a = [5,6,7,8,...arr];//将arr展开逐个放入数组a
console.log(a);

不使用展开的结果：

“spread”用法：打包进入一个数组

const add = function (...numbers){
	console.log(numbers);
};
add (8,5,2,3,6,9,7);

输出结果：

用途：函数传参时可以不限制参数个数，全部被整合为一个数组

或运算的短路特性

代码示例：如果前一个参数为true，则不进行后面的运算

// Short Circuiting (&& and ||)
// Use ANY data type, return ANY data type, short-circuiting
console.log(3 || 'Jonas');
console.log('' || 'Jonas');
console.log(true || 0);
console.log(undefined || null);
console.log(undefined || 0 || '' || 'Hello' || 23 || null);

或运算的合并写法

a.number ||= 10;

Null 判断运算符（与||运算符类似）

只有运算符左侧的值为 null 或 undefined 时，才会返回右侧的值。
??就是包含0和空字符串的||

const text = data.text ?? 'Hello, world!'

用途：在值为空字符串和0时，不使用默认值

ES6新语法：for-of 循环

//引例
const menu = [...arr1, ...arr2];
for (const item of menu) console.log(item);
// The for-of Loop
const menu = [...restaurant.starterMenu, ...restaurant.mainMenu];

for (const [i, el] of menu.entries()) { //解构的应用，无需写[0],[1],直接定义两个元素，更直接方便
  console.log(`${i + 1}: ${el}`);
}
console.log([...menu.entries()]);
*/

ES6对象新特性

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  // ES6 enhanced object literals，直接使用对象名引入
  openingHours,
	//属性名可以是一个”计算“：如	
	`day${5+1}` :xxxx,
  order(starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },

  orderDelivery({ starterIndex = 1, mainIndex = 0, time = '20:00', address }) { //无需写function()，直接写<函数名>(参数){内容}
    console.log(
      `Order received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`
    );
  },

  orderPasta(ing1, ing2, ing3) {
    console.log(
      `Here is your declicious pasta with ${ing1}, ${ing2} and ${ing3}`
    );
  },

  orderPizza(mainIngredient, ...otherIngredients) {
    console.log(mainIngredient);
    console.log(otherIngredients);
  },
};

链接可选运算符（?.）

• 当运算符前属性存在时，才会访问下一个属性，否则返回undefined

console.log(restaurant.openingHours.mon?.open); //只有当mon存在时，才会访问open

同样适用于检测函数或数组是否存在

for-in 和 for-of的区别

• for-in是ES5标准,遍历的是key(可遍历对象、数组或字符串的key);
• for-of是ES6标准,遍历的是value(可遍历对象、数组或字符串的value);