资讯专栏INFORMATION COLUMN

JS对象常用方法总结

genedna / 2467人阅读

摘要:方法方法这是对象的一个静态函数,用来判断一个对象是不是数组的判断方法总结以上方法工作中有些是经常需要用到的,记录一下为了方法工作中方便的处理数据,得到自己想要的数据

1. charAt()

返回在指定位置的字符

var str = "nihaome wozhendexiangxeuhaoqianduan"
var str2 = str.charAt(4); 字符串的下标是从1开始的,所以返回o
var str3 = str.charAt(25);  25位置是a;
var str4 = str.charAt(5,26);  传入两个参数,不会报错,但是第二个参数默认无效,所以返回的是位置5的字符m
2. charCodeAt()

返回咋指定位置的字符的Unicode编码

var str = "llinihao mezaigama";
var str2 = str.charCodeAt(5);  位置5的字符是h,h的Unicode编码是104
var str3 = str.charCodeAt(3);
console.log(str3); // 110
console.log(str2); // 104
3. conca()

连接字符串

var str1 = "lixiaoqi";
var str2 = "zaijian";
console.log(str2.concat(str1)); 把str1连接到str2上 
// zaijianlixiaoqi
4. indexOf()

检索字符串,返回的是字符在字符串的下标

var str1 = "lixiaoqi";
var num1 = str1.indexOf("o");  检索字符串,返回的是字符在字符串的下标
字符串的下标是从0开始计数
var num2 = str1.indexOf("lllll");  没有找到匹配的值,返回-1
var num3 = str1.indexOf("ni");  没有找到匹配的值,返回-1
console.log(num1); // 5
console.log(num2); // -1
console.log(num3); // -1
5. match()

在字符串内检索指定的值或找到一个或多个正则表达式的匹配,返回的是值而不是值的位置。

var str1 = "lixiaoqi";
var str2 = str1.match("iao");  检索字符串,返回的是字符
var str3 = str1.match("lll");  没有指定的字符,返回的是null
6. replace()

替换匹配的字符串

var str1 = "nihaome";
var str2 = "lixiaoqi";
var str3 = str1.replace(str1.match("hao"),str2.match("lixi"));
找到str1的hao,找到str2的lixi,用str2替换掉str1
console.log(str3); // nilixime
7. search()

检索与字符串匹配的子串,返回的是地址

var str1 = "lixiaoqi nihaoya zaiganma";
var str2 = "nihaoya";
var str3 = "wobuzai";
var num1 = str1.search(str2); 返回的是第一个字符所在的位置
var num2 = str1.search(str3); 未检测到返回-1
console.log(num1); // 9
console.log(num2); // -1
8. split()

把字符分割成数组

var str1 = "nihao-zaijian-dajiahao";
console.log(str1.split("")); // ["n","i","h","a","o","z","a" ...]
var str2 = str1.split("-");
console.log(str2); // ["nihao","zaijian","dajiahao"]
console.log(str1); 原字符串不变  //  nihao-zaijian-dajiahao
9. slice()

提取字符串片段,并在新的字符串中返回被提取的部分

var str1 = "nihaoya wobuhaoya"
console.log(str1.slice(4,9)); 4位置开始,到9的前一个位置结束
console.log(str1.slice(2,14)); start位置开始,end前一个位置结束
console.log(str1); 原字符串不变
console.log(str1.slice(-1,0));  返回的是空字符串
console.log(str1.slice(30,100));  长度超过字符串的长度,返回空字符串
console.log(str1.slice(-1,10)); 返回的是空字符串
10. toLocaleLowerCase()

把字符串转换成小写

var str = "NIHAOME WOHENHAOnizaiganmane";
console.log(str.toLocaleLowerCase()); // nihaome wohenhaonizaiganmane
var str1 = str.toLocaleLowerCase(); 
console.log(str1);  // nihaome wohenhaonizaiganmane
console.log(str); 原字符串不变  // NIHAOME WOHENHAOnizaiganmane
11. toLowerCase()

把字符串转换成小写

var str = "deawwWWEzaiganmane";
console.log(str.toLowerCase()); // deawwwwezaiganmane
var str1 = str.toLowerCase();
console.log(str1);  // deawwwwezaiganmane
console.log(str); 原字符串不变
12. toLocaleUpperCase()

把字符串准换成大写

