JS基础学习笔记

于 2019-11-17 23:19:44 发布
阅读量906 收藏 17
点赞数 4
分类专栏： 前端 JavaScript基础笔记 文章标签： JavaScript基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Curry_On/article/details/103115136
版权

JavaScript基础学习笔记


本文根据B站pink老师的视频整理

由于有其他语言（C、JAVA）的基础，有些相同的内容就没有做笔记
如果你之前学过JAVA、C，那么这篇文章会比较适合你过一遍JS的基础

本文内容：
	1. JS是什么
	2. JS的作用
	3. 浏览器如何执行JS
	4. JS的三部分组成
		4.1 ECMAScript
		4.2 DOM文档对象类型
		4.3 BOM浏览器对象模型
	5. JS的书写位置
	6. JS输入输出语句
	7. 变量
		7.1 变量的声明
		7.2 变量的语法扩展
			7.2.1 更新变量
			7.2.2 同时声明多个变量
			7.2.3 声明变量特殊情况
		7.3 变量命名规范
	8. 数据类型
		8.1 为什么需要数据类型
		8.2 变量的数据类型
		8.3 数据类型的分类
		8.4 简单数据类型
			8.4.1 数字型
				数字型范围
				数字型的三个特殊值
				isNaN()方法
			8.4.2 字符串型
				字符串引号嵌套
				字符串转义
				字符串长度
				字符串拼接
			8.4.3 Boolean类型
			8.4.4 undefined、null
		8.5 获取变量数据类型
		8.6 数据类型转换
			8.6.1 转换为字符型
			8.6.2 转换为数字型
			8.6.3 转换为布尔型
	9. 运算符优先级
	10. 函数参数
		10.1 形参与实参的匹配问题
		10.2 arguments的使用
	11. 函数的两种声明方式
	12. JS作用域
	13. 作用域链
	14. 预解析
	15. 预解析案例
	16. 对象
		16.1 创建对象的三种方式
		16.2 new关键字执行过程
		16.3 遍历对象

初始JavaScript


1、JS是什么

  • 是一种运行在客户端的脚本语言（script是脚本的意思）
  • 脚本语言：不需要编译，运行过程中由 js 解释器（ js 引擎）逐行来进行解释并执行
  • 现在可以基于 node.js 技术进行服务器端的编程
  • HTML / CSS 是标记语言、描述类语言，相当于人的结构和衣服。而JS是一种编程类语言，它用来实现业务逻辑和页面控制，相当于人的各种动作

2、JS的作用

  1. 表单动态校验（密码强度检测）（JS产生的最初目的）
  2. 网页特效
  3. 服务端开发（ Node.js ）
  4. 桌面程序（ Electron ）
  5. App ( Cordova )
  6. 控制硬件-物联网（ Ruff ）
  7. 游戏开发（cocos2d-js）

3、浏览器如何执行JS

浏览器分为两部分：渲染引擎和JS引擎

  • 渲染引擎：用来解析HTML和CSS，俗称内核。比如chrome浏览器的blink，老版本的webkit
  • JS引擎：也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行。比如chrome浏览器的V8

注意：浏览器本身并不会执行JS代码，而是通过内置JS引擎（解释器）来执行JS代码，JS引擎执行代码时，会逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。


4、JS的三部分组成

4.1 ECMAScript

ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 Javascript 或 JScript ，但实际上后两者是 ECMAScript 语言的实现和扩展

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


4.2 DOM 文档对象类型

文档对象模型( Document ObjectModel ，简称DOM) ，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作( 大小、位置、颜色等 )


4.3 BOM 浏览器对象模型

BOM ( Browser Object Model ，简称BOM ) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等


5、JS的书写位置

5.1 行内式 JS

直接写到元素的内部。

例如：

<body>
    <input type="button" value="hello" onclick="alert('你好呀！')">
</body>

当点击hello按钮时，网页会弹出 “你好呀” 的窗口。

注意：

  1. 可以将单行或少量的JS代码写在html标签的事件属性内（以on开头的属性），如：onclick
  2. 注意单双引号的使用：在HTML中推荐使用双引号，在JS中推荐使用单引号
  3. 由于行内JS的写法可读性差，且嵌套时引号易错，所以在特殊请款下才使用

5.2 内嵌式的JS

把JS代码放到<script><script>标签中

    <script>
        alert('hello');
    </script>

