1.自动隐式类型转换tip
a.toString()
String(a)
Number(a)
为一个值-0 *1 /1 将其转换成Number
+0不行,容易遇到字符串
var d = “123”;
d = d-0;
console.log(typeof d);
console.log(d);
结果:
“number”
“123”
2. a++, ++a
var a = 1;
a++;
++a;//都会使原变量的值立即加一,但是表达式的值不同
var a = 1;
console.log(a++);//1
console.log(a);//2
console.log(++a);//3
console.log(a);//3
3.可以任意类型值取两次!!,就可以转换为Boolean类型。原理和Boolean()函数一样
4. prompt
用户输入的内容作为返回值返回,返回值是string
var score = prompt("请输入小明的期末成绩:");
如果希望返回值转换类型为number则
用运算符+,写成+prompt();
<script type = "text/javascript">
var num1 = +prompt("请输入第一个数:");
var num2 = +prompt("请输入第二个数:");
var num3 = +prompt("请输入第三个数:");
alert(typeof num1);//number
</script>
实现功能:非法输入则重复弹出输入框,否则结束
while(true){
var score = prompt("请输入小明的期末成绩:")
if(score>=0 && score<=100)
break;
}
5.非法输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var score = prompt("请输入小明的期末成绩:");
if(score > 100 || score < 0 || isNaN(score)){
alert("拉出去!!!");
}else {
if(score==100)
console.log("奖励一辆BMW");
else if(score>=80&&score<100)
console.log("奖励一台iphone15s");
else if(score>=60&&score<80)
console.log("奖励一本参考书");
else{
console.log("什么奖励也没有");
}
}
</script>
</head>
<body>
</body>
</html>
6.在浏览器页面中换行
document.write(1+"<br />");
document.write(2+"<br />");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
for(var i=1;i<=10;i++){
for(var j=0;j<i;j++){
document.write("*");
}
document.write("<br />");
}
</script>
</head>
<body>
</body>
</html>
显示结果:
7.for循环里巧用标签 r如 outer: break跳出当前循环,continue跳出当次循环
<script type="text/javascript">
for(var i = 0;i<5;i++){
if(i==2) {continue};
console.log(i);
}
</script>
<script type="text/javascript">
outer:
for(var i = 0;i<5;i++){
console.log("@外层循环"+i);
for(var j = 0; j<5;j++){
break outer;
console.log("@内层循环:"+js);
}
}
</script>
控制台输出:
8.对象分类
-内建(ES标准中定义的、Math\String、Number\Function\Object)、宿主(由JS运行环境提供的,document\console)、自定义
9.堆内存、栈内存
基本数据类型的值直接在栈内存中存储,值与值之间是独立存在。修改一个变量不会影响其它变量。
对象是保存在堆内存中的,每创建一个新的对象,就会在内存中开辟出一个新的空间,变量存储在栈内存中,变量保存的是对象的内存地址(即对象的引用),相当于一个指针。
修改obj对象属性,也会影响obj2对象的属性值
当obj2 =null时,情况如下
console.log(obj3==obj4)//false
原因如下:
当比较两个基本数据类型的值时,就是比较值,
而比较两个引用数据类型的时候,他是比较对象的内存地址,
如果两个对象的内容一模一样,但地址不同,会返回false
10. this
1.函数方式调用this,this是window
2.方法方式调用this,谁调用方法this就是谁
3.当以构造函数形式调用时,this就是新创建的那个对象
<script type= "text/javascript">
var name = "全局";
function fun(){
console.log(this.name);//this,当前执行环境
console.log(name);//始终使用全局变量“全局”
}
//创建两对象
var obj={
name:"孙悟空",
sayName:fun
}
var obj2={
name:"沙和尚",
sayName:fun
}
obj2.sayName();
</script>
11.垃圾回收(GC)
将不再使用的对象设置为null
12.创建对象
1.Object()
2.对象字面量
3.工厂模式创建对象
不用重复代码,
使用工厂模式创建的对象使用的构造函数都是Object(),所以创建的对象都是object类型,导致无法区分多种类型的对象
<script type="text/javascript">
function createPerson(name, age, gender){
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
//将新的对象返回
return obj;
}
var obj2 = createPerson("猪八戒",28,"男");
console.log(obj2);
</script>
4.构造函数创建对象
缺点:每个方法都要在每个实例上重新创建一遍,如果方法的数量很多,就会占用很多不必要的内存。于是出现了第五种创建对象的方法
构造函数的执行流程:
1.立即创建一个新的对象
2.将创建的对象设置为函数中的this
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
<script type="text/javascript">
/*
创建一个构造函数,专门用来创建person对象的
构造函数就是一个普通的函数,闯进啊方式和普通函数没有区别
不同的是构造函数首字母大写
普通函数是直接调用,构造函数需要使用new关键字来调用
构造函数的执行流程:
1.立即创建一个新的对象
2.将创建的对象设置为函数中的this
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类
构造函数创建的对象称为该类的实例
*/
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
function Dog(){
}
var per = new Person("sunwukong",18,"男");
var per2 = new Person("猪八戒",18,"男");
var dog = new Dog();
console.log(per);
console.log(per2);
console.log(dog);
/*
使用instanceof可以检查一个对象是否是一个类的实例
*/
console.log(per instanceof Person)
console.log(dog instanceof Dog)
console.log(dog instanceof Person)
/*
所有的对象都是Object对象
*/
console.log(per instanceof Object)
console.log(dog instanceof Object)
</script>
结果:
5.构造函数的修改
不共享方法验证:
<script type= "text/javascript">
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert("Hello,我是"+this.name);
};
}
var per = new Person("孙悟空", 17, "男");
var per2 = new Person("白骨精", 22, "女");
console.log(per.sayName == per2.sayName);//结果为false
</script>
将sayName方法在全局作用域中定义
这样sayName函数自始至终只有一个
<script type= "text/javascript">
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
//向对象中添加一个方法
this.sayName = fun;
}
//将sayaName方法在全局作用域中定义
function fun(){
alert("Hello,我是"+this.name);
}
var per = new Person("孙悟空", 17, "男");
var per2 = new Person("白骨精", 22, "女");
console.log(per.sayName == per2.sayName);//结果为true
</script>
还存在一个问题:
将函数定义在全局作用域,污染了全局作用域的命名空间;而且定义在全局作用域中也很不安全,容易被同名函数覆盖。
引入原型,方法6
6.原型+构造函数
<script type= "text/javascript">
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
//将sayaName方法在全局作用域中定义
/*
将函数定义在全局作用域,污染了全局作用域的命名空间
而且定义在全局作用域中也很不安全,容易被同名函数覆盖
引入原型
*/
Person.prototype.sayName = function(){
alert("Hello,我是"+this.name);
};
var per = new Person("孙悟空", 17, "男");
var per2 = new Person("白骨精", 22, "女");
per.sayName();
per2.sayName();
</script>
所以以后在创建构造函数的时,可以将对象共有的属性和方法,统一添加到构造函数的原型对象中,这样不用为每一个对象添加,也不会影响到全局作用域,就可以使每个对象共享这些属性和方法。
13.原型对象
原型对象相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象。
作用:可以将对象中共有的内容统一设置到原型对象中
<script type = "text/javascript">
function MyClass(){
}
var mc = new MyClass();
var mc2 = new MyClass();
var mc3 = new MyClass();
console.log(mc.__proto__ == MyClass.prototype);//true
console.log(mc.__proto__ == mc2.__proto__);//true
</script>
给原型对象添加属性a
MyClass.prototype.a = "123";
原型链
<script type = "text/javascript">
function MyClass(){
}
MyClass.prototype.a = "123";
var mc = new MyClass();
mc.a = "我是mc中的a";
var mc2 = new MyClass();
var mc3 = new MyClass();
console.log(mc.a);//先在属性中找,找不到去原型里找
console.log(mc2.a);//true
</script>
居中
1.使用margin:0 auto;水平居中
.container {
display: block;
max-width: 1080px;
margin: 0 auto;
}
.clear-float: after,
.clear-float: before{
content = " ";
display: block;
clear: both;
}
.col-1,
.col-2 {
display: block;
float: left;
position: relative;
min-height: 1px;
}