今天主要是学习了JavaScript的一些基础语法，但是今天没有将语法展示的结果截图显示，如果想看效果，可以看一下上篇博客的一些基本操作，自行到浏览器打印看输出结果。今天主要是把学习的代码分享出来，把基本的语法吃透理解。

1.字符串

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <script>
  8.         'use strict'
  9.         console.log('a');
  10.         console.log("a");
  12.         //模板字符
  13.         // var msg = `
  14.         // hello
  15.         // world
  16.         // 你好呀
  17.         // 我很好`
  18.         // console.log(msg)
  19.         let name = "zhangsan"
  20.         let age = 3;
  22.         let msg = `你好呀，${name}`
  23.         console.log(msg)
  24.     </script>
  25. </head>
  26. <body>
  27.  
  28. </body>
  29. </html>

 

2.数组知识点

  1. 1.长度
  2. arr.length
  3. 注意：加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
  5. 2.indexOf，通过元素获得下标索引
  6.     var arr = [1,2,3,45,6,34]
  7.     arr.indexOf(2)
  8.     1
  9. 字符串的“1”和数字1是不同的
  11. 3.slice()截取Array的一部分，返回一个新数组，类似于String中的substring
  12.     var arr = [1,2,3,45,6,34]
  13.     arr.slice(2,4)
  14.     [3, 45]
  15. slice()截取的部分包前不包后
  17. 4.push(),pop()
  18. push:压入到尾部
  19. arr.push("we",'dsf')
  20. arr [0, 2, 3, 45, 6, 34, empty × 3, 'we', 'dsf']
  21. pop:弹出尾部的一个元素
  22. arr.pop()
  23. arr[0, 2, 3, 45, 6, 34, empty × 3, 'we']
  25. 5.unshift(),shift()（和上面的一样）
  26. push:压入到头部
  27. pop:弹出头部的一个元素
  29. 6.排序sort()
  30. arr =["B","A","C"]
  31. arr.sort()
  32. ['A', 'B', 'C']
  34. 7.元素反转reverse()
  35. (3) ['A', 'B', 'C']
  36. arr.reverse()
  37. (3) ['C', 'B', 'A']
  39. 8.拼接concat()
  40. arr.concat([1,2,3])
  41. (6) ['C', 'B', 'A', 1, 2, 3]
  42. arr
  43. (3) ['C', 'B', 'A']
  44. 注意：concat()并没有修改数组，只是会返回一个新的数组
  46. 9.连接符join
  47. 打印拼接数组，使用特定的字符串连接
  48. (3) ['C', 'B', 'A']
  49. arr.join('-')
  50. 'C-B-A'

 

3.对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <script>
  8.         'use strict'
  9.  
  10.         //定义了一个person对象，它有四个属性！
  11.         //JavaScript中的所有的键都是字符串，值是任意对象！
  12.         //js中的对象，{.....}表示一个对象，键值对描述属性××××：××××，多个属性之间使用逗号隔开，最后一个属性不加逗号！
  13.         /*
  14.         * ①对象赋值：person.name="xiaoming"
  15.                   'xiaoming'
  16.                   person.name
  17.                   'xiaoming'
  18.         * ②使用一个不存在的对象属性，不会报错！undefined：person.id
  19.                                                    undefined
  20.         * ③动态的删减属性,通过delete删除对象的属性：delete person.age
  21.                                                true
  22.                                                person
  23.                                                {name: 'xiaoming', email: '2743116586@qq.com', score: 87}
  24.         *④动态的添加，直接给新的属性添加值即可
  25.           person.id="5720182029"
  26.           '5720182029'
  27.           person
  28.           {name: 'xiaoming', email: '2743116586@qq.com', score: 87, id: '5720182029'}
  29.         * ⑤判断属性值是否在这个对象中！××××in××××！
  30.           'id'in person
  31.           true
  32.           继承：
  33.            'toString' in person
  34.             true
  35.         * ⑥判断一个属性是否是这个对象自身拥有的hasOwnProperty()
  36.           person.hasOwnProperty('toString')
  37.           false
  38.           person.hasOwnProperty('name')
  39.           true
  40.         * */
  41.         var person={
  43.             name:"zhangsan",
  44.             age:34,
  45.             email:"2743116586@qq.com",
  46.             score:87
  47.         }
  49.     </script>
  50. </head>
  51. <body>
  52.  
  53. </body>
  54. </html>

 

4.流程控制

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <script>
  8.         'use strict'
  9.  
  10.         //forEach循环
  11.         var age = [23,2,54,6,43,68,45,65,75,4,8,26]
  13.         //函数
  14.         age.forEach(function (value) {
  15.             console.log(value)
  16.         })
  18.         //for...in打印数组的下标
  19.         for (var num in age){
  20.                 console.log(num)
  21.         }
  22.         //for...of打印数组元素
  23.         for (var num of age){
  24.             console.log(num)
  25.         }
  27.     </script>
  28. </head>
  29. <body>
  30.  
  31. </body>
  32. </html>

 

