随笔- 126 文章- 0 评论- 4 阅读- 19187

JavaScript—day02

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

1.字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        'use strict'
        console.log('a');
        console.log("a");

        //模板字符
        // var msg = `
        // hello
        // world
        // 你好呀
        // 我很好`
        // console.log(msg)
        let name = "zhangsan"
        let age = 3;

        let msg = `你好呀，${name}`
        console.log(msg)
    </script>
</head>
<body>

</body>
</html>

2.数组知识点

1.长度
arr.length
注意：加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

2.indexOf，通过元素获得下标索引
    var arr = [1,2,3,45,6,34]
    arr.indexOf(2)
    1
字符串的“1”和数字1是不同的

3.slice()截取Array的一部分，返回一个新数组，类似于String中的substring
    var arr = [1,2,3,45,6,34]
    arr.slice(2,4)
    [3, 45]
slice()截取的部分包前不包后

4.push(),pop()
push:压入到尾部
arr.push("we",'dsf')
arr [0, 2, 3, 45, 6, 34, empty × 3, 'we', 'dsf']
pop:弹出尾部的一个元素
arr.pop()
arr[0, 2, 3, 45, 6, 34, empty × 3, 'we']

5.unshift(),shift()（和上面的一样）
push:压入到头部
pop:弹出头部的一个元素

6.排序sort()
arr =["B","A","C"]
arr.sort()
['A', 'B', 'C']

7.元素反转reverse()
(3) ['A', 'B', 'C']
arr.reverse()
(3) ['C', 'B', 'A']

8.拼接concat()
arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]
arr
(3) ['C', 'B', 'A']
注意：concat()并没有修改数组，只是会返回一个新的数组

9.连接符join
打印拼接数组，使用特定的字符串连接
(3) ['C', 'B', 'A']
arr.join('-')
'C-B-A'

3.对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        'use strict'

        //定义了一个person对象，它有四个属性！
        //JavaScript中的所有的键都是字符串，值是任意对象！
        //js中的对象，{.....}表示一个对象，键值对描述属性××××：××××，多个属性之间使用逗号隔开，最后一个属性不加逗号！
        /*
        * ①对象赋值：person.name="xiaoming"
                  'xiaoming'
                  person.name
                  'xiaoming'
        * ②使用一个不存在的对象属性，不会报错！undefined：person.id
                                                   undefined
        * ③动态的删减属性,通过delete删除对象的属性：delete person.age
                                               true
                                               person
                                               {name: 'xiaoming', email: '2743116586@qq.com', score: 87}
        *④动态的添加，直接给新的属性添加值即可
          person.id="5720182029"
          '5720182029'
          person
          {name: 'xiaoming', email: '2743116586@qq.com', score: 87, id: '5720182029'}
        * ⑤判断属性值是否在这个对象中！××××in××××！
          'id'in person
          true
          继承：
           'toString' in person
            true
        * ⑥判断一个属性是否是这个对象自身拥有的hasOwnProperty()
          person.hasOwnProperty('toString')
          false
          person.hasOwnProperty('name')
          true
        * */
        var person={

            name:"zhangsan",
            age:34,
            email:"2743116586@qq.com",
            score:87
        }

    </script>
</head>
<body>

</body>
</html>

4.流程控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        'use strict'

        //forEach循环
        var age = [23,2,54,6,43,68,45,65,75,4,8,26]

        //函数
        age.forEach(function (value) {
            console.log(value)
        })

        //for...in打印数组的下标
        for (var num in age){
                console.log(num)
        }
        //for...of打印数组元素
        for (var num of age){
            console.log(num)
        }

    </script>
</head>
<body>

</body>
</html>

5.Map和Set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
    //ES6  Map
    //学生的成绩，学生的名字
    // var names =["tom","jack","mary"];
    // var scores = [100,95,87];
    var  map = new  Map([['tom',100],['jack',95],['mary',87]]);
    var name = map.get('tom');//通过key获得value
    map.set('admin',123456);//新增或者修改
    map.delete('tom')//删除
    console.log(name);


    var set = new Set([3,1,1,11,1,1,1,11])//set可以去重
    set.add(2)//新增或者修改
    set.delete(1)//删除
    console.log(set.has(3));//是否包含某个元素


    </script>
</head>
<body>

</body>
</html>

6.iterator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>
        'use strict'
        //遍历map
        var  map = new  Map([['tom',100],['jack',95],['mary',87]]);
        for (let x of map){
            console.log(x)
        }
        //遍历set
        var set = new Set([5,6,7]);
        for (let x of set){
            console.log(x)
        }


    </script>
</head>
<body>

</body>
</html>

结果展示

7.定义函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    /*定义方式一*/
    function abs(x){
        if (x>=0){
            return x;
        }else {
            return -x;
        }
    }
    //一旦执行到return代表函数结束，返回结果！
    //如果没有执行return，函数执行完也会返回结果，结果就是undefined
    /*定义方式二*/
    var  bs = function(x){
        if (x>=0){
            return x;
        }else {
            return -x;
        }
    }
    //function(x){....}这是一个匿名函数，但是可以把结果赋值给bs，通过bs就可以调用函数！
    //函数的调用：① abs(-10)//10      ② abs(10)//10



    //arguments代表传递进来的所有参数是一个数组！
    var sa = function (x) {
        console.log("x=>"+x);
        for (var i = 0;i<arguments.length;i++){
            console.log(arguments[i]);
        }

    }

