JAVA程序员笔记（第二阶段：前端）第5篇——JavaScript粗略总结一_[ {name: '访问量', time: '2021-03-01' , count: 1000} -CSDN博客

本文链接：https://blog.csdn.net/Muyun5202/article/details/120834846

本次文章时间紧任务汇重，不会有过多文字叙述
尽量用代码举例**+**注释为主，粗略扫一遍JS的知识点。
有可能的话，以后会精改（大概吧？）

Javascript

Javascript是一个基于浏览器的脚本（script）语言
script 标签来编写脚本语言
常见的脚本语言： javascript
通过script标签的 type 属性设置采用的脚本 type的默认值是text/ javascript
Javascript 中的代码注释风格和 java相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    Javascript  是一个基于浏览器的 脚本（script）语言

        script  标签 来编写  脚本语言

        常见的脚本语言：
            javascript

         通过script标签的 type  属性 设置采用的脚本  type的默认值是text/ javascript

         Javascript  中的代码注释风格 和 java相同

-->


    <script type="text/javascript">
        //这是一个单行注释
        console.log("hello word")
        console.info("hello word")

        console.dir("hello word")
        console.error("错误")

        console.trace("hello word")

    </script>

</head>
<body>

</body>
</html>

js-变量的定义方法

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

  <script>
    var a = 10;
    var a = 10.5;
    var a = "字符串";
    var a = 'js没有char类型';

    //获取a的数据类型

    console.log(typeof  a);
    console.log(typeof  a);
    console.log(typeof  a);
    console.log(typeof  a);
    
  </script>

</head>
<body>

</body>
</html>

var let

var声明
var的变量如果没有设置值，默认是undefined（未定义）
var 可以对变量进行重复多次声明
var 关键字会产生变量提升
var 声明的变量是全局变量（函数除外）

let 不能在同一个作用域中对一个变量进行多次声明
let 不存在变量提升的问题
let 声明的变量是局部变量有块级作用域的概念
let 会产生暂时性死区问题

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


  <script>


    let a = 1;//number
    let b = Number(1);
    //用new构建出来的一定是一个对象
    let c = new Number(1);

    //==比较两个变量的 值 是否相等
    console.log(a == b)

    console.log(a == c);

    //=== 用来比较 两个变量的 值 和内容是否相等
    console.log( a == b);
    console.log( a == c);

    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);

  </script>
</head>
<body>

</body>
</html>

字符串、数字、数组

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

        let s = "0X100";

        console.log(Number(s));

        let a = 20;

        /**
         * parseInt(str) : 将字符串转成整数
         * parseFloat(str) : 将字符串转成小数
         *
         */
        console.log(parseInt(s, 16))


        console.log( s - -a );

        //console.log(a + s)

        console.log(s / a);


        console.log(NaN == NaN);

        console.log(isNaN(NaN));

        // 返回 Infinity
        console.log( 3 / 0);

        // isFinite 判断是否是有限的
        console.log(isFinite(3/0))



        
    </script>
    
<!--数组的定义方法-->
<script>

    //创建一个空的数组
    let array = new Array();
    console.log(array);

    //创建一个长度为10的数组
    let array2 = new Array(10);
    console.log(array2);

    //创建一个  初始值为3, 2, 1 的数组
    let array3 = new Array(3,2,1);
    console.log(array3);

    //创建一个空数组
    let array4 = [];
    console.log(array4);

    //创建一个 初始值为  3,2的数组
    let array5 = [3,2,1,];
    console.log(array5);

    console.log(array5 == array3);

  </script>

