x-js学习笔记5

Find_first

已于 2023-05-14 12:12:17 修改

阅读量273

点赞数

文章标签：学习笔记

于 2023-05-14 12:09:41 首次发布

本文链接：https://blog.csdn.net/xmc20050422/article/details/130667030

版权

4.1.1简单类型简单类型又叫做基本数据类型或者值类型

4.1.2复杂类型

4.2堆和栈

4.2.1栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈，简单数据类型存放到栈里面

4.2.2堆（操作系统）：存储复杂类型（对象），一般有程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里

6.3.4获取特殊元素（body，html）

1、日期对象

<script>
        var date = new Date();
        console.log(date.getFullYear());//返回当前日期的年
        console.log(date.getMonth() + 1);//返回月份-1
        console.log(date.getDate());//返回几号
        console.log(date.getDay());//周一返回1 周六返回6 周日返回0
        //写 年 月 日 星期 .
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        console.log('今天是：' + year + '年' + month + '月' + dates + '日' + '     ' + arr[day]);
    </script>

<script>
        var date = new Date();
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getUTCSeconds());
        //
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTime());

1.1获取日期的总的毫秒形式（时间戳）

Date对象时基于1970年1月1日起的毫秒数

<script>
        //获得Date总的毫秒数 不是当前时间你的毫秒数 而是距离1979.1.1的
        //1、通过valueOf（）getTime（）
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());


        //2、简单的写法（最常用的写法）
        var date1 = +new Date();
        console.log(date1);
        //3、H5新增的
        console.log(Date.now());
    </script>

2、数组对象

2.1创建数组

<script>
        //创建数组的两种方式
        //1、利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);
        //2、利用new Array()
        // var arr1=new Array()创建了一个空的数组
        var arr1 = new Array(2);//有两个空元素 这个2表示两个数组的长度为2
        var arr1 = new Array(2, 3);//等价于[2,3] 这样写表示有两个数组元素 时2和3
        console.log(arr1);
        console.log(arr1);
    </script>

2.2检测是否为数组

<script>
        var date = new Date();
        console.log(date.getFullYear());//返回当前日期的年
        console.log(date.getMonth() + 1);//返回月份-1
        console.log(date.getDate());//返回几号
        console.log(date.getDay());//周一返回1 周六返回6 周日返回0
        //写 年 月 日 星期 .
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        console.log('今天是：' + year + '年' + month + '月' + dates + '日' + '     ' + arr[day]);
    </script>

2.3反转数组

<script>
        function reverse(arr) {
            if (Array.isArray(arr)) {
                var newArr = [];
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
            } else {
                return 'error这个参数要求必须是数组格式[1,2,3]'
            }
        }
        console.log(reverse([1, 2, 3]));
        console.log(reverse(1, 2, 3));
    </script>

2.4添加数组

<script>
        //1 push()
        var arr = [1, 2, 3];
        console.log(arr.push(4, 'pink'));//push完毕之后，返回的结果是 新数组的长度
        //原数组也发生变化


        arr.push(4);
        console.log(arr);
        //2 unshift()
        var arr1 = [12, 23, 34];
        arr1.unshift('shijie', 234);
        //完毕之后，返回的结果是 新数组的长度
        //原数组也发生变化
        console.log(arr1);
        console.log(arr1.push(4, 'pink'));
        //3 pop()
        var arr2 = [2, 3, 45, 35];
        //删除数组的最后一个元素 
        //pop（）没有参数
        //pop完毕之后，返回的结果是删除的那个元素
        //原数组也会发生变化
        console.log(arr2.pop());
        console.log(arr2);
        //4 shift 删除数组的第一个元素
        console.log(arr2.shift())
        console.log(arr2)
    </script>

<script>
        var str1 = [1500, 1200, 2000, 2100, 1800];
        var tent;
        for (var i = 0; i <= str1.length - 1; i++) {
            for (var a = 0; a <= str1.length - 1; a++) {
                if (str1[a] > str1[a + 1]) {
                    tent = str1[a];
                    str1[a] = str1[a + 1];
                    str1[a + 1] = tent;
                }
            }
        }
        console.log(str1);
        var n = 0;
        for (i = 0; i <= str1.length; i++) {
            if (str1[i] > 2000)
                n++;


        }
        console.log(n);
        for (i = 0; i <= n - 1; i++) {
            str1.pop();


        }
        console.log(str1);
    </script>

2.5数组排序

<script>
        //1 反转数组
        var arr = ['pink', 'red', 'blue'];
        arr.reverse();
        console.log(arr);
        //2 数组排序（冒泡排序）
        var arr1 = [3, 4, 5, 6];
        arr1.sort();
        console.log(arr1);
        //
        var arr1 = [3, 4, 5, 6];
        arr1.sort(function (a, b) {
            return a - b;
            return a + b;
            //a-b升序排列
            //b-a降序排列
        }
        )
        console.log(arr1);
    </script>

