js数据系统内置功能（上）

小狐狸ya

已于 2022-06-17 13:01:41 修改

阅读量112

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

于 2022-05-23 15:04:15 首次发布

本文链接：https://blog.csdn.net/qq_56607109/article/details/124927350

版权

JavaScript 字符串方法数组方法遍历器编程基础

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

文章目录

1、字符串的内置功能

函数	功能描述
anchor()	创建 HTML 锚。
big()	用大号字体显示字符串。
blink()	显示闪动字符串。
bold()	使用粗体显示字符串。
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接字符串。
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
fromCharCode()	从字符编码创建一个字符串。
indexOf()	检索字符串。没有就为-1
italics()	使用斜体显示字符串。
lastIndexOf()	从后向前搜索字符串。
link()	将字符串显示为链接。
localeCompare() 了解	用本地特定的顺序来比较两个字符串。
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。和subsring（）一起记忆。
small()	使用小字号来显示字符串。
split()	把字符串分割为字符串数组。笔试题：把网页的url的参数解析为一个对象。见后文~
strike()	使用删除线来显示字符串。
sub()	把字符串显示为下标。
substr() 重要	从起始索引号提取字符串中指定数目的字符。例如：（-3，2）意思就是从倒数后面第三个开始往后面取2个。
substring() 重要全小写	提取字符串中两个指定的索引号之间的字符。例如：（2，6）取索引号2到6之间的字符，不包含6。【左开右闭】
sup()	把字符串显示为上标。
toLocaleLowerCase()	把字符串转换为小写。
toLocaleUpperCase()	把字符串转换为大写。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toSource()	代表对象的源代码。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。

其中加特效的不常用，用的时候一般是在object上添加mytool函数，然后进行拼接。

下面的必须掌握：

toUpperCase（）

将字符串转换为大写。

首字母大写需要自己设计，官方没有提供。

var str = 'hello';
String.prototype.capUpperCase = function (e) {
    var re = this[0].toUpperCase();
    for (var i = 1; i < this.length; i++) {
                re += this[i];
            }
            return re;
        }
        var re = str.capUpperCase();
        console.log(re);  //Hello

split（）

把字符串分割为字符串数组。

        var str = 'aasfscf';
        var re = str.split('sf');//以sf为分割线
        console.log(re)//打印['aa', 'scf']

slice（）

提取字符串的片断，并在新的字符串中返回被提取的部分。和subsring（）一起记忆。

        var str = 'aasfscf';
        var re = str.slice(2, 4); //sf
        var re2 = str.substring(2, 4) //sf
        console.log(re, re2)

substring（）和substr( )

注意都是小写！！！

区别：
- substr（-3，2）意思就是从倒数后面第三个开始往后面取2个。
- substring（-3，2）意思就是从下标-3开始取到下标2，不包含-3，【左开右闭】。
```
var str='aasfscf';
var re1=str.substring(-3,2);//aa
var re1=str.substr(-3,2);//sc
console.log(re1,re2);
```

indexof( ) 检测指定元素下标。

var str='abcsfggsd';
var re=str.indexof('csf');//第二个参数不写默认为0  结果打印2
var re2=str.index('a',1);//从下标1开始往后面搜查 没找到 打印-1

笔试题：找出“的”出现的次数：

        String.prototype.frequency = function (str) {
            var re = 1;
            var count = 0;
            do {
                re = this.indexOf(str, re + 1);
                if (re != -1) {
                    count++;
                }
            } while (re != -1);
            return count;
        }

        var str ='一个人的水平可以体现在说话上。 说话是本能，但会说话却是需要不断学习的必修课。 石油大王洛克菲勒说过一句话： 假如沟通是一样商品，我愿意付出比任何事物都高昂的价格来购买。 不会沟通的人，总是在无形中为自己筑起一道道围墙。';
        var re = str.frequency('的');
        console.log(re);  //打印4

toString( )和valueof( )

toString( ):返回字符串。
valueof( ):返回某个字符串对象的原始值。

        var str = 'hello';
        var re = str.valueOf();
        console.log(re);

        str.age=20;//隐式操作 字符串是基本数据类型，所有的基本数据当作对象使用时，点语法隐式操作（隐式包装一个对象）
        /* 
        隐式操作：
        var str=new String('hello');        
        */
        console.log(str.age);//undifined

2、数组的内置功能

1、创建数组

var arr=[1,2,3];

var arr2=new Array(1,2,4);

2、数组常用方法

方法	功能描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。不传参默认’,’
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

concat( ) 把几个数组合成一个，返回一个新的数组，不会改变原数组。

var arr=[1,2,3];
var arr2=['hello'];
var arr3=arr.concat(arr2);
console.log(arr3); //打印[1, 2, 3, 'hello']

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

var arr=[1,2,3];
var re=arr.join('*');//不传参默认,
console.log(re); //打印 1*2*3

pop( ) 删除并返回数组的最后一个元素。

var arr=[1,2,3,4,5];
var re=arr.pop();
arr.pop();  //删除5之后，在删除最后一个4
console.log(re,arr);  //5  [1, 2, 3]

push( ) 向数组的末尾添加一个或更多元素，并返回新的长度。
```
var arr=[1,2,3,4,5];
var re=arr.push(6,7);
console.log(re,arr);  //7  [1, 2, 3, 4, 5, 6, 7]
```
数组的length的值是由数组最后一个数字的下标+1决定的，而不是元素的个数。

shift() 删除并返回数组的第一个元素。

var arr=[1,2,3,4,5];
var re=arr.shift();
console.log(re,arr);//1  [2, 3, 4, 5]

