一篇文章带你学完JavaScript基础知识，超全的JavaScript知识点总结

最新推荐文章于 2024-05-21 23:21:19 发布

coleak

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量2.2k

点赞数 9

分类专栏： # JavaScript 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_63701832/article/details/128689829

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习时记得跟着代码敲一遍以便加深印象哦

内置函数

alert警告框

<script type="text/javascript">
alert("hello");
alert('hello');
alert(hello);
</script>
//弹框两次，alert的内容必须由单引号或者双引号引用。

promopt提示框

<script type="text/javascript">
prompt("hello");
prompt('hello');
</script>

console控制台

<script type="text/javascript">
//控制台打印
console.log('coleak1');
console.log('coleak2',"coleak3");
</script>

字面量

数字型

整数,小数,特殊值

<script type="text/javascript">
console.log(6e2);
console.log(3.14e2);
</script>

600,314

<script type="text/javascript">
console.log(-.45);
console.log(.125);
</script>

-0.45，0.125

<script type="text/javascript">
console.log(0.1+0.2);
console.log(.1+0.4);
console.log(.3+0.4);
</script>

0.30000000000000004，0.1+0.2比较特殊，二进制运算保留位数问题
0.5
0.7

Infinity

数字范围在-2^53~2^53之间，超过范围用infinity表示(也有正无穷和负无穷之分)

<script type="text/javascript">
console.log(-Infinity);
console.log(6E1243453);
</script>

-Infinity
Infinity

NaN

<script type="text/javascript">
console.log(0/0);
</script>

NaN，注意1/0为Infinity

字符串型

<script type="text/javascript">
console.log('666');
console.log(666);
</script>

打印结果分别为黑色字符串和蓝色整形

变量

声明与赋值

<script type="text/javascript">
var a=10;
var b;
b=20;
console.log(a,b);
</script>

打印结果为蓝色的10 20

<script type="text/javascript">
var b;
console.log(b);
</script>

打印结果为：undefined

<script type="text/javascript">
var b=100;
console.log(b);
console.log('b');
</script>

100
b

<script type="text/javascript">
console.log(b);
var b=100;
console.log(b);
</script>

undefined
100

注：各大浏览器的解析器会把变量声明提升到当前作用域的最上方

类型检测

<script type="text/javascript">
    console.log(typeof "666");
    console.log(typeof 123);
    console.log(typeof 3.14);
    console.log(typeof Infinity);
    console.log(typeof NaN);
    console.log(typeof true);
    console.log(typeof undefined);
    console.log(typeof null);
    var age = 666;
        age = "111";
    console.log(typeof age);
 </script>

string
number
number
number
number
boolean
undefined
object，但是null属于NULL类型
string

类型转换

连字符+

<script type="text/javascript">
var age=11;
var name="coleak";
console.log(typeof (age+name));
console.log(age+name);
 </script>

string

11coleak

parseint parsefloat

<script type="text/javascript">
console.log(parseInt("666"));
console.log(parseInt("666.555"));
console.log(parseInt("coleak"));
console.log(parseInt("666coleak"));
console.log(parseFloat("666.66coleak"));
console.log(parseFloat("666coleak"));
 </script>

666
666
NaN
666
666.66
666

<script type="text/javascript">
var age=prompt("请输入你的年龄");
console.log(typeof age);
console.log("你的年龄是"+age+"岁");
 </script>

string
你的年龄是100岁

<script type="text/javascript">
        console.log(true + 66);
        console.log(false * 88);
        console.log(undefined / 33);
        console.log(null - 888);
        console.log(true + null);
</script>

67
0
NaN
-888
1

比较运算符

>	大于
>=	大于等于
<	小于
<=	小于等于
==	相等
!=	不等
===	全等
!==	不全等

<script type="text/javascript">
console.log(99==99);
console.log(99=="99");
console.log(99===99);
console.log(99==='99');
</script>

true
true
true
false

逻辑运算符

逻辑运算符一共三个：逻辑与&&、逻辑或||、逻辑非！