5.3 外部JS

首先先写好一个.js的文件，例如 demo.js

引用格式如下：

<script src="demo.js"></script>

注意：两个标签之间不允许写任何东西！


6、JS输入输出语句

为了方便信息的输入输出，JS中常用的语句如下：

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印输出信息浏览器
prompt(info)浏览器弹出输入框，用户可以输入信息浏览器

7、变量

7.1 变量的声明
var age;

var是JS中用来声明变量的关键字，声明变量后，计算机会自动为变量分配内存空间。


7.2 变量语法扩展
7.2.1 更新变量

一个变量被重新赋值后，原有的值会被覆盖，变量值将以最后一次的值为准。

var age = 19;
age = 20; 		// age 的值会变成20
7.2.2 同时声明多个变量
var age=18, sex='男';
7.2.3声明变量特殊情况
情况说明结果
var age ; console.log(age)只声明，不赋值undefined
console.log(age)不声明，不赋值报错
age=18;console.log(age)不声明，只赋值18

7.3 变量命名规范

  • 由字母、数字、下划线、美元符号组成,如: usrAge、 num01、_name

  • 严格区分大小写，如 var app; 和 var App; 是两个变量

  • 不能以数字开头。如18age是错误的

  • 不能是关键字、保留字。例如: var, for, while

  • 变量名必须有意义

  • 遵守驼蜂命名法。首字母小写,后面单词的首字母需要大写。myFirstName


8、数据类型

8.1 为什么需要数据类型

在计算机中，不同类型的数据占用的存储空间是不同的，为了充分利用存储空间，于是定义了不同的的数据类型。


8.2 变量的数据类型

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

例如：

var age;   //此时的age是什么数据类型还不清楚
age = 18;  //这个时候age的类型才确定

在代码运行时，变量的数据类型是由JS引擎根据等号右边的值的数据类型来判断的。

而且，JavaScript拥有动态类型，意味着相同的变量可用作不同的类型，如：

var temp = 6;
temp = 'hello';

上面这么做是被允许的，这一点和 C、JAVA 有很大的不同。


8.3 数据类型的分类

JS把数据类型分为两大类：

  • 简单数据类型 （ Number、String、Boolean、Undefined、Null ）
  • 复杂数据类型 （ object ）

8.4 简单数据类型（基本数据类型）
简单数据类型说明默认值
Number数字型，包括整型和浮点型，如 21、0.210
String字符串类型，如'hello'，在js中，字符串都带引号""
Boolean布尔值类型，true、false，等价于 1 和 0false
Undefinedvar a; 声明了变量 a 但是没有给值，此时 a = undefinedundefined
Nullvar a = null; 声明了变量 a 为空值null
8.4.1 数字型
数字型范围

JavaScript中数值的最大值和最小值

alert(Number.MAX_VALUE); 
alert(Number.MIN_VALUE);
数字型的三个特殊值

Infinity 代表无穷大，大于任何数值

-Infinity 代表无穷小，小于任何数值

NaN not a number ，代表一个非数值

例如：

console.log('hello'-100);	// 结果就是NAN
isNaN() 方法

isNaN方法用于确定是否为非数字的类型

console.log(isNaN(20));   //结果是false
console.log(isNaN('hello')); //结果是true

8.4.2 字符串型
字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号，简记为 外双内单 外单内双

var str1 = '我是一个"程序猿"';
var str2 = "我是一个'程序猿'";
字符串转义符

转义符都是\开头，常用的转义符及说明如下：

转义符解释说明
\n换行符
\\斜杠 \
\'’ 单引号
\"“ 双引号
\ttab缩进
\b空格，blank
字符串长度

字符串的length属性可以获取字符串的长度

var str = 'hello world!';
conlose.log(str);	// 结果为 11
字符串拼接

多个字符串之间用+进行拼接，拼接方式为 字符串 + 任何类型 = 新的字符串

var age = 18;
console.log('他今年'+age+'岁');		//他今年18岁

8.4.3 Boolean类型

true 和 false 参与加法运算时，看作 1 和 0


8.4.4 undefined、null
var str;
console.log(str);	// undefined

var str1 = undefined;
console.log(str1+'hello');	// undifinedhello
console.log(str1+1);	// NaN

var str2 = null;
console.log(str2+'hello');	// nullhello
console.log(str2+1);	// 1