unshift( ) 向数组的开头添加一个或更多元素，并返回新的长度。

var arr=[1,2,3,4,5];
var re=arr.unshift(6);
console.log(re,arr); //6  [6, 1, 2, 3, 4, 5]

splice() 删除元素返回删除的元素，并从开头向数组添加新元素。

var arr=[1,2,3,4,5];
var re=arr.splice(0,3,'hello','hi');//从下标0开始往后删除3个元素，再添加hello和hi 这两个元素
console.log(re,arr);//[1, 2, 3]  ['hello', 'hi', 4, 5]

用这个方法可以做出前几个方法的效果。

sort( ) 对数组的元素进行排序。一般用来名字字母排名，默认按照表码排序。

数字排序方法：

var arr=[1,4,6,23,56,9];
var re=arr.sort(function(a,b){
    return b-a;//大到小
})
console.log(re);//[56, 23, 9, 6, 4, 1]

var arr=[1,4,6,23,56,9];
var re=arr.sort(function(a,b){
    return a-b;//小到大
})
console.log(re);//[1, 4, 6, 9, 23, 56]

3、遍历器

取出数据容器（栈，堆，数组，对象等等）中的数据。

for 循环（最重要的遍历器，兼容性好，基本上就用它）

let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
	console.log(i, arr[i])
}

结果：在这里插入图片描述

for in 循环（原型对象上的属性也遍历了）

for of es6技术优化了for in 技术，功能一样。
```
		let obj = {
			name: 'zhou',
			age: '**'
		}
		for (let i in obj) {
			console.log(i, obj[i])
		}
```
结果：

注意：for in 循环主要用于遍历普通对象， i 代表对象的 key 值， obj[i] 代表对应的 value, 当用它来遍历数组时候，多数情况下也能达到同样的效果，但是你不要这么做，这是有风险的，因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如： ‘52’ +1 = ‘521’ 而不是我们需要的 53。另外for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，所以最好在循环体内加一个判断，就用 obj[i].hasOwnProperty(i)，这样就避免遍历出太多不需要的属性。
forEach 循环
```
	let arr = [1, 2, 3];
	arr.forEach(function(i, index) {
		console.log(i, index)
	})
```
结果：

注意：forEach循环，循环数组中每一个元素并采取操作， 没有返回值，可以不用知道数组长度, 他有三个参数，只有第一个是必需的，代表当前下标下的 value。

另外请注意， forEach 循环在所有元素调用完毕之前是不能停止的，它没有break 语句，如果你必须要停止，可以尝试try-catch 语句，就是在要强制退出的时候，抛出一个 error 给catch 捕捉到，然后在catch 里面return，这样就能中止循环了，如果你经常用这个方法，最好自定义一个这样的 forEach 函数在你的库里。

自己封装一个myforEach（）
```
var arr = [2, 3, 5, 6];
Array.prototype.myforEach = function (callback) {
       for (var i = 0; i < arr.length; i++) {}
            callback(this[i]);
        }

arr.myforEach(function (i) {
            console.log(i)
        })//遍历出 2 3 5 6
```
map() 方法
```
	var arr = [1, 2, 3];
	var tt = arr.map(function(i) {
		console.log(i)
	})	
```
结果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qez5iSL-1653289101097)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220522170100220.png)]

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

注意： map 和 forEach 方法都是只能用来遍历数组， 不能用来遍历普通对象。

filter() 方法

	let arr = [1, 2, 3];
	let tt = arr.filter(function(i) {
		return i > 1;//这里是在判定布尔值，true则添加到新数组，负责不加入。
	})
    console.log(tt);//[2, 3]

filter 方法是 Array 对象内置方法，它会返回通过过滤的元素， 不改变原来的数组。

Array some() 方法

	let arr = [1, 2, 3];
	let tt = arr.some(function(i) {
		return i > 1;
	})
    console.log(tt);//这个数组里面有大于1的数字，所以打印  true

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）, 返回 boolean 值， 不改变原数组。

设置mysome（）实现some( )功能：

        Array.prototype.mysome = function (callback) {
            for (var i = 0; i < this.length;) {
                if (callback(this[i], i, this)) {
                    return true;
                }
                return false;
            }
        }

        var arr = [1, 2, 3, 4, 54];
        var re = arr.mysome(function (el) {
            console.log(el);
            return el > 3;
        })
        console.log(re);

结果：在这里插入图片描述

Array every() 方法

	let arr = [1, 2, 3];
	let tt = arr.some(function(i) {
		return i > 1;
	})
    console.log(tt);//判断是否所有数字都大于1，这个数组里面有不大于1的数字，所以打印  false

reduce() 、reduceRight()方法

var arr = [1, 2, 3];
var ad = arr.reduce(function(i, j) {
	return i + j;
})
console.log(ad);//打印6

var arr = [10, 203, 4, 5];
arr.reduce(function (n1, n2) {
     console.log(n1, n2);
     return 90;
})

在这里插入图片描述

分析：第一次运行时，n1:10,n2:203 第二次执行时return值90，赋值给n1,此时n2:4 ;第三次同理。

reduceRight() 方法, 和 reduce() 功能是一样的，它是从数组的末尾处向前开始计算。

小狐狸ya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js数据系统内置功能（上）

1、字符串的内置功能函数功能描述anchor()创建 HTML 锚。big()用大号字体显示字符串。blink()显示闪动字符串。bold()使用粗体显示字符串。charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 编码。concat()连接字符串。fixed()以打字机文本显示字符串。fontcolor()使用指定的颜色来显示字符串。fontsize()使用指定
复制链接

扫一扫

专栏目录