AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-08-24 294
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一篇文章带你学完JavaScript基础知识，超全的JavaScript知识点总结

内置函数

alert警告框

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

promopt提示框   

1. <script type="text/javascript">
2. prompt("hello");
3. prompt('hello');
4. </script>

console控制台

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

字面量

数字型

整数,小数,特殊值

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

600,314

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

-0.45，0.125

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

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

0.5

0.7

Infinity

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

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

-Infinity

Infinity

NaN

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

NaN，注意1/0为Infinity

字符串型

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

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

变量

声明与赋值

1. <script type="text/javascript">
2. var a=10;
3. var b;
4. b=20;
5. console.log(a,b);
6. </script>

打印结果为蓝色的10 20

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

打印结果为：undefined

1. <script type="text/javascript">
2. var b=100;
3. console.log(b);
4. console.log('b');
5. </script>

100

b

1. <script type="text/javascript">
2. console.log(b);
3. var b=100;
4. console.log(b);
5. </script>

undefined

100

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

类型检测

1. <script type="text/javascript">
2. console.log(typeof "666");
3. console.log(typeof 123);
4. console.log(typeof 3.14);
5. console.log(typeof Infinity);
6. console.log(typeof NaN);
7. console.log(typeof true);
8. console.log(typeof undefined);
9. console.log(typeof null);
10. var age = 666;
11.         age = "111";
12. console.log(typeof age);
13.  </script>

string

number

number

number

number

boolean

undefined

object，但是null属于NULL类型

string

类型转换

连字符+

1. <script type="text/javascript">
2. var age=11;
3. var name="coleak";
4. console.log(typeof (age+name));
5. console.log(age+name);
6.  </script>

string

11coleak

parseint parsefloat

1. <script type="text/javascript">
2. console.log(parseInt("666"));
3. console.log(parseInt("666.555"));
4. console.log(parseInt("coleak"));
5. console.log(parseInt("666coleak"));
6. console.log(parseFloat("666.66coleak"));
7. console.log(parseFloat("666coleak"));
8.  </script>

666

666

NaN

666

666.66

666

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

string

你的年龄是100岁

1. <script type="text/javascript">
2. console.log(true + 66);
3. console.log(false * 88);
4. console.log(undefined / 33);
5. console.log(null - 888);
6. console.log(true + null);
7. </script>

67

0

NaN

-888

1

比较运算符

>

大于

>=

大于等于

<

小于

<=

小于等于

==

相等

!=

不等

===

全等

!==

不全等

 
1. <script type="text/javascript">
2. console.log(99==99);
3. console.log(99=="99");
4. console.log(99===99);
5. console.log(99==='99');
6. </script>

true

true

true

false

逻辑运算符

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

1. <script type="text/javascript">
2. console.log(0 && 99);
3. console.log(135 && 6);
4. console.log(NaN && Infinity);
5. console.log(null && undefined);
6. console.log("张三" && "李四");
7. console.log(0||NaN);
8. console.log(123 || 456);
9. console.log("" || Infinity);
10. console.log(undefined||"贾称号");
11. console.log(3 > 6 && 99 < 22);
12. console.log(66 < 100 &&"coleak");
13.  </script>

0

(索引):14 6

(索引):15 NaN

(索引):16 null

(索引):17 李四

(索引):18 NaN

(索引):19 123

(索引):20 Infinity

(索引):21 贾称号

(索引):22 false

(索引):23 coleak

条件句

if else

1. <script type="text/javascript">
2. //用户输入一个分数
3. var score = prompt("请你输入一个分数");
4. if(score >= 60){
5.   alert("及格了");
6.   }else{
7.   alert("挂科啦");
8.   }
9. </script>
1. <script type="text/javascript">
2. var score = prompt("请你输入一个分数");
3. if(score < 60){
4. alert("来补考");
5.     }
6. else if(score < 70)
7.     {
8. alert("及格了");
9.     }
10. else if(score < 90)
11.     {
12. alert("良好");
13.     }
14. else{
15. alert("优秀")
16.     }
17.   </script>

switch

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

break,continue

while

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

赋值运算符

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

函数

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

关键字形式函数

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

1. <script type="text/javascript">
2. function func (){
3. 乱七八糟瞎写一通
4.     }
5. // func();
6.   </script>

变量认知

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

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

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

作用域

1. <script type="text/javascript">
2. var num = 66;
3. function fun (){
4. var num = 99;
5. console.log(num);
6.     }
7. fun();
8. console.log(num);
9. </script>

99,66

1. <script type="text/javascript">
2. var num = 66;
3. function fun (){
4.    console.log(num);
5.    var num = 99;
6.   }
7. fun();
8. </script>

undefined

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

表达式形式函数

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

