VN-SGG JavaScript 基础（上）

最新推荐文章于 2023-08-13 20:53:01 发布

baby_hua

最新推荐文章于 2023-08-13 20:53:01 发布

阅读量516

点赞数

分类专栏： Web前端文章标签： js

本文链接：https://blog.csdn.net/baby_hua/article/details/105393899

版权

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

[VN-SGG] JavaScript 基础（上）

JavaScript视频课程笔记【入门到精通】，内容非系统讲解，仅做个人参考回顾，这只是笔记！！！

什么是JavaScript

一门完备的计算机编程语言，诞生于95年，一开始用于前端网页内容校验；Node.js是运行在服务端的JavaScript；JS的标准称为ECMAScript；该标准由不同的厂商实现，不同的浏览器厂商会有不同的实现；Chrome的js引擎是V8引擎，运行速度最快；

实际上JavaScript的含义要大些：一个完备的JavaScript实现包含三个部分：

ECMAScript：JavaScript的标准，一般指前端的JS；
DOM：文档对象模型，提供了一组对象可以操作网页；
BOM：浏览器对象模型，提供了一组对象可以操作浏览器；

JS特点：

解释型语言；
动态语言；
基于原型的面向对象；

与Java的关系

没啥关系

hello world

运行环境：浏览器；

<script type="text/javascript">
    // 警告框
    alert("Hello world");
    
    // 在计算机页面中输出一个内容 
    document.write("Hello world");//向body中输出一个内容

    // 向控制台输出一个内容
    console.log("Hello world");

</script>

JS代码的书写位置：

可在点击事件中直接写入js代码

<button onclick="alert('tint')">click</button>

可在超链接的href属性中

<a href="javascript:alert('tint')">click</a>

script标签中：参照前面示例；
js外部文件中，方便复用，也可以利用浏览器的缓存机制；

<script type="text/javascript" src="js/script.js"></script>

script标签一旦被用于引入外部文件，则在标签之间写入的内容将不再生效；

JavaScript基础语法

JS中严格区分大小写；
每条语句以分号’;'结尾；
JS中会自动忽略多个空格和换行，因此可用两者进行格式化；

声明变量并赋值：

var x = 1;
console.log(x);

标识符规则：

包含字母、数字、下划线、$；
数字不能开头；
不能是关键字和保留字；
多采用驼峰命名；

JS底层实际是Unicode编码，理论上也可以使用中文做标识符；

数据类型

基本数据类型：

String
Number
Boolean
Null
Undefined

引用数据类型：

Object

字符串-String

var str = "hello";
var str1 = "\"hello\"";//转义字符‘\’的使用

Number

JS中所有的数字都是Number类型：整数和浮点数；

// 可以使用 运算符 typeof 检查一个变量的类型
var a = 'string';
var b = 123;
typeof a;//string
typeof b;//number

Number.MAX_VALUE;// 如果用Number表示的数字超过最大值 则会返回 Infinity；

Number.MAX_VALUE：最大值；
Number.MIN_VALUE：0以上最小值；
Infinity：表示正无穷，类型是Number；
-Infinity：表示负无穷，类型是Number；
NaN：这不是一个数字，类型是Number；

如果使用JS进行浮点运算，可能会得到一个不精确的值；所以不要使用JS进行精确度比较高的运算，尽量放到服务端；

Boolean

有两个值 true 和 false；

Null

只有一个值 null，专门用来表示一个空对象；所以使用typeof检查的时候会返回 object；

Undefined

一个变量声明了但没有赋值，它的值就是Undefined，使用typeof检查的时候会返回 undefined；

强制类型转换

强制类型转换-String

方式1：调用被转换数据类型的 toString()方法；

var a = 123;
/* 
* 该方法有返回值，并不会改变变量的数据类型；
* 注：null和undefined 没有toString方法；
*/
a.toString();// "123"

方式2：调用String()函数；

/*
* 该函数有返回值，并不会改变变量的数据类型；
* 对于 Boolean Number String 调用String()函数 就是在调用 toString()方法；
* 但对于null和undefined，则直接转换成相应的字符串'null'和'undefined'；
*/
var a = 234;
String(a);// "234"

强制类型转换-Number

方式1：Number函数

var a = "123";
a = Number(a);

var b = "abc";
b = Number(b);//非纯数字的字符串 将之转换为数字 返回NaN

var c = "";
c = Number(c);// 0

var d = true;
d = Number(d);// 1

var e = false;
e = Number(e);// 0

var f = null;
f = Number(f);// 0

var g = undefined;
g = Number(g);// NaN(任何值 和NaN运算的值 还是NaN；任何值 和NaN比较的值 都是false)

