js8---字符串的内置功能，数组的内置对象，遍历器

realllll
249 阅读6分钟

字符串的内置功能

字符串功能anchor() 创建 HTML 锚。
big() 用大号字体显示字符串。
blink() 显示闪动字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
fromCharCode() 从字符编码创建一个字符串。
indexOf() 检索字符串。
italics() 使用斜体显示字符串。
lastIndexOf() 从后向前搜索字符串。
link() 将字符串显示为链接。
localeCompare() 用本地特定的顺序来比较两个字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
small() 使用小字号来显示字符串。
split() 把字符串分割为字符串数组。
strike() 使用删除线来显示字符串。
sub() 把字符串显示为下标。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
sup() 把字符串显示为上标。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toSource() 代表对象的源代码。
toString() 返回字符串。
valueOf() 返回某个字符串对象的原始值。

1.代码演示

1.1 toUpperCase()和toLocaleLowerCase() 全大写，全小写

        var str="poStasdasdf"
		var re=str.toUpperCase()
		console.log(re)
		var re2=str.toLocaleLowerCase()
		console.log(re2)

image.png

实现首字母大写（字符串也可取下标）

 var str="poStasdasdf"
 var re3=str[1]
		var re4=str.length
		console.log(re3,re4)
		String.prototype.capUppserCase=function() {
			var re=this[0].toUpperCase()				
			for(var i=1;i<this.length;i++){
				re+=this[i]
			}
			return re
		}
		var str="poStasdasdf"
		var re=str.capUppserCase()
		console.log(re)

image.png

1.2 substr(2,2) 截取字符串

截取第几个元素的后几个元素

 var str="hello"
var re=str.substr(2,2)
console.log(re,str)

image.png

起始位置可以为负数，从后往前数

var str="hello"
		var re=str.substr(-3,2)//from可以是负数 代表从后往前数
		console.log(re,str)

image.png

1.3 substring() 截取字符串 左开右闭 （]

从第start个元素到第end个元素,start元素不截取

  var str="hello"
		var re=str.substring(1,3) 
		console.log(re,str)

image.png

起始位置可以为负,等同于从第0个元素开始取

  var str="hello"
		var re=str.substring(-5,1)//(-5,1],"     hello"
		console.log(re,str)

image.png

1.4 split() 字符串截子串

    var str="helxlxo"
    var arr=str.split("x")//分割符可以为任意
    console.log(arr)

image.png

1.5 slice() 截取字符串 与substring()相同

 var str="hello"
    var re1=str.substring(0,4)
    var re2=str.slice(0,4)
    console.log(re1,re2)

image.png

1.6 indexOf() 检索字符串

当检索到第一个目标时就会停止，并显示那个目标的下标

var str="abcdaefa"
    var re1=str.indexOf("cde")//没有就是-1，第二个参数不写默认为0
    var re2=str.indexOf("a",5)//检索“a”,从下标为5的元素开始检索
    console.log(re1,re2)

image.png

1.7 toString() 返回字符串

 var str="hello"
    var re=str.toString()
    console.log(re)

image.png

1.8 valueOf() 返回某个字符串对象的原始值

var strobj=new String("hqyj")
    var re2=strobj.valueOf()
    console.log(strobj,typeof strobj,re2)

image.png

笔试题

1.笔试题原题:把当前网页的url的参数解析为一个对象

    window.location.href//获取当前网页地址			
    var url='http://www.hqyj.com/index.html?user=karen&page=10&count=100'
    function  parseurl(str) {
      var querystring=str.split("?")[1]
    	var arr=querystring.split("&")//["user=karen","page=10","count=100"]
    	var obj={}
    	for(var i=0;i<arr.length;i++){
    		var arr2=arr[i].split("=")
    		obj[arr2[0]]=arr2[1]
    	}
    	return obj
    }
    var obj=parseurl(url)//{user:"karen",page:"10",count:"100"}
    console.log(obj)

image.png

分析： 1.var obj=parseurl(url) 调用函数

2.var querystring=str.split("?")[1] 将url='www.hqyj.com/index.html?…' 从？处截断

3.var arr=querystring.split("&")，将user=karen&page=10&count=100从“&”出截断放入数组中

4.var obj={}，构建一个空对象

