JavaScript基础知识总结

一、js的数据类型

基本数据类型：string（字符串）、number（数字）、boolean（布尔）、undefined（未定义）、null（对空）

引用数据类型：object（对象）、function（函数）、array（数组）

ES6新增了Symbol类型，这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记，用于唯一的标识符

ES10新增了bigint，用于任意长度的整数

二、undefined与null的区别

undefined表示“不存在”，变量已被声明但未赋值，则返回undefined。undefined为常规函数的默认返回值（构造函数的返回值是当前构造对象）

null为空，表示没有对象，即不应该有值，经常用作函数的参数。是JS原型链的顶端。 

三、数据类型之间的转化

转换成字符串：

隐式转换：如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼

接，某些函数的执行也会自动将参数转为字符串类型比如console.log()。console.log('10'+20)//1020 

显示转换：String()

（typeof用来判断基本数据类型，返回字符串、数组、布尔，其他类型均返回Object）

var str1 = "100"
var str2 = 200
// + 是隐式转换
var result = str1 + str2
console.log(result,typeof result);//100200 string

//显式转换
str2 = String(str2)
console.log(str2,typeof str2);//200 string

 转换成数字类型：

隐式转换：在算数运算中，通常会将其他类型转换成数字类型来进行运算； 比 如 "6" / "2"； 但是如果是+运算，并且其中一边有字符串，那么还是按照字符串来连接的；

显示转换：Number()、parseInt()

//number转换
var a = "10"
var b = 2
var r = a / b
console.log(r);//隐式转换 5

//显式转换
console.log(Number(null));//0
console.log(Number(true),Number(false));//1  0
console.log(Number("10a"));//NaN
console.log(parseInt("10"));//10
console.log("10"+ 20);//1020
console.log(Number("10")+20);//30
console.log(parseInt("10")+20);//30
console.log(+"10"+20);//30

转换成布尔类型

Boolean()

注意：包含 0 的字符串 "0" 是 true

//Boolean类型转换
console.log(Boolean(0));//false
console.log(Boolean("0"));//true

四、数组的常用方法

1、指定字符连接字符串

join();数组的每个元素以指定的字符连接形成新字符串返回，不改变原数组;

let arr=[1,2,3,4,5];

let newArr=arr.join()//默认用逗号连接
console.log(newArr);//newArr=1,2,3,4,5;

//如果连接符为空字符串，则会无缝连接
console.log(arr.join(""));//输出为12345；

2、在数组末尾插入元素

push(value):在数组的末尾添加一个或多个元素，并返回数组的新长度

let arr=[1,2,3,4,5]
var length=arr.push(6,7);
console.log(arr, length);//arr=[1,2,3,4,5,6,7] length=7

3、删除数组末尾的元素

pop():删除数组中最后一个元素,并返回被删除的元素。

arr.pop()的与arr.length--的效果一样，但arr.length--没有返回值；

let arr=[1,2,3,4,5]
var del=arr.pop();
console.log(arr, del);//arr = [1,2,3,4]  del = 5

4、在数组的头部插入元素

unshift(value):在数组的头部添加一个或多个元素,并返回数组的新长度

let arr=[1,2,3,4,5]
var length= arr.unshift(0);
console.log(arr,length);//arr=[0,1,2,3,4,5];length=6

5、删除数组的头部元素

shift():删除索引为0的元素，并返回删除的元素

let arr=[1,2,3,4,5]
var del= arr.shift();
console.log(arr, del);//arr = [2,3,4,5]  del = 1

6、将数组进行翻转

reverse():可以将数组进行倒序，并返回新数组，原数组也会随之改变

let arr=[1,2,3,4,5];
let newArr=arr. reverse();
console.log(newArr,arr)；//newArr=[5,4,3,2,1]; arr=[5,4,3,2,1];

7、将数组排序

sort():将数组进行排序(升序),返回新数组，原数组也会改变;

function sortUp(a,b)
{
　　return a - b
}
function sortDown(a,b)
{
　　return  b - a
}
// 举例：
arr = [13, 24, 51, 3]; 
console.log(arr.sort(sortDown));//[51,24,13,3] 
console.log(arr.sort(sortUp));//[3, 13, 24, 51](数组被改变)

8、数组的合并拼接

concat():合并数组或元素，返回新的数组,原数组不会改变

let arr = [1, 2, 3, 4, 5];
let arr1 = [6, 7, 8, 9];
let arr2 = arr.concat(arr1);
console.log(arr,arr2);//arr = [1,2,3,4,5]  arr2=[1, 2, 3, 4, 5, 6, 7, 8, 9]

9、在数组中添加删除或替换元素