<script type="text/javascript">
    console.log(0 && 99);
    console.log(135 && 6);
    console.log(NaN && Infinity);
    console.log(null && undefined);
    console.log("张三" && "李四");
    console.log(0||NaN);
    console.log(123 || 456);
    console.log("" || Infinity);
    console.log(undefined||"贾称号");
    console.log(3 > 6 && 99 < 22);
    console.log(66 < 100 &&"coleak");
 </script>

0
(索引):14 6
(索引):15 NaN
(索引):16 null
(索引):17 李四
(索引):18 NaN
(索引):19 123
(索引):20 Infinity
(索引):21 贾称号
(索引):22 false
(索引):23 coleak

条件句

if else

<script type="text/javascript">
  //用户输入一个分数
  var score = prompt("请你输入一个分数");
  if(score >= 60){
  	 alert("及格了");
  }else{
  	 alert("挂科啦");
  }
</script>

<script type="text/javascript">
    var score = prompt("请你输入一个分数");
    if(score < 60){
        alert("来补考");
    }
    else if(score < 70)
    {
        alert("及格了");
    }
    else if(score < 90)
    {
        alert("良好");
    }
    else{
        alert("优秀")
    }
  </script>

switch

switch条件语句的条件，可以是变量（存储任意类型数据）。
case后面紧随条件语句情况。
break关键字的作用是终止、打破switch条件语句。执行条件语句后面代码。
default关键字，可以理解为else，对于上面分支条件进行全部否定。

break,continue

while

<script type="text/javascript">
    var num = 0 ;
    do{
          num++;
       console.log(num);
    }while(num < 10);
 </script>

<script type="text/javascript">
  do{
  	   var a = parseInt(Math.random()*10);
  	   var b = parseInt(Math.random()*10);
  }while(a==0&&b==0);
  console.log(a,b);
 </script>
//在控制台中输出两个随机数字【0~9】，且两者不同同时为零。

赋值运算符

= 、 +=、-=、*=、/=、%=、自增 ++ 、自减 --

函数

一种关键字function定义函数、表达式形式函数

关键字形式函数

关键字形式函数，需要通过关键字function进行声明、定义。函数在JS当中属于Object引用类型数据。函数如果只是声明、但是没有调用。函数体里面代码不会运行。如下，因为没有调用所以不会报错。

<script type="text/javascript">
    function func (){
乱七八糟瞎写一通
    }
    // func();
  </script>

变量认知

局部变量只能在函数体中使用。

全局变量：除了局部变量以外的都是全局变量，

全局变量，可以在JS行为层中任意地方使用。

作用域

<script type="text/javascript">
    var num = 66;
    function fun (){
          var num = 99;
        console.log(num);
    }
    fun();
    console.log(num);
</script>

99,66

<script type="text/javascript">
  var num = 66;
  function fun (){
  	  console.log(num);
  	  var num = 99;
  }
  fun();
</script>

undefined

在JS当中任何语句都阻挡不了变量声明部分提升，会提升到当前作用域最上方。

表达式形式函数

就是将关键字function定义的函数赋值给变量形式

<script type="text/javascript">
    //表达式形式函数
    var fun = function(){
    	 var a = 666;
    	 var b = 111;
    	 console.log(a + b);
    }
    fun();
</script>

关键字形式函数可以在声明之前、声明之后调用。
由于解析器，可以将关键字形式函数声明部分提升到当前作用域最上方。
表达式形式函数:只能在声明之后才可以调用。
表达式形式函数:由于变量声明部分提升（提升到当前作用域最上方）,因此是undefined。

IIFE

在声明表达式形式函数的同时立刻马上执行一次

<script type="text/javascript">
    //IIFE:声明 表达式形式函数同时 立刻、马上执行一次
    //表达式形式函数的   声明部分
    var fun = function (){
     console.log('我执行了')
    }();
  </script>

199,69

数组

<script type="text/javascript">
    //数组:可以存储任意类型的元素
    var arr = ["吃饭","睡觉","打豆豆",true,NaN];
    //读取数据:可以利用枚举法获取数组里面元素
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[4]);
    console.log(arr[99]);
  </script>