2.6 返回元素索引号方法

<script>
        var arr = ['red', 'green', 'blue', 'blue', 'blue', 'blue'];
        console.log(arr.indexOf('blue'));
        //indexOf只返回第一个满足条件的索引号
        //找不到返回的时-1
        //indexOf从前面开始
        console.log(arr.lastIndexOf('blue'));
        //返回数组元素索引号方法 lastIndexOf（数组元素）作用就是返回该数组元素的索引号 从后面开始查找


    </script>

2.7数组去重

<script>
        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;


        }
        var arr1 = unique(['c', 'a', 'z', 'a', 'x', 'a', 'a', 'x', 'c', 'b']);


        console.log(arr1);
    </script>

2.8数组转化成字符串

<script>
        //数组转化字符串
        //1 toString()
        var arr2 = [1, 2, 3];
        console.log(arr2.toString());
        //2 join(分隔符)
        var arr1 = ['green', 'blue', 'pink'];
        console.log(arr1.join());
        console.log(arr1.join('-'));
        console.log(arr1.join('&'));
    </script>

3.字符串对象

3.1基本包装类型

为了方便操作基本数据类型，js提供了桑特殊的引用类型：String、Number和Boolean

<script>
        //基本包装类型
        var str = 'andy';
        console.log(str.length);
        //对象 才有 属性和方法 复杂数据类型才有属性和方法
        //基本包装类型：就是把简单数据类型 包装成了复杂数据类型
        //（1）把简单数据类型包装为复杂数据类型
        var temp = new String('andy');
        //(2)把临时变量的值 给 str
        str = temp;
        //(3)销毁这个临时变量
        temp = null;


    </script>

3.2字符串不可变

<script>
        //字符串的不可变性
        var str1 = 'andy';
        console.log(str1);
        str1 = 'red';
        console.log(str1);
        //因为我们的字符串的不可变所以不要大量的拼接字符串
        var str = '';
        for (var i = 1; i < 1000000; i++) {
            str += i;
        }
        console.log(str);
    </script>

3.3 根据字符返回位置

字符串所有的方法，都不会修改字符串本身（字符串时不可变的），操作完会返回一个新的字符串。

<script>
        //格式 str.indexOf（'要查找的字符'，[起始的位置]）
        var str = '改革春风吹满地,春天来了';
        console.log(str.indexOf('春'));
        console.log(str.indexOf('春', [4]));
    </script>

<script>
        var str1 = "abcedojfohnkdodddfoooodghs";
        var index = str1.indexOf('o');
        console.log(index);
        var n = 0;
        while (index !== -1) {
            console.log(index);
            index = str1.indexOf('o', index + 1);
            n++;
        }
        console.log('有' + n + '个o')
    </script>

3.4根据位置返回字符（重点）

<script>
        //根据·位置返回字符
        //1、charAt(index)根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3));//3=0+3,所以是第四位
        //遍历所有的字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
        //2 charCodeAt(index) 返回相应的索引号的字符的ASCII值 目的：判断用户按下了那个键
        console.log(str.charCodeAt(0));//97 指定位置字符的ASCII值
        //3 str[index] H5 新增的
        console.log(str[0]);//a 指定位置字符
    </script>

<script>
        //有一个对象 来判断是否有该属性 对象['属性名']
        var o = {
            age: 18
        }
        if (o['age']) {
            console.log('里面有该属性');
        }
        else {
            console.log('没有该属性');
        }
    </script>