splice():在任意位置添加或删除元素,返回删除或被替换的值，如果没有被删除或替换则返回空数组;

有三个参数：第一个为开始的下标，第二个参数为截取的长度，第三个参数为替换填充的数据

//只有一个值时，从当前位置删除到数组末尾
let arr1=[1,2,3,4,5]；
let num1=arr.splice(1)
console.log(num1;arr1)//num1=[2,3,4,5];arr1=[1];

//有两个值时，第一个值为删除的位置，第二个值为删除的个数;
let arr2=[1,2,3,4,5]；
let num2=arr1.splice(2,3)//删除从索引值2开始的3个元素
console.log(num2;arr2);// num2=[3,4,5],arr2=[1,2]

//有三个或者多个值时，第一个值为插入元素的位置，第二个值为替换的个数，后面的值都为插入的新元素；
let arr3=[1,2,3,4,5]；
let num3=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素，并且插入6,7,8
//如果第二个值为0，则不替换，直接插入6,7,8;
console.log(num3;arr3);//被替换的值num3=[3]; arr3=[1,2,6,7,8,4,5]

10、截取复制数组指定位置的内容

slice(开始位置，结束位置(不包括))：第二个参数不写默认到尾部,只能从前往后截取；返回的值为截取到的内容形成的新数组，不改变原数组

let copyArr=arr.slice(); // slice()或者slice(0)都可以复制数组；
let arr=[1,2,3,4,5]；
let newArr=arr.slice(1,3);//截取索引1到索引3(不包括3)的值;
console.log(newArr,arr)；//newArr=[2,3];arr=[1,2,3,4,5];

五、JS流程控制

分支语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

if…else 语句 - 当条件为 true 时执行if代码，当条件为 false 时执行else代码

if…else if…else 语句 - 使用该语句来选择多个代码块之一来执行

switch…case 语句 （不写break会有穿透的效果）- 使用该语句来选择多个代码块之一来执行

// if案例：单位5元/斤的苹果，如果购买超过5斤，那么立减8元
// 注意：这里我们让用户输入购买的重量，计算出最后的价格并且弹出结果
var weight = prompt("请输入购买的苹果重量")
var price =  weight * 5
if (weight > 5){
price -= 8
    }
alert("购买了"+ weight +"斤苹果，总价" + price+"元")

// if-else案例：m=20，n=30，比较两个数字的大小，获取较大的那个数字
var m = 20
var n = 30
var max = 0
if(n>m){
max = n
    }else{
max = m
    }
console.log(max);

// if-else if-else案例: 分数评级：
// 考试分数大于90：优秀
// 大于80小于等于90：良好
// 大于60小于等于80：合格
// 小于60分：不及格
var s = prompt("请输入成绩：")
if(s >90){
console.log("优秀");
    }else if(s>80){
    console.log("良好");
    }else if(s >=60){
    console.log("合格");
    }else{
    console.log("不及格");
}

// switch案例练习：播放模式（单曲循环、循环播放、随机播放）
var player = 1
switch(player){
   case 1:
       console.log("单曲循环");
       break;
   case 2:
       console.log("循环播放");
       break;
   case 3:
       console.log("随机播放");
       break;
    default:
       console.log("什么都不做");
  }

循环结构

for - 循环代码块一定的次数

for/in - 循环遍历对象的属性

while - 当指定的条件为 true 时循环指定的代码块

do/while - 同样当指定的条件为 true 时循环指定的代码块

for(var i = 0;i < 10;i++){
            console.log("hello world");
}
// for循环嵌套案例：在屏幕上显示一个三角的❤图像
for(var a = 0; a<6; a++){ //外层循环，控制行
    for(var b = 0; b<a+1;b++){ //内层循环，控制列
        document.write("<span>❤</span>")
        }
        document.write("<br>")
    }

//for/in案例遍历对象ob中的每个属性
var ob = {"name":"张三","age":22,"sex":"男"};
for(key in ob){
 //输出属性和对应的属性值
 console.log(key+":"+ob[key]);
}
/*
//输出结果：
name:张三
age:22
sex:男
*/

var i = 0;
    while(i < 10){
    console.log("hello world");
    i++
}

//do-while循环:不管条件成不成立，do循环体都会先执行一次
//打印1-10
var x = 1;
do{
   console.log(x);
   x++;
}while(x<=10)

六、JS函数

定义函数的方法：

1、function  函数名  （[参数列表....]）{

        函数体。。。

}

2、使用function（）构造函数来定义函数，

        var 函数名 = new Function("参数一(x)", "参数二(y)", "返回值(return x*y;)");

3、var  函数名  =  function（参数1，参数2，。。。）{

        函数体

}