JavaScript学习第1天:浏览器组成、JS的组成、变量、数据类型转化、运算符、流程控制、数组、函数

一、浏览器的组成

浏览器分成两部分:渲染引擎JS 引擎
渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink
JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。 JavaScript 语言归为脚本语言。

二、JS的组成

JavaScript由ECMAScript(JavaScript语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)组成。

ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

三、变量

变量是程序在内存中申请的一块用来存放数据的空间。

1、同时声明多个变量

同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。

var age = 10, name = 'zs', sex = 2;

2、声明变量特殊情况

情况说明结果
var age;console.log(age);只声明不赋值undefined
console.log(age);不声明不赋值,直接使用报错
age=10,console.log(age);不声明只赋值10

四、数据类型

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。

1、数据类型分类

JS 把数据类型分为两类:
① 简单数据类型 (Number,String,Boolean,Undefined,Null)
② 复杂数据类型 (object)

2、 isNaN()方法

isNaN()方法用来判断一个变量是否为非数字的类型,返回 true 或者 false

3、字符串转义符

转义符说明
\n换行符
\斜杠\
\’‘ 单引号
""双引号
\ttab缩进
\b空格

4、字符串拼接

多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

经常会将字符串和变量来拼接,变量是不能添加引号的,因为加引号的变量会变成字符串,如果变量两侧都有字符串拼接,口诀“引引加加 ”,删掉数字,变量写加中间

5、特殊拼接

布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

五、数据类型转换

可以使用 typeof 获取变量的数据类型

1、转化为字符串

方式说明举例
toString()转换成字符串var num=1; alert(num.toString())
String转换成字符串var num=1; alert(String(num))
加号拼接字符串和字符串拼接的结果都是字符串var num=1; alert(num+‘你好’)

2、转化为数字型

方式说明举例
parseInt(string)转化为整数parseInt(‘89’)
parseFloat(string)转化为浮点数parseFloat(‘89.98’)
Number()强制转化转化为数字Number(‘89’)
js隐式转换(- * /)利用算术运算隐式转换为数值型‘12’- 0

3、转化为布尔值

方式说明举例
(Boolean()转化为布尔型(Boolean(‘true’)

代表空、否定的值会被转换为 false ,如 ''、0、NaN、null、undefined ,其余值都会被转换为 true

六、运算符

不要直接判断两个浮点数是否相等

var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001

1、递增和递减运算符

递增(++)和递减( – )分为前置递增(递减)运算符和后置递增(递减)运算符,递增和递减运算符必须和变量配合使用

前置递增:先自加,后运算
后置递增:先原值运算,后自加

区别:单独使用时,运行结果相同, 与其他代码联用时,执行结果会不同, 开发时,大多使用后置递增/减,并且代码独占一行,例如:num++; 或者 num–;

var num = 10;
alert(++num + 10); // 21
alert(10 + num++); // 20

var a = 10;
++a;      // ++a=11,a=11
var b = ++a + 2;     // ++a=12
console.log(b); // 结果:

var c = 10;
c++;      // c++=11,c=11,
var d = c++ + 2;  // c++=11,c=12
console.log(d); // 结果:13

var e = 10;
var f = e++ + ++e;  // e++=10,e=11,++e=12
console.log(f); // 结果:23

2、逻辑运算符

《1》布尔值参与的逻辑运算符
&&:两边都是 true才返回 true,否则返回 false,
||:两边都为 false 才返回 false,否则都为true

var num = 7;
var str = "我爱你~中国~";  //length = 7 
console.log(num > 5 && str.length >= num); // true
console.log(num < 5 || str.length >= num); // true

《2》短路运算(逻辑中断)
当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
&&:如果第一个表达式的值为真,则返回表达式2; 如果第一个表达式的值为假,则返回表达式1
II: 如果第一个表达式的值为真,则返回表达式1;如果第一个表达式的值为假,则返回表达式2

七、流程控制

1、while循环

while 语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。

while (条件表达式) {
	// 循环体代码
}

使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环

2、do…while循环

do… while 语句先执行一次循环体,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。

do {
	// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

3、continue break关键字

continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。
break 关键字用于立即跳出整个循环(循环结束)。

八、数组

数组中可以存放任意类型的数据

九、函数

函数:就是封装了一段可被重复调用执行的代码块。在JavaScript中,形参的默认值是undefined

1、函数的返回值

参数个数说明
实参 等于 形参输出正确结果
实参 大于 形参只取到形参的个数
实参 小于 形参多的形参定义为undefined,结果为NaN

2、函数的返回值return

通过 return 语句实现函数将值返回给调用者
在使用 return 语句时,函数会停止执行,并返回指定的值,如果函数没有 return ,返回的值是 undefined
return 只能返回一个值。如果用逗号隔开多个值,以最后一个为准。

3、arguments

不确定要传递多少个参数时,可以使用argument来获取,arguments 实际上是当前函数的一个内置对象
arguments展示形式是一个伪数组,因此可以进行遍历。特点:① 具有 length属性 ②按索引方式储存数据 ③不具有数组的 push , pop 等方法

// 利用函数求最大值
function maxValue() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
}
console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));

4、函数的两种声明方式

《1》自定义函数(命名函数)
调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面

// 声明定义方式
function fn() {...}
// 调用 
fn();

《2》函数表达式(匿名函数)
函数调用的代码必须写到函数体后面

// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...}// 调用的方式,函数调用必须写到函数体下面
fn();

5、函数的作用域

JS(es6前)中的作用域有两种: 全局作用域((整个 script 标签内部)和局部作用域(函数作用域)
ES6之前,JS没有块级作用域,块级作用域由{}包括
在JS中,根据作用域的不同,变量可分为:全局变量(在函数外声明)和局部变量(函数内声明)
局部变量只能在该函数内部使用

作用域链:采取就近原则的方式来查找变量最终的值。

十、预解析

JS解析器在运行JS代码的时候分为两步:预解析代码执行
 预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义
 代码执行: 从上到下执行JS语句。

1、变量预解析

变量提升:变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。

2、函数预解析

函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数。

alert(a);
 var a = 1;
 alert(a);
 function a() {
   return false;
 }
// 结果:先弹出函数表达式,然后弹出1

十一、对象

在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。

1、创建对象的3种方式

《1》字面量

var obj = {
	name: '憨瓜',
	sayHi: function() {
		alert('大家好')
	}
}
obj.sayHi()  // 调用sayHi方法

《2》new Object

var obj = new Object();
obj.name = '憨瓜';
obj.sayHi = function(){
	alert('大家好啊~');
}

《3》构造函数
构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值。
在 js 中,构造函数的特点:
① 构造函数用于创建某一类对象,其首字母要大写
② 构造函数要和 new 一起使用才有意义

function Person(name, age, sex) {
	this.name = name;
	this.sayHi = function() {
		alert('大家好');
	}
}
var hangua = new Person('憨瓜');
console.log(hangua.name);
console.log(hangua.sayHi());

注意
构造函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法
构造函数中不需要 return 返回结果
利用构造函数创建对象的过程叫做对象的实例化

2、new关键字

new 在执行时会做四件事情:①在内存中创建一个新的空对象 → ② 让 this 指向这个新的对象 → ③ 执行构造函数里面的代码,给这个新对象添加属性和方法 → ④ 返回这个新对象(所以构造函数里面不需要return)

3、遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。

for (变量 in 对象名字) {  //  变量通常写为 `k 或者 key`。
// 在此执行代码
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值