当前位置：首页 > news >正文

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

news 来源：原创 2024/11/17 20:25:02

内置函数

alert警告框

promopt提示框

console控制台

字面量

数字型

字符串型

变量

声明与赋值

类型检测

类型转换

比较运算符

逻辑运算符

条件句

if else

switch

break,continue

while

赋值运算符

函数

关键字形式函数

变量认知

作用域

表达式形式函数

IIFE

数组

字符串

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

内置函数

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]