JavaScript 常用内置对象详解

JavaScript 内置对象常用方法总结

常用内置对象都有哪些?

  • Array
  • Boolean
  • Number
  • String
  • Data
  • Math
  • RegExp

Array

有几个需要注意的方法,我会详细说明

Array 常用方法总结(表格)

常用方法作用返回值是否改变原数组
追加和删除
arr.push()尾部追加追加后的数组长度改变
arr.pop()尾部删除删除的元素改变
arr.shift()头部删除删除的元素改变
arr.unshift()头部追加追加后的数组长度改变
拼接及切割
arr.join()数组内元素拼接String
arr1.concat(arr2)数组之间拼接拼接后的新数组
arr.slice()切割切割的数组(左开右闭)
arr.splice()切割切割的数组(左闭右闭)改变
排序
arr.sort()排序排序后的数组改变
arr.sort((x,y) => x-y)从小到大排序排序后的数组改变
arr.sort((x,y) => y-x)从大到小排序排序后的数组改变
其他
arr.reverse()翻转翻转后的数组改变
arr.flat(层数|Infinity)拍平数组拍平后的数组
arr.forEach((each, index, array)=>{})遍历--

fliter

它是过滤器,注意要返回一个布尔值

var arr = [1,2,3,4,5];
var result = arr.filter(( item, index, array) => {
    return item < 3
})
console.log(result);        // (2) [1, 2]

总结一下,这个可以根据筛选条件来提取你想要的数据,再举一个栗子。

<script>
    /*filter 过滤
    return 为 true 会保留
    为 false 会过滤掉*/

    var grade = [
        {name:"zhangsan1",grade:60},
        {name:"zhangsan2",grade:50},
        {name:"zhangsan3",grade:40},
        {name:"zhangsan4",grade:70},
        {name:"zhangsan5",grade:80},
    ];
    /*过滤器*/
    var arr1 = grade.filter(function (value, index, array) {
        return value.grade >= 60;
        /*return value.name == 'zhangsan1';*/
    });
    console.log(arr1);
</script>

在这里插入图片描述

reduce

首先,这些参数我也不可能一直记住,那怎么办呢?
授人以渔,测试呗,但我知道他是个累加器,有初始值,也需要有返回值。

var arr = [1,2,3,4,5];
var result = arr.reduce(( a, b , c, d, e) => {
    console.log("a:", a);
    // console.log("b:", b);		// 1
    // console.log("c:", c);		// 0
    // console.log("d:", d);		// (5) [1, 2, 3, 4, 5]
    // console.log("e:", e);		// undefined
},0)

我们起初可以一个一个打印,来测试。
可以发现,b这个值是每一项,c是下标,d打印的是所有数组,到e就是undefined了,没了,说明它只有四个参数。
a 刚开始是0,之后都是undefined了,这是为什么呢?
别忘了他是累加器啊,我们试试这样:

var arr = [1,2,3,4,5];
var result = arr.reduce((a, b) => {
    console.log("a:", a);
    return a + b
},0)
console.log(result);    // 15

在这里插入图片描述
由此我们可以猜测,a值是保存每次累加之后的结果。
细心的人会发现,reduce第二个参数怎么是个0呢,别急,我们来修改一下它

var result = arr.reduce((a, b) => {
    console.log("a:", a);
    return a + b
},10)
console.log('result:', result);    // 25

在这里插入图片描述

说明这第二个参数是初始值
如果不写这个值的话,那么默认初始值是数组的第一个数

var result = arr.reduce((a, b) => {
    console.log("a:", a);
    return a + b
})
console.log('result:', result);    // 15

在这里插入图片描述

由此了解reduce累加器的简单工作原理,好好命名给参数就清晰了~,它也可以累加对象中的参数,灵活运用。

var arr = [1,2,3,4,5];
var initValue = 0;

var result = arr.reduce((prev, next, index, array) => {
    return prev + next;
}, initValue)
console.log('result:', result);    // 15
统计数据中重复的元素的个数
<script>
    var arr = [1,2,3,1,1,178,1,1,1,2,2,3,15];
    var sum = arr.reduce(function(prev,next) {
        /*如果next在prev中*/
        /*console.log(prev);*/
        if(next in prev){
            prev[next]++;
        }else{
            /*这么做就是向prev中追加新的统计元素*/
            prev[next] = 1;
        }
        return prev;
        /*这里要有个花括号,初始化prev*/
    },{});
    console.log(sum);

    /*这里面会有key 值的排序,并不是reduce处理的,而是对象拍的序
    * key值如果是数字的话,obj会自己排序*/
</script>
加和
var grade = [
    {name:"zhangsan1",grade:60},
    {name:"zhangsan2",grade:70},
    {name:"zhangsan3",grade:80},
    {name:"zhangsan4",grade:90},
];
var sum = grade.reduce(function (previousValue, currentValue) {
    /*注意这里赋值给prev*/
    return previousValue + currentValue.grade;
},0);
console.log(sum);
去重

