JS入门到精通详解（1）

最新推荐文章于 2024-11-08 16:09:18 发布

zxpmoxo

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量305

点赞数

分类专栏： JS 文章标签： javascript 前端 html 开发语言 ecmascript Powered by 金山文档

本文链接：https://blog.csdn.net/zxpmoxi/article/details/128655166

版权

JS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

JavaScript概述(需要记)

什么是javascript?

是一门（基于对象）和（事件驱动）的（脚本语言）。

js诞生于哪一年？哪个公司？谁？第一个名字叫什么？

1995年网景布兰登 liveScript

JS的第一套标准：

ECMA-262

js包含哪些部分？

ECMAScript （核心书写语法和书写规则）

BOM(操作浏览器的部分比如浏览器的滚动条)

DOM ： Document Object Model (文档对象模型，JS操作文档流发生变化的属性和方法，就是操作自己在网页里面写的东西)

java和javascript是什么关系？

没有任何关系。

js的作用是什么？

实现页面特效

实现交互

JS的三种书写方式(需要记)

行内式

a标签-书写在href属性上

点我一下

非a标签-书写在行为属性上

内嵌式

外链式

注：外部引用脚本时，script标签中不要写任何内容，写了也不执行！

如何输出？

alert() : 以警告框的方式输出，缺点是会阻止后面语句的执行。

如果括号中是数字就不须要加引号
如果是其它非数字数据要加引号（不区分单引号或双引号），在JS中只要加上引号就叫做字符串。引号嵌套时要注意不能交叉使用引号 ' "" ' " '' "JS语言中，所有的标点符号都是英文半角状态

document.write() : 在页面中输出，缺点是会影响现有布局。

console.log() : 在控制台中输出，会输出对象的详细信息。

JS中的换行

页面中

<br>(直接放在引号里就能用)

非页面中

\n : 换行

\t : 横向跳格（一次八个空格）键盘上Tab的功能

\ : 转义符,将具有特殊含义的符号转成普通字符

JS中的注释

单行注释

//注释内容

多行注释

/*注释内容、多行注释、段落注释、块注释*/

JS中的数据类型(需要记)

基本数据类型

Number (数字类型) 3 3.3 -4

1.整数和小数

2.js中可以表示数字的最大值（Number.MAX_VALUE）/（Number.MAX_VALUE 0以上最小值）

如果使用Number表示的数字超过最大值，则会返回一个Infinity（正无穷）

3.NaN 是一个特殊的数字，表示Not A Number

使用typeof检查一个NaN也会返回number

4.如果使用js进行小数（浮点数）计算，可能得到一个不精确的值，所以不要用js算钱等类似精确度高的数。

String (字符串) '' ""

1.js中字符串用引号连接起来

2.使用双引号或单引号都可以，但是不要混着用

3.引号不能嵌套，双引号不能放单引号，单引号不能放双引号

如果想双引号套双引号，引号外面加\，转译一下、\\表示一个\

**Boolean (布尔) **

1.只有两个true false

使用typeof检查一个布尔值也会返回Boolean。

null (表示空的对象)(定好将来放什么东西)

使用typeof检查一个null也会返回Object。

undefined (未定义)

使用typeof检查一个undefined也会返回Object。

复合数据类型

Object (对象).

JS中的命名规则(需要记)

只能包含（字母、数字、下划线、$）

不能以数字开头

不能是关键字或保留字(国家保留不让用的/例如电话号码999不能用,被国家保留)(蓝色)

要语义化

驼峰命名

大驼峰： HowAreYou 常用于类名或构造函数名(每个单词首字母大写)

小驼峰 : howAreYou 常用于函数名(除第一个单词首字母小写,其他单词首字母大写)

how_are_you 常用于变量名

匈牙利命名法

整数 int i_num 以i开头的变量存储整数

小数 float f_num 以f开头的变量存储小数

字符 char ch 以c开头的变量存储一个字符

字符串 String str 以s开头的变量存储一个字符串

布尔 Boolean bool 以b或bo开头的变量存储布尔变量

对象 Object o_div 以o开头的变量存储对象

数组 array arr 以arr开头的变量存储数组

函数 function fn 以fn开头的变量存储函数

7.报错里面有SyntaxError说明语法有问题

8.报错里面有ReferenceErroer说明引用类型错误,引用了一个不存在的东西

JS 变量

用于在内存中开辟空间，这个空间中存储数据，且随着程序的运行，空间中的数据会发生变化，所以称为变量。

声明变量

显式声明： var 变量名,变量名,变量名;

隐式声明：变量名 = 值;(i=3) 没有关键字var 必须先通过赋值证明身份,否则报错

给变量赋值

初始化变量/变量初始化：在声明变量的同时给它赋值。i

