前端基础——JS

JS 运算符

比较、赋值、运算…

• 算数运算符
  

• 赋值运算符
  

• 比较运算符
  

• 逻辑运算符
  

• 类型运算符
  

• 位运算符
  

JS算数

1.幂运算

<h1>Math.pow()</h1>

<p id="demo"></p>

<script>
var x = 5;
document.getElementById("demo").innerHTML = Math.pow(x,2);
</script>

Math.pow(x,y)相当于x**y
2.运算符优先原则
乘法（*）和除法（%）比加法（+）和减法（-）拥有更高的优先级

JS 数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

如果没有数据类型，就无法安全的解决问题
1.当数值与字符串相加时，JS 将数值视为字符串
2.JS 从左往右计算，不同次序产生不同结果
3.JS 拥有动态类型，即相同变量可以保存不同类型
4.写数值用不用小数点均可；科学计数法
5.JS 布尔值True or False
6.JS 数组用方括号书写；数组元素用逗号隔开；索引也使用

<script>
var Superstar = ["王一博", "肖战", "郭富城"，"张学友"];
document.getElementById("demo").innerHTML = Superstar[0];
</script>

7.JS 对象用花括号书写：name:value ，元素有逗号隔开

var person = {
    firstName : "Bill",lastName  : "Gates",age : 62,eyeColor  : "blue"
	};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

8.JS 变量类型判断用 typeof
9.JS 中没有的变量显示 undefined；typeof 也返回 undefined
10.JS中 undefined 和 null在数值上对等，但类型不相等

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

JS函数

执行计算

<script>
function myFunction(p1, p2) {
    return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(7, 8);
</script>

函数语法

function 关键词进行定义，其后写函数名和括号（）

function name(参1, 参2, 参3) {
    要执行的代码
}

当JS 到达return语句，函数将停止执行

var x = myFunction(7, 8);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
    return a * b;
    }

eg：将华氏度转为摄氏度

function toCelsius(f) {
    return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(86);

调用函数

• toCelsius（） 引用的是函数结果括号不可省略
• JS 函数中声明的变量，成为函数的局部变量；局部变量只能在函数内访问；
  myFunction () 之外的 carName 未定义

<script>
myFunction();

function myFunction() {
    var carName = "Volvo";
    document.getElementById("demo1").innerHTML =
    typeof carName + " " + carName;
}
显示 string Volvo
document.getElementById("demo2").innerHTML =
typeof carName;
</script>
显示undefined

• 用作变量值的函数
  使用变量储存函数

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

把函数当作变量值直接使用

var text = "The temperature is " + toCelsius(77) + " Celsius";

JS对象

JavaScript 变量是数据值的容器；对象也是变量，但对象包含很多值：以名称：值对的方式书写

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

对象方法

对象可以有方法；方法是对象执行的动作；方法以函数定义储存在属性中；方法是作为属性来储存的函数

空格和折行都是允许的，对象定义可横跨多行

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 关键词

this是“拥有”fullName 函数的person 对象
this.firstName 的意思是this 对象的firstName 属性

对象定义

创建了一个JS 非空对象

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

访问对象

对象属性

• objectName.propertyName
• objectName[“propertyName”]

对象方法

• objectName.methodName()

name = person.fullName();

1. 不使用（）访问，将返回函数定义
2. 方法实际上是以属性值的形式储存
3. 不要把字符串、数值和布尔值声明为对象：以此避免代码复杂度

对象访问器

JavaScript 访问器即Getter和Setter，它们允许定义对象访问器被计算的属性
get关键词

<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;
</script>
# en

对象构造器

<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}
// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
// 显示年龄
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.age + "."; 
</script>

创建一个"对象类型"的方法，是使用对象构造器函数，函数Person()就是对象构造器函数，用new 关键词调用构造函数创建相同类型的对象

var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");