js For In
- for in 循环遍历 person 对象
- 每次迭代返回一个键 (x)
- 键用于访问键的值
- 键的值为 person[x]
如果索引顺序很重要,请不要在数组上使用 for in。
索引顺序依赖于实现,可能不会按照您期望的顺序访问数组值。
当顺序很重要时,最好使用 for 循环、for of 循环或 Array.forEach()
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For In</h2>
<p>for in 语句可以遍历数组值:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
for (let x in numbers) {
txt += numbers[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
js array.for Each()
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>为每个数组元素调用一次函数。</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
//forEach 循环 myFunction数据
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + "<br>";
}
</script>
</body>
</html>
js For Of 循环
JavaScript for of
语句循环遍历可迭代对象的值。
它允许您循环遍历可迭代的数据结构,例如数组、字符串、映射、节点列表等:
遍历数组
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Of 循环</h2>
<p>for of 语句循环遍历任何可迭代对象的值:</p>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
遍历字符串
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Of 循环</h2>
<p>for of 语句循环遍历可迭代对象的值。</p>
<p id="demo"></p>
<script>
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
js Break 和 Continue
break
语句“跳出”循环。
continue
语句“跳过”循环中的一个迭代。在本教程稍早的章节中,您已见到了
break
语句。它被用于“跳出”switch
语句。break 语句也可用于跳出循环。
break 语句
会中断循环,并继续执行循环之后的代码(如果有):
continue
语句(不论有无标签引用)只能用于跳过一个迭代。
break
语句,如果没有标签引用,只能用于跳出一个循环或一个 switch。如果有标签引用,则
break
语句可用于跳出任意代码块:
Break 语句
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript break</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "porsche", "Ford"];
var text = "";
list: {
text += cars[0] + "<br>";
text += cars[1] + "<br>";
break list;
text += cars[2] + "<br>";
text += cars[3] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
continue
<!DOCTYPE html>
<html>
<body>
<p>这个循环在 i=3 时跳过这一步:</p>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "数字是 " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
js typeof
在 JavaScript 中有 5 种不同的可以包含值的数据类型:
string
number
boolean
object
function
有 6 种类型的对象:
Object
Date
Array
String
Number
Boolean
以及 2 种不能包含值的数据类型:
null
undefined
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 运算符</h1>
<h2>typeof 运算符</h2>
<p>typeof 操作符返回变量、对象、函数或表达式的类型:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"'Bill' 是 " + typeof "Bill" + "<br>" +
"3.14 是 " + typeof 3.14 + "<br>" +
"NaN 是 " + typeof NaN + "<br>" +
"false 是 " + typeof false + "<br>" +
"[1, 2, 3, 4] 是 " + typeof [1, 2, 3, 4] + "<br>" +
"{name:'Bill', age:19} 是 " + typeof {name:'Bill', age:19} + "<br>" +
"new Date() 是 " + typeof new Date() + "<br>" +
"function () {} 是 " + typeof function () {} + "<br>" +
"myCar 是 " + typeof myCar + "<br>" +
"null 是 " + typeof null;
</script>
</body>
</html>
js 正则表达式
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串方法</h2>
<p>请把下面的段落中的“Microsoft”替换为“W3School”:</p>
<button onclick="myFunction()">试一试</button>
<p id="demo">请访问 Microsoft!</p>
<h2>======================</h2>
<h2>JavaScript 正则表达式</h2>
<p>检索下面段落中的一个 "e":</p>
<p id="p01">The best things in life are free!</p>
<p id="demo1"></p>
<script>
//初始数据定义在里边和外边 都可以
//var str = document.getElementById("demo").innerHTML;
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","W3School");
document.getElementById("demo").innerHTML = txt;
}
//<h2>======================</h2>
text = document.getElementById("p01").innerHTML;
//整的表达式 搜索text 里边的 e 有 返回true
document.getElementById("demo1").innerHTML = /e/.test(text);
</script>
</body>
</html>
js 错误 - Throw 和 Try to Catch
try
语句使您能够测试代码块中的错误。
catch
语句允许您处理错误。
throw
语句允许您创建自定义错误。
finally
使您能够执行代码,在 try 和 catch 之后,无论结果如何。
<!DOCTYPE html>
<html>
<body>
<p>请输入 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">检测输入</button>
<p id="p01"></p>
<script>
function myFunction() {
// 另一种写法 var message , x ;
var x;
var message;
//渲染 p01数据 就是返回的输入值
message = document.getElementById("p01");
message.innerHTML = "";
//输入框的字 进行大小比较
// x是你输入框的值
x = document.getElementById("demo").value;
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "输入:" + err;
}
finally {
document.getElementById("demo").value = "";
}
}
</script>
</body>
</html>
js 作用域
全局作用域
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 全局作用域</h1>
<p>可以从任何脚本或函数中访问全局变量。</p>
<p id="demo"></p>
<script>
var carName = "porsche";
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML =
"I can display " + carName;
}
</script>
</body>
</html>
局部作用域
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 局部作用域</h1>
<p>myFunction() 之外的 carName 未定义。</p>
<button type="button" onclick="myFunction()">检测输入</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
// 如果我在这不想使用点击按钮 也可以初始值
//myFunction()
function myFunction() {
var carName = "porsche";
document.getElementById("demo1").innerHTML =
typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML =
typeof carName;
</script>
</body>
</html>
js Hoisting
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
================
<p id="demo1"></p>
<script>
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var x1 = 5; // 初始化 x
var y1; // 声明 y
elem = document.getElementById("demo1"); // 查找元素
elem.innerHTML = x1 + " " + y1; // 显示 x 和 y
// y1 没有提前声明 所以 undefined
y1 = 7; // Assign 7 to y
</script>
</body>
</html>
js this指向问题
this 是什么?
JavaScript
this
关键词指的是它所属的对象。它拥有不同的值,具体取决于它的使用位置:
- 在方法中,
this
指的是所有者对象。- 单独的情况下,
this
指的是全局对象。- 在函数中,
this
指的是全局对象。- 在函数中,严格模式下,
this
是 undefined。- 在事件中,
this
指的是接收事件的元素。像
call()
和apply()
这样的方法可以将 this 引用到任何对象。---------------------------------------------------------------------------------------------------------
显式函数绑定
call()
和apply()
方法是预定义的 JavaScript 方法。它们都可以用于将另一个对象作为参数调用对象方法。
您可以在本教程后面阅读有关
call()
和apply()
的更多内容。在下面的例子中,当使用 person2 作为参数调用 person1.fullName 时,
this
将引用 person2,即使它是 person1 的方法
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript <b>this</b> 关键词</h1>
<p>在本例中,<strong>this</strong> 引用 person2,即使它是 person1 的方法:</p>
<p id="demo"></p>
===========
<p id="demo1"></p>
<script>
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"Bill",
lastName: "Gates",
}
var x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
//-------------------------------------
// 创建对象:
var person11 = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.id;
}
};
// 显示来自对象的数据:
document.getElementById("demo1").innerHTML = person11.fullName();
</script>
</body>
</html>
js 类
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 类</h1>
<p>如何使用 JavaScript 类。</p>
<p id="demo"></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
myCar.name + " " + myCar.year;
</script>
</body>
</html>
js 调试
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo"></p>
<p>打开调试器后,下面的代码应该在执行第三行之前停止执行。</p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>