<!--数组的基本操作-->

 <script>

    let array = [];

    //向数组中添加数据
    array[10] = 100;

    //获取数组的元素个数
    console.log(array.length);

    //通过push 方法向 数组尾部中添加数据
    array.push(101);
    array.push(11,22,33);

    //通过unshift 向数组头部添加数据
    array.unshift(1);
    array.unshift(1.00);

    //向指定位置添加元素
    //splice(index, deleteLength, addEle)
    array.splice(2,0,12);
    array.splice(2,0,  12 ,13 ,"添加好几个");

    //删除尾部元素 并返回被删除的元素
    let ele = array.pop;

    //删除头部元素 并返回被删除的元素
    let shift = array.shift();

    //删除从指定位置开始的数据，并设置删除的个数
    //从第6个位置，删除三个元素
    // array.splice (5， 3) ;
    console. log (array, ele)

    //修改指定为的元素
    array[2] = 4300;
    console.log(array)

    //查看数据
    console.log (array[2]);

    //遍历数组
    for(let i=0 ; i< array. length; i++) {
      console.log(array[i]);
    }

  </script>

<!-- js-array数组的遍历-->

<script>
        let array = [12, 32, 54, 23] ;

        // 遍历数组
        console.log("普通遍历");

        for(let i=0 ; i<array.length; i++) {
            console.log(array[i]);
        }

        console.log("for ... in ...")
        // for ... in 遍历
        for(let index in array) {
            console.log(array[index]);
        }

        console.log("------ES6数组的遍历------")

        console.log("------for ... of -------")

        for(let data of array) {
            console.log(data)
        }

        console.log("----- 键Key遍历 -------")

        //let keys = array.keys();
        for(let key of array.keys()) {
            console.log(array[key])
        }

        console.log("----- 键val遍历 -------")

        for(let val of array.values()) {
            console.log(val)
        }

        console.log("----- 键值对遍历 -------")

        for(let entry of array.entries()) {
            console.log(entry[0], entry[1])

        }
        console.log("----- 键值对遍历(解构赋值) -------")

        for(let [key, val] of array.entries()) {
            console.log(key, val)

        }

    </script>

<!--js-array-数组的高阶方法-->
 
 <script>

        let array = [23, 34, 246, 2456, 3, 54] ;

        // 获取数组中 元素 > 100 的所有数据
        // let newArray = array.filter(function(val, index){
        //     return val > 100;
        // });

        let newArray = array.filter( val =>  val > 100 )

        // 将数组中的每一个元素 * 2 返回一个新数组
        // newArray = array.map( function(val, index, arr) {
        //     return val * 2 ;
        // })

        newArray = array.map( val => val * 2 )

        // 求数组中所有的元素的和
        // let sum = array.reduce(function(sum, ele, index, arr){
        //     return sum + ele ;
        // })

        let sum = array.reduce((sum, ele)=> sum + ele ,  1)


        // 将一个函数用箭头函数表示
        // (参数列表) => { 函数体}

        console.log(newArray, sum)


        // 获取数组中 246 对应的索引
        let index = array.indexOf(2461);
        console.log(index)

        let c = array.includes("246")

        console.log(c)

        // 只查找第一个满足条件的元素
        let ele = array.find( (val, index, arr) =>  val > 100 )
        console.log(ele)

        index = array.findIndex((val, index, arr) =>  val > 100)
        console.log(index)

        // 判断数组中是否有任何一个满足条件的元素
        let d = array.some(val => val > 100)

        //array = [];
        // 判断数组中是否每一个元素都满足条件
        //   注意： 如果数组为空，则直接返回 true
        d = array.every(val => val > 1);



        // reverse() 反转数组， 会改变原数组
        array.reverse()

        // 将数组 转成 字符串, 以指定的分隔符进行分隔
        let s = array.join(",")

        console.log(array,s)

        console.log(d)

    </script>


</head>
<body>

</body>
</html>

对象的操作

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

        /**
         *  对象-表示的是键值对的数据结构
         *
         */

        let obj = new Object();
        console.log(obj)

        let obj2 = {} ;
        console.log(obj2);

        /**
         *  对象中的 键 默认是 字符串类型中，而且 键可以省略 双引号
         *
         *
         */

        let obj3 = {
            name: "张三",
            sex: "男",
            age: 18
        } ;
        

        console.log(obj3)
    </script>