5.for(var i=0;i<arr.length;i++){ var arr2=arr[i].split("=") obj[arr2[0]]=arr2[1] }进行数组遍历，将数组的每个成员从“=”处截断，放入一个新的数组当中，obj[arr2[0]]=arr2[1]，下标为0的是对象成员的名字，下标为1的是对象成员的值。函数调用的结果返回对象

  1. console.log(obj)打印{user:"karen",page:"10",count:"100"}

2.笔试题 检索“的”出现的次数

 String.prototype.count1=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="的1935年秋，原在浙西南坚持游击斗争红军挺的进师，在刘英和粟裕率领下，冲破蒋军的重重封这是叶飞和粟裕、刘英第二次会面了。上一次会面，是在1934年8月，由红7军团组成北上抗日先遣队路经闽东，叶飞发动地方组织，为先遣队补充了不少兵员和给养。"
    var re=str.count1("的")
    console.log(re)//的出现的次数

image.png

分析：

String.prototype.count1 在字符串原型的prototype属性上构建一个count1 函数，想好逻辑.将需要检索的字符串传入进去。

3.包装对象

因为字符串是基本数据 所有所有的基本数据当做对象使用时 它们的点语法 都会多一步隐式操作 (隐式包装成一个对象)

 var str="hello"
 str.age=20
 var re=str.age
 console.log(re)

image.png

分析：

   var str="hello"
    str.age=20
    //隐式操作
    //var str=new String("hello")
    //str.age=20
    var re=str.age
    //隐式操作
    //var str=new String("hello")//重新声明一个str对象
    // var re=str.age
    console.log(re)//und

数组的内置对象

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

1.数组的内置功能

1.var arr=[10,20,304] //声明一个数组

2.var arr2=new Array()//构建一个空数组[]

3.var arr3=new Array(10)//构建一个长度为10的数组 [].length=10

4.var arr4=new Array(10,20)//构建一个成员为10,20的数组 [10,20]

5.var arr5=new Array("hello")//构建一个成员为hello的数组["hello"]

2.代码演示

2.1 concat() 连接两个或更多的数组，并返回结果

    var arr=[10,2,3,4,44]
    var arr2=["hello","h5"]
    var arr3=["666"]
    var arr4=arr.concat(arr2,arr3,100,{name:"karen"})
    console.log(arr,arr2,arr3,arr4)

image.png

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

    var arr=[10,2,3,4,44,[90,10],{name:"karen"}]
    var re=arr.join("*")//不传参数默认是逗号“，” 传参 把数组中每一个元素toString()然后拼接
    console.log(re,arr)
    var re=arr.toString()
    console.log(re)

image.png

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

    var arr=[10,230,54]
    var re=arr.pop()//返回当次删除数组元素后的最后一个元素
    arr.pop()
    arr.pop()
    console.log(re,arr)
    var re2=arr.pop()
    console.log(re2,arr)

image.png

2.4 push() 向数组的末尾添加一个或更多元素，并返回新的长度

var arr=[10,230,54]
    var re=arr.push(10,20)
    console.log(re,arr)

image.png

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

  var arr=[10,230,54]
    var re=arr.shift()
    console.log(re,arr)

image.png

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

    var arr=[10,230,54]
    var re=arr.unshift(100,200)
    console.log(re,arr)

image.png

2.7 slice() 从某个已有的数组返回选定的元素

    var arr=[10,30,40,5,6]
    var re=arr.splice(2,2,"hello","h5")//从下标2开始删除2个元素 并在这里插入"hello","h5"
    console.log(re,arr)

image.png

2.8 sort() 对数组的元素进行排序 默认是按照表码排序

    var arr=[10,50,40,20,30,6]
    var re=arr.sort()//默认是按照表码排序
    console.log(re,arr)

image.png

从大到小排序

    var arr=[10,50,40,20,30,6]
    var re=arr.sort(function(a,b){
    	return b-a
    })
    console.log(re,arr)

image.png

从小到大排序

       var arr=[10,50,40,20,30,6]
    var re=arr.sort(function(a,b){
    	return a-b
    })
    console.log(re,arr)

image.png

2.9 valueOf() 返回数组对象的原始值

   var arr=[10,20,304]
    var arr2=new Array(20,30,405,10)
    console.log(arr2.valueOf())

image.png

数组方法的返回对象

所有数组的方法 返回了一个新数组 新数组中的元素 如果是以前数组中的引用数据 那么是同一个引用

 var arr=[{name:"karen"},100,203,4]
    var arr2=[1,2,2,3,4]
    var re=arr.concat(arr2,90,20,304)
    console.log(re==arr2,re==arr,re)
    re[0].name="jack"
    console.log(arr)