1. <script type="text/javascript">
2. //表达式形式函数
3. var fun = function(){
4.   var a = 666;
5.   var b = 111;
6.   console.log(a + b);
7.     }
8. fun();
9. </script>
  1. 关键字形式函数可以在声明之前、声明之后调用。
  2. 由于解析器，可以将关键字形式函数声明部分提升到当前作用域最上方。
  3. 表达式形式函数:只能在声明之后才可以调用。
  4. 表达式形式函数:由于变量声明部分提升（提升到当前作用域最上方）,因此是undefined。

IIFE

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

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

199,69

数组

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

吃饭

睡觉

NaN

undefined

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

吃饭

睡觉

NaN

undefined

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

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

5

2

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

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

(2) ['手机', '电视']

备注：

  1. unshift：可以向数组头部添加一个或者是多个元素
  2. shift:可以向数组的头部移除一个元素
  3. join：主要的作用是可以通过某一个字符将数组拼接转换为字符串。
  4. reverse:可以把当前的数组的元素进行倒置。
  5. 数组的join方法：可以通过某一个字符串将数组转换为一个字符串。【对起始数组没有任何影响】
  6. 数组的reverse方法：可以将当前的数组的元素进行倒置。
1. <script type="text/javascript">
2. //数组
3. var arr = [1,2,3,4,5,6];
4. //join:可以通过某一个字符将数组转化为字符串
5. var str = arr.join("*");
6. var str1 = arr.join('');
7. console.log(arr,str,str1);
8. //数组
9. var arr = ['北京',"上海",'深圳','广州'];
10.     arr.reverse();
11. console.log(arr);
12. </script>

(6) [1, 2, 3, 4, 5, 6] '1*2*3*4*5*6' '123456'

(4) ['广州', '深圳', '上海', '北京']

  1. indexOf:它可以获取数组当中某一个元素的索引值【下脚标】
  2. includes:它主要的作用是检测某一个元素是不是当前这个数组的。如果是【返回布尔值真】，否则【返回布尔值假】
1. <script type="text/javascript">
2. //数组
3. var arr = ['吃饭','睡觉','打豆豆','烫头'];
4. //indexOf:这个方法主要的作用是可以获取到某一个元素的索引值
5. console.log(arr.indexOf("吃饭"));
6. console.log(arr.indexOf('打豆豆'));
7. console.log(arr.indexOf('666'));
8. //includes:这个方法主要的作用是检测数据是不是当前数组的
9. console.log(arr.includes("吃饭"));
10. console.log(arr.includes('coleak'));
11.   </script>

0

2

-1

true

false

  1. slice：从起始数组当中切割出一个新的子数组
  2. splice:可以对数组进行切割、插入、替换。
  3. slice方法：数组通过这个方法可以切割出一个新的数组【slice对于起始数组没有任何影响】
  4. slice方法：传递参数至少一个、最多两个参数。【起始索引值、结束索引值）
  5. splice:可以对于起始数组进行切割，返回一个新数组【对于起始数组有影响】
  6. 第一个参数：切割的起始位置索引值，第二个参数：切割元素的长度
1. <script type="text/javascript">
2. //数组
3. var arr = ['张飞','刘备','关羽','马超','黄忠','曹操'];
4. //slice:主要的作用是切割某一个数组并且返回一个新的数组
5. //这个方法传参至少一个参数【都是数组的索引值】
6. var newArr = arr.slice(2);
7. var newArr1= arr.slice(1,3);
8. console.log(newArr);
9. console.log(newArr1);
10. console.log(arr);
11.   </script>

(4) ['关羽', '马超', '黄忠', '曹操']

(2) ['刘备', '关羽']

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

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

(2) [21, 88]

(3) [57, 48, 29]

(2) [55, 33]

字符串

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

7

  1. indexOf:获取到第一个匹配到的字符的索引值。
  2. lastIndexOf:获取到的最后一个匹配到的字符的索引值。
1. <script type="text/javascript">
2. //indexOf:获取到一个匹配到的字符串的  索引值
3. var str = "我爱你我的祖国";
4. console.log(str.indexOf("我"));
5. console.log(str.indexOf('666'));
6. console.log(str.lastIndexOf('我'));
7.  </script>

0

-1

3

  1. toLowerCase：将字符串中英文字符变为小写
  2. toUpperCase:将字符串中英文字符变为大写
1. <script type="text/javascript">
2. var str = "我喜欢英文aBcD";
3. var newStr = str.toUpperCase();
4. var newStr1 = str.toLowerCase();
5. console.log(newStr);
6. console.log(newStr1);
7. console.log(str);
8.   </script>

我喜欢英文ABCD

我喜欢英文abcd