</script>
</body>
</html>

8.多个参数的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    //rest参数只能写在最后面，必须用...标识。
    function f(a,b,...rest) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
    }
</script>
</body>
</html>

9.变量的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict'
    //①在JavaScript中，var定义变量实际是有作用域的。
    //假设在函数体中声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包）
    function qj() {
            var x= 1;
            x= x+1;
    }
    //x=x+2;//Uncaught ReferenceError: x is not defined(假设在函数体中声明，则在函数体外不可以使用~)

    //②如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
    function qj2() {
        var x= 'q';
        x= x+1;
    }
    //③内部函数可以访问外部函数成员，反之则不行
    function qj3() {
        var x= 1;
        function qj4() {
            var y= x+1;
        }
        var z = y+1;// Uncaught ReferenceError: y is not defined
    }
    //④假设在JavaScript中函数查找变量从自身函数开始~，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数变量

    function qj5() {
        var x = 1;
        function qj6() {
            var x = 'a';
            console.log('inner'+x);//outer1
        }
        console.log('outer'+x);//innera
        qj6()
    }
    qj5()

    //⑤提升变量的作用域
    function qj7() {
        var x = "x"+y;
        console.log(x);
        var y = 'y';
        }
        qj7()
    //结果：xundefined    说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
    //在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码的维护

    //⑥局部作用域 let
    function f() {
        for (let i = 0; i<100;i++){
            console.log(i)
        }
        console.log(i+1);//问题：i出了这个作用域还可以使用    解决：建议都用let去定义局部作用域的变量；
    }

    //⑦常量 const
    //ES6之前，只有用全部大写字母命名的变量就是常量；建议不要修改这样的值
    var PI = '3.14';
    console.log(PI);
    PI = '2412';
    console.log(PI);
    //在ES6引入了常量关键字 const
    const PI = '3.14';
    console.log(PI);
   /* PI = '2412';//尝试赋值给常量或只读变量 */

</script>



</body>
</html>

10.方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>

    function getAge () {
        //今年-出生的年
        var now = new Date().getFullYear();
        return now -this.bitrh;

        //zhangsan.age()  20     getAge()  NaN
        //this是无法指向的，是默认指向调用它的那个对象；

    }
    //方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
    var zhangsan = {
        name:'张三',
        bitrh:2002,
        //方法
        age:getAge

    }
    //apply 在js中可以控制this指向
    getAge().apply(zhangsan,[]);//表示this指向了zhangsan这个对象
    //属性  zhangsan.name    方法，一定要带()  zhangsan.age()


</script>
</body>
</html>

11.Date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    var now = new Date();
    console.log(now);//Thu Mar 10 2022 15:41:07 GMT+0800 (中国标准时间)
    now.getFullYear();//年
    now.getMonth();//月
    now.getDate();//日w
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒

    now.getTime();//时间戳  全世界统一  从1970 1.1 0：00：00到现在的毫秒数


    console.log(new Date(1646898067133));//时间戳转为时间
    now.toLocaleString();//'2022/3/10 15:53:56'
    now.toGMTString();//'Thu, 10 Mar 2022 07:53:56 GMT'

</script>



</body>
</html>

12.JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    var user ={
        name:"zhangsan",
        age:3,
        sex:'男'
    }

    //对象转化为json字符串
    var jsonUser = JSON.stringify(user);  //{"name":"zhangsan","age":3,"sex":"男"}

    //json 字符串转化为对象 参数为json字符串
    var obj = JSON.parse('{"name":"zhangsan","age":3,"sex":"男"}');
    /*
      {name: 'zhangsan', age: 3, sex: '男'}
       age: 3
       name: "zhangsan"
       sex: "男"
*/


    /*JSON和JS对象的区别
    * var obj = {a:'hello',b:'hellob'};
    * var json = '{"a":"hello","b":"hellob"}'
    * */

</script>
</body>
</html>

13.原型对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    var Student = {
        name:"zhangsan",
        age:3,
        run:function () {
            console.log(this.name + "我正在跑...")
        }
    };
    var xiaoming = {
        name:"xiaoming"
    };
    //小明的原型 是 Student
    //xiaoming.__proto__ = Student;

    var Bird = {
        fly:function () {

            console.log(this.name + "我正在飞...")
        }
    }
    //小明的原型 是 Bird
    xiaoming.__proto__ = Bird;

</script>
</body>
</html>

14.class继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
   /* ES6之前的定义方式
   function Student(name) {
        this.name = name;

    };
    //给student新增一个方法
    Student.prototype.hello = function () {
        alert('hello')
    };*/

    //ES6之后=========
    //定义一个学生的类
    class Student{
        constructor(name) {
            this.name = name;

        }
        hello(){
            alert('hello')
        }
    }

    class xiaoStudent extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert('我是一名小学生')
        }
    }

    var xiaoming = new Student("xiaoming");
    var xiaohong = new xiaoStudent("xiaohong",53);

</script>

</body>
</html>

posted @ 2022-08-05 23:26 tuyin 阅读(21) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript—day01

· JavaScript—day03

· Day01

· JavawebDay2JavaScript

· JavaScript基础语法

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

昵称： tuyin
园龄： 3年4个月
粉丝： 3
关注： 2

+加关注

2025年3月

日

一

二

三

四

五

六

加油少年！

JavaScript—day02

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论