提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
目录
1.break和continue的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
break关键字可以用来退出switch或循环语句
* 不能再if语句中使用break和continue
* break关键字,会立即终止离他最近的循环语句
*
*
* */
/*for( var i = 0 ; i<5 ; i++)
{
console.log(i);//0-4
//break;//0
if(i==2){
break;//for到2就退出
//并且它是对for起的作用,而不是if
}
}*/
/*
可以为循环语句创建一个label(自定义的),来标识当前的循环(给循环语句起名)
* 语法
* label(自定义):循环语句
*
* 使用的break语句时,可以再break后面跟着一个label
* 这样break将会结束指定的循环,而不是(就)最近的
*
*
*/
/*
* 复习:是由于break一搬只对内层循环起作用,但是现在想让它对外层循环起作用
* 那么方法就是先给外层循环起名字,然后再在内部break outer;就可以了
*/
/*outer://给for循环起名
for ( var i=0 ; i<5 ; i++) {
console.log("@外层循环"+i);
for (var j = 0 ; j<5 ; j++) {
//break;//只对离它最近的循环产生影响,跳出循环
break outer;
console.log("内层循环"+j);
}
}*/
/*
continue 关键字可以用来跳过当次循环
* 同样continue也只默认只会对离它最近的循环产生影响
*
* 如果想要对远(外)层循环产生影响,那就起名,用名就好了
*
*
* */
//outer:想对外层循环产生影响就起名字
for (var i=0 ; i<5 ;i++) {
for(var j=0 ; j<5 ; j++){
if (i==2) {
continue;//跳出当次循环,其他还执行
//跳出内层循环的当次循环,其他的都没影响
//continue outer;
}
}
console.log(i);
}
</script>
</head>
<body>
</body>
</html>
2.质数的补充练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
1.性能的提升60s-10s(优化)
* 怎么办:
* 在程序执行前,开启计时器
* console.time("计时器的名字");可以用来开启一个计时器
* 他需要一个字符串作为参数,这个字符串将会作为计时器的标识
* 但是:有开始计时console.time,也有结束console.timeEnd计时,不能一直开着
*
* */
/*浏览器执行代码就可以看见*/
//开启计时器
console.time("test");
for ( var i = 2 ; i<=10000 ; i++) {
//document.write(i);
//外循环一个数字,内循环判断一次
//i2=2j,i3=2j,i4=2j3j
var flag=true;//为什么是放这里,假设;2-100的都为质数
for (var j = 2 ; j<=Math.sprt(i) ; j++) {//=也就是还得等于当前那个数=
if (i%j==0) {
flag=false;//不属于质数
//在比较的时候是不断的去2-i去余
//但是还可以更优化
//假设i=100,j=2,现在还余2-100之间的数
//但是其实100%2==0就可以得出该数不是质数了,不用再去比较前面的数了
//所以执行break退出就可以
break;
//不加break 269ms
//加break 32ms
//优化将近10倍
//优化j<=i的值
//也就优化了10倍
}
}
//循环输出所有的质数
if(flag){
//在测试性能的时候不用输出语句
//document.write(" "+i);
}
}
//终止计时器
//console.timeEnd("传谁放谁");用来停止一个计时器,需要一个计时器的名字作为参数
console.timeEnd("test");
/*
总结:开启计时器
console.time("test");
* 程序
* 终止计时器
* console.timeEnd("传谁放谁");test
*
*
*/
/*
联想到因子
优化i,因为i设置的过大,所以只能设置到开根号就不用再执行后面的数了,刚好到开根号
* 36
* 1 36
* 2 18
* 3 12
* 4 9
* 6 6
//中线原则
*
* 后面的对于36就不用就再乘了,因为得出得值比较大
* 7
* 8
* 9
* 10
* */
/*
可以Math.sprt();对一个数进行开根号
* */
</script>
</head>
<body>
</body>
</html>
3.对象的简介
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
- String 字符串
- Number 数值
- Boolean 布尔值
- Null 空值
- Undefined 未定义
- 以上这五种类型属于基本数据类型,以后我们看到的值
只要不是上边五种,全部都是对象
- Object 对象
*
*
* 基本数据类型都是单一的值:"hello" 123 true
* 值和值之间没有任何联系。
*
* 在JS中来表示一个人的信息(name gender age)
* var name = "孙悟空";
* var gender = "男" ;
* var age = 18;
* 如果使用基本数据类型的数据,那么我们所有的建的变量都是独立的,不能成为一个整体
*
* 将数据的都放在一个塑料袋里面,作为一个有联系的数据类型
* 对象属于一种复合的数据类型,在对象中可以保存多个不同的数据类型的属性(把不同类型的东西放到一个对象里,让他们有联系起来)
* 优势:如果是独立的话就得调用三次或者n次才能使用这几个数据; 但是如果有object,就可以把他们放到一起,调用一次就可以了
*
*
*
* 对象就是塑料袋(塑料袋里面放数据类型,明确说是放值)
*
* 对象的分类:
* 1.内建的对象
* - 由ES标准中定义的对象,在任何的ES的实现中都可以使用
* - 例如:Math String Number Boolean Function Object(就像是系统定义的你直接使用就可以)
*
* 2.宿主对象
* - 由JS的运行环境提供的对象,目前主要来讲是指浏览器提供的对象
* - 比如BOM(浏览器对象模型 一组) DOM(文档对象模型 一组)指的是两组对象,组里面又有很多对象
*
* 3.自定义对象
* - 由开发人员自己创建的对象
*
* */
/*
创建对象
*
* 使用new关键字(运算符)调用的函数,就是构造函数constructor
* 构造函数就是专门用来创建对象的函数
* 也就是说,使用构造函数来创建对象(调用对象函数)返回一个结果赋值给obj
* var obj = new Object();
* 使用typeof检查一个对象时,会返回object
*
* */
var obj = new Object();
/*向对象添加属性
在对象中保存的值称为属性
语法:对象属性 = 属性值
* */
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个age属性
obj.age= 18;
//直接使用一个obj就可以调出三个
//console.log(obj);
/*
读取对象中的属性
语法:对象.属性名
*
*
* 如果读取对象中没有的属性,那么不会报错,但是会得出一个未定义Undefined
* */
//console.log(obj.name);//显示孙悟空
//console.log(obj.hello);//显示Undefined
/*
修改对象中的属性
* 语法:对象.属性名=新的值(覆盖之前的值)
* */
obj.name = "tom";//孙悟空变为tom
/*
删除对象的属性,
语法:delect 对象.属性名
*
*
* */
delete obj.name;
/*
总结:对象像一个容器,用着方便(将一样的值放到不同的对象里面。方便使用)
1.新建对象 var obj = new Object();
2.添加对象 obj.name=值;obj.gender=值………………
3.读取对象 (全部console.log(obj))、单个console.log(obj.name);
4.修改对象 obj.name = 命重名;
5.删除对象 delete 对象.属性名
*
*
* */
</script>
</head>
<body>
</body>
</html>
4.属性名和属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var obj = new Object();
/*
向对象中添加属性
属性名:
* - 对象的属性名不强烈要求遵守标识符的规范
* - 什么乱七八糟的名字都可以使用,想用什么就用什么
* - 但是使用的时候还是尽量按照标识符的规范去做
*/
/*
方式一:
name属性名 = "孙悟空"属性值
* */
obj.name = "孙悟空";
//obj.var = "hello"; 可以用
/*
方式二:
乱七八糟的用法:(看完就忘就行)
如果要使用特殊的属性名,不能采用.的方式来使用操作
需要使用另一种方式:
语法:对象["属性名"] = 属性值
* 读取的时候也要采用这种方式 console.log(obj["123"]);
*
* 优势:
* 使用[]这一种形式去操作属性,更加的灵活
* 在[]中可以直接去传递一个变量,这样变量值是多少就会读取那个属性
*
*
* */
/*优势举例:*/
obj["123"] = 789;
obj["nihao"] = "你好";
var n = "123";//var n = "nihao";中间变量,是其变得灵活
console.log(obj[n]);//console.log(obj["123"]);
/*概括:就是说通过设置一个
* 变量n=指定属性名"123"=属性值 789,
* 输出变量n=“123” 找到该变量名n=“123”的对象名 “123”=789 就可以输出该对象名包含的值
* 总的来说是,方便传值使用obj["属性名"]=属性值; 灵活
*/
/*
属性值:
* JS对象的属性值,可以是任意的数据类型
* 甚至是一个对象(就是说塑料袋里再套一个塑料袋),可以无限套塑料袋
*
* 总结:也就是说,将别人的对象放到自己的对象当中去
* */
//创建一个对象
var obj2 = new Object();
obj2.name="猪八戒";
//套用: 把obj2一整个对象放在 obj对象的test属性名里面
obj.test = obj2;//obj2.name="猪八戒";
console.log(obj.test.name);//层层套用,输出猪八戒
/*
in 运算符
- 通过该运算符可以检查一个对象中是否含有指定的属性
如果有则返回true,没有返回false
- 语法:
"属性名" in 对象
*/
//检查obj中是否含有test2属性
//console.log("test2" in obj); 显示false
console.log("test" in obj);//显示true
</script>
</head>
<body>
</body>
</html>
5.基本数据类型和引用数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
基本数据类型
* String
* Number
* Boolean
* Null
* Undefined
* 引用数据类型
* Object
*
*
通过栈和堆来观察数据类型的变化
* JS中的变量都是保存到栈内存当中的
* 基本数据类型的值直接在栈内存中存储
* 值与值之间具独立独立存在,修改一个变量不会影响其他的值
*
*
* 引用数据类型(对象)是保存到堆内存当中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间
* 而变量保存的是对象内存地址(对象的引用).如果两个变量保存的是同一个对象引用
* 当一个通过一个变量修改属性值的时候,另一个也会受到影响
*
*
*/
/*举例1:先说明他们的区别(基本数据类型和引用数据类型)*/
var a = 123;
var b = a;
a++;
//console.log("a="+a); a=124
//console.log("b="+b); b=123
//他们的值是相互独立的,互不影响的
//1.
var obj = new Object();
obj.name = "父亲";//父
var obj2 = obj;
//3.修改obj的name属性
obj.name = "孩子";//子,覆盖之前的了
console.log(obj.name);
console.log(obj2.name);
//2.两个显示为父亲
//3.此时两个显示为孩子
/*举例2
obj2 = null;
console.log(obj.name);//显示的是原来的地址
console.log(obj2.name);//显示null
*/
/*
举例3:
var c = 10 ;
var d = 10 ;
//console.log(c==d); 显示true
原因:真值比较
*/
/*举例4:
var obj3 = new Object();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";
console.log(obj3==obj4); 显示的是false
原因:地址比较,都是堆内单独的两块动态内存空间(由构造函数new分配)
说地址不一样,结果为false
* */
//基本数据类型和引用数据类型的区别:
/*
总结:当两个比较基本的数据类型的值的时候,就是比较值
而两个比较两个引用数据类型的时候,它是比较的对象的内存地址
* 如果两个对象是一模一样,但是地址不同,返回的还是false
*
*
* (新的概念:指针指向:栈指向堆)
* */
/*
通过栈和堆来观察数据类型的变化
*
*
* */
</script>
</head>
<body>
</body>
</html>
6.对象字面量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
第一种方式创建:
创建一个对象
var obj = new Object();
*/
/*
第二种方式创建:
使用字面量来创建一个对象
*/
/*var obj = {};
//console.log(typeof obj);
obj.name = "孙悟空";
console.log(obj.name);*/
/*
第三种方式创建:
使用字面量来创建一个对象并且直接在大括号中指定对象和赋值
语法:var obj ={属性名:属性值,属性名:属性值,………………};
而且属性名可以加引号“name”:“猪八戒”,可以不加
只是如果你想起特殊的名字,就得加上引号
属性名和属性值时一组一组的名值对结构(键值对)
名和值之间使用:连接,多个名值之间使用逗号隔开
如果一个属性之后没有其他的属性了,就不要写逗号了,
*/
/*举例:*/
//var obj ={name:"孙悟空",gender:"男",age:"女"};
//清楚一些
/*var obj ={
name:"孙悟空",
gender:"男",
age:"23".
};*/
/*举例:嵌套的*/
/*var obj ={
name:"孙悟空",
gender:"男",
age:"25",
test:{name:"沙和尚"}//test为属性=属性值name=沙和尚
//这里不存在嵌套
};*/
</script>
</head>
<body>
</body>
</html>
7.函数(待写)
8.函数的返回值类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
函数的返回值return类型
*
*
*
*/
/*先来一个三种的比较*/
function fun(){
alert("函数要执行了~~~~");
for(var i=0 ; i<5 ; i++){
if(i==2){
//使用break可以退出当前的循环,但是还是执行后面的语句
//break;//显示0 1 2 程序以及执行完了,后面3和4不执行
//continue用于跳过当次循环 但是还是执行后面的语句
//continue;//显示0 1 3 4 程序以及执行完了
//return 可以退出整个函数
//return;//显示0 1 当i=2的时候退出整个循环
}
console.log(i);
}
alert("程序以及执行完了");
}
//调用
//fun();
/*返回值可以是任意的数据类型
也可以是一个对象object , 也可以是一个函数
*
*
* */
function fun2(){
//return null;//10 "hello" true null
/*var obj = {
name:"沙和尚"
};
return obj;*/
//直接简写:同上
return {name:"沙和尚"};
}
//var a = fun2();
//console.log("a= "+a); 显示a=[object object]
//console.log("a= "+a.name);//显示沙和尚
//函数的嵌套
/*function fun3(){
//在函数内部再声明一个函数
function fun4(){
alert("我是fun4");
}
fun4();
}
fun3();*/
//上下两种一样
function fun3(){
//在函数内部再声明一个函数
function fun4(){
alert("我是fun4");
}
return fun4;//将fun4作为值 返回到fun3函数里,也就是通过fun3调出fun4
}
a = fun3();//显示 fun4()
console.log(a);
//a();显示alert("我是fun4");
//fun3()();显示alert("我是fun4");
</script>
</head>
<body>
</body>
</html>
9.立即执行函数(llFE)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 立即执行函数:
* 函数定义完,立即被调用,这种函数叫做立即执行函数
* 立即执行函数往往只会执行一次
*/
/*(function(){
alert("我是一个匿名函数~~~");
})();*/
//把它变为一个整体整个加上()
/*
举例二:我们不调用,浏览器自己调用
* */
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);
//输出123,456 可以直接传值
</script>
</head>
<body>
</body>
</html>
10.对象(方法)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
第一种方式:
*/
/*
调用方法 :先创建一个对象
*/
var obj = new Object();
//向对象中添加属性
obj.name="孙悟空";
obj.age=18;
obj.gender="男";
//对象的属性值可以是任何的数据类型,也可以是一个函数
obj.sayName = function(){
console.log("name= "+obj.name);//等于对象中的一个值
}
obj.sayName();//显示=孙悟空
/*
说明:
函数也可以称为对象的属性(sayName)
如果一个函数作为一个对象的属性来保存
* 那么我们称为这个函数时就叫做这个对象的方法
* 调用这个函数就说调用对象的方法(method) obj.sayName();
*/
/*个人解读;
* 就是一个对象里面有一个属性的属性值是一个函数,
* 那么当调用这个属性值的时候就是使用了函数
* 我们把这种调用函数被赋值给一个属性加方法的调用
* obj.sayName();
* 注意:直接调用函数名才算是调用函数,而通过对象赋值函数,调用被赋值函数的叫调用方法
* */
/*调用函数:*/
function fun(){
console.log("name= "+obj.name);
}
fun();
/*
第二种方法调用:
*
* */
var obj2={
name:"猪八戒",
age:18;
sayAge:function(){
console.log(obj2.Age);
}
};//不要忘了加分号
//调用方法
obj2.sayAge();
</script>
</head>
<body>
</body>
</html>
11.枚举类型对象中的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
*
*/
var obj = {
name:"孙悟空",
age:18,
gender:"男",
address:"花果山"
};
/*就是说,我不知道obj里面有哪些属性,
* 我需要知道一些属性,
* 我就可以使用枚举
* */
//枚举对象中的属性
//使用for..... in 语句
/*
语法:
* for(var 变量 in 对象){
*
* }
* for...in 语句中的 对象有几个属性,循环体就会执行几次
*
* n:name +n ————>取到属性名
* obj:对象名 +obj[n] ————>取到属性值
* */
for(var n in obj){
//console.log("hello");//此时显示4次
console.log("属性名:" +n);
console.log("属性值:" +obj[n]);//因为[n]可以传值 而obj.name不可以,它只能调用,不能传
}
/*复习
* 枚举:一一列举出对象的的属性还有属性值
*
*
* */
</script>
</head>
<body>
</body>
</html>
总结
加油,努力,奋斗