方式2：专门用来处理字符串

var a = "123px";
a = parseInt(a);//123 只转换第一个有效整数

var b = "a123px";
b = parseInt(b);//NaN

var c = "123.5px";
c = parseFloat(c);//123.5 只转换第一个有效浮点数

如果对非String类型使用这两个函数，会先将其转换为字符串，再进行处理；

var a = 123.456;
a = parseInt(a);// 123 会先转成 字符串"123.456"

其他进制的数字：
0x 0 0b 对应16 8 2进制的数；其中0b不同的浏览器可能会不支持；
var a = "070";
a = parseInt(a);//不同浏览器解析出来的结果可能会不一样；
//解决方式：传入标识进制的参数
a = parseInt(a,10);

强制类型转换-Boolean

使用Boolean函数：

数字：除了0 和 NaN外，其他都是true；
字符串：除了空串 “”，其他都是true；
null：false；（对象非空即为true）
undefined：false；

var a = 123;
a = Boolean(a);//true

运算符

注：通用的运算符规则不再描述，只对相对陌生的一些点进行梳理；

运算符有返回结果，如typeof运算符的返回结果的类型是"string"；typeof(typeof res);

对数字和非数字类型进行算数运算时，会先将其转换为Number 再进行运算；

如果是字符串类型的加法，表示的是字符串的拼接；

var a = 123 + true;
console.log(a);//124

var a = 123 + "abc";
console.log(a);//123abc

1+2+"3";//33
"1"+2+3;//123

隐式类型转换：

转String：其他类型与字符串+ 都表示字符串拼接，可以利用这个将任意数据类型转换为字符串；

    a=a+"";

转Number：其他类型与数字运算都会先转成Number再运算，可以利用这个将任意数据类型转换为数字;
```
  a=a-0; //-0  *1 均可
  //使用正+负-号也可行
   1 + +"2" + 3;//6
```
转Boolean：为任意的数据类型做两次非运算，即可将其转换为布尔值；
```
  var a = "hello";
  a = !!a;//true
```

&& 和 || 用于非布尔值的情况：

对参与运算的值，先转换为Bool值；
对于 && 如果第一个值为true，则返回第二个值；如果第一个值为flase直接返回第一个值；注意返回的不是true或false；
对于 || 如果第一个值为true，则返回第一个值；如果第一个值为flase直接返回第二个值；注意返回的不是true或false；

var res = "123" && 456;
console.log(res);//456

比较运算符：

参与比较的两个值默认会转换成数字再进行比较；
NaN参与的比较结果均为false；
参与比较的两个值如果均为字符串，实际比较的则会使两个unicode编码；
多个字符的比较是一个个进行比较的，如"abc" > “b”;比较的是a和b；

console.log("11" > "5");//false 比较的实际是 1 和 5

Unicode编码的使用：

在JS代码中使用转义字符 \u四位编码，编码是16进制，如console.log("\u2100");//℀
在网页中使用 &#四位编码，注意这个编码是十进制的，如☠表示的是“☠”；

相等运算符：

==

相等：如果比较的值数据类型不一致，会转换成相同类型再进行比较，一般都是将两个值转换成Number（但不都是）；
```
  '1' == 1;//true
  true == '1';//true
  null == 0;//false（特殊的）

  undefined == null;//true
  NaN == NaN;//false
```
NaN不和任何值相等，包括它本身；可以通过isNaN函数判断一个值是否是NaN；
！=

不等：使用类似相等；
===

全等：和相等类似，只不过不会进行自动的数据类型转换，如果数据类型不一致直接返回false；
！==

不全等：使用类似全等；

代码块：（ES5）

js使用{}对代码进行分组，形成一个代码块；但是它的作用只是分组，代码块中的内容在外部是完全可见的；

{var a = 10;} 
console.log(a);//10

JavaScript流程控制语句

条件判断语句：
条件分支语句
循环语句

条件判断语句

if-else if-else

prompt()函数

可以弹出一个提示框，提示框中提供了一个文本输入框；
用户输入内容将作为该函数的返回值；

var score = prompt("请输入成绩（0-100）")；

if (score > 100 || score < 0 || isNaN(score)){
  alert("something!");
}

条件分支语句

switch(条件){
  case 表达式值:
    执行语句；
    break;
  case 表达式值:
    执行语句；
    break;
  default:
    执行语句；
    break;
}

循环语句

while循环
for循环

break 和 continue，二者只能用在循环中；

对象的简介

Object对象，引用数据类型；区别于5中基本数据类型；对象是复合数据类型，在对象中可以保存不同数据类型的属性；