<script>

        /**
         *  如果对象中的 属性名 包含 变量名不支持的命名字符， 则 属性名 必须用 双/单引号 引起来
         *
         *      这种属性，也不能通过 . 的方式 来进行访问
         *
         *      如果 属性名 是 数字,  也不能通过 . 方式进行访问
         *
         *  上述情况只能通过 [](属性名表达式)  来进行访问,  [] 中支持 表达式
         *
         *
         */

        let obj = {

            name: "张三",
            sex: "男" ,
            "test-01": "xxxx",
            1: "ssss"
        } ;

        // 向对象中，添加一个属性
        obj.age = 18 ;

        obj["birth"] = "2011-11-11"

        console.log(obj);


        // 将 obj.name 修改为 李四
        obj.name = "李四"


        let v = "name" ;

        obj[v] = "王五" ;

        console.log(obj)

        console.log(obj["1"])


        // 删除对象中的年龄属性
        delete obj.age ;

        console.log(obj);

        // 获取数据

        console.log(obj.name)

    </script>

<!--    对象的遍历-->
    
    <script>
        let obj = {

            "name": "张三",
            sex: "男",
            age: 18
        }

        // for ... in 遍历  对象

        for(let key in obj) {
            console.log(key,  obj[key] )
        }


        // ES6 给对象提供了 键、值、键值对遍历
        console.log(Object.keys(obj))

        console.log("----ES6-对象-键遍历----")
        for(let key of Object.keys(obj)) {
            console.log(key,  obj[key] )
        }

        console.log("----ES6-对象-值遍历----")
        for(let val of Object.values(obj)) {
            console.log(val);
        }


        console.log("----ES6-对象-键值对遍历----")
        for(let val of Object.entries(obj)) {
            console.log(val[0], val[1]);
        }

        console.log("----ES6-对象-键值对遍历(解构赋值)----")
        for(let [key, val] of Object.entries(obj)) {
            console.log(key, val);
        }




    </script>
<!--    16.js-对象中的toString 和 valueOf-->
    
    <script>
        // toString, valueOf 是 Object类自带的方法，索引被所有JS对象继承

        // toString : 将对象转成字符串
        // valueOf  : 将对象转成任意数据类型

        /**
         *  如果 对象中 valueOf 和 toString 同时存在， 在进行自动类型转换的时候，优先调用 valueOf
         *
         */

        let obj = {
            "name": "张三",
            age: 18,

            toString() {
                console.log("---toString---")
                return this.age + "" ;
            },

            valueOf() { //
                console.log("---valueOf---")
                return this.name ;
            }

        }


        let obj2 = {

            value: 1 ,

            valueOf() {

               if (this.value ==1) {
                   return this.value++ ;
               }

               if (this.value == 2) {
                   return 12;
               }

            }
        }

        console.log(obj2 == 1 && obj2 == 12 )



        // 这一行代码 会发生自动类型转换 ， obj 会自动尝试转成 数字
        // obj 对象自动转数字 的过程 本质是 调用 valueOf
        console.log(obj == 18)
    </script>

<!--    17.对象和数组转数字和字符串-->
    <script>

        // [] 转成数字的化 代表 0

        //console.log( [10] - 3  )

        // [] 转成 字符串代表 ""
        //console.log([] == "")

        // console.log("" == 0)

        // 两个空数组 进行 相加
        console.log(([] + []).length)

        // 空对象无法转成数字
        console.log({} + "---")

        // 空对象转 字符串 返回的是 [Object Object]
        // 两个空对象 进行 相加
        console.log(({} + {}).length)

    </script>

</head>
<body>

</body>
</html>

函数

Js的函数的定义：

函数关键字 function
Java方法中语法：
[修饰符] 返回值类型方法名(参数列表) [异常处理] {
}
JS 语法：
function 函数名(参数列表) {
}

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

    <script>
 

        function sum(a, b) {
            console.log(a, b);
            return a + b ;
        }



        /**
         * 匿名函数
         * @param a
         * @param b
         * @returns {*}
         */
        let max = function(a, b) {
            return a > b ? a : b ;
        }

        //max(10, 20)

        console.log(typeof max)


        // 调用方法
        let s = sum(10, null)

        console.log(s)

        console.log(null == 0)

    </script>

</head>
<body>

</body>
</html>

