js - Day1 : 函数&对象

29 阅读3分钟

1、优先用const 类型,这个类型不能二次赋值:

const age = calAvg(12, 23);

❌age = calAvg(23,45);//error!

而let 类型可以二次赋值

2、总是使用 === 去等于 ;

3、字符串优先使用单引号' ';   混合使用:

${ }` //模版字符串

4、' use strict ' ;// 严格模式可以帮助我们发现错误;

5、函数:永远都先声明/定义函数,再去使用函数。 ​

在编程语言里,所有能被存进变量、能被传递、能被返回的东西,统称为 值(value) 在 JavaScript 中,函数(function)其实也是一种特殊的“对象类型的值”

也就是说,你可以:

  1. 把函数赋值给变量;
  2. 把函数作为参数传给另一个函数;
  3. 把函数从另一个函数里返回

6、数组与对象的取值方法

//array类型,只能存值,以索引取值,所以值的顺序很重要
const lulinArray = [
    'Lulin' ,
    'Huang',
    2025-2003,
    ['Lintong', 'Humengqian']
]
console.log(lulinArray[1]); // Huang

/*对象(Object)是由键值对(key-value pairs)组成的无序数据集合。
 通过键(属性名)访问对应的值,所以顺序不重要,所以反转对象没有意义
 该对象包含4个属性(properties) */
const lulinObject = {
  firstName: "Lulin",
  lastName: "Huang",
  age: 2025 - 2003,
  friends: ["Lintng", "Humenqian"],
};
/* 对象的第一种取值方式:点(dot)语法(member access类型)。
当明确要访问的是某个属性名时,使用点号访问属性值。*/
console.log(lulinObject.lastName);

/* 但在以下情况中:prompt() 返回的是字符串类型的值,这个字符串会存储在变量 userInput 中,而不是属性名本身。
 使用点语法(lulinObject.userInput)不会去解析变量,而是直接到对象里字面查找 "userInput" 这个属性。
 因此结果是 undefined,因为对象中没有名为 "userInput" 的属性。 */
 //所以若你已明确要访问的是对象的某个属性时,使用dot方法,好处是写法简单以及:若外部不小心写了重名变量,不会访问到外部重名变量。
let userInput = prompt("choose from age, lastName, firstName:");
console.log(`userInput = ${userInput}`);
console.log(lulinObject.userInput); // undefine是false

if (!lulinObject.userInput) {
  userInput = prompt("wrong, please choose from age, lastName, firstName:");
}
/* 当属性名需要动态确定(例如用户输入或计算结果)时,应使用方括号(bracket)语法(computed member access类型)。
方括号里可以放任意表达式(包括在该对象外定义的变量),
核心是:JavaScript 会先计算表达式的值再以此值访问属性,也因此,若你不小心在对象外部定义了一个和某个属性重名的变量,又使用方括号访问该属性,那么方括号方法计算的是会是该外部变量的值,就无法访问到真正的属性了,所以若明确要访问某个属性,优先使用点方法。*/
console.log(`bracket method: ${lulinObject[userInput]}`);
console.log(`bracket method: ${lulinObject['userInput']}`);

const nameKey = "Name";
console.log(lulinObject["first" + nameKey]);

console.log(lulinObject.friends.length);

7、数组与对象如何增加内容

//array:也是一种对象,它有自己的方法。
lulinArray.push(23);//追加
lulinArray.pop();//删除最后一个
lulinArray.shift();//删除第一个

//对象:增加两个属性:
lulinObject.age = 23;
lulinObject['catNumber'] = 0;

8、object methods

const lulinObject2 = {
  firstName: "Lulin",
  lastName: "Huang",
  birthYear: 2003,
  friends: ["Lintng", "Humenqian"],
  hasDrivenLisence: false,
  /* 在 JavaScript 中,函数是一种特殊的对象类型(可被调用的值)。
    在对象中,函数属性被称为“方法(method)”,表示该对象能执行的动作。
	*/
  calAge: function (birthYear) {//此birthYear参数非上面那个birthYear属性
    return 2025 - birthYear;
  },
};
//  通过点号访问 lulinObject2.calAge,替换成对应的函数值;
//  再用 (2003) 调用这个函数值,并传入 2003 作为参数:
console.log(lulinObject2.calAge(2003));
// 或通过方括号语法 lulinObject2['calAge']访问同一个函数属性,替换成对应的函数值;
//  再用(2003)调用这个函数值,并把2003传递进去:
console.log(lulinObject2['calAge'](2003));//注意,若方括号里写calAge,会说没有定义,因为外部没有定义calAge这个变量,所以若已确定要访问的对象属性,为了防止外部有重名变量,使用dot方法访问对象属性。

9、This关键字: 若在对象方法中要访问或者说使用该对象的属性,一定要加上对象名或this去访问,否则会报错,但优先直接用对象名去访问:lulin.birthyear. 切记⚠️,箭头函数没有自己的this 关键字,所以如果是箭头函数不要用this !但箭头函数也只在函数体只有return 一行代码的情况下用最好。

//this关键字,它指向调用了这个方法的对象.
//
//为什么需要this: 不要重复自己原则,因为即使改变了对象名比如改成lulinObject3, 函数体也不需要做任何改变
  calAge2: function () {
    console.log(this);
    return 2025 - this.birthYear;
   //若不用this关键字就需用lulinObject2.birthYear去访问了,那么若改变了对象名,函数体里也要改
  }
//lulinObject2调用了calAge2方法,所以此时this指向lulinObject2
console.log(lulinObject2.calAge2());