MENU

JavaScript笔记(3)

2019 年 09 月 24 日 • 默认分类

我还能继续做咸鱼🍉

JavaScript 运算符

算数运算符

算数运算符用于对数字执行算数运算,JS可以执行这些运算符对数字进行操作:

运算符描述
+加法
-减法
*乘法
/除法
%系数
++递加
--递减

典型的算术运算会操作两个数值。

这两个数可以是字面量:

var x = 7 + 8;

或变量:

var x = a + b;

在算术运算中,数被称为操作数

(两个操作数之间执行的)运算由运算符定义。

操作数运算符操作数
7+8

运算符优先级

var x = 200 + 50 * 2;

JS和传统数学是一样的,运算中为乘法优先。

乘法(*)和除法(%)比加法(+)和减法(-)拥有更高的优先级

就像和在学校的数学一样,可以使用括号来优先运算:

var x = (200 + 50) * 2;

当使用括号时,括号中的运算符会首先被计算。

而当多个运算拥有相同的优先级时(比如加法和减法),对它们的计算是从左向右的:

var x = 200 + 50 - 2;

JavaScript 运算符优先级值

运算符描述实例
20( )表达式分组(3 + 4)
19.成员person.name
19[]成员person["name"]
19()函数调用myFunction()
19new创建new Date()
17++后缀递增i++
17--后缀递减i--
16++前缀递增++i
16--前缀递减--i
16!逻辑否!(x==y)
16typeof类型typeof x
15**求幂 (ES7)10 ** 2
14*10 * 5
14/10 / 5
14%模数除法10 % 5
13+10 + 5
13-10 - 5
12<<左位移x << 2
12>>右位移x >> 2
12>>>右位移(无符号)x >>> 2
11<小于x < y
11<=小于或等于x <= y
11>大于x > y
11>=大于或等于x >= y
11in对象中的属性"PI" in Math
11instanceof对象的实例instanceof Array
10==相等x == y
10===严格相等x === y
10!=不相等x != y
10!==严格不相等x !== y
9&按位与x & y
8^按位 XORx ^ y
7\ 按位或x \y
6&&逻辑与x && y
5\\ 逻辑否x \\y
4? :条件? "Yes" : "No"
3=赋值x = y
3+=赋值x += y
3-=赋值x -= y
3*=赋值x *= y
3%=赋值x %= y
3<<=赋值x <<= y
3>>=赋值x >>= y
3>>>=赋值x >>>= y
3&=赋值x &= y
3^=赋值x ^= y
3\=赋值x \= y
2yield暂停函数yield x
1,逗号7 , 8

赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符例子等同于
=x = yx = y
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y

加法赋值运算符(+=)向变量添加一个值。

+= 赋值运算符也可用于相加(级联)字符串:

txt1 = "Hello ";
txt1 += "Kitty!"; 

txt1 的结果将是:

Hello Kitty!

+ 运算符也可用于对字符串进行相加(concatenate,级联),即为将两个字符串按顺序相连在一起。

txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2; 

txt3 的结果将是:

Bill Gates

如果对数字和字符串相加,结果将是字符串!

但是JavaScript 从左向右计算表达式。不同的次序会产生不同的结果,并不是所有的数字和字符串相加都不会运算数字:

var x = 911 + 7 + "Porsche";

结果:

918Porsche

JavaScript 把 911 和 7 视作数值,直到遇见 "Porsche"。而当字符串在左边第一位时,后面的数字将不会运算:

var x = "Porsche" + 911 + 7;

结果:

Porsche9117

比较运算符

运算符描述
==等于
===等值等型
!=不相等
!==不等值或不等型
>大于
<小于
>=大于或等于
<=小于或等于
?三元运算符

逻辑运算符

运算符描述
&&逻辑与
\\逻辑或
!逻辑非

类型运算符

运算符描述
typeof返回变量的类型。
instanceof返回 true,如果对象是对象类型的实例。

位运算符

位运算符处理 32 位数。

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符描述例子等同于结果十进制
&5 & 10101 & 000100011
\5 \ 10101 \ 000101015
~~ 5~0101101010
^异或5 ^ 10101 ^ 000101004
<<零填充左位移5 << 10101 << 1101010
>>有符号右位移5 >> 10101 >> 100102
>>>零填充右位移5 >>> 10101 >>> 100102

上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。

因此,在 JavaScript 中,~ 5 不会返回 10,而是返回 -6。

~00000000000000000000000000000101 将返回 11111111111111111111111111111010

小结

  • JS可以使用算数运算符进行数学运算。
  • 运算符具有优先级。
  • 变量可以通过赋值运算赋值。
  • 浮点运算不精确!(浮点二进制可能会无限循环)

JavaScript 函数