先声明变量，再赋值。(在声明变量时,没有给变量赋值,而是在后面使用的时候赋值) j

例如:var i = 1,j;

j = 3；

注意：

一个变量名只能存储一个值

当再次给一个变量赋值的时候，前面一次的值就没有了

变量名称区分大小写（JS 严格区分大小写）

左边开辟空间,右边设置数值

没有赋值的时候,变量中的默认值为undefind,即意味着将来这个变量中要存放基本数据类型的数据//null表示空,这个变量没有任何数据,赋值为null,表示将要存放的对象

JS 运算符

自增自减运算符 ++ --

规则：
从左到右，如果遇到变量 ++ (2个值) 先取出变量中的值参与其它运算，再自加1。
如果遇到 ++ 变量(1个值)，直接取加1后的值参与运算。
先看到谁就先干啥,先看到++就先＋1再算先看到变量就先用变量

//声明一个变量
// var i = 3;
//    3  4
// // i ++;
// ++ i;
// console.log(i); //5


// var i = 3;
//   //        3  4
// console.log(i ++); //3
// console.log(i); //4

// var i = 3;
// //             4
// console.log(++ i); //4
// console.log(i); //4


// var i = 3;
// //         4   4  5   5  4
// var j = ++ i + i ++ + i --;
// //        4  +  4   +   5
// console.log(i,j);  //4  13


var i = 3;
//      3  4    5    5  6
var j = i ++ + ++i + i ++;
//      3   +   5    +  5  j = 13,i = 6
//       7    13 14  7  6
var k = ++i + j ++ + i --;
//       7   + 13   + 7  k = 27  j = 14 i = 6
console.log(i,j,k);  //6

算术运算符

* (乘) /(除) %(模/余数) -(减)

规则：
Number类型，直接运算
Number与String类型运算，先将String类型转为Number类型，如果是纯数字字符串，则转为数字，直接运算。如果不是纯数字字符串，则转为NaN，与NaN计算的结果，都是NaN
true(1) false(0) null(0) undefined(NaN)
数字*字符串,将字符串自动转为数字,如果是纯数字字符串,则转为数字,正常相乘,如果字符串里面除了数字还有别的东西,则报NaN(Not a Number)

console.log(2 * 3); //6
console.log(2 * '3'); //6
console.log('2' * '3'); //6
console.log(2 * '3a'); //NaN (Not a Number)
console.log(2 * true); //2
console.log(2 * false); //0
console.log(2 * null); //0
console.log(2 * undefined); //NaN

console.log(10 / 2); //5
console.log(10 / '2'); //5
console.log(10 / '2a'); //NaN
console.log(true / 2); //0.5
console.log(false / 2); //0
console.log(2 / null); //Infinity 无穷
console.log(0 / 0); //NaN
console.log(2 / undefined); //NaN

console.log(5 % 2); //1
console.log(5 % 5); //0
console.log(5 % '2'); //1
console.log(5 % '2a'); //NaN
console.log(5 % true); //0
console.log(5 % false); //NaN
console.log(2 % 5); //2
console.log(3 % 5); //3

console.log(5 - 3); //2
console.log(5 - '2'); //3
console.log(5 - '2a'); //NaN
console.log(5 - true); //4
console.log(5 - false); //5
console.log(5 - null); //5
console.log(5 - undefined); //NaN

(加)
规则：
如果+号两边有字符串，则将两个数据连接成新的字符串。
true(1) false(0) null(0) undefined(NaN)

关系运算符

> (大于) <(小于) >= (大于或等于) <= (小于或等于)

规则：
Number类型之间比较，直接比较
String类型之间比较，从左到右依次比较字符，直到比出结果。
Number与String类型之间比较，先将String转为Number,再比较
true(1) false(0) null(0) undefined(NaN)

console.log(3 > 2); //true
console.log(1 >= '1'); //true
console.log(0 >= 'false') //false
console.log(0 <= false); //true
console.log(0 >= null); //true
console.log('100' > '2') //false
console.log(2 > NaN); //false

== (等于) != (不等于) === (恒等于) !== (不恒等)

区别：
== 和 != : 只比较结果，不比较类型。
=== 和 !== : 先比较类型，如果类型相同，再比较结果。
补充：面试题
console.log（null == 0）；//false
console.log（null == false）；//false
console.log（null == ‘ ’）；/false
//null 和 underfined 都表示空但是类型不同
console.log（null == underfined）；//ture
console.log（null === underfined）；//false
console.log（NaN == NaN）；//false

console.log(2 == '2'); //true
console.log(2 === '2'); //false
console.log(2 != '2'); //false
console.log(2 !== '2'); //true