我喜欢英文aBcD

  1. search:它的作用是可以获取到某一个字符的索引值。
  2. split:它的作用是可以将字符串通过某一个字符切割为数组。
1. <script type="text/javascript">
2. var str = "我是祖国的花骨朵";
3. //search:获取到某一个字符的索引值
4. console.log(str.indexOf("祖"));
5. console.log(str.search("祖"));
6.  </script>
7. <script type="text/javascript">
8. var str = "我今天买了一个华为手机花了我5888";
9. //split:可以将字符串通过某一个字符分割为一个数组
10. var arr = str.split("华");
11. var arr1 = str.split("");
12. console.log(arr);
13. console.log(arr1);
14. </script>

2

2

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

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

  1. substring:它是字符串方法，主要的作用是在父串当中切割出一个子串  
  2. str.substring(起始索引值，结束索引值)    包含起始索引值、不包含结束索引值
  3. substr:它也是字符串方法，它主要的作用也是从父串当中切割出一个子串
  4. str.substr(起始索引值，切割长度)
  5. replace:可以替换某一个字符串中复合条件的字符进行替换。
  6. match:可以进行将某一个字符串中符合条件的第一个字符匹配出来，返回的是一个数组。
1. <script type="text/javascript">
2. var str = "我今天买了一个华为手机,花了我5688元";
3. //replace:可以将某一个字符串中符合条件的字符进行替换
4. var newStr = str.replace("华为","vivo");
5. console.log(newStr);
6. console.log(str);
7.   </script>
8. <script type="text/javascript">
9. var str = "coleakayuexiao";
10. //match:可以将某一个字符串中第一个符合条件的字符匹配出来，返回一个数组
11. var arr  = str.match("a");
12. console.log(arr);
13. </script>

我今天买了一个vivo手机,花了我5688元

我今天买了一个华为手机,花了我5688元

['a', index: 4, input: 'coleakayuexiao', groups: undefined]

文章标签：
索引
JavaScript
前端开发
存储
关键词：
JavaScript知识点
JavaScript基础知识
coleak
目录
相关文章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念，从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链，层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
雨溪-yuxi
25 1
JavaScript中的原型 保姆级文章一文搞懂
进步`于辰
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]知识点
本文介绍了JavaScript中的多个重要知识点，包括ES6、严格模式、类与对象、解构、跨域问题及入口函数等。文章通过详细示例和推荐的外部资源，帮助读者更好地理解和应用这些概念。内容持续更新中，适合初学者和进阶开发者参考。
进步`于辰
19 2
[JS]知识点
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
wishCoding
103 2
进步`于辰
|
1月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块，包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念，还推荐了相关博文供深入学习。特别强调了express模块的使用，包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案，并总结了一些通用设置。适合Node.js初学者参考学习。
进步`于辰
41 1
CamilleKing
|
1月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点，ES6 还带来了许多其他的特性和改进，这些特性使得 JavaScript 更加现代化和强大，为开发者提供了更多的便利和灵活性。
CamilleKing
25 3
疯狂的猿
|
26天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
疯狂的猿
17 0
神明木佑
|
2月前
|
存储 JSON JavaScript
JS知识点
JS知识点
神明木佑
27 3
小强在此
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
28 5
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点，包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子，演示了类的构造器、方法定义、继承关系和静态方法的调用。
杀死一只知更鸟debug
39 0
JavaScript 类知识点概览
神明木佑
|
2月前
|
前端开发 JavaScript
JavaScript 知识点总结
JavaScript 知识点总结
神明木佑
30 0

热门文章

最新文章

  • 1
    JavaScript链式结构序列化详解
  • 2
    为什么 JavaScript 会在移动端中胜出？
  • 3
    JavaScript入门
  • 4
    JS的正则表达式1
  • 5
    node.js入门学习
  • 6
    JFinal 参数校验插件扩展，让后台参数校验像js一样方式好用
  • 7
    前端 时间个性化 插件 jquery.timeago.js
  • 8
    JavaScript基础知识
  • 9
    《JavaScript启示录》——1.6 从构造函数创建字面量值
  • 10
    JS isNaN()函数
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    54
  • 2
    js设计模式-观察者模式与发布/订阅模式
    72
  • 3
    js设计模式-策略模式与代理模式的应用
    72
  • 4
    深入理解JavaScript中的闭包机制
    60
  • 5
    使用Vue.js构建交互式前端的技术探索
    89
  • 6
    使用Node.js构建实时聊天应用的技术指南
    132
  • 7
    深入理解JavaScript中的事件循环机制
    89
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    121
  • 9
    JavaScript 数组方法概览
    38
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    67

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML5 新特性教程
  • 前端开发CSS基础
  • Ajax 前端开发入门与实战
  • HTML 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
    • 下一篇
    DataWorks