JavaScript基础知识点（1）

组成

JavaScript的组成：ECMAsxcript（语法）、Browser Objects(DOM BOM 特性)组成。

JavaScript的标识符

1. 什么是标识符 – 变量、函数、属性的名字，或者函数的参数。
2. 标识符的命名规则
   a. 由字母、数字、下划线(_)或者美元（$）组成；
   b. 不能以数字开头；
   c. 不能使用关键字，保留字作为标识符；

JS变量

1. 用来临时存储信息。
2. 创建方法如下： 弱数据类型
   a. var x=1; var x=2,name=“zhangsan”;
   b. var x; x=1; var name; name=“lisi”;
3. 注意：Js中的变量，区分类型，但是没有int之类的关键词

调试工具

alert()弹框调试
console.log控制台输出调试
document.write()

JS函数

JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数
由函数执行的代码被放置在花括号中：{}
创建方法：

1. 函数声明，可以先使用后定义

function fun1(){
  代码段;
  return;
}

2. 函数表达式，必须先定义后使用

var fun1 = function(x){
  return x+1;
};

JavaScript数据类型

简单数据类型

1. number – 数字类型，整型、浮点型都包括；
2. string – 字符串类型，必须放在单引号或者双引号中；
3. boolean – 布尔类型，只有true和false两种值；
4. underfine – 未定义，一般指的是已经声明，但是没有赋值的变量,派生自null值–underfined==null
   ----> 返回的是true；
5. null – 空对象类型，var a = null; 和 var a = “”;有区别；

特殊数据类型

1. object – 对象类型，在js中常见的window document array等；
2. NaN – 是Number的一种特殊类型，isNaN() 如果是数字 返回false 不是数字 返回true；
3. isNaN() – 说明：对接受的数值，先尝试转换为数值，再检测是否为非数值；
4. 任何涉及NaN的操作（例如NaN/10）都会返回NaN；
5. NaN与任何值都不相等，包括NaN本身。

检测数据类型的方法
type of
语法：typeof 变量 或者 typeof（变量）
返回值：string number boolean object underfined function

类型转换

强制类型转换：

1. parseInt() - 转换成整型;parseFloat() - 转换成浮点类型，带小数点;
2. Number() - 包括整数和小数;
3. Bolean() - 转换成逻辑类型;

隐式类型转换：

var num="12";
    console.log(num);//显示12
    console.log(num+1);//显示121，因为是字符串
    console.log(num*1+1);//显示13，因为相乘之后变成数值，就是隐式转换

变量作用域

局部变量：在函数内部创建的变量，称为局部变量，其他函数不能使用；
全局变量：在函数外部创建的变量，称为全局变量，在函数之间可以共享使用。

比较运算符

比较运算符：用于比较两个值，结果true或者false

>   >=    !=   <   <=
==：相等，只比较值是否相等。
===：全等，比较值得同时比较数据类型是否相等。
！=：不相等，比较值是否不相等。
！==：不全等，比较值得同时比较数据类型是否不相等

var x = 2;
console.log(x < 10);//true

逻辑运算符

与&&，或||，非!
返回值：布尔值；

var x = 5;
 var y = "5";
console.log(x==y);//== 要求值相等，则会输出true
console.log(x===y);//=== 要求值和数据类型都必须相同，才会输出true
console.log(x > 10 && y < 10);//&& 逻辑与，两者条必须都满足才会输出true
console.log(x > 10 || y < 10);// || 逻辑或，两者其中一个条件满足即可输出true
console.log(x != y);// != 两者值不相等，则会输出true
console.log(x !== y);// !== 值和类型有一个不相等，或两个都不相等,则会输出true

三目运算符 – 三元运算符

根据不同的条件，执行不同的操作/返回不同的值
格式：条件？值1：值2；

三目运算符  --  三元运算符
    var n1 = 10,
      n2 = 20,
      n3 = (n1 > 30)?"true":"false";
    console.log(n3);

算数操作符

+  加
-  减
*  乘  
/  除
%  取余

