JavaScript基础篇——01学习笔记

最新推荐文章于 2024-07-15 14:11:16 发布

coderwm

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量314

点赞数 3

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44089555/article/details/106170228

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript的作用

JavaScript是一种运行在客户端的脚本语言。
脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释执行
浏览器本身不会执行js代码，而是通过内置的JavaScript引擎（解释器）来执行js代码。js引擎执行代码时逐行解释每一句源码（转为机器语言），然后由计算机去执行。

JS组成

表单动态校验（JS产生最初的目的）
网页特效
服务端开发（Node.js）
桌面程序（Electron）
App（Cordova）
控制硬件-物联网（Ruff）
游戏开发（cocos2d-js）

解释型语言和编译型语言

编程语言通过翻译器转换为机器语言

翻译器翻译的方式有两种：一个是编译，另一个是解释，两种方式区别在于翻译的时间点不同。
编译器是在代码执行之前进行编译，生成中间代码文件
解释器是运行时及时解释，并立即执行（当编译器以解释方式运行的时候也称为解释器）

CSS与JS引入区别

<script src="my.js"></script>
<link rel="stylesheet" href="style.css">

变量

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

声明多个变量

   var age = 18;
   var address = '火影村';
   var gz = 2000;

   //同时声明多个变量时，只要写一个var ，
   多个变量名之间使用英文逗号分开
   var  age = 18,
         address = '火影村',
         gz = 2000;

   var a=b=c=9; //等价于var a=9; b=9; c=9 ;  b和c是全局变量

var 是JS关键字，用来声明变量（variable）。使用改关键字后，计算机会自动为变量分配内存空间，不需要程序员管。
我们通过变量名访问内存中分配的空间。

变量声明特殊情况

只声明，不赋值 undefined
不声明，不赋值，直接使用 error
不声明只赋值全局变量

        var sex;
        console.log(sex); // undefined
       
        console.log(tel); //error
        //  不声明 不赋值 直接使用某个变量会报错
       
        //不声明直接赋值使用
        qq = 110;
        console.log(qq);//110

JavaScript输入输出语句

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

数据类型

JS把数据类型分为两类

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

       var num = 10; // num 数字型 
       var PI = 3.14 // PI 数字型
           // 1. 八进制  0 ~ 7  我们程序里面数字前面加0 表示八进制
       var num1 = 010;
       console.log(num1); //  010  八进制 转换为 10进制 就是  8 
       var num2 = 012;
       console.log(num2);
       // 2. 十六进制  0 ~ 9  a ~ f    #ffffff  数字的前面加 0x 表示十六进制
       var num3 = 0x9;
       console.log(num3);
       var num4 = 0xa;
       console.log(num4);
       // 3. 数字型的最大值
       console.log(Number.MAX_VALUE);
       // 4. 数字型的最小值
       console.log(Number.MIN_VALUE);
       // 5. 无穷大
       console.log(Number.MAX_VALUE * 2); // Infinity 无穷大  
       // 6. 无穷小
       console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
       // 7. 非数字
       console.log('pink老师' - 100); // NaN

字符串拼接

数值相加，字符相联

   console.log('我' + 18); // 我18
   console.log('pink' + true); // pinktrue
   console.log(12 + 12); // 24
   console.log('12' + 12); // 1212

Boolean

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

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

Undefined和Null

一个声明后未赋值的变量会默认值为undefined

var  variable;
console.log(variable);//undefined
console.log('你好'+variable);//你好undefined
console.log(11+variable);//NaN
console.log(true+variable);//NaN
var space = null;
console.log(space + 'pink'); // nullpink
console.log(space + 1); // 1

数据类型转换

使用表单、prompt获取来的数据默认是字符串类型的。

转换为字符串

方式	说明	案例
toString（）	转为字符串	var num=1；alert（num.toString()）;
String（）	转为字符串	var num=1；alert（String(num)）;
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1；alert（num+“我是字符串”）;

转换为数字型