吃饭
睡觉
NaN
undefined

<script type="text/javascript">
    //数组:可以存储任意类型的元素
    var arr = ["吃饭","睡觉","打豆豆",true,NaN];
    //读取数据:可以利用枚举法获取数组里面元素
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[4]);
    console.log(arr[99]);
    //修改已有的数据
    arr[1] = "学习";
    arr[4] = '小帅哥';
    //给数组添加新的数据
    arr[5] = false;
    arr[999] = 'coleak';
    console.log(arr);
  </script>

吃饭
睡觉
NaN
undefined
(1000) ['吃饭', '学习', '打豆豆', true, '小帅哥', false, 空 ã993, 'coleak']

<script type="text/javascript">
    //声明一个数组
    var arr = ["吃饭","睡觉","打豆豆",true,[1,2,3]];
    //length属性:获取当前数组的元素总个数
    console.log(arr.length);
    console.log(arr[4][1]);
  </script>

5

2

<script type="text/javascript">
    //数组
    var arr = ["小鸡","三饼","四条","白板"];
    //push:可以在数组的尾处添加一个或者多个元素
    arr.push("曹操");
    arr.push("刘备",NaN,"coleak");
    console.log(arr);
    //数组
    var arr1 = ['手机','电视','彩电','洗衣机'];
    //pop:可以在数组的尾处移除一个元素
    arr1.pop();
    arr1.pop();
    console.log(arr1);
  </script>

(8) ['小鸡', '三饼', '四条', '白板', '曹操', '刘备', NaN, 'coleak']
(2) ['手机', '电视']

备注：

unshift：可以向数组头部添加一个或者是多个元素
shift:可以向数组的头部移除一个元素
join：主要的作用是可以通过某一个字符将数组拼接转换为字符串。
reverse:可以把当前的数组的元素进行倒置。
数组的join方法：可以通过某一个字符串将数组转换为一个字符串。【对起始数组没有任何影响】
数组的reverse方法：可以将当前的数组的元素进行倒置。

<script type="text/javascript">
    //数组
    var arr = [1,2,3,4,5,6];
    //join:可以通过某一个字符将数组转化为字符串
    var str = arr.join("*");
    var str1 = arr.join('');
    console.log(arr,str,str1);
    //数组
    var arr = ['北京',"上海",'深圳','广州'];
    arr.reverse();
  console.log(arr);
</script>

(6) [1, 2, 3, 4, 5, 6] '1*2*3*4*5*6' '123456'
(4) ['广州', '深圳', '上海', '北京']

indexOf:它可以获取数组当中某一个元素的索引值【下脚标】
includes:它主要的作用是检测某一个元素是不是当前这个数组的。如果是【返回布尔值真】，否则【返回布尔值假】

<script type="text/javascript">
    //数组
    var arr = ['吃饭','睡觉','打豆豆','烫头'];
    //indexOf:这个方法主要的作用是可以获取到某一个元素的索引值
    console.log(arr.indexOf("吃饭"));
    console.log(arr.indexOf('打豆豆'));
    console.log(arr.indexOf('666'));
    //includes:这个方法主要的作用是检测数据是不是当前数组的
    console.log(arr.includes("吃饭"));
    console.log(arr.includes('coleak'));
  </script>

0
2
-1
true
false

slice：从起始数组当中切割出一个新的子数组
splice:可以对数组进行切割、插入、替换。
slice方法：数组通过这个方法可以切割出一个新的数组【slice对于起始数组没有任何影响】
slice方法：传递参数至少一个、最多两个参数。【起始索引值、结束索引值）
splice:可以对于起始数组进行切割，返回一个新数组【对于起始数组有影响】
第一个参数：切割的起始位置索引值，第二个参数：切割元素的长度