8.5 获取变量数据类型

typeof用于获取变量的数据类型

var age = '1 8 9';
console.log(age.length);
console.log(typeof (age));  	//  string

注意：prompt 取过来的值是 string 类型

var age = prompt('请输入你的年龄：');
console.log(typeof age);   	//结果是string

8.6 数据类型转换
8.6.1 转换为字符串
方式说明例子
toString()转成字符串var num = 1; alert(num.toString);
String()强制转换转成字符串var num = 1; alert(String(num));
加号拼接字符和字符拼接的结果都是字符串var num = 1; alert(num + "我是字符串");

注意：

  1. toString() 和 String() 的使用是不一样的。
  2. 三种转换方式中，我们更喜欢用第三种加号拼接的方式，它也称为隐式转换。
8.6.2 转换为数字型
方式说明例子
parseInt(string)将string转换成整数数值型parseInt('1314')
parseFloat(string)将string转换成浮点数数值型parseFloat('13.14')
Number()强制转换将string类型转换为数值型Number('1314')
js利用算术- * /隐式转换利用算术运算隐式转换'12'-0 '13'*1

注意：

console.log(parseInt('120px')); //结果是120，会去掉 px 这个单位。
8.6.3 转换为布尔值

方法：Boolean()

代表空、否定的值会转换成 false，如：'' 0 NaN null undefined

其他的值都会转成true


9、运算符优先级

优先级运算符顺序
1小括号()
2一元运算符++ -- !
3算数运算符先乘除后加减
4关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先 && 后 ||
7赋值运算符=
8逗号运算符,

10、函数参数

10.1 形参与实参的匹配问题
参数个数说明
实参个数等于形参个数输出正确结果
实参个数大于形参个数只取到形参的个数
实参个数小于形参个数多的形参定义为undefined，结果为NaN

注意：在 JS 中，形参的默认值是undefined

10.2 arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取

在 JS 中，arguments实际上是当前函数的一个内置对象

所有函数都内置了一个arguments对象，其中存储了传递的所有实参

arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：

  • 具有length属性
  • 按索引方式存储数据
  • 不具有数组的 push , pop 等方法

11、函数的两种声明方式

第一种，利用关键字定义：

//	声明
function fn(str){
    console.log(str);
}
//	调用
fn('我是第一种方式');

第二种，函数表达式：

//	声明
var fn = function(str){
	console.log(str);
}
//	调用
fn('我是第二种');

关于函数表达式，需要注意：

  1. fn 是变量名，不是函数名
  2. 声明方式和声明变量差不多，只不过变量里面存的是值，而函数表达式里存的是函数
  3. 函数表达式也可以进行传递参数

12、JS作用域

在 es6 之前，分为全局作用域和局部作用域

全局作用域：整个 script 标签或者 外部单独的 js 文件

局部作用域：函数内部


13、作用域链

如下例子：

    <script>

        var num = 10;

        function fn1() {
            var num = 20;

            function fn2() {
                console.log(num);

            }
            fn2();
        }
        fn1();

    </script>

打印的是10还是20？ 答案是20

如果函数中还有函数，那么在这个作用域种就又会诞生一个作用域

根据在内部函数可以访问外部函数变量的机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。

可以理解为一种就近原则。


14、预解析

首先来看几个问题，看他们的结果会是怎样：

    <script>
        console.log(num);   
    </script>

结果会报错，因为num既没有定义也没有赋值；

    <script>
        console.log(num);
        var num = 10;
    </script>

结果还是报错吗？不，结果变成了undifined

    <script>
        fn();
        function fn() {
            console.log(123);
        }
    </script>

结果是多少？会报错吧应该，因为函数调用放到了最前面呀

错！结果会正常输出123

    <script>
        fn();
        var fn = function() {
            console.log(123);
        }
    </script>

会正常输出123 ？ 错！

结果会报错：fn is not a function

看了上面的几个问题，下面正式来学习下预解析。

实际上，JS 引擎执行 JS 代码分为两步：预解析和代码执行

首先，JS 引擎会把 JS 里面所有的 var 还有 function 提升到当前作用域的最前面，然后再执行代码，即一行一行地运行代码。

预解析又分为变量预解析（变量提升）和函数预解析（函数提升）