var str = "deawwWWEzaiganmane";
console.log(str.toLocaleUpperCase()); // DEAWWWWEZAIGANMANeE
var str1 = str.toLocaleUpperCase();
console.log(str1);  // DEAWWWWEZAIGANMANeE
console.log(str); 原字符串不变
13. substr()

从起始索引号提取字符串中指定书目的字符

var str = "nihaoya wohenhao dajiahao"
var str3 = str.substr(3,19); 字符串中空格不占位置,从3开始,到19结束
console.log(str3); // aoya wohenhao dajia
15. subString()

提取字符串中两个指定索引号之间的字符

var str = "nihaoya wohenhao dajiahao"
var str3 = str.substring(3,19);字符串中空格占位置,从3开始,到18结束
var str4 = str.substr(3,19);空格不占位。从3开始到19结束
数组array 1. slice[start,end]

返回从原数组中指定开始下表到结束下表之间的项组成的新数组(原数组不变)

var arr = [1,2,3,4,5,6,7,8];
var arr1 = arr.slice(2,6);
console.log(arr1); // ["3","4","5","6"]
数组下表从0开始,从2开始,到6的前一个位置结束
var arr3 = arr.slice(4); 从4开始到结束
console.log(arr3); // ["5","6","7","8"]
2. splice()
var arr = [1,2,3,4,5];
var arr1 = arr.slice(2,3); 实际得到的新数组的项数是end-strat;
console.log(arr1); // [3]
var arr2 = arr.slice(1,5);
console.log(arr2); // [2,3,4,5]
console.log(arr); // [1,2,3,4,5]
插入:3个参数,起始位置,删除的项数,插入的项。
替换,任意参数,起始位置,删除的项数,插入任意数量的项数
3. pop()

删除数组的最后一个元素,减少数组的长度,返回被删除的值

var arr = [1,2,3,4,5];
console.log(arr.length); // 5
var arr1 = arr.pop(); 
console.log(arr1); //5
console.log(arr.length);  //4
4. push()

将参数添加到数组的最后,返回新数组的长度

var arr = [1,2,3,4,5];
console.log(arr.length);  // 5
var num = arr.push(6,7,8); 
console.log(num); 返回的是新数组的长度 // 8
console.log(arr); 原数组被改变成新数组 // [1,2,3,4,5,6,7,8];
5. shift()

删除数组的第一个参数,数组的长度减1,无参

var arr = [1,2,3,4,5];
console.log(arr.length); // 5
var arr1 = arr.shift(); 
console.log(arr1); 返回的是删除的数组的值  // 1
console.log(arr); 原数组被改变成新数组 // [2,3,4,5];
6. unshift()

像数组的开头添加一个或更多的元素,并返回新的长度。(参数不限)

var arr = [1,2,3,4,5];
console.log(arr.length); // 5
var arr1 = arr.unshift(2,4,5,{name:"liqi"}); 
console.log(arr1); 返回的是新数组的长度 // 9
console.log(arr); 原数组被改变成新数组 // [2,4,5,{name: liqi},1,2,3,4,5];
7. sort()

按指定的参数对数组进行排序,返回的值是经过排序后的数组(无参,函数)

var arr = [1,"q",3,6,2,"a",9];
console.log(arr); 原数组
var arr1 = arr.sort();
console.log(arr1); 返回的是排序后的数组 // [1,2,3,6,9,"a","q"];
console.log(arr); 原数组变成新数组  // [1,2,3,6,9,"a","q"];
8. concat(3,4)

把两个字符串连接起来,返回的值是一个副本(参数不限)

var arr1 = [1,"q",3,6,2,"a",9];
var arr2 = [{name:"niho"},1,4];
console.log(arr1.concat(3,arr1));新创建一个数组,原数组不变 // [1,"q",3,6,2,"a",9,3,1,"q",3,6,2,"a",9]
console.log(arr1); // [[1,"q",3,6,2,"a",9]
console.log(arr2);原数组不变  //[{name:"niho"},1,4];
9. indexOf()

从数组的开头向后查找,接受两个参数,要查找的项和查找起点的位置索引

var arr = [1,2,3,4,5,6,78];
var num = arr.indexOf(78,3); 查找78所在的位置
console.log(num); 返回的项的索引 // 6
var num1 = arr.indexOf(3,1);
console.log(num1); // 2
var num2 = arr.indexOf(2);
console.log(num2); // 1
console.log(arr); // [1,2,3,4,5,6,78];
10. join()