对象的分类：

内建对象：由ES标准中定义的对象，任何ES实现中均可使用；

Math Function Object String Number…
宿主对象：由JS运行环境提供的对象，主要是浏览器提供的对象；

BOM DOM；如console document对象；
自定义对象：开发人员创建的对象；

对象基本操作

//使用new调用的函数，是构造函数（constructor），构造函数是专门用来创建对象的函数；
var obj = new Object();
typeof obj;//object

//向对象中添加属性
obj.name = "Flower";
obj.age = 29;

//删除对象属性
delete obj.name;

//获取对象属性 方式1
obj.name = "haha";
obj.name;

//获取对象属性 方式2
obj['name'] = "haha";//这种方式赋值 只能以这种方式访问；
obj['name'];

使用中括号[]形式操作属性，更加灵活；可以直接传递一个对应属性名的变量；

JS属性的值可以是任意的数据类型；

in运算符

检查一个对象中是否含有指定属性，返回布尔值；

if ("test" in obj){
  return;
}

基本数据类型和引用数据类型

基本数据类型：

栈内存；变量保存的是值；

引用数据类型：

堆内存，new一个对象时，就是在堆中开辟一个内存空间，变量保存的是对象的内存地址（引用）；

对象字面量

var obj = {};
var obj1 = {name:"haha",age:28};//创建对象字面量同时 指定属性，属性名的双引号可加可不加；

函数的简介

函数也是一个对象；可以封装一些功能；

//函数构造器
var fun = new Function("console.log('testing');");
typeof fun;//function
fun();//函数调用

//函数声明
function funname([para1,para2...paran]){
  console.log('testing');
}

//匿名函数表达式
var funcname = function(paras){

};

调用函数时解析器不会检查实参类型；可能需要必要的函数类型校验；
调用函数时，解析器也不会检查函数的数量；（不足的形参为undefined，多余的实参会被忽略）

立即执行函数

//立即执行函数 往往只会执行一次
(function(){
  alert();
})();

方法

对象的属性值可以是任意数据类型，如果是一个函数，通常称这个函数为对象的方法；

var obj = new Object();
obj.name = "houzi";
obj.logName = function(){
  console.log(obj.name);
}


var obj2 = {
  name:"bajie",
  logName:function(){
    console.log(obj2.name);
  }
}

枚举出一个对象的所有属性

使用for in 枚举对象的属性

var obj = {
  name:"shaseng",
  age:18
}
for(var n in obj){
  // n 就是对象的属性名 的一个变量
  console.log(obj[n]);
}

JS中作用域

全局作用域

页面打开时创建，页面关闭时销毁；

全局作用域中有一个全局对象window，代表一个浏览器窗口，由浏览器创建；

在全局作用域中创建的变量都会作为window对象的属性保存；创建的函数都会作为window对象的方法；

变量的声明提前

使用var声明的变量，会在所有代码执行之前被声明；
如果不使用var，则变量不会被声明；
赋值则是在赋值语句执行时才发生；

console.log(a);//undefined
var a = 1;

函数声明提前

使用函数声明形式创建的函数function funname(){}，会在所有代码执行之前就被创建，因此可以在函数声明语句前调用该函数；其他形式创建的函数则不可，如使用函数表达式创建的就不行；

sayHello();
function sayHello(){
  console.log('hello');
}

函数作用域

调用函数时创建，函数调用结束销毁；

每次调用函数都会创建一个新的函数作用域；

全局作用域无法访问函数作用域的变量；

当在函数作用域中使用一个变量时，如果没有声明，会继续向上层作用域寻找；如果全局作用域也没找到，就报错；

函数作用域中要访问全局变量，可以使用window.a；

函数作用域中，也有声明提前的特性；

在函数作用域中使用的变量，如果不使用var声明，就会变成全局变量；

function func1(){
  d = 100;
}
func1();//调用下
console.log(d);//100

JS Debug

查看Chrome浏览器，打开调试控制台，Sources下，可以对js脚本这是断点，查看当前作用域变量值的变化；

baby_hua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VN-SGG JavaScript 基础（上）

[VN-SGG] JavaScript 基础（上）JavaScript视频课程笔记【入门到精通】，内容非系统讲解，仅做个人参考回顾，这只是笔记！！！什么是JavaScript一门完备的计算机编程语言，诞生于95年，一开始用于前端网页内容校验；Node.js是运行在服务端的JavaScript；JS的标准称为ECMAScript；该标准由不同的厂商实现，不同的浏览器厂商会有不同的实现；Ch...
复制链接

扫一扫