变量预解析：把所有的变量声明提升到当前作用域的最前面，不提升赋值操作。

这就能很好的解释：

<script>
    console.log(num);
    var num = 10;
</script>

/*
	为什么结果会是undefined？
	实际上，首先进行了预解析，进行了变量提升，相当于执行了如下代码：
*/

var num;
console.log(num);
num = 10;
/* 变量只定义不赋值结果当然就是undefined了 */

<script>
    fn();
    var fn = function() {
        console.log(123);
    }
</script>

/* 实际上相当于执行了以下代码： */

var fn;   //提到最前面
fn();
fn = function (){
    console.log(123);
}
/* 这样的代码结果当然会报错啦 */

同样的道理，再来看看函数预解析：就是把函数声明提升到当前作用域的最前面，不调用函数。

这就可以解释：

<script>
    fn();
    function fn() {
        console.log(123);
    }
</script>
/* 为什么能够正常执行？
   实际上是执行了以下代码：*/
<script>
    function fn() {
        console.log(123);
    }
	fn();
</script>
/* 所以不管 fn() 在前面还是后面都不影响 */

15、预解析案例

案例一：

var num = 10;
fn();
function fn() {
	console.log(num);
	var num = 20;
}

答案是undifined

进行预解析后相当于：

var num;
function fn() {
	var num;
	console.log(num);
	num = 20;
}
num = 10;
fn();

结果就是undefined

案例二：

var num = 10;
function fn() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fn();

结果是undefined 20

相当于执行了以下代码：

var num;
function fn() {
    var num;
    console.log(num);
    num = 20;
    console.log(num);
}
num = 10;
fn();

案例三：

var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
}

结果是undefined 9

相当于执行了：

var a;
funtion f1() {
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';
}
a = 18;
f1();

案例四：

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);
}

结果是9 9 9 9 9 a is not defined

相当于执行了以下代码：

function f1() {
    var a;
    a = b = c = 9;
    console.log(a);	
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
/*
因为 var a = b = c = 9;
相当于是
var a = 9;
b = 9;    
c = 9;		此时的 b , c 应该是全局变量 
集体声明应该是：var a = 9,b = 9,c = 9;
*/

16、对象


16.1 创建对象的三种方式

1、利用对象字面量创建对象

var obj = {};	//创建了一个空的对象

var person = {
    name: '张三';
    age: 18;
    sex: '男';
    sayHi: function(){
        console.log('hi');
    }
}

注意：

  1. 属性和方法采用键值对的形式

  2. 多个属性和方法中间用逗号隔开

  3. 方法冒号后面跟的是一个匿名函数

  4. 调用对象的属性，有两种方法

方法一： 对象名.属性名

方法二：对象名['属性名']

  1. 调用对象的方法：对象名.方法名()

2、利用new Object()创建对象

var person = new Object();
person.name = '张三';
person.age = 18;
person.sayHi = function(){
    console.log('hi');
}

注意：

  1. 是利用等号赋值来添加属性和方法
  2. 用分号;隔开
  3. 调用属性、方法和上面第一种方法一样

3、利用构造函数创建对象

有木有注意到，前面两种方法一次只能创建一个对象，如果里面的很多方法属性是相同的，那么一次又一次创建岂不是很麻烦 ？

因此，可以利用函数来重复这些相同的代码，这个函数就是构造函数，它里面封装的不是普通代码，而是对象。

所以，构造函数就是把对象里面相同的属性和方法抽象出来封装到函数里面。

创建语法：

    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function (str) {
            console.log(str);

        }
    }

    var zhangSan = new Person('张三', 18);
    console.log(zhangSan.age);
    zhangSan.say('hello');

注意：

  1. 构造函数名字的首字母要大写
  2. 构造函数不需要 return 就可以返回结果，返回的是 object
  3. 构造函数调用的时候必须要使用 new ，就相当于创建了一个新的对象

16.2 new关键字执行过程
  1. 在内存种创建一个新的空对象
  2. 让 this指向这个空对象
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法
  4. 返回这个新对象（所以构造函数不需要return）

16.3 遍历对象

通过fon in来便利对象中的属性

var obj = {
	name: 'xiaoming',
	age: 18
}
for (var k in obj) {
	console.log(k);  	 //输出的是属性名
	console.log(obj[k]);	//输出的是值
}
吃面必吃蒜
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值