5.Map和Set

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <script>
  8.     //ES6  Map
  9.     //学生的成绩，学生的名字
  10.     // var names =["tom","jack","mary"];
  11.     // var scores = [100,95,87];
  12.     var  map = new  Map([['tom',100],['jack',95],['mary',87]]);
  13.     var name = map.get('tom');//通过key获得value
  14.     map.set('admin',123456);//新增或者修改
  15.     map.delete('tom')//删除
  16.     console.log(name);
  19.     var set = new Set([3,1,1,11,1,1,1,11])//set可以去重
  20.     set.add(2)//新增或者修改
  21.     set.delete(1)//删除
  22.     console.log(set.has(3));//是否包含某个元素
  23.  
  24.  
  25.     </script>
  26. </head>
  27. <body>
  28.  
  29. </body>
  30. </html>

 

6.iterator

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.  
  8.     <script>
  9.         'use strict'
  10.         //遍历map
  11.         var  map = new  Map([['tom',100],['jack',95],['mary',87]]);
  12.         for (let x of map){
  13.             console.log(x)
  14.         }
  15.         //遍历set
  16.         var set = new Set([5,6,7]);
  17.         for (let x of set){
  18.             console.log(x)
  19.         }
  22.     </script>
  23. </head>
  24. <body>
  25.  
  26. </body>
  27. </html>

结果展示

 

 

7.定义函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9.  
  10. <script>
  11.     /*定义方式一*/
  12.     function abs(x){
  13.         if (x>=0){
  14.             return x;
  15.         }else {
  16.             return -x;
  17.         }
  18.     }
  19.     //一旦执行到return代表函数结束，返回结果！
  20.     //如果没有执行return，函数执行完也会返回结果，结果就是undefined
  21.     /*定义方式二*/
  22.     var  bs = function(x){
  23.         if (x>=0){
  24.             return x;
  25.         }else {
  26.             return -x;
  27.         }
  28.     }
  29.     //function(x){....}这是一个匿名函数，但是可以把结果赋值给bs，通过bs就可以调用函数！
  30.     //函数的调用：① abs(-10)//10      ② abs(10)//10
  31.  
  32.  
  33.  
  34.     //arguments代表传递进来的所有参数是一个数组！
  35.     var sa = function (x) {
  36.         console.log("x=>"+x);
  37.         for (var i = 0;i<arguments.length;i++){
  38.             console.log(arguments[i]);
  39.         }
  41.     }
  43. </script>
  44. </body>
  45. </html>

 

8.多个参数的问题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9.  
  10. <script>
  11.     //rest参数只能写在最后面，必须用...标识。
  12.     function f(a,b,...rest) {
  13.     console.log("a=>"+a);
  14.     console.log("b=>"+b);
  15.     console.log(rest);
  16.     }
  17. </script>
  18. </body>
  19. </html>

 

9.变量的作用域

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <script>
  9.     'use strict'
  10.     //①在JavaScript中，var定义变量实际是有作用域的。
  11.     //假设在函数体中声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包）
  12.     function qj() {
  13.             var x= 1;
  14.             x= x+1;
  15.     }
  16.     //x=x+2;//Uncaught ReferenceError: x is not defined(假设在函数体中声明，则在函数体外不可以使用~)
  17.  
  18.     //②如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
  19.     function qj2() {
  20.         var x= 'q';
  21.         x= x+1;
  22.     }
  23.     //③内部函数可以访问外部函数成员，反之则不行
  24.     function qj3() {
  25.         var x= 1;
  26.         function qj4() {
  27.             var y= x+1;
  28.         }
  29.         var z = y+1;// Uncaught ReferenceError: y is not defined
  30.     }
  31.     //④假设在JavaScript中函数查找变量从自身函数开始~，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数变量
  32.  
  33.     function qj5() {
  34.         var x = 1;
  35.         function qj6() {
  36.             var x = 'a';
  37.             console.log('inner'+x);//outer1
  38.         }
  39.         console.log('outer'+x);//innera
  40.         qj6()
  41.     }
  42.     qj5()
  44.     //⑤提升变量的作用域
  45.     function qj7() {
  46.         var x = "x"+y;
  47.         console.log(x);
  48.         var y = 'y';
  49.         }
  50.         qj7()
  51.     //结果：xundefined    说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
  52.     //在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码的维护
  53.  
  54.     //⑥局部作用域 let
  55.     function f() {
  56.         for (let i = 0; i<100;i++){
  57.             console.log(i)
  58.         }
  59.         console.log(i+1);//问题：i出了这个作用域还可以使用    解决：建议都用let去定义局部作用域的变量；
  60.     }
  62.     //⑦常量 const
  63.     //ES6之前，只有用全部大写字母命名的变量就是常量；建议不要修改这样的值
  64.     var PI = '3.14';
  65.     console.log(PI);
  66.     PI = '2412';
  67.     console.log(PI);
  68.     //在ES6引入了常量关键字 const
  69.     const PI = '3.14';
  70.     console.log(PI);
  71.    /* PI = '2412';//尝试赋值给常量或只读变量 */
  72.  
  73. </script>
  74.  
  75.  
  76.  
  77. </body>
  78. </html>

 