递增和递减

1. 递增 ++a 与 a++ 都是对a进行递增的操作
2. 区别
   a. ++a先返回递增之后的a的值 – 先运算再赋值
   b. a++ 先返回a的原来的值，再返回递增之后的值 – 先赋值在运算
3. 递减同理

var n1 = 10,
n2 = 20;
n3 = n1+(++n2);
console.log(n3);//显示31

赋值运算符

1. 简单赋值 =
2. 复合赋值 += -= *= /= %=

var x = 10;
var y = 20;
console.log(x+=y);//显示30 相当于x=x+y

运算符的优先级

（）   小括号      --    优先级高
++  --   自加  自减
*   /    %  乘  除  取余
+  -   加  减
<  <=   >  >=   逻辑运算
==   !=   等于  不等于
&&  逻辑与
||   逻辑或
？： 三目运算符
=   赋值     --     优先级低

程序控制语句

条件判断控制语句

if(判断条件){
}else{
}

多重if嵌套控制语句

if(判断条件){
}else if(){
}else{
}

多条件分支类控制语句演示

成绩是100分，显示满分
成绩大于等于90，显示优秀
成绩大于等于70，显示良好
成绩大于等于60分，显示及格
否则，不及格
var myscore=55;
var str;
var n=parseInt(myscore/10);
switch(n){
    case 10:
        str="manfen";
        break;
    case 9:
        str="youxiu";
        break;
    case 8:
    case 7:
        str="lianghao";
        break;
    case 6:
        str="jige";
        break;
    default:
        str="bujige";
        break;
}

循环类控制语句

for循环

for循环
    // 1+2+3+4+5+。。。。+100=5050
    var i;
    var sum=0;
    for(i=0;i<=100;i++){
      // sum=sum+i;
        sum+=i;
    }
    console.log(sum);
    
var i;
    var sum = 0;
    // for循环，执行顺序是i从零开始，然后判断i是否<=10，是的话，进行内部sum+i的操作，然后i再自加，然后再判断i是否少于等于10.是的话执行内部sum+i的操作，然后i再自加，以此类推循环
    for (i=0;i<=10;i++){
      if(i%2==0){
        //这里continue是跳过本次循环，下次循环还是继续执行
        continue;
      }
      //奇数相加
      sum+=i;
      console.log(sum);
    }

while循环—先判断条件，条件满足了再继续执行

var i = 0;
    var sum = 0;
    // while循环，执行顺序是i从0开始，判断是否<=10，是的话执行内部函数sum+i，然后i再自加，然后再次判断i的大小，以此类推循环
    while (i<=10){
      sum=sum+i;
      i++;
    }
    console.log(sum);

do-while循环—先执行一次，执行完之后再进行判断

var i = 0;
    var sum = 0;
    //do while循环是先执行后判断，先是sum+i得出sum值，然后i在自加，然后再判断i的大小，符合条件的话再次进行内部函数运算
    do {
      sum=sum+i;
      i++;
    }while(i<=10);
    console.log(sum);

弹出输入框

prompt();
• 点击确定，返回输入的内容
• 点击取消，返回null

字符串的长度

string.length，返回值：number

内置函数

字符函数
substr()，substring()

var str = "520134199906061234";
//两个参数,索引从0开始，截取到0
//第一个参数表示从哪儿开始，第二个参数表示截取的长度
console.log(str.substr(0,3));
console.log(str.substr(1,3));//
console.log(str.substr(3,6));//起始位置 长度

//两个参数,索引从0开始
//第一个参数：起始位置，第二个参数表示：结束位置，算前不算后
console.log(str.substring(0,3));//520
console.log(str.substring(6,10));//1999
console.log(str.substring(6,11));//起始位置   结束位置

console.log(str.substr(3));//一个参数表示索引位置，截取到最后
console.log(str.substring(3));//一个参数表示索引位置，截取到最后

charAt()获取字符串 但是根据索引位置获取

var str = "520134199906061234";
console.log(str.charAt(16));//3

