JavaScript基础介绍
本文是自己在学习
- JavaScript初步体验
- 变量
- 数据类型
1. JavaScript介绍
-
网页特效
-
服务端开发(Node.js)
-
命令行工具(Node.js)
-
桌面程序(Electron)
-
App(Cordova)
-
控制硬件-物联网(Ruff)
-
游戏开发(cocos2d-js)
-
-
CSS: 用来美化网页
-
JavaScript: 可以用来控制网页内容,给网页增加动态的效果

ECMA 欧洲计算机制造联合会
网景:JavaScript
微软:JScript
定义了JavaScript的语法规范
JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等
2.3 DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
3. JavaScript初体验
CSS:行内样式、嵌入样式、外部样式
<input type="button" value="按钮" onclick="alert('Hello World')" />
写在Script标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript初体验</h1>
<script>
alert('hello World!');
</sctipt>
</body>
</html>
写在外部js中,在页面引入
<script src="main.js"></script>
注意点:引用外部js文件的script标签中不可以写JavaScript代码
4. 变量
4.1 什么是变量
-
什么是变量
-
为什么要使用变量
使用变量可以方便的获取或者修改内存中的数据
//var声明变量 var age; //变量的赋值 var age; age=18; //同时声明多个变量 var age, name, sex; age = 10; name = '张三'; sex='男';
//同时声明多个变量并赋值 var age = 10, name = '张三';
-
-
由字母、数字、下划线、$符号组成,不能以数字开头
-
不能是关键字和保留字,例如:for、while。
-
区分大小写
-
-
规范 - 建议遵守的,不遵守不会报错
-
变量名必须有意义
-
遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如:userName、userPassword
-
5. 数据类型
Number、String、Boolean、Undefined、Null
5.1 Number类型
整型: var x1=34; 浮点型: var x2=34.00;
数值判断:
注:NaN 与任何值都不相等,包括他本身
isNaN: is not a number
5.2 字符串类型
var text='JavaScript基础学习'; 字符串长度
length属性用来获取字符串的长度 console.log(str.length); 字符串拼接 字符串拼接使用 + 连接 console.log('hello' + ' world'); console.log('100' + '100'); console.log('11' + 11); console.log(text+'200');
Boolean字面量: true和false,区分大小写
var b1=true; var b2=false; console.log(b1); console.log(b2);
-
-
null表示一个空,变量的值如果想为null,必须手动设置
Object
var age = 18; console.log(typeof age); // 'number'
5.7 字面量
数值字面量:8, 9, 10
字符串字面量:'JavaScript', "前端Html"
布尔字面量:true,false
6. 相关注释
6.1 单行注释
用来描述下面一个或多行代码的作用
// 这是一个变量 var name = '张三';
/* var age = 18; var name = '张三'; console.log(name, age); */
- toString() var num = 5; console.log(num.toString()); - String() String()函数存在的意义:有些值没有toString(),这个时候可以使用String()。比如:undefined和null - 拼接字符串方式 num + "",当 + 两边一个操作符是字符串类型,一个操作符是其它类型的时候,会先把其它类型转换成字符串再进行字符串拼接,返回字符串
Number()
Number()可以把任意值转换成数值,如果要转换的字符串中有一个不是数值的字符,返回NaN
parseInt()
var num1 = parseInt("12.3abc"); // 返回12,如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123"); // 返回NaN,如果第一个字符不是数字或者符号就返回NaN
parseFloat()
parseFloat()把字符串转换成浮点数
parseFloat()和parseInt非常相似,不同之处在与
parseFloat会解析第一个. 遇到第二个.或者非数字结束
如果解析的内容里只有整数,解析成整数
+,-0等运算
var str = '500';
console.log(+str); // 取正
console.log(-str); // 取负
console.log(str - 0);
Boolean() var i=0; console.log(Boolean(i)); 0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true
8.
+ - * / %
一元运算符:只有一个操作数的运算符
比如:5 + 6 两个操作数的运算符 二元运算符
++自身加1 -- 自身减1
++在前 var num1 = 5; ++ num1; var num2 = 6; console.log(num1 + ++ num2); ++在后 var num1 = 5; num1 ++; var num2 = 6 console.log(num1 + num2 ++);
网上看到的一个小例子大家可以猜猜看,并检查自己是否掌握
var a = 1; var b = ++a + ++a; console.log(b); var a = 1; var b = a++ + ++a; console.log(b); var a = 1; var b = a++ + a++; console.log(b); var a = 1; var b = ++a + a++; console.log(b);
总结一下
&& 与 两个操作数同时为true,结果为true,否则都是false || 或 两个操作数有一个为true,结果为true,否则为false ! 非 取反
< > >= <= == != === !==
==与===的区别:==只进行值得比较,===类型和值同时相等,则相等 var result = '55' == 55; // true var result = '55' === 55; // false 值相等,类型不相等 var result = 55 === 55; // true
= += -= *= /= %=
例如: var num = 0; num += 5; //相当于 num = num + 5;
优先级从高到底 1. () 优先级最高 2. 一元运算符 ++ -- ! 3. 算数运算符 先* / % 后 + - 4. 关系运算符 > >= < <= 5. 相等运算符 == != === !== 6. 逻辑运算符 先&& 后|| 7. 赋值运算符
表达式:
一个表达式可以产生一个值,有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。
语句:
语句可以理解为一个行为,循环语句和判断语句就是典型的语句。一个程序有很多个语句组成,一般情况下;分割一个一个的语句
- 顺序结构程序默认就是由上到下顺序执行的
- 分支结构根据不同的情况,执行对应代码
- 循环结构 :重复做一件事情
分支结构
if (1>0) {
// 执行语句
}
if (7<4){
// 成立执行语句
} else {
// 否则执行语句
}
if (/* 条件1 */){
// 成立执行语句
} else if (/* 条件2 */){
// 成立执行语句
} else if (/* 条件3 */){
// 成立执行语句
} else {
// 最后默认执行语句
}
表达式1 ? 表达式2 : 表达式3 是对if……else语句的一种简化写法 例子: var i=2; var b=i>4?1:2;
语法格式:
switch (expression) { case 常量1: 语句; break; case 常量2: 语句; break; case 常量3: 语句; break; … case 常量n: 语句; break; default: 语句; break; }
注:break可以省略,如果省略,代码会继续执行下一个case。switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换(例如,字符串'10' 不等于数值 10)
转换为true 非空字符串 非0数字 true 任何对象 转换成false 空字符串 0 false null undefined // 结果是什么? 动手试试就知道了 var a = !!'123';
9.5 循环结构
while语法如下:
// 当循环条件为true时,执行循环体,
// 当循环条件为false时,结束循环。
while (循环条件) {
//循环体
}
代码示例:
// 计算1-100之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
// 循环体
sum += i;
// 自增
i++;
}
console.log(sum);
do..while循环和while循环非常像,二者经常可以相互替代,但是do..while的特点是不管条件成不成立,都会执行一次。
基础语法:
do {
// 循环体;
} while (循环条件);
代码示例:
// 初始化变量
var i = 1;
var sum = 0;
do {
sum += i;//循环体
i++;//自增
} while (i <= 100);//循环条件
while和do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便
for循环语法:
// for循环的表达式之间用的是;号分隔的,千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
执行顺序:1243 ---- 243 -----243(直到循环条件变成false)
1. 初始化表达式
2. 判断表达式
3. 自增表达式
4. 循环体
例子:控制台打印输出1-100的数据
for(var i=1;i<=100;i++){
console.log(i);
}
break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)
continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)
11.
之前学习的数据类型,只能存储一个值(比如:Number/String。我们想存储班级中所有学生的姓名,此时该如何存储?
数组的概念
所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们就称之为数组。
数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。
// 创建一个空数组 var arr1 = []; // 创建一个包含3个数值的数组,多个数组项以逗号隔开 var arr2 = [1, 3, 4]; // 创建一个包含2个字符串的数组 var arr3 = ['a', 'c']; // 可以通过数组的length属性获取数组的长度 console.log(arr3.length); // 可以设置length属性改变数组中元素的个数 arr3.length = 0;
// 格式:数组名[下标] 下标又称索引 // 功能:获取数组对应下标的那个值,如果下标不存在,则返回undefined。 var arr = ['red',, 'green', 'blue']; arr[0]; // red arr[2]; // blue arr[3]; // 这个数组的最大下标为2,因此返回undefined
for(var i = 0; i < arr.length; i++) {
// 数组遍历的固定结构
console.log(arr[i]);
}
数组中新增元素和赋值
//格式:数组名[下标/索引] = 值; // 如果下标有对应的值,会把原来的值覆盖,如果下标不存在,会给数组新增一个元素。 var arr = ["red", "green", "blue"]; // 把red替换成了yellow arr[0] = "yellow"; // 给数组新增加了一个pink的值 arr[3] = "pink";
12. 函数
12.1 什么是函数?
函数的作用就是封装一段代码,将来可以重复使用
12.2 函数的定义
//函数的声明
function 函数名(){
// 函数体
}
//函数的表达式
var fn = function() {
// 函数体
}
备注:
函数声明的时候,函数体并不会执行,只要当函数被调用的时候才会执行。
函数一般都用来干一件事情,需用使用动词+名词,表示做一件事情 `tellStory` `sayHello`等
12.3 函数的调用
// 声明函数
function sayHi() {
console.log("你吃饭了吗?");
}
// 调用函数
sayHi();
// 求1-100之间所有数的和
function getSum() {
var sum = 0;
for (var i = 0; i < 100; i++) {
sum += i;
}
console.log(sum);
}
// 调用
getSum();
12.4 函数的参数
语法如下:
// 函数内部是一个封闭的环境,可以通过参数的方式,把外部的值传递给函数内部
// 带参数的函数声明
function 函数名(形参1, 形参2, 形参...){
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3);
形参和实参的概念
-
-
实际参数:如果函数在声明时,设置了形参,那么在函数调用的时候就需要传入对应的参数,我们把传入的参数叫做实际参数,也叫实参。
例子:
var x = 5, y = 6;
fn(x,y);
function fn(a, b) {
console.log(a + b);
}
//x,y实参,有具体的值。函数执行的时候会把x,y复制一份给函数内部的a和b,函数内部的值是复制的新值,无法修改外部的x,y
函数的返回值
当函数执行完的时候,并不是所有时候都要把结果打印。我们期望函数给我一些反馈(比如计算的结果返回进行后续的运算),这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值
返回值语法如下:
//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
//函数体
return 返回值;
}
//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);
备注:
函数的调用结果就是返回值,因此我们可以直接对函数调用结果进行操作。
推荐的做法是要么让函数始终都返回一个值,要么永远都不要返回值。
匿名函数:
没有名字的函数
匿名函数如何使用:
将匿名函数赋值给一个变量,这样就可以通过变量进行调用匿名函数自调用
自调用函数:
(function () {
alert(123);
})();
函数是一种数据类型:
function fn() {}
console.log(typeof fn);
函数作为参数
因为函数也是一种类型,可以把函数作为两一个函数的参数,在两一个函数中调用
函数做为返回值
因为函数是一种类型,所以可以把函数可以作为返回值从函数内部返回,这种用法在后面很常见。
function fn(b) {
var a = 10;
return function () {
alert(a+b);
}
}
fn(15)();
13. 作用域
作用域:变量可以起作用的范围
局部变量
只在固定的代码片段内可访问到的变量,最常见的例如函数内部。对应局部作用域(函数作用域)
备注:
不使用var声明的变量是全局变量,不推荐使用。 变量退出作用域之后会销毁,全局变量关闭网页或浏览器才会销毁
变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域。
在 js 中词法作用域规则:
-
-
整个代码结构中只有函数可以限定作用域.
-
作用域规则首先使用提升规则分析
-
如果当前作用规则中有名字了, 就不考虑外面的名字
var num = 123;
function foo() {
console.log( num );
}
foo();
if ( false ) {
var num = 123;
}
console.log( num ); // undefiend
只有函数可以制造作用域结构, 那么只要是代码,就至少有一个作用域, 即全局作用域。凡是代码中有函数,那么这个函数就构成另一个作用域。如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域。
将这样的所有的作用域列出来,可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。
// 案例1:
function f1() {
function f2() {
}
}
var num = 456;
function f3() {
function f4() {
}
}
// 案例2
function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1();
14. 预解析
JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。
JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程
预解析过程:
-
-
把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。
-
先提升var,在提升function
14.1 JavaScript的执行过程
var a = 25;
function abc (){
alert(a);//undefined
var a = 10;
}
abc();
// 如果变量和函数同名的话,函数优先
console.log(a);
function a() {
console.log('aaaaa');
}
var a = 1;
console.log(a);
14.2 全局解析规则和函数内部解析规则
定义变量的时候,变量的声明会被提升到作用域的最上面,变量的赋值不会提升
JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面
// 1、-----------------------------------
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
//2、-----------------------------------
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
// 3、-----------------------------------
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
15. JavaScript中的对象
JavaScript中的对象其实就是生活中对象的一个抽象 JavaScript的对象是无序属性的集合。 其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对,其中值可以是数据和函数。 对象的行为和特征 特征---属性 行为---方法
-
-
事物的行为在对象中用方法来表示。
15.1
function printPerson(name, age, sex....) {
}
// 函数的参数如果特别多的话,可以使用对象简化
function printPerson(person) {
console.log(person.name);
……
}
15.2 什么是对象?
现实生活中:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。 举例: 一部车,一个手机 车是一类事物,门口停的那辆车才是对象 特征:红色、四个轮子 行为:驾驶、刹车
15.3 对象字面量
var o = {
name: 'zs,
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
15.4 对象的创建方式如下:
1.对象字面量
var obj= {
name: '张三',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
2.new Object()创建对象
var person = new Object();
person.name = 'lisi';
person.age = 35;
person.sayHi = function(){
console.log('Hello'+this.name);
}
3.工厂函数创建对象
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,'+this.name);
}
return person;
}
var p1 = createPerson('张三', 22);
4.自定义构造函数
function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
console.log('Hello,'+this.name);
}
}
var p1 = new Person('张三', 22);
15.5
如果一个变量属于一个对象所有,那么该变量就可以称之为该对象的一个属性,属性一般是名词,用来描述事物的特征 如果一个函数属于一个对象所有,那么该函数就可以称之为该对象的一个方法,方法是动词,描述事物的行为和功能
15.6
-
-
构造函数要和new一起使用才有意义。
new在执行时会做四件事情如下:
new会在内存中创建一个新的空对象 new 会让this指向这个新的对象 执行构造函数 目的:给这个新对象加属性和方法 new会返回这个新对象
15.7 this详细解释
JavaScript中的this指向问题,有时候会让人难以捉摸,随着学习的深入,我们可以逐渐了解 现在我们需要掌握函数内部的this几个特点 1. 函数在定义的时候this是不确定的,只有在调用的时候才可以确定 2. 一般函数直接执行,内部this指向全局window 3. 函数作为一个对象的方法,被该对象所调用,那么this指向的是该对象 4. 构造函数中的this其实是一个隐式对象,类似一个初始化的模型,所有方法和属性都挂载到了这个隐式对象身上,后续通过new关键字来调用,从而实现实例化
15.8 对象的使用
1.遍历对象的属性
通过for..in语法可以遍历一个对象
var obj=[
{name:'张三',age:30},
{name:'李四',age:25},
{name:'王五',age:36}
];
for(var item in obj){
console.log(obj[item].name+'--'+obj[item].age);
}
2.删除对象的属性
function fun() {
this.name = 'mm';
}
var obj = new fun();
console.log(obj.name); // mm
delete obj.name;
console.log(obj.name); // undefined
15.9
值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型。
引用类型:复杂数据类型,在存储是,变量中存储的仅仅是地址(引用),因此叫做引用数据类型。
堆栈空间分配区别: 1、栈(操作系统):由操作系统自动分配释放 ,存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈; 2、堆(操作系统): 存储复杂类型(对象),一般由程序员分配释放, 若程序员不释放,由垃圾回收机制回收,分配方式倒是类似于链表。
注意:JavaScript中没有堆和栈的概念,此处我们用堆和栈来讲解,目的方便理解和方便学习。
1.基本类型在内存中的存储
2.复杂类型在内存中的存储

本文的基础就到这儿啦,感谢大家的阅读!如有存在不足之处,请留言之处。感谢!


浙公网安备 33010602011771号