JavaScript 构造函数&&数据常用函数

最新推荐文章于 2024-05-20 15:17:08 发布

摇头娃娃丶

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量87

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq879222800/article/details/125237854

版权

创建对象三种方式

new Object({ name: 'tom' })

const o = { name: 'tom' }

构造函数

find（）和findIndex（）

find（）得到的是一个对象
findIndex() 根据条件查找元素对应的下标

Object.keys ( )和Object.values( )，.Object.assgin

Object.keys(参数)：获取参数中所有属性的属性名，返回一个新数组;

Object.values(参数)：获取参数中所有属性的属性值，返回一个新数组

Object.assgin(obj2,obj1)对象拷贝，把obj1里面的数据，拷贝到obj2里面

toFixed方法保留有几位的有效数字（四舍五入）

  // 1.数字类型的api, 常用的只有一个 保留几位有效数字;(四舍五入)
        let num = 11.12345678;
        console.log(num.toFixed(2));//输出的是11.12
        console.log(num.toFixed(4));// 输出的是11.1235
        
        // 整数保留有效数字，就是用0补位;
        let num2 = 12;
        console.log(num2.toFixed(2)); //输出的是12.00

字符串API

<script>
        // 1.已经用过的字符串API;
        //    length: 长度;
        //    replace(): 替换;

        // 2.没有用过的字符串API;
        //   split(); 切割字符串为数组;
        //   slice(); 截取字符串;
        //   includes();  是否包含某个字符串;
        //   indexOf(); 查找某个字符串的索引值;

        // 3.下面方法，可以参考MDN自学;
        //   (未讲)match(); 查找字符串用于正则匹配;
        //   (未讲)toUpperCase(); 转换为大写;
        //   (未讲)toLowerCase(); 转换为小写;
        //   (未讲)startsWith(); 是否是...为开头;
        //   (未讲)endsWith(); 是否是...为结尾;

        console.log('ab|cd|e'.split('|')); // 用...切割字符串;
        console.log('abcdefg'.split('x')); // 字符串中不包含，就会把整个字符串放入数组
        console.log('abcdefg'.slice(2, 5)); // 截取字符串, 包左不包右
        console.log('abcdefg'.slice(2)); // 一个参数就是截取到最末尾
        console.log('abcdefg'.includes('bcd')); // 包含返回true，不包含返回false
        console.log('abcdefg'.indexOf('de')); // 返回首字符对应的索引值
        console.log('abcdefg'.indexOf('df')); // 没有，或者不完整包含返回 -1

伪数组转换为真数组

  <script>
        // 伪数组没有办法调用数组的所有方法: join()/filter()/map()/find()...
        //     有一些伪数组也会添加 forEach(),但是不添加所有数组方法;

        let lis = document.querySelectorAll('li');

        // 1. Array.from();  伪数组转换为，真正的数组;(静态成员)
        console.log(lis);
        let arr = Array.from(lis);
        console.log(arr);
        
        // 2. 可以使用 ... 展开运算符
        let arr2 = [...lis]
        console.log(arr2);
        
    </script>

reduce方法介绍（一般用于累加）

//
一般用于累加
 let arr = [111, 222, 333]
2.reduce(); 可以化繁为简; (一般都是累加)
        //   如果回掉函数后面没有传递参数，那么就会把数组中的第一项赋值给 previousValue
        //   如果回掉函数后面有传递参数，那么就会把这个值赋值给 previousValue
        // 后面每遍历一次，就会把函数的返回值赋值给 previousValue；
        let num = arr.reduce(function (previousValue, e, i, a) {
            console.log(previousValue);
            // console.log(e, i, a);
            return 123;
        }, 0);
        // reduce()的返回值，就是所有循环执行完毕后的 previousValue；
        console.log(num);
            
        // 总结: 这个方法用的最多的功能，就是累加和;
        let total = arr.reduce(function (p, e, i, a) {
            return p + e;
        });
        console.log(total);

toFixed保留有效数字

//
 一般用于渲染出 商品价格

数字类型api,常用的只有一个 保留几位有效数字(四舍五入)
    let num = 11.12346789;
    console.log(num.toFixed(6));//11.123468
    console.log(num.toFixed(2));// 11.12

    let num3 = 11.999;
    console.log(num.toFixed(2));// 12
    //整数保留有效数字，就是用0补位

    let num2 = 12;
    console.log(num2.toFixed(3)); 12.000

split（）切割字符串为数组

console.log('ab|cd|e'.split('|')); // 用...切割字符串;

console.log('abcdefg'.split('x')); // 字符串中不包含，就会把整个字符串放入数组

filter过滤方法和forEach循环方法

// 1.filter()是数组的一个过滤元素的方法;
        //   不会影响原数组，会返回一个新数组;  
        //   参数, 类比map方法
        let arr = [10, 20, 30, 40, 50]
        // 遍历数中的每一项，返回值如果是true，就放入新数组，并返回;
        let newArr = arr.filter((ele, i, array) => {
            // console.log(ele, i, array);
            // 通用方法
            // if (ele > 20) {
            //     return true;
            // } else {
            //     return false
            // }
            // 优化
            return ele > 20;
        });
        console.log(newArr);
        
        // 2.forEach() 类似for循环; 没有返回值;
        let a = arr.forEach((ele, i, array) => {
            // console.log(ele, i, array);
            return true;
        });
        console.log(a);