举例说明：

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

  <script>

    let lists = [
      {name: '访问量', time: '2021-03-01', count: 1000},
      {name: '访问量', time: '2021-03-02', count: 1500},
      {name: '访问量', time: '2021-03-03', count: 1200},
      {name: '点赞数', time: '2021-03-01', count: 70},
      {name: '点赞数', time: '2021-03-02', count: 100},
      {name: '点赞数', time: '2021-03-03', count: 1100},
      {name: '评论数', time: '2021-03-01', count: 800},
      {name: '评论数', time: '2021-03-02', count: 900},
      {name: '评论数', time: '2021-03-03', count: 1000},
    ]

    let i = {name: '访问量', time: '2021-03-01', count: 1000};
    result = [];
    rs = lists.reduce((temp,item)=>{
      console.log(temp,item);
      if(!temp[item.name]){
        temp[item.name]={
          name:item.name,
          time:[item.time],
          count:[item.count]
        };
      }else {
        temp[item.name]['time'].push(item.time);
        temp[item.name]['count'].push(item.count);
      }
      return temp;
    }, {});
    console.log(rs);
    console.log(Object.keys(rs));
    for (let i =0;i<Object.keys(rs).length;i++){
      result.push(rs[Object.keys(rs)[i]]);
    }

    console.log(result);
  </script>

</head>
<body>

</body>
</html>

数组

map实例：

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

        let obj = {
            rows: [
                ["Lisa", 16, "Female", "2000-12-01"],
                ["Bob", 22, "Male", "1996-01-21"]
            ],
            metaData: [
                {name: "name", note: ''},
                {name: "age", note: ''},
                {name: "gender", note: ''},
                {name: "birthday", note: ''}
            ]
        }

        // array 代表的是 rows中的每一条记录，仍旧是一个数组
        let newArray = obj.rows.map((array, index)=> {

            let result = {} ;

            for(let index in obj.metaData) {
                // 获取 metaData 中每一条记录中的 name属性
                let key = obj.metaData[index].name ;
                let val = array[index];
                result[key] = val ;
            }

            return result ;
        })


        console.log(newArray)

    </script>



</head>
<body>

</body>
</html>

reduce实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let array = [
            {name: '访问量', time: '2021-03-01', count: 1000},
            {name: '访问量', time: '2021-03-02', count: 1500},
            {name: '访问量', time: '2021-03-03', count: 1200},
            {name: '点赞数', time: '2021-03-01', count: 70},
            {name: '点赞数', time: '2021-03-02', count: 100},
            {name: '点赞数', time: '2021-03-03', count: 1100},
            {name: '评论数', time: '2021-03-01', count: 800},
            {name: '评论数', time: '2021-03-02', count: 900},
            {name: '评论数', time: '2021-03-03', count: 1000},
        ]


        // 使用 reduce 对数据进行聚合操作
        let newArray = array.reduce( (result, obj, index) => {

            // 判断 result 数组中 是否包含 一个对象，该对象的 name 属性 = obj.name
            let res = result.find( val => val.name == obj.name) ;

            if (res == null) {
                res = {
                    name: obj.name ,
                    time: [obj.time],
                    count: [obj.count]
                }
                result.push(res);
            }else{
                res.time.push(obj.time);
                res.count.push(obj.count);
            }

            return result ;

        } , [])


        console.log(newArray)

        //
        let objRet = newArray.reduce( (result, obj)=>{

            let time = "2021-03-01"

            result["time"] = time;

            // 获取 2021-03-01 在 obj.time 中对应的索引位置
            let index = obj.time.findIndex( val => time == val) ;

            // 获取 obj.count 数组中对应的数据
            let count = obj.count[index];

            result[obj.name] = count ;

            return result ;

        }, {})


        console.log(objRet)


    </script>
</head>
<body>

</body>
</html>