indexOf()

var str = "520134199906061234";
//indexOf()  参数：索引位置  查找1在str字符串中的第一次出现的位置
//索引从0开始
console.log(str.indexOf(1));//3
//两个参数表示  从索引位置4开始查找，找索引位置4后面的1出现的位置
console.log(str.indexOf(1,4));//6
//有一个自动类型转换  可以加上""
console.log(str.indexOf("1",4));//6
如果某个指定的额字符串在源字符串中不存在，返回-1
console.log(str.indexOf(5,20));//-1

split()

//split  --  将字符串有规律的转换成数组  [11,22,33556,0]
var str = "aa,ttt,121,gg,kk,aa,bb";
var arr = str.split(",");
console.log(arr);//["aa","ttt","121","gg","kk","aa","bb"]
var str = "How are you";
console.log(str.split(" ",2));//["How","are"]

concat()

var str = "aa,ttt,121,gg,kk,aa,bb";
var arr = str.split(",");
//concat -- 既可以连接字符串，也可以连接数组
console.log(str.concat(",55",",77",",00"));//aa,ttt,121,gg,kk,aa,bb,55,77,00
console.log(arr.concat("55","77","00"));// ["aa", "ttt", "121", "gg", "kk", "aa", "bb", "55", "77", "00"]

replace()

//replace:替换(配合正则表达式)
//如下写法只会替换第一个符合要求的字符串
var str = "aa,ttt,121,gg,kk,aa,bb";
console.log(str.replace("aa","dodoke"));//dodoke,ttt,121,gg,kk,aa,bb

//全部替换的功能
console.log(str.replace(/aa/g,"dodoke"));//dodoke,ttt,121,gg,kk,dodoke,bb

日期函数
Date、getDate 、 getDay 、 getMonth、 getFullYear、 （getYear）、 getHours、 getMinutes、 getSeconds

// 该方法总是结合一个 Date 对象来使用
		// var d1 = new Date();//定义一个date对象
		// var d2 = new Date("2021-1-23");//内部也可以自己定义日期
		// // getDate()获取当前是几号
		// var n1 = d1.getDate();
		// var n2 = d2.getDate();
		// console.log(n1);//显示的是20
		// console.log(n2);//显示的是23

		// var d1 = new Date();
		// getMonth()获取当前是几月，但显示的是数字是0（一月）到 11（十二月） 之间的一个整数，所以要想显示正确的月份，要在后面加一
		// var n1 = d1.getMonth();
		// //var n1 = d1.getMonth()+1;
		// console.log(n1);//显示的是4

		// var d1 = new Date();
		// // getFullYear()返回值是一个四位数，表示包括世纪值在内的完整年份，而不是两位数的缩写形式。
		// var n1 = d1.getFullYear();
		// console.log(n1);//显示的是2020

		// var d1 = new Date();
		// // getHours()返回值是 0 （午夜） 到 23 （晚上 11 点）之间的一个整数
		// var n1 = d1.getHours();
		// console.log(n1);//显示的是13

		// var d1 = new Date();
		// // 返回值是 0 ~ 59 之间的一个整数,由 getMinutes() 返回的值是一个两位的数字。不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字
		// var n1 = d1.getMinutes();
		// console.log(n1);//显示的是40

		// var d1 = new Date();
		// // 返回值是 0 ~ 59 之间的一个整数，由 getSeconds() 返回的值是一个两位的数字。不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字
		// var n1 = d1.getSeconds();
		// console.log(n1);//显示的是47

		//显示如2020-5-20 13:43:34这样的格式化时间
		var d1 = new Date();//先定义一个Date对象
		var yyyy,mm,dd,hh,mi,ss;//定义年，月，日，小时，分钟，秒
		var time;//定义一个存放最后格式化时间的变量
		yyyy = d1.getFullYear();
		mm = d1.getMonth()+1;//这里需要加1，因为月份是从索引号0开始
		dd = d1.getDate();
		hh = d1.getHours();
		mi = d1.getMinutes();
		ss = d1.getSeconds();
		time = yyyy + "-" + mm + "-" + dd + " " + hh + ":" + mi + ":" + ss;
		console.log(time);//显示的就是当前的时间，不断刷新会发现变化