<script>
        //判断一个字符串'abdhkjdhfalsoufofdhkj'中出现次数最多的字符，并统计其次数
        //核心算法：利用charAt（）遍历这个字符串
        //把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
        //遍历数组，得到最大值和该字符


        var str = 'abdhkjdhfalsoufofdhkj';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);//chars是字符串的每一个字符
            if (o[chars]) {//o[chars]得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }


        }
        console.log(o);
       var max = 0;
        var ch = '';
        //2 遍历对象
        for (var k in o) {
            //k得到的是属性名
            //o[k]得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }

        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>

3.5字符串操作方法

<script>
        //字符串的操作方法
        //1 concat
        var str = 'andy';
        console.log(str.concat('red'));
        //2 substr('截取的起始位置'，’截取几个字符)
        var str1 = '改革春风吹满地'
        console.log(str1.substr(2, 2));
    </script>

<script>
        // 1 替换字符 replace('被替换掉字符','替换为的字符')
        var str = 'andy';
        console.log(str.replace('a', 'b'));
        //他只会替换第一个字符
        //有一个字符串'sfjhugfuaupu9ooooosf' 要求把里面所有的o替换为*
        var str1 = 'sfjhugfuaupu9ooooosf';
        while (str1.indexOf('o') !== -1) {
            str1.replace('o', '*');
        }
        console.log(str1);
        //2 字符转换为数组 split('分隔符')
        var str2 = 'red,pink,blue';
        console.log(str2.split(','));


    </script>

4数据类型

4.1简单数据类型和复杂数据类型

4.1.1简单类型简单类型又叫做基本数据类型或者值类型

string number boolean undefind null(返回的是一个空的对象object 如果有变量我们以后打算存储为对象又没有确定的值)

4.1.2复杂类型

复杂类型又叫做引用类型，

存储变量是变量中存储的仅仅是地址（引用），因此叫做引用数据类型

通过new关键字创建的对象（系统对象、自定义对象），如Object Array Date等

4.2堆和栈

4.2.1栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈，简单数据类型存放到栈里面

4.2.2堆（操作系统）：存储复杂类型（对象），一般有程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里

4.3内存分配

4.3.1简单数据类型的内存分配

string number boolean undefind null

简单数据类型存放到栈里面里面直接开辟一个空间存放的是值，外面放变量名

4.3.2复杂数据类型的内存分配

复杂数据类型变量也在外面栈里放地址（十六进制表示）堆里放值

4.4传参

4.4.1简单数据类型的传参

函数的形参也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量

<script>
        function fn(a) {
            a++;
            console.log(a);
        }
        var x = 10;
        fn(x);
        console.log(x);
    </script>

<script>
function Person(name) {
            this.name = name;
        }
        function f1(x) {
            console.log(x.name);
            x.name = '张学友';
            console.log(x.name);
        }
        var p = new Person('刘德华');
        console.log(p.name);
        f1(p);
        console.log(p.name);
   </script>

5.1API

是给程序员提供一种工具

5.2Web API

是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

5.3API

是为程序员提供的一个接口，帮我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现

Web API主要针对于浏览器提供的接口，主要针对于浏览器做交互效果

Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）

Web API结合内置对象

6.DOM

6.1DOM

是一个接口，通过这些DOM接口可以改变网页的内容、结构和样式

6.2DOM树

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中的所有标签都是元素，DOM中使用element表示

节点：页面中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作对象

6.3获取元素

6.3.1通过ID

页面加载从上往下加载

使用getElementById（）

<body>
    <div id="time">2019-9-9</div>
    <script>
        //get 获取 element 元素 by 通过 驼峰命名法
        //参数 id是大小写敏感的字符串
        //返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        
        console.dir(timer);
    </script>
</body>

6.3.2根据标签名获取

得到的也是一个对象

里面的内容是动态

<body>
    <ul>
        <li>12345667889999</li>
        <li>12345667889999</li>
        <li>12345667889999</li>
        <li>12345667889999</li>
        <li>9</li>
        <li>12345667889999</li>
    </ul>
    <script>
        //1 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        console.log(lis[5]);
        //2 想要依次打印里面的元素对象我们可以采取便利的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>


</body>

如果页面中只有一个li 返回的还是伪数组的形式

如果页面中没有这个元素返回的还是伪数组的形式

还可以获取某个元素（父元素）内部所有指定标签名的子元素

<ol>
        <li>shijie1</li>
        <li>shijie2</li>
        <li>shijie3</li>
        <li>shijie4</li>
        <li>shijie5</li>
    </ol>
    <script>
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));


        var lis1 = document.getElementsByTagName('ol');
        console.log(ol[0].getElementsByTagName('li'));

6.3.3通过HTML5新增的方法获取

<body>
    <div class="box">hezi</div>
    <div class="box">hezi</div>
    <div id="nav">
        <ul>
            <li>shouye</li>
            <li>chanpin</li>
        </ul>
    </div>
  <script>
        //1.getElementByClassName 根据类名获取某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        //2.querySelector 返回指定选择器的第一个元素对象
        //切记 里面的选择器需要加符号 。box #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>

</body>

6.3.4获取特殊元素（body，html）

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <script>
        //1 获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        //2 获取html元素
        //var htmlEle = document.html;
        var htmlEle = document.documentElement;
        console.log(htmlEle);


    </script>


</body>


</html>

Find_first

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
x-js学习笔记5

函数的形参也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量。string number boolean undefind null(返回的是一个空的对象object 如果有变量我们以后打算存储为对象又没有确定的值)字符串所有的方法，都不会修改字符串本身（字符串时不可变的），操作完会返回一个新的字符串。是为程序员提供的一个接口，帮我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。
复制链接

扫一扫