数组解构赋值

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

    <script>
        /**
         *  解构赋值：ES6的新特性
         *
         *     按照一定的规则，对数组或者对象进行数据提取的过程 被称为 解构
         *
         *  数组解构
         *
         *     语法： 用 [ ... ] 表示 数组的解构
         */
        let array = [12, undefined, 21, null] ;

        // 正常解构赋值
        //let [a, b, c] = array ;


        // 获取数组中的第二个数据
        //let [, b] = array ;

        // 将数组中的元素 赋值给 a , b , c , d
        let [a=1, b=2 ,c=3 , d=4] = array ;


        // 交换2个数字

        let x = 10 ;

        let y = 20 ;

        // 使用解构赋值 实现 x, y 的交换
        [y, x] = [x, y];



        console.log(x, y);





    </script>
</head>
<body>

</body>
</html>

对象的结构赋值

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

        let obj = {
            name: "张三",
            sex: "男",
            age: 18
        }
        // 使用解构赋值 快速提取对应的数据， 对应解构赋值 使用 { ... }
        // 当 解构规则 和变量名相同的时候，可以省略 :变量名
       // let {name:name, sex:sex, age:age} = obj ;

        let name = "xxx";

        let {name:name1='张三丰', sex="女", age} = obj ;

        console.log(name1, sex, age)

    </script>
</head>
<body>

</body>
</html>

js-数组以对象的方式进行解构

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

        var array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        // var obj = {
        //     0: 1,
        //     1: 2,
        //     2: 3,
        //     3: 4,
        //     4: 5,
        //     5: 6,
        //     length: 6
        // }
        //
        // // 将 形似数组的对象 转成数组
        // console.log(Array.from(obj))


        let { 0:a, [array.length - 1]: b , length } = array ;


        console.log(a, b, length)

        /**
         *  形似数组的对象：
         *      1. 是个对象
         *      2. 键是数字，且从0开始
         *      3. 有一个 length 属性
         *
         *
         *   {
         *       0:1,
         *       1:2,
         *       2:3,
         *       3:4,
         *       4:5,
         *       5:6,
         *       length: 6
         *   }
         *
         *
         *


         /* 获取数组中的 首尾元素 */
        //array[0];
        //array[array.length - 1]

        // let [a , , , , , b] = array;
        //
        // console.log(a,  b)

    </script>
</head>
<body>

</body>
</html>

js-对象解构-注意事项

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

    <script>

        let obj = {
            name: "xxx",
            age: 18
        }

        let name , age ;

        ({name, age} = obj );

        console.log(name, age)

    </script>
</head>
<body>

</body>
</html>

js-解构赋值-示例

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

        let obj = {
            rows: [
                ["Lisa", 16, "Female", "2000-12-01"],
                ["Bob", 22, "Male", "1996-01-21"]
            ],
            metaData: [
                {name: "name", note: ''},
                {name: "age", note: ''},
                {name: "gender", note: ''},
                {name: "birthday", note: ''}
            ]
        }

        // 使用解构赋值快速提取需要的数据
        let { rows , metaData:[{name} , {name:age}, {name:gender}, {name:birthday} ]  }   = obj ;

        // console.log(rows, name, age, gender, birthday)
        let newArray = rows.map( ([a, b, c, d]) => ({[name]:a , [age]: b, [gender]: c, [birthday]: d}) )

        console.log(newArray)

    </script>
</head>
<body>

</body>
</html>

js-函数-arguments

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         *  函数的定义
         *    形参 不能设置类型
         *
         *  JS 中函数 没有方法的重载现象，如果多个方法名相同，后者会覆盖掉前者
         */


        function sum() {
            // arguments 可以获取传入的实际参数
            console.log(arguments)

            return Array.from(arguments).reduce( (sum, t) => sum + t);

        }

        // 1 1 2 3 5 8 13 ....
        function fab2(n) {

            if (n == 1 || n==2) return 1 ;

            return arguments.callee(n-1) + arguments.callee(n-2)
        }


        //console.log(sum(1,2,3,4))

        console.log(fab2(8))

    </script>
</head>
<body>

</body>
</html>

js-函数-参数的默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         * 如果给函数的参数设置默认值，推荐的做法是 将带有默认值的参数 放在所有参数的后面
         */
        function sum(a, b=0) {
            return a + b ;
        }

        // 函数 可以通过 length 属性 获取 函数的参数个数
        console.log(sum.length)

        console.log(sum(12,1));

    </script>