方式	说明	案例
parseInt（Sring）	String类型转为整数数值型	parseInt(‘78’);
parseFloat（Sring）	String类型转为浮点数数值型	parseFloat(‘78’);
Number（）	String类型转为数值型	Number(‘12’);
js隐式转换（*- /**）	利用算是运算隐式转换为数值型	‘12’-0

js隐式转换是 - * / 不包括+
+为字符串拼接

 var num1 = prompt('请您输入第一个值：');
 var num2 = prompt('请您输入第二个值：');
 var result = parseFloat(num1) + parseFloat(num2);
 alert('您的结果是:' + result);

转换为布尔型

方式	说明	案例
Boolean（）函数	其他类型转为布尔型	Boolean（‘true’）;

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

JavaScript运算符

浮点数精度问题

浮点数的最高精度是17位小数，但在进行算术计算时其精度远远不如整数
不要直接判断两个浮点数是否相等！

递增递减运算符

递增递减运算符必须配合变量使用！
++num 先自加，后返回值
num++ 先返回值，后自加

 var num = 10;
     num++;
   console.log(num);//11
 var age = 10;
  console.log(age++ + 10);//age++为10 age=11  20
  console.log(age);//11


        var a = 10;
        ++a; // ++a  11    a = 11   
        var b = ++a + 2; // a = 12   ++a = 12
        console.log(b); // 14

        var c = 10;
        c++; // c++ 为10   c = 11
        var d = c++ + 2; //  c++  为 11     c = 12
        console.log(d); // 13

        var e = 10;
        var f = e++ + ++e; // 1. e++ =  10  e = 11  2. e = 12  ++e = 12  等价于10+12
        console.log(f); // 22
        // 后置自增  先表达式返回原值 后面变量再自加1

比较运算符

符号	作用	用法
=	赋值	把右边给左边
==	赋值	判断两边值是否相等（注意此时有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

运算符优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ – ！
3	算术运算符	先* / % 后+ -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&&后I I
7	赋值运算符	=
8	逗号运算符	，

console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) //true
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a);//false

var b = 3 <= 4 || 3 > 1 || 3 != 2;//true
console.log(b);

var c = 2 === "2";//false
console.log(c);

var d = !c || b && a;
console.log(d); //true

流程控制

流程控制主要有3种结构，分别是顺序结构、分支结构和循环结构

分支流程控制语句

if else语句：

if（条件表达式）{
语句1；
}else if（条件表达式2）{
语句2；
}else if（条件表达式3）{
语句3；
}...else{
//上述条件都不成立时执行此处代码
}

if（）的满足则不会向下执行else if 和else语句；直接向下执行
即 if 、 else if、else只会有一个执行

switch语句：

switch(表达式）{

	case value1:
	//表达式值为value1时执行
	break;
	
	case value2:
	break;
	
	default：
	//表达式不等于任何一个时执行

}

注意：表达式和value是全等匹配。遇到break停止
switch可能执行多个case
if 、else if 、else只执行一个

三元表达式

表达式1 ?表达式2 : 表达式3 ;
if  else（双分支）的简写

循环

while循环

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

do while循环

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

数组

创建数组的方式

利用new关键字
利用数组字面量创建数组[ ]

var  arr=new Array();//new创建一个空数组arr
var  arr1=[  ]；//数组字面量创建空数组arr1

函数

函数使用：1.声明函数 2.调用函数

function  函数名(){          //函数声明
			//函数体代码
}
函数名（）;            		//函数调用

形参和实参

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。
形参可以简单理解为：不用声明的变量
声明函数时，函数名括号里面的是形参，形参的默认值为undefined
调用函数时，函数名括号里面的是实参
形参的个数可以和实参的个数不匹配，但是结果不可预计，我们要尽量匹配

函数形参和实参个数不匹配问题

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

arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

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

 // 利用函数求任意个数的最大值
        function getMax() { // arguments = [1,2,3]
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(getMax(1, 2, 3));
        console.log(getMax(1, 2, 3, 4, 5));
        console.log(getMax(11, 2, 34, 444, 5, 100));

函数的两种声明方式

1.自定义函数方式（命名函数）
利用function关键字

function fn(){             //声明
}
fn();//调用
//调用函数的代码既可以放到函数声明之前，也可声明之后

2.函数表达式（匿名函数）

var fn=function(){ };
fn();      ///调用方式，          
     //函数调用必须写到函数体下面

函数表达式方法与声明变量方式一致

常用方法

isNaN( ) ：这个方法用来判断非数字并且返回一个值如果是数字返回的是 false 如果不是数字返回的是true

console.log(isNaN(12)); // false

typeof 可用来检测变量的数据类型

 console.log(typeof null);//object

instanceof 判断一个对象属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray（）是HTML5中提供的方法

        // 检测是否为数组
        // (1) instanceof  运算符 它可以用来检测是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);    //true
        console.log(obj instanceof Array);    //false
        // (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持
        console.log(Array.isArray(arr));      //true
        console.log(Array.isArray(obj));      //false