将数组的元素组成一个字符串,以separator(分割器)

var arr1 = [1,"q",3,6,2,"a",9];
var arr2 = arr1.join(","); 以逗号分隔
var arr3 = arr1.join(""); 以空格分隔
console.log(arr1); 原数组不变
console.log(arr2); // 1,q,3,6,2,a,9
console.log(arr3); // 1q362a9
11. forEach()

对数组的每个元素执行一次提供的函数。

var arr1 = ["a", "b", "c"];
arr1.forEach(function(element) {
  console.log(element); // a b c
});
12. map()

对数组的每一项运行给定的函数,返回没戏函数调用的结果组成的数组

var arr = [1, 4, 9, 16];
const map1 = arr.map(x => x * 2); //对数组的每项*2
console.log(map1); // 2 8 18 32
13. for in方法

遍历数组

var arr = [1, 4, 9, 16];
for (var i = 0; i < arr.length; i++){
    console.log(arr[i]); // 1 4 9 16
}
ES5-every和some方法

every是所有函数的每个回调都返回true的时候才会返回true,当遇到false的时候终止执行,返回false。

some函数是存在有一个函数返回true的时候终止执行并返回true,否则返回false。

// every方法
var arr = [1,6,8,-2,-5,7,-4]
var isPositive = arr.every(function(value){
    return value > 0;
})
console.log(isPositive) // false

//some方法
var arr = [1,6,8,-2,-5,7,-4]
var isPositive = arr.some(function(value){
    return value > 0;
})
console.log(isPositive) // true
ES5-Array.isArray(obj)

这是Array对象的一个静态函数,用来判断一个对象是不是数组

var arr = [3,4,5]
console.log(Array.isArray(arr)); // true
// ES3的判断方法
console.log(typeof arr); // object
console.log(arr.toString()); // 3,4,5
console.log(arr instanceof Array); //true

总结: 以上方法工作中有些是经常需要用到的,记录一下为了方法工作中方便的处理数据,得到自己想要的数据

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106571.html

相关文章

  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    摘要:基本概念学习目标学会如何使用,掌握的常用,能够使用实现常见的效果。想要实现简单的动画效果,也很麻烦代码冗余。实现动画非常简单,而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。 为什么要学习jQuery? 【01-让div显示与设置内容.html】 使用javasc...

    nevermind 评论0 收藏0
  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    摘要:基本概念学习目标学会如何使用,掌握的常用,能够使用实现常见的效果。想要实现简单的动画效果,也很麻烦代码冗余。实现动画非常简单,而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。 为什么要学习jQuery? 【01-让div显示与设置内容.html】 使用javasc...

    codecook 评论0 收藏0
  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    摘要:基本概念学习目标学会如何使用,掌握的常用,能够使用实现常见的效果。想要实现简单的动画效果,也很麻烦代码冗余。实现动画非常简单,而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。 为什么要学习jQuery? 【01-让div显示与设置内容.html】 使用javasc...

    WalkerXu 评论0 收藏0
  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    摘要:基本概念学习目标学会如何使用,掌握的常用,能够使用实现常见的效果。想要实现简单的动画效果,也很麻烦代码冗余。实现动画非常简单,而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。 为什么要学习jQuery? 【01-让div显示与设置内容.html】 使用javasc...

    widuu 评论0 收藏0
  • JS 数组常用API方法和遍历方法总结

    摘要:数组语法功能遍历数组,返回回调返回值组成的新数组,不改变原数组,不会对空数组进行检测语法功能无法,可以用中来停止,不改变原数组语法功能过滤,返回过滤后的数组,不改变原数组,不会对空数组进行检测语法功能有一项返回,则整体为,不改变原数组语法 数组 (array) ES5 * map 语法:[].map(function(item, index, array) {return xxx})功...

    TNFE 评论0 收藏0
  • 前端常用4种模块化方案总结.md

    摘要:最后衍生出面向各种使用场景的模块标准。定义模块返回对象的匿名模块调用模块应用由模块组成,采用模块规范。其模块功能主要由两个命令构成和。命令用于规定模块的对外接口,导出模块暴露的命令用于输入其他模块提供的功能引入其他模块。 JS诞生之初面向简单页面开发, 没有模块的概念。后来页面逐渐复杂, 人类构造到 IIFE 立即执行函数来模拟 模块;之前也有雅虎的实践,使用命名空间 作为模块名。最后...

    lookSomeone 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<