10.方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9.  
  10. <script>
  11.  
  12.     function getAge () {
  13.         //今年-出生的年
  14.         var now = new Date().getFullYear();
  15.         return now -this.bitrh;
  17.         //zhangsan.age()  20     getAge()  NaN
  18.         //this是无法指向的，是默认指向调用它的那个对象；
  20.     }
  21.     //方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
  22.     var zhangsan = {
  23.         name:'张三',
  24.         bitrh:2002,
  25.         //方法
  26.         age:getAge
  28.     }
  29.     //apply 在js中可以控制this指向
  30.     getAge().apply(zhangsan,[]);//表示this指向了zhangsan这个对象
  31.     //属性  zhangsan.name    方法，一定要带()  zhangsan.age()
  32.  
  33.  
  34. </script>
  35. </body>
  36. </html>

 

11.Date

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <script>
  10.  
  11.     var now = new Date();
  12.     console.log(now);//Thu Mar 10 2022 15:41:07 GMT+0800 (中国标准时间)
  13.     now.getFullYear();//年
  14.     now.getMonth();//月
  15.     now.getDate();//日w
  16.     now.getDay();//星期几
  17.     now.getHours();//时
  18.     now.getMinutes();//分
  19.     now.getSeconds();//秒
  21.     now.getTime();//时间戳  全世界统一  从1970 1.1 0：00：00到现在的毫秒数
  24.     console.log(new Date(1646898067133));//时间戳转为时间
  25.     now.toLocaleString();//'2022/3/10 15:53:56'
  26.     now.toGMTString();//'Thu, 10 Mar 2022 07:53:56 GMT'
  27.  
  28. </script>
  29.  
  30.  
  31.  
  32. </body>
  33. </html>

 

12.JSON

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <script>
  10.  
  11.     var user ={
  12.         name:"zhangsan",
  13.         age:3,
  14.         sex:'男'
  15.     }
  17.     //对象转化为json字符串
  18.     var jsonUser = JSON.stringify(user);  //{"name":"zhangsan","age":3,"sex":"男"}
  19.  
  20.     //json 字符串转化为对象 参数为json字符串
  21.     var obj = JSON.parse('{"name":"zhangsan","age":3,"sex":"男"}');
  22.     /*
  23.       {name: 'zhangsan', age: 3, sex: '男'}
  24.        age: 3
  25.        name: "zhangsan"
  26.        sex: "男"
  27. */
  28.  
  29.  
  30.     /*JSON和JS对象的区别
  31.     * var obj = {a:'hello',b:'hellob'};
  32.     * var json = '{"a":"hello","b":"hellob"}'
  33.     * */
  34.  
  35. </script>
  36. </body>
  37. </html>

 

13.原型对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9.  
  10. <script>
  11.     var Student = {
  12.         name:"zhangsan",
  13.         age:3,
  14.         run:function () {
  15.             console.log(this.name + "我正在跑...")
  16.         }
  17.     };
  18.     var xiaoming = {
  19.         name:"xiaoming"
  20.     };
  21.     //小明的原型 是 Student
  22.     //xiaoming.__proto__ = Student;
  23.  
  24.     var Bird = {
  25.         fly:function () {
  27.             console.log(this.name + "我正在飞...")
  28.         }
  29.     }
  30.     //小明的原型 是 Bird
  31.     xiaoming.__proto__ = Bird;
  33. </script>
  34. </body>
  35. </html>

 

14.class继承

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <script>
  10.    /* ES6之前的定义方式
  11.    function Student(name) {
  12.         this.name = name;
  14.     };
  15.     //给student新增一个方法
  16.     Student.prototype.hello = function () {
  17.         alert('hello')
  18.     };*/
  19.  
  20.     //ES6之后=========
  21.     //定义一个学生的类
  22.     class Student{
  23.         constructor(name) {
  24.             this.name = name;
  26.         }
  27.         hello(){
  28.             alert('hello')
  29.         }
  30.     }
  32.     class xiaoStudent extends Student{
  33.         constructor(name,grade) {
  34.             super(name);
  35.             this.grade = grade;
  36.         }
  37.         myGrade(){
  38.             alert('我是一名小学生')
  39.         }
  40.     }
  42.     var xiaoming = new Student("xiaoming");
  43.     var xiaohong = new xiaoStudent("xiaohong",53);
  45. </script>
  46.  
  47. </body>
  48. </html>

 

版权声明：本文为加油少年！原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/tuyin/p/16556215.html