javaScript笔记1

187 阅读6分钟

1.0 变量

如果一个变量在函数外声明,这就是全局变量
如果在函数内部声明,它就是局部变量

如果把要给数值放入引号中,其余数值会被视作字符串并被级联:

var x = 3 + 5 + "8";

从左往右运算,结果为88

2.0 运算符

2.1 算数运算符

Snipaste_2021-04-13_20-35-50.png

2.2 赋值运算符

Snipaste_2021-04-13_20-36-13.png

2.3 比较运算符

Snipaste_2021-04-13_20-38-37.png

2.4 逻辑运算符

Snipaste_2021-04-13_20-38-57.png

2.5 类型运算符(用于检测)

Snipaste_2021-04-13_20-39-58.png

3.0 数据类型

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

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

字符串值:用单双引号包含.
数值:数字1 2 3整数或小数
布尔值:true(正确) 或 false(错误)
数组用方括号书写 [ ]
对象用花括号来书写 { }

Undefined 在 JavaScript 中,没有值的变量,其值是 undefined。typeof 也返回 undefined。

Null 在 JavaScript 中,null 是 "nothing"。它被看做不存在的事物。
不幸的是,在 JavaScript 中,null 的数据类型是对象。

Undefined 与 Null 的区别 Undefined 与 null 的值相等,但类型不相等:

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

4.0 函数

function toCelsius(fahrenheit) {//声明  函数名  参数
    return (5/9) * (fahrenheit-32);//要执行的代码
}

document.getElementById("demo").innerHTML = toCelsius(77);//调用传参

Snipaste_2021-04-19_14-46-28.png

Snipaste_2021-04-19_14-54-35.png

5.0 对象Object

对象有属性和方法
值以名称:值对的方式来书写(名称和值由冒号分隔)。
JavaScript 对象是被命名值的容器。
(JavaScript 对象中的)名称:值对被称为属性。

var person(名称) = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}(属性);

5.1 访问对象属性的两种方式

objectName.propertyName
objectName["propertyName"]

为对象添加属性

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象构造器</h1>

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

<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");
var myBrother = new Person("Steve", "Jobs", 56, "green");

// 为第一个对象添加国籍
myFriend.nationality = "English";

// 显示国籍
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.nationality; 
</script>

</body>
</html>

5.2 访问对象方法

您通常会把 fullName() 描述为 person 对象的方法,把 fullName 描述为属性。

fullName 属性在被通过 () 调用后会以函数形式执行。

此例访问 person 对象的 fullName() 方法:

name = person.fullName();

如果您访问 fullName 属性时没有使用 (),则将返回函数定义:

name = person.fullName;

添加新方法

function person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}

changeName() 函数 name 的值赋给了 person 的 lastName 属性。

myMother.changeName("Jobs");

5.3 使用对象字面量(这是创建对象最简答的方法)

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

5.4 for...in循环

JavaScript for...in 语句遍历对象的属性。

语法

for (variable in object) {
    要执行的代码
}

for...in 循环中的代码块会为每个属性执行一次。

循环对象的属性:

var person = {fname:"Bill", lname:"Gates", age:62}; 

for (x in person) {
    txt += person[x];
}

结果:Bill Gates 62

5.5 this 关键词

在 JavaScript 中,被称为 this 的事物,指的是拥有该 JavaScript 代码的对象。

this 的值,在函数中使用时,是“拥有”该函数的对象。

请注意 this 并非变量。它是关键词。您无法改变 this 的值。

function person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}

5.6 添加删除属性

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象属性</h1>

<p>您可以向现有对象添加新属性。</p>

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

<script>
var person = {
  firstname:"Bill",
  lastname:"Gates",
  age:62,
  eyecolor:"blue"
};

person.nationality = "English";//赋值的方式增加新属性
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>

</body>
</html>

delete 关键词从对象中删除属性:
delete 关键词不会删除被继承的属性,但是如果您删除了某个原型属性,则将影响到所有从原型继承的对象。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象属性</h1>

<p>您可以删除对象属性。</p>

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

<script>
var person = {
  firstname:"Bill",
  lastname:"Gates",
  age:62,
  eyecolor:"blue"
};

delete person.age;//delete 关键词从对象中删除属性:
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

5.7对象访问器(Getter和SEtter)

ECMAScript 5 (2009) 引入了 Getter 和 Setter。

Getter 和 Setter 允许您定义对象访问器(被计算的属性)。 本例使用 lang 属性来获取 language 属性的值。

JavaScript Getter(get 关键词)

本例使用 lang 属性来获取 language 属性的值。

// 创建对象:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};

// 使用 getter 来显示来自对象的数据:
document.getElementById("demo").innerHTML = person.lang;

JavaScript Setter(set 关键词)
本例使用 lang 属性来设置 language 属性的值。

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// 使用 setter 来设置对象属性:
person.lang = "en";

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

对象实例

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象</h1>

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

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

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

document.getElementById("demo").innerHTML =
"My friend is " + myFriend.age + ". My brother is " + myBrother.age; 
</script>

</body>
</html>

5.8 原型继承

所有 JavaScript 对象都从原型继承属性和方法。

日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。

Object.prototype 位于原型继承链的顶端:

日期对象、数组对象和 Person 对象都继承自 Object.prototype。

5.9 使用 prototype 属性

JavaScript prototype 属性允许您为对象构造器添加新属性:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

JavaScript prototype 属性也允许您为对象构造器添加新方法:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

6.0 HTML事件

onclick 属性

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是?</button>

7.0 字符串方法

JavaScript 从零计算位置。

7.1 length 属性返回字符串的长度

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ(26个英文字母)";
var sln = txt.length;

结果为26

7.2 查找字符串中的字符串

indexOf() 方法返回字符串中指定文本首次出现的索引(位置):

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");

结果为17

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引:

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");

结果为51

两种方法都接受作为检索起始位置的第二个参数。

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);

从索引位置18,从前往后数,到字符串的终点,结果为51

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);

从索引位置50,从后往前数,到字符串的终点,结果为17

8.0 数字方法

toString( ) 以字符串返回数值
toExponential( ) 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。
toFixed( ) 返回字符串值,它包含了指定位数小数的数字:toFixed(2) 非常适合处理金钱。
toPrecision( ) 返回字符串值,它包含了指定长度的数字: valueOf( ) 以数值返回数值: 这三种 JavaScript 方法可用于将变量转换为数字:

Number( ) 方法 parseInt( ) 方法 parseFloat( ) 方法

Snipaste_2021-04-14_14-40-49.png

数字属性不可用于变量 数字属性属于名为 number 的 JavaScript 数字对象包装器。

这些属性只能作为 Number.MAX_VALUE 访问。

使用 myNumber.MAX_VALUE,其中 myNumber 是变量、表达式或值,将返回 undefined:

var x = 6;
var y = x.MAX_VALUE;    // y 成为 undefined

9.0 数组方法

JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

结果为Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString(),但是您还可以规定分隔符:

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

结果为Banana * Orange * Apple * Mango

10 数组排序

sort() 方法以字母顺序对数组进行排序:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();  

结果为 Apple,Banana,Mango,Orange

reverse() 方法反转数组中的元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse(); 

结果为Orange,Mango,Banana,Apple