</head>
<body>

</body>
</html>

js-函数-参数的解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         *  不能对 null 和 undefined 进行 解构赋值
         *
         *
         */

        //参数是一个对象
        function test({name = "李四", sex, age = 18, birth} = {}) {
            console.log(name, sex, age, birth)
        }


        //test({name:"xxx", age:18, birth:"1990-11-22",sex:"男"})

        test({sex: "女", age: 19});


        function sum([x = 0, y = 0, z = 0] = []) {

            return [x, y, z].reduce((s, a) => s + a);
        }

        //console.log(sum([1,2,3]))

        console.log(sum([5]));


    </script>
</head>
<body>

</body>
</html>

js-函数-不定项参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         * 求 至少 两个数的和
         */
        function sum(a, b, ...c) {
            return c.reduce((s, t)=> s + t, a+b)
        }


        console.log(sum(2, 3))


    </script>
</head>
<body>

</body>
</html>

js-展开运算符…的使用

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

        let array = [1, 2, 3, 4] ;

        let array1 = [32 , 3] ;

       // let [a, ...b] = array;

       // let newArray = [...array,  ...array1] ;

        array.push(...array1)

        console.log(array)


        let obj = {"name": "张三", "age": 18, "sex": "男"}

        let {name, ...b}  = obj ;

        console.log(name, b)

        let obj2 = {"name": "李四", birth: "1990-11-11"}


        // Object.assign(obj, obj2);

        let obj3 = {...obj, ...obj2}

        console.log(obj3)




    </script>
</head>
<body>

</body>
</html>

js-迭代器的遍历方式for…of

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

    <script>
        /**
         *  如果一个对象是可迭代的（Symbol.iterator）
         *
         *  那么 该对象就可以使用 for ... of 来遍历
         *
         *  还可以使用 ... 进行展开
         *
         *  能使用 ... 展开的 不代表可以使用 for...of 遍历
         *
         *
         */

        // function sum() {
        //
        //     //console.log(arguments)
        //
        //    console.log( [...arguments])
        //
        // }

        // let obj = {}
        //
        // for(let key of obj) {
        //     console.log(key)
        // }
        //
        // sum(1, 2)

    </script>
</head>
<body>

    <p>hello</p>
    <p>world</p>


    <script>

        // 获取 两个 p 标签
        let tags = document.getElementsByTagName("p");

        for(let tag of tags) {

            tag.style.background = "red";
        }

    </script>

</body>
</html>

js-构造函数

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

  <script>

    /**
     * 构造函数
     * 1.必修通过new来调用
     * 2.构造函数名  首字母 推荐大写
     * 3.构造函数返回一个 对象
     */

    function type(a,b){
      this.a = a ;
      this.b = b;

      //定义一个方法来打印
      this.show = function (){

        console.log(a + " 爱吃鸡 " + b);
      }

    }

    let p = new type("海豹","脖子")

    console.log(p)

    p.show();





  </script>

</head>
<body>

</body>
</html>

js-this关键字在 JS 上下文中的指向

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

        // this 在 JS上下文中 指向 window 对象 (JS顶层核心对象，代表一个浏览器窗口)
        // this 如果在 nodejs环境下，this 指向 Global 对象


       // "use strict"    严格模式


        // var删不了  window可以
        window.b = 10 ;
        delete window.b ;
        console.log(window.b)


        var a = 10 ;
        console.log(window.a)


        console.log(this)


    </script>
</head>
<body>

</body>
</html>

js-this关键字在普通函数中的指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         *  在普通函数中的
         *
         *          this 默认指向 window
         *
         *          如果在严格模式下， this 指向 undefined
         *
         */
        function sum() {
            "use strict"

            console.log(this)
            // this.a = 10 ;
            // this.b = 100;

        }



        sum()

        console.log(a, window.b)


    </script>
</head>
<body>

</body>
</html>

js-this关键字在构造函数中的指向

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

    <script>

        /**
         *  在构造函数中， this 默认指向 new 出来的 对象
         *

         */
        function Point(x, y){
            this.x = x ;
            this.y = y ;

            console.log(this)
        }

        new Point(3, 5)


    </script>