JavaScript 函数是被设计为执行特定任务的代码块。
function myFunction(p1, p2) {
    return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(7, 8);

函数语法

JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。函数的命名与变量相同,可包含字母、数字、下划线和美元符号。

圆括号可包括由逗号分隔的参数:

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中:{}

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

函数调用

函数中的代码将在其他代码调用该函数时执行:

  • 当事件发生时(当用户点击按钮时)
  • 当 JavaScript 代码调用时
  • 自动的(自调用)

函数返回

当函数执行到达return语句时,函数将停止执行。如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者:

var x = myFunction(7, 8);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
    return a * b;
}

为何使用函数?

能够对代码进行复用,只需要定义一次代码,就可以多次使用。能够多次向同一函数传递不同的参数,以产生不同的结果。

例如使用函数调用来计算圆的面积:

<body>
    <p id="test">这是一个段落</p>
    <script>
        const pi = 3.14 
        var x = c(12)
        document.getElementById('test').innerHTML = x
        function c(r){
            return pi * r * r
        }
    </script>
</body>

() 运算符调用函数

上述,c引用的是函数对象,而c()引用的是函数结果。

如果直接访问没有带参数()的函数将返回函数的定义:

        const pi = 3.14 
        var x = c
        document.getElementById('test').innerHTML = x
        function c(r){
            return pi * r * r
        }

将返回:

function c(r){ return pi * r * r }

用作变量值的函数

函数的使用方法与变量一致,在所有类型的公式、赋值和计算中。

上述计算圆周率可以不声明函数x,直接访问c(12)也可以。效果与直接声明函数相同

document.getElementById('test').innerHTML = c(12)

局部变量

在函数内声明的变量将会变成局部变量,局部变量只能在函数内访问,在函数外无法访问。

    myFunction()
    function myFunction(){
        var a = ' xiaofeiyang';
        document.getElementById('demo1').innerHTML = typeof a + ',' + a
    }
    console.log(typeof a)
    document.getElementById('demo2').innerHTML = typeof a

由于局部变量只能被其函数识别,因此可以在不同函数中使用相同名称的变量。

局部变量在函数开始时创建,在函数完成时被删除。

小结

  • 函数是被设计为执行特定任务的代码块。
  • 函数调用:发生事件、代码调用、自动。
  • return会停止函数,并返回值。
  • 函数能够被反复调用,只需定义一次,就可以多次使用。
  • 不使用()调用将返回函数定义。
  • 函数可以直接做变量调用。
  • 函数内使用var声明的变量将是局部变量。

JavaScript 对象

JS的变量是数据值的容器,对象也是变量,但是对象包含很多的值

单一值赋值给car为变量:

var car = "porsche";

包含多个值同时赋值给car为对象:

var car = {type:"porsche", model:"911", color:"white"};

书写方法与声明变量类似,以名称:值对的方式来书写(名称和值由冒号分隔)。

JavaScript 对象是被命名值的容器。

对象属性

对象中的值被称为属性,属性中的赋值称为属性值:

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
属性属性值
firstNameBill
lastNameGates
age62
eyeColorblue

对象方法

对象也可以有方法。方法是在对象上执行的动作

方法是作为属性来存储的函数。

属性属性值
firstNameBill
lastNameGates
age62
eyeColorblue
fullNamefunction() {return this.firstName + " " + this.lastName;}
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

在函数定义中,this 引用该函数的“拥有者”。

在上述实例中,person对象中声明的函数fullName,在这个函数内使用this便可以获取到拥有函数的person对象内的属性。

对象定义

定义(创建)了一个 JavaScript 对象:

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

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

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

访问对象属性

访问对象内的属性有两种方式:

objectName.propertyName

或者

objectName["propertyName"]
// 创建对象:
var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       :  12345
};

// 显示对象中的数据:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
//或者使用
person["firstName"] + " " + person["lastName"];

访问对象方法

objectName.methodName()
// 创建对象:
var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       : 12345,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

// 显示对象中的数据:
document.getElementById("demo").innerHTML = person.fullName();

和访问对象属性类似,不过需要加上()。如果不使用()来访问,将返回对象方法函数定义:

function() { return this.firstName + " " + this.lastName; }

不要把字符串、数值和布尔值声明为对象

如果通过关键词 "new" 来声明 JavaScript 变量,则该变量会被创建为对象:

var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //    把 z 声明为 Boolean 对象

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

小结

  • 对象是包含多个赋值的变量。
  • 空行和折行都是允许的。
  • 对象中的值被称为属性,属性的赋值称为属性值。
  • 对象方法是在对象内作为属性存储的函数。
  • 不带()访问方法将返回函数定义
最后编辑于: 2019 年 10 月 12 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码