image.png

遍历器

取出数据容器中的每一个元素的工具

//1、for 循环
let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i])
}
//for 循环是 Js 中最常用的一个循环工具， 经常用于数组的循环遍历。
//2、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)， 这样就避免遍历出太多不需要的属性。
//3、while 循环同样的遍历 cars 数组， 先用for 循环方法
let cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
for (; cars[i];) {
console.log(cars[i])
i++;
};
//然后是while 循环方法
cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
while (cars[i]) {
console.log(cars[i] + "
")
i++;
};
//我们发现， 它们可以实现同样的效果， 事实上它们底层的处理是一样的， 不过for 循环可以把定义、 条件判断、 自增自减操作放到一个条件里执行， 代码看起来方便一些， 仅此而已。
//4、 do-while 循环
let i = 3;
do {
console.log(i)
i--;
}
while (i > 0)
//do-while 循环是while循环的一个变体， 它首先执行一次操作， 然后才进行条件判断， 是 true 的话再继续执行操作， 是 false 的话循环结束。
//5、 Array 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 函数在你的库里。
//6、 Array map() 方法
let arr = [1, 2, 3];
let tt = arr.map(function(i) {
console.log(i)
return i * 2;
})
//map() 方法返回一个新数组， 数组中的元素为原始数组元素调用函数处理后的值。注意： map 和 forEach 方法都是只能用来遍历数组， 不能用来遍历普通对象。
//7、 Array filter() 方法
let arr = [1, 2, 3];
let tt = arr.filter(function(i) {
return i > 1;
})
//filter 方法是 Array 对象内置方法， 它会返回通过过滤的元素， 不改变原来的数组。
//8、 Array some() 方法
let arr = [1, 2, 3];
let tt = arr.some(function(i) {
return i > 1;
})
//some() 方法用于检测数组中的元素是否满足指定条件（ 函数提供）, 返回 boolean 值， 不改变原数组。
//9、 Array every() 方法
let arr = [1, 2, 3];
let tt = arr.some(function(i) {
return i > 1;
})
// 检测数组中元素是否都大于1
// false
//every() 方法用于检测数组所有元素是否都符合指定条件（ 通过函数提供）， 返回 boolean 值， 不改变原数组。
//10、 Array reduce() 方法
let arr = [1, 2, 3];
let ad = arr.reduce(function(i, j) {
return i + j;
})
// 6
reduce() 方法接收一个函数作为累加器， 数组中的每个值（ 从左到右） 开始缩减， 最终计算为一个值。
11、 Array reduceRight() 方法
let arr = [1, 2, 3];
let ad = arr.reduceRight(function(i, j) {
return i + j;
})
// 6
reduceRight() 方法, 和 reduce() 功能是一样的， 它是从数组的末尾处向前开始计算。
12、for of 循环
let arr = ['name', 'age'];
for (let i of arr) {
console.log(i)
}
// name
// age
for of 循环是 Es6 中新增的语句， 用来替代
for in 和 forEach， 它允许你遍历 Arrays（ 数组）, Strings（ 字符串）, Maps（ 映射）, Sets（ 集合） 等可迭代(Iterable data) 的数据结构, 注意它的兼容性。

1.代码演示

1.1 for 最重要的 兼容性好

 var arr=[10,203,44,54,5]
    for(var i=2;i<4;i++){
    	arr[i]
        console.log(arr[i]);
    }

image.png

1.2 for in

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

 var arr=[10,203,44]
    for (var i in arr) {
    	console.log(i,arr[i])							
    }
    var obj={name:"karen",age:23}
    for(var key in obj){
    	console.log(key)
    	
    }

image.png

1.3 Array forEach 循环

forEach循环， 循环数组中每一个元素并采取操作， 没有返回值， 可以不用知道数组长度, 他有三个参数， 只有第一个是必需的， 代表当前下标下的 value。另外请注意， forEach 循环在所有元素调用完毕之前是不能停止的， 它没有break 语句， 如果你必须要停止， 可以尝试try-catch 语句， 就是在要强制退出的时候， 抛出一个 error 给catch 捕捉到， 然后在catch 里面return， 这样就能中止循环了， 如果你经常用这个方法， 最好自定义一个这样的 forEach 函数在你的库里

  var arr=[10,203,34]
    arr.forEach(function(el,index,arr){
    	console.log(el,index,arr)
    })

image.png

构建一个forEach循环

 var arr = [10, 203, 44]
 Array.prototype.myforEach = function(callback) {
    	for (var i = 0; i < this.length; i++) {
    		callback(this[i])
    	}
    }
    var re = arr.myforEach(function(el) {
    	console.log(el)
    })

image.png

1.4 Array map() 方法

map() 方法返回一个新数组， 数组中的元素为原始数组元素调用函数处理后的值。注意： map 和 forEach 方法都是只能用来遍历数组， 不能用来遍历普通对象

        var arr=[10,20,9]
       var re=arr.map(function(el){
    	console.log(el)

    	return el*el
    })
    console.log(re,arr)

image.png

map（）也有三个变量

    var arr=[10,203,4]
    arr.map(function(el,index,arr){
    	console.log(el,index,arr)
    })

image.png

案列：计算年龄

 var arr=[{name:"karen",birth:"2001-02-03"},{name:"jack",birth:"2002-02-03"}]
    var arr2=arr.map(function(el){
    	el.age=new Date().getFullYear()-new Date(el.birth).getFullYear()
    	return el
    })
    console.log(arr2)

image.png

1.5 Array filter() 方法

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

  var arr=[10,80,34,50]
    var re=arr.filter(function(el,index,arr){
    	
    	if(el>18){
    		return true
    	}else{
    		return false
    	}
    })
    console.log(re)

image.png

案列：通过正确的人员

   var arr=[{tag:0,name:"karen"},{tag:1,name:"jack"},{tag:1,name:"marry"}]
    var arr2=arr.filter(function(el){
      	return el.tag//0为false，1为true
    })
    console.log(arr2)

image.png

1.6 Array some() 方法

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

   var  arr=[10,20,50,400]
    var re=arr.some(function(el){
    	console.log(el)
    	return el>100
    })
    console.log(re)

image.png

笔试题：设计some（）

 Array.prototype.mysome=function(callback) {
    	for(var i=0;i<this.length;i++){
    		if(callback(this[i],i,this)){return true}
    	}
    	return false				
    }			
    var  arr=[10,200,500,400]
    var re=arr.mysome(function(el){
    	console.log(el)
    	return el>100
    })
    console.log(re)

image.png

1.7 Array reduce() 方法

reduce() 方法接收一个函数作为累加器， 数组中的每个值（ 从左到右） 开始缩减， 最终计算为一个值

        var arr=[10,20,4,5]
    var re=arr.reduce(function(n1,n2){
    	console.log(n1,n2)
    	return n1+n2
    })
    console.log(re)

image.png

reduce可以添加初始值

   var arr=[10,20,4,5]
    var re=arr.reduce(function(n1,n2){
    	console.log(n1,n2,1111111111)
    	return n1+n2
    },10000)
    console.log(re)

image.png

案列：计算菜单价格

    var arr = [{
    		title: "肉香肉丝",
    		price: 18,
    		count: 2
    	},
    	{
    		title: "米饭",
    		price: 1,
    		count: 5
    	},
    	{
    		title: "水煮肉片",
    		price: 28,
    		count: 1
    	},
    	{
    		title: "鸡公煲",
    		price: 20,
    		count: 1
    	}
    ]
    
    var re=arr.reduce(function(n1,n2){
    	return n1+n2.price*n2.count
    },0)
    console.log(re)
    
    var re=arr.reduce(function(n1,n2){
    	if(!n1.total){
    		n1.total=n1.price*n1.count+n2.price*n2.count
    	}
    	else{
    		n1.total=n1.total+n2.price*n2.count
    	}
    	return n1
    })
    console.log(re)

image.png

1.8 Array reduceRight() 方法

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

     var arr=[100,203,34,50]
    arr.reduceRight(function (n1,n2){
    	console.log(n1,n2)
        return n1+n2				
    },0)

image.png

1.9 for of

for of 循环是 Es6 中新增的语句， 用来替代 for in 和 forEach， 它允许你遍历 Arrays（ 数组）, Strings（ 字符串）, Maps（ 映射）, Sets（ 集合） 等可迭代(Iterable data) 的数据结构, 注意它的兼容性

    var arr=[10,203,34]
    for (let s of arr) {
    	console.log(s)
    }

image.png

avatar
文章
阅读
粉丝