测试去重的时候,漏敲了几行代码,导致老是提示错误,尝试打印 arr1arr2 中发现途中 arr2 会变成 undefined,我猜测这个 reduce 一定是有某种机制在里面的,问老师先。

<script>
    var arr1 = [1,2,3,1,23,1,2,3,1,2,3];
    var arr2 = arr1.reduce(function (previousValue, currentValue) {
        /*indexOf可以是数组,字符串*/
        if(previousValue.indexOf(currentValue) == -1){
            return previousValue.concat(currentValue);
        }else{
            /*必须要有这个返回值,不然你的arr2会变成undefined*/
            return previousValue;
        }
    },[]);
    console.log(arr2);
</script>

测试如下
在这里插入图片描述

我们也可以通过算法去重

// 数组去重
// 1. 先排序
// 2. 在一遍过滤
var arr = [1,2,3,1,1,178,1,1,1,2,2,3,15,0];
arr.sort((x, y) => x - y);
var result = [];
// console.log(arr);
for (let i = 0, len = arr.length - 1; i <= len; i++) {
    if(arr[i] !== arr[i+1]){
        result.push(arr[i])
    }
}
console.log(result);         //(6) [0, 1, 2, 3, 15, 178]

splice 与 slice

  • splice 分割的数组是左闭右闭的,会改变原数组的
  • slice 分割的数组是左闭右开的,也就是不包含第二个下标的参数,而且不会改变原数组
let arr = ['一','二','三','四'];
console.log(arr.splice(2,3));	// (2) ["三", "四"]
console.log(arr);	// (2) ["一", "二"]
let arr = ['一','二','三','四'];
console.log(arr.slice(2,3));    // ["三"]
console.log(arr);       // (4) ["一", "二", "三", "四"]
  • 如果只写一个参数的话
let arr = ['一','二','三','四'];
console.log(arr.splice(2));     // (2) ["三", "四"]
console.log(arr);       //  (2) ["一", "二"]
let arr = ['一','二','三','四'];
console.log(arr.slice(2));     // (2) ["三", "四"]
console.log(arr);       //  (4) ["一", "二", "三", "四"]

flat

  • arr.flat()这个方法可以拍平多维数组,其中参数n代表拍平n维,而且不会修改原数组。
let arr = [1,2,3,[4,5,[6,7,8,[9,10,11,[12,13,14]]]]];
console.log(arr.flat(1));       // (6) [1, 2, 3, 4, 5, Array(4)]
console.log(arr.flat(2));       // (9) [1, 2, 3, 4, 5, 6, 7, 8, Array(4)]
console.log(arr.flat(3));       // (12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, Array(3)]
console.log(arr.flat(Infinity));    // (14) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
console.log(arr);               // (4) [1, 2, 3, Array(3)]
  • 也可以把残缺的数组医治好。
let arr = ['一',,,,,,1,,,,,23,,,,];
console.log(arr.flat());     // (3) ["一", 1, 23]
console.log(arr);       // (15) ["一", empty × 5, 1, empty × 4, 23, empty × 3]

String

String 常用方法总结(表格)

常用方法作用返回值其他说明
分割
str.split()字符串分割成数组数组-
str.substring(startPos,endPos|)字符串截取字符串第二个参数规定截取结束的位置,默认是字符串尾部。
查找
str.charAt()根据下标找元素,如果越界的话返回空字符串寻找的元素
str.indexOf()根据元素,找下表,如果查找不到返回 -1下标第一个’要查找的元素’,起始位置
str.search('b')根据元素找下表下标-
str.match(/\d+/g)参数可以是字符串或者正则表达式数组
str.startsWith('ab')从字符串开头寻找布尔值注意:不是包含关系,一定是要在头部开始的,ends同理
str.endsWith()从字符串尾部寻找布尔值-
str.includes('ab')str中是否包含'ab'布尔值
去空格
str.trim()去掉字符串前后的空格新字符串str.replace(/^\s*|\s*$/g,'')
str.trimStart()去前空格新字符串str.replace(/^\s*/g, '')
str.trimEnd()去尾空格新字符串str.replace(/\s*$/g, '')
str.replace(/\s/g, '')去除所有空格新字符串
转换
str.toLowerCase()转小写小写字符串
str.toUpperCase()转大写大写字符串
补全
str.padStart(8,"xy")str字符串,从头开始,用xy补足长度尾8。返回补足后的新字符串
str.padEnd(8,"xy")str字符串,从尾开始,用xy补足长度尾8。返回补足后的新字符串
其他
str.repeat(4)重复重复后的新字符串不会改变原字符串

Date

首先定义 var date = new Date();
调用的方法如下

  • date.getFullYear(); 年份
  • date.getMonth(); 月份
  • date.getDate();
  • date.getHours();
  • getMinutes();
  • getSeconds();

RegExp

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值