</head>
<body>

</body>
</html>

js-this在箭头函数中的指向

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

    <script>

        //study函数是对象 boj 的元素 obj所在环境为window
        let obj = {
            name: "张三",

            study: ()=>{
                console.log(this)
            }

        }

        //show 父级的作用域为构造函数 point
        function Point(x, y) {

            this.x = x ;
            this.y = y ;

            this.show = ()=> {
                console.log(this)
            }


        }

       let p = new Point(3, 5)

        p.show()


        // obj.study()


       let sum = (a, b) => {

           console.log(this);

           return a + b ;
       }

        sum(10, 11)


        // 1. 箭头函数 不能通过 new 来调用(不能作为 构造方法)
        // 2. 箭头函数 中的 this 指向 父级作用域 所在的 this 环境 (在编译阶段作用域已经确定，且不可更改)


    </script>
</head>
<body>

</body>
</html>

js-修改函数中this的默认指向

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

    <script>

        function sum(a, b) {
            console.log(this, a , b)
        }

        // sum(); this 默认指向 window

        /**
         *  函数对象 有 三个方法， 可以用来 改变 this 的指向
         *
         *  apply()
         *
         *  call()
         *
         *  bind()
         *
         */

        // sum(1, 2)
        /**
         * apply 在调用函数的时候，修改 this的指向，并设置 函数需要的参数
         *
         *  apply(bindThis,  array)
         *
         *      bindThis : this指向的对象
         *
         *      array : 是一个数组，代表 函数需要的参数列表
         *
         *
         * call(bindThis, ...args)
         *
         *
         * bind(bindThis, ...args)
         *
         *     bind 在更改 this指向的同时，返回一个函数对象, 需要添加 () 进行函数的调用，才可以正常调用函数
         *
         *
         */
       sum.apply(null, [1, 2]) // sum(1, 2)

        // console.log( sum.apply("hello",  [1, 2]))


       //  sum.call("hello", 1, 2)

       // sum.bind("hello", 1, 2)()


    </script>
</head>
<body>

</body>
</html>

js-Date日期API

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

        // 创建一个 日期对象，表示当前系统事件
        let date = new Date();

        // 获取 2日的毫秒数
        let time = 2 * 24 * 60 * 60 * 1000;

        // 获取时间戳
        time = date.getTime() - time

        // 代表 距离1970-1-1 多少毫秒
        date = new Date(time)

        // 获取 四位数的年份
        let year = date.getFullYear();

        // 获取 距离 1900 年多少年
        // let y = date.getYear();

        // 月份 从 0开始 ，0-11 代表 1-12月
        let month = date.getMonth();

        // 获取星期
        // 0 代表星期日 ， 1 代表星期 1
        let week = date.getDay();

        // 获取天
        let day = date.getDate();

        // 获取小时
        let hour = date.getHours();

        // 获取分
        let min = date.getMinutes();

        // 获取秒
        let sec = date.getSeconds();

        // 获取毫秒
        let mill = date.getMilliseconds();

        console.log(year, month , day, hour, min, sec, mill, week);

        //
        // console.log(date)
        //
        // console.log(date2)


    </script>
</head>
<body>

</body>
</html>

js-String常见的API

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

    <script>

        let str = "hello" ;

        let a = 4 ;
        let b = 5

        // JDK 多行字符串  """ .... """

        // JS 定义多行字符串 ` ... `


        // JS 字符串模板 语法
        // `` 可以定义多行字符串，并且直接 变量解析
        // ${ JS表达式 }
        //
        let moreLine = `
            ${str}
            world
            test
            ${sum(a, b)}
            data
        ` ;

        console.log(moreLine)

        console.log(new String(moreLine))

        for(let s of moreLine) {
            console.log(s)
        }

        // 将字符串转成数组
        console.log(Array.from(moreLine))

        console.log([...moreLine])

        function sum(a, b) {
            return a + b
        }

    </script>
</head>
<body>

</body>
</html>