//切记：切记：切记：
console.log(null == 0); //false
console.log(null == false); //false
console.log(null == ''); //false
console.log(null == undefined); //true
console.log(null === undefined); //false
console.log(NaN === NaN); //false

逻辑运算符（false/0/''（空串）/null/undefined/NaN)天然假

! : 非（但）

规则：
非真即假、非假即真

console.log(!0); //true
console.log(!false);  //true
console.log(!''); //true
console.log(!null); //true
console.log(!undefined); //true
console.log(!NaN); //true
console.log(!' '); //false
console.log(!8); //false
console.log(!-8); //false
console.log(!!8); //true

&& : 与（且）

规则
如果&&左边表达式的值为true时，返回右边表达式的值。
如果&&左边表达式的值为false时，发生短路，返回左边表达式的值。

var i = 3;
var j = !i >= 0 && (i = 4);
console.log(i,j); //4  4


var k = 3;
var m = k % 5 - 3 && (k = 4);
console.log(k,m);  //3 0

var a = 3;
var b = 3 - 3 * 4 % 2 && (a = 4);
console.log(a,b);  //4   4

|| : 或

规则
如果||左边表达式的值为true时，发生短路，返回左边表达式的值。
如果||左边表达式的值为false时，返回右边表达式的值。

 var i = 3;
var j = i - i % 4 || (i = 4);
console.log(i,j); //4  4

var k = 3;
var m = 3 - 3 % 2 || ( k = 4);
console.log(k,m); //3   2

练习：
1. number 等于或大于 90，但小于 100
2. ch 不是字符 q 也不是字符 k   
3. number 界于 1 到 9 之间（包括 1 不包括 9），但是不等于 5       
4. number 不在 1 到 9 之间
5. 判断这个字符是空格，是数字，是字母 
6. 有 3 个整数 a,b,c，判断谁最大，列出所有可能
7. 判断 year 表示的某一年是否为闰年，用逻辑表达式表示。
闰年的条件是符合下面二者之一：
1) 能被 4 整除但不能被 100 整除
2) 能被 400 整除

赋值运算符

简单赋值 =

赋值号左边，只能变量
赋值号右边，可以常量、变量、表达式。

复合算术赋值 += -= *= /= %=

规则：先取运算符左边变量中的值与右边表达式的值进行相应的算术运算，最后将运算的结果再赋值给左边的变量。
var i = 3;
i *=9 + i ；和 i= 3 * (9 + 3)；一样

练习

var i = 5;
var a = 3;
//     6     7   7 8   8  9
a += ++i + ++i - i++ + i++;
var b=a++ + i++ + ++a + a++ + "a++";
求：i、a、b的值分别是多少？
i

特殊运算符

new : 用于创建对象

var i = 3; //Number
var o_num = new Number(3);
console.log(typeof i,typeof o_num); //'number'    'object'
var o_bool = new Boolean();
var o_str = new String();
var obj = new Object();

typeof : 用于检测数据类型

console.log(typeof 3); //'number'
console.log(typeof '3'); //'string'
console.log(typeof true); //'boolean'
console.log(typeof null); //'object'  不是对象的对象。
console.log(typeof undefined); //'undefined'
console.log(typeof NaN); //'number'  不是数字的数字
console.log(typeof typeof false);//'string'

数据类型的转换

自动类型转换 3 - ’2‘ = 3 - 2

强制类型转换

parseInt('字符串',2~36进制范围) : 将字符串中开头有效的数字部分转为整数。

当省略第二个参数或第二个参数为0时，表示十进制。
当第二个参数是< 2 || > 36时，结果为NaN
如果第二个参数是2~36中的范围时，判断第一个参数是否符合第二个参数的进制范围，如果符合，则正常转为整数，如果不符合（比如a222）进制范围，则直接返回NaN
第二个值是进制

console.log(parseInt('1.2.3'));  //1
console.log(parseInt('3 42')); //3
console.log(parseInt('   3'));  //3
console.log(parseInt(''));  //NaN
console.log(parseInt('a23')); //NaN

console.log(parseInt('2',0)); //2
console.log(parseInt('2',1)); //NaN
console.log(parseInt('2',37)); //NaN
console.log(parseInt('2',1)); //NaN
console.log(parseInt('2',2)); //NaN
console.log(parseInt('2',3)); //2

parseFloat('字符串') : 将字符串中开头有效的数字部分转为小数。

console.log(parseFloat('1.2.3.5')); //1.2
console.log(parseFloat('2 34')); //2
console.log(parseFloat('')); //NaN
console.log(parseFloat('a2.3')); //NaN

Number('字符串') : 将纯有效数字字符串转为数字。

console.log(Number('1.2.3')); //NaN
console.log(Number('2 34'));  //NaN
console.log(Number('')); //0
console.log(Number('a23')); //NaN