<script type="text/javascript">
    //数组
    var arr = ['张飞','刘备','关羽','马超','黄忠','曹操'];
    //slice:主要的作用是切割某一个数组并且返回一个新的数组
    //这个方法传参至少一个参数【都是数组的索引值】
    var newArr = arr.slice(2);
    var newArr1= arr.slice(1,3);
    console.log(newArr);
    console.log(newArr1);
    console.log(arr);
  </script>

(4) ['关羽', '马超', '黄忠', '曹操']
(2) ['刘备', '关羽']
(6) ['张飞', '刘备', '关羽', '马超', '黄忠', '曹操']

<script type="text/javascript">
    //数组
    var arr = [55,33,21,88,57,48,29];
    //splice:可以对于当前数组进行切割、插入、替换元素操作
    //切割:第一个参数切割起始位置索引值
    //传递一个
    var newArr1  = arr.splice(2,2);
    // console.log(newArr);
    //传递两个参数:第一个参数代表的是切割起始位置、第二个参数切割长度
     var newArr2  = arr.splice(2);
     console.log(newArr1);
     console.log(newArr2);
     console.log(arr);
</script>

(2) [21, 88]
(3) [57, 48, 29]
(2) [55, 33]

字符串

<script type="text/javascript">
    var str = "我爱你我的祖国";
    console.log(str.length);
  </script>

7

indexOf:获取到第一个匹配到的字符的索引值。
lastIndexOf:获取到的最后一个匹配到的字符的索引值。

<script type="text/javascript">
    //indexOf:获取到一个匹配到的字符串的  索引值
    var str = "我爱你我的祖国";
    console.log(str.indexOf("我"));
    console.log(str.indexOf('666'));
    console.log(str.lastIndexOf('我'));
 </script>

0
-1
3

toLowerCase：将字符串中英文字符变为小写
toUpperCase:将字符串中英文字符变为大写

<script type="text/javascript">
    var str = "我喜欢英文aBcD";
    var newStr = str.toUpperCase();
    var newStr1 = str.toLowerCase();
    console.log(newStr);
    console.log(newStr1);
    console.log(str);
  </script>

我喜欢英文ABCD
我喜欢英文abcd
我喜欢英文aBcD

search:它的作用是可以获取到某一个字符的索引值。
split:它的作用是可以将字符串通过某一个字符切割为数组。

<script type="text/javascript">
    var str = "我是祖国的花骨朵";
    //search:获取到某一个字符的索引值
    console.log(str.indexOf("祖"));
    console.log(str.search("祖"));
 </script>
 <script type="text/javascript">
       var str = "我今天买了一个华为手机花了我5888";
       //split:可以将字符串通过某一个字符分割为一个数组
       var arr = str.split("华");
       var arr1 = str.split("");
       console.log(arr);
       console.log(arr1);
 </script>

2
2
(2) ['我今天买了一个', '为手机花了我5888']
(18) ['我', '今', '天', '买', '了', '一', '个', '华', '为', '手', '机', '花', '了', '我', '5', '8', '8', '8']

substring:它是字符串方法，主要的作用是在父串当中切割出一个子串
str.substring(起始索引值，结束索引值) 包含起始索引值、不包含结束索引值
substr:它也是字符串方法，它主要的作用也是从父串当中切割出一个子串
str.substr(起始索引值，切割长度)
replace:可以替换某一个字符串中复合条件的字符进行替换。
match:可以进行将某一个字符串中符合条件的第一个字符匹配出来，返回的是一个数组。

<script type="text/javascript">
    var str = "我今天买了一个华为手机,花了我5688元";
    //replace:可以将某一个字符串中符合条件的字符进行替换
    var newStr = str.replace("华为","vivo");
    console.log(newStr);
    console.log(str);
  </script>
  <script type="text/javascript">
    var str = "coleakayuexiao";
    //match:可以将某一个字符串中第一个符合条件的字符匹配出来，返回一个数组
     var arr  = str.match("a");
     console.log(arr);
  </script>

我今天买了一个vivo手机,花了我5688元
我今天买了一个华为手机,花了我5688元
['a', index: 4, input: 'coleakayuexiao', groups: undefined]