数学函数

// var n = 12.56256;
		// // Math.round()在js中只能取整数，不能保留小数，遵循四舍五入
		// console.log(Math.round(n));//显示的是13
		// // toFixed() 方法可把 Number 四舍五入为指定小数位数的数字
		// console.log(n.toFixed(3));//显示的是12.563
		// console.log(n.toFixed(0));//显示的是13

		//取最小值
		console.log(Math.min(23,24,1,46));
		//取最大值
		console.log(Math.max(23,24,1,46));

		//取绝对值
		console.log(Math.abs(-1));
		console.log(Math.abs(3));

数组函数

// 声明或者创建一个不指定长度的数组，又称之为实例化创建
		// var arr = new Array();
		// 声明或者创建一个数组并指定长度的数组
		// var arr = new Array(3);

		// var arr = [2,3,4,"d","u",6,5];
		//console.log(arr[3]);//显示的是d
		//数组的遍历
		// for(var i in arr){
		// 	console.log(arr[i]);
		// }

		// var arr = [2,3,4,"d","u",6,5];
		// arr.push(2,3);
		// // push()把它的参数顺序添加到数组的尾部
		// // 返回值：把指定添加到数组后的新长度。number
		// console.log(arr);

		// var arr = [2,3,4,"d","u",6,5];
		// unshift()把它的参数顺序添加到数组的头部
		// 返回值：把指定添加到数组后的新长度。number
		// arr.unshift(5,6);
		// console.log(arr);

		// var arr = [2,3,4,"d","u",6,5];
		// // pop()删除arrayObj的最后一个元素
		// // 返回值：被删除的那个元素
		// arr.pop();
		// console.log(arr);

		// var arr = [2,3,4,"d","u",6,5];
		// // shift()删除arrayObj的第一个元素
		// // 返回值：被删除的那个元素
		// arr.shift();
		// console.log(arr);

		// var arr = [2,3,4,"d","u",6,5];
		// // join()用于把数组中的所有元素放入一个字符串
		// console.log(arr.join());//显示的是2,3,4,"d","u",6,5

		// var arr = [2,3,4,"d","u",6,5];
		// // reverse()用于颠倒数组中的元素的顺序
		// console.log(arr.reverse());//显示的是[5, 6, "u", "d", 4, 3, 2]

		// var arr = [2,3,4,"d","u",6,5];
		// // sort()用于对数组的元素进行排序
		// // 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
		// 说明：
		// a. 即使数组中每一项都是数值，sort()方法比较的也是字符串
		// b. sort()方法可以接收一个比较函数作为参数
		// console.log(arr.sort());

		// 使用一个比较函数进行排序
		// function sortNumber(a,b)
		// {
		// 	return a - b
		// }

		// var arr = new Array(6)
		// arr[0] = "10"
		// arr[1] = "5"
		// arr[2] = "40"
		// arr[3] = "25"
		// arr[4] = "1000"
		// arr[5] = "1"

		// document.write(arr + "<br />")
		// document.write(arr.sort(sortNumber))


		// var arr = [2,3,4,"d","u",6,5];
		// var arr1 = [24,234];
		// // concat()用于连接两个或多个数组
		// console.log(arr.concat(arr1));

		var arr = [2,3,4,"d","u",6,5];
		// slice()从已有的数组中返回选定的元素
		// arr.slice(start,end)
		// 	start -- 必须  规定从何处开始选取，如果是负数，从数组的尾部开始算起
		// 	end  --  可选  规定从何处结束选取，是数组片段结束处的数组下标
		// 	start和end指的是数组中的索引值
		// 	截取从start到end（不包含的元素），正确的是从start到end-1的元素  -- 算前不算后
		console.log(arr.slice(0,3));//显示2,3,4