JS基础知识知多少（三）--数组、字符串、数学函数

1.数组方法里push、pop、shift、unshift、join、split分别是什么作用？
数组是JavaScript的内置对象，同时也是一个构造函数，可以用它生成新的数组。
push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

 var arr=[1,4,7,2,5,8];
 console.log(arr.push(6,3));//输出结果为8,此时arr=[1,4,7,2,5,8,3]
 

pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

 var arr=[1,4,7,2,5,8];
 console.log(arr.pop());//输出结果为8,此时arr=[1,4,7,2,5]
 

注意：push和pop结合使用，就构成了“后进先出”的栈结构。

shift方法用于删除数组的第一个元素，并但会该元素。注意，该方法会改变原数组。

 var arr=[1,4,7,2,5,8];
 console.log(arr.shift());//输出结果为1,此时arr=[4,7,2,5,8]
 

注意push和shift结合使用，就构成了"先进先出"的队列结构。

unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

 var arr=[1,4,7,2,5,8];
 console.log(arr.unshift(3));//输出结果为7，此时arr=[3,1,4,7,2,5,8]
 

join方法以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。

 var arr=[1,4,7,2,5,8];
 console.log(arr.join(''));//输出结果为“147258”
 

split方法用于把一个字符串分割成字符串数组。

数组代码练习题

1.用 splice 实现 push、pop、shift、unshift方法

a.实现push:

 var arr=[1,4,7,2,5,8]
 function push(arr,val){
 arr.splice(arr.length,0,val);
 return arr.length;
 }
 console.log(push(arr,3));//输出结果为7,此时arr为[1,4,7,2,5,8,3]
 

b.实现pop:

 var arr=[1,4,7,2,5,8];
 var result=arr.splice(arr.length-1,1);
 console.log(result);//输出结果为[8]，此时arr=[1,4,7,2,5]
 

c.实现shift:

 var arr=[1,4,7,2,5,8];
 var result=arr.splice(0,1);
 console.log(arr);//输出结果为[4,7,2,5,8]
 

d.实现unshift:

 var arr=[1,4,7,2,5,8];
 var result=arr.splice(0,0,3);
 console.log(arr);//输出结果为[3,1,4,7,2,5,8]
 

2.使用数组拼接出如下字符串

 var prod = {
 name: '女装',
 styles: ['短款', '冬季', '春装']
 };
 function getTpl(data){
 //todo...
 };
 var result = getTplStr(prod); //result为下面的字符串
 

实现：

输出结果为：

3.写一个find函数，实现下面的功能

 var arr = [ "test", 2, 1.5, false ]
 find(arr, "test") // 0
 find(arr, 2) // 1
 find(arr, 0) // -1
 

实现方法：

输出结果为：

方法二：（参考同学的代码，写的很好，记录下）

 var arr=["test",2,1.5,false];
 function find(arr,val){
 var index=-1;
 if(!!arr&&arr.length>0){
 for(key in arr){
 if(arr[key]===value){
 index=key;
 }
 }
 }
 return index;
 }
 console.log( find(arr,'test') ); //0
 console.log( find(arr,2) ); //1
 console.log( find(arr,0) ); //-1
 

4.写一个函数filterNumeric，实现如下功能

 arr = ["a", 1,3,5, "b", 2];
 newarr = filterNumeric(arr); // [1,3,5,2]
 

实现方法：

 var arr = ["a", 1,3,5, "b", 2];
 function filterNumeric(arr)
 {
 console.log(arr.filter(function(arr){
 return typeof(arr) === "number";
 })); // [1,3,5,2]
 }
 newarr = filterNumeric(arr); // [1,3,5,2]
 

5.对象obj有个className属性，里面的值为的是空格分割的字符串(和html元素的class特性类似)，写addClass、removeClass函数，有如下功能：

 var obj = {
 className: 'open menu'
 }
 addClass(obj, 'new') // obj.className='open menu new'
 addClass(obj, 'open') // 因为open已经存在，此操作无任何办法
 addClass(obj, 'me') // obj.className='open menu new me'
 console.log(obj.className) // "open menu new me"
 
 
removeClass(obj, 'open') // obj.className='menu new me'
 removeClass(obj, 'blabla') // 不变
 

实现addClass和removeClass:

 var obj = {
 className: 'open menu new me'
 }
 var obj = {
 className: 'open menu '
 }
 function addClass(obj,val){//实现addClass
 var arr=obj.className.split(' ');
 for(var i=0;i < arr.length;i++){
 if(arr[i]===val){
 console.log(val+"已存在");
 break;
 }
 else{
 arr[arr.length]=val;
 obj.className=arr.join(' ');
 break;
 }
 }
 return arr;
 }
 function removeClass(obj,val){//实现removeClass
 var newarr=obj.className.split(' ');
 for(var i=0;i < newarr.length;i++)
 {
 if(newarr[i]===val){
 newarr.splice(newarr[i],1);
 obj.className=newarr.join(' ');
 break;
 }
 else{
 console.log("该元素不存在");
 }
 }
 }
 addClass(obj, 'new') // obj.className='open menu new'
 addClass(obj, 'open') // 因为open已经存在，此操作无任何办法
 addClass(obj, 'me') // obj.className='open menu new me'
 console.log(obj.className) // "open menu new me"
 
 
removeClass(obj, 'open') // obj.className='menu new me'
 removeClass(obj, 'blabla') // 不变
 
 

6.写一个camelize函数，把my-short-string形式的字符串转化成myShortString形式的字符串

 function camelize(str){
 var arr = str.toLowerCase().split("-");
 var str = "";
 for(i=0;i < arr.length;i++){
 if(i == 0){
 str += arr[i];
 }else {
 str += arr[i].substring(0,1).toUpperCase()+arr[i].substring(1);
 }
 }
 return str;
 }
 console.log(camelize("background-color"));//backgroundColor
 console.log(camelize("list-style-image"));//listStyleImage
 

7.如下代码输出什么？为什么?

 arr = ["a", "b"];
 arr.push( function() { alert(console.log('hello hunger valley')) } );
 arr [arr.length-1] () // ?
 

输出结果：
先输出hello hunger valley,再输出undefined
原因是：arr.push( function() { alert(console.log('hello hunger valley')) } );会把函数function(){alert(console.log('hello hunger valley'))}插入到arr的末端，arr [arr.length-1] () 会调用function(){}，输出hello hunger valley,输出结果后，函数销毁，所以最后一次输出undefined

8.写一个函数filterNumericInPlace，过滤数组中的数字，删除非数字

 arr = ["a", 1,3,4,5, "b", 2];//对原数组进行操作，不需要返回值
 filterNumericInPlace(arr);
 console.log(arr) // [1,3,4,5,2]
 

实现：

 function filterNumericInPlace(arr){
 for(var i=0;i < arr.length;i++){
 if(typeof(arr[i])!=="number"){
 arr.splice(i,1);
 }
 }
 }
 filterNumericInPlace(arr);
 console.log(arr) // [1,3,4,5,2]
 

9.写一个ageSort函数实现如下功能

 var john = { name: "John Smith", age: 23 }
 var mary = { name: "Mary Key", age: 18 }
 var bob = { name: "Bob-small", age: 6 }
 var people = [ john, mary, bob ]
 ageSort(people) // [ bob, mary, john ]
 

实现：

 var john = { name: "John Smith", age: 23 }
 var mary = { name: "Mary Key", age: 18 }
 var bob = { name: "Bob-small", age: 6 }
 var people = [ john, mary, bob ]
 function ageSort(people){
 arr.sort(function(a,b){
 return a.age-b.age;
 })
 return arr;
 }
 console.log(ageSort(people)); // [ bob, mary, john ]
 

10.写一个filter(arr, func) 函数用于过滤数组，接受两个参数，第一个是要处理的数组，第二个参数是回调函数(回调函数遍历接受每一个数组元素，当函数返回true时保留该元素，否则删除该元素)。实现如下功能：

 function isNumeric (el){
 return typeof el === 'number';
 }
 arr = ["a",3,4,true, -1, 2, "b"]
 arr = filter(arr, isNumeric) ; // arr = [3,4,-1, 2], 过滤出数字
 arr = filter(arr, function(val) { return val > 0 });
 // arr = [2] 过滤出大于0的整数
 

实现：

 function isNumeric (el){
 return typeof el === 'number';
 }
 arr = ["a",3,4,true, -1, 2, "b"]
 function filter(arr,func){
 for(var i=0;i {
 if(!func(arr[i])){
 arr.splice(i,1);
 }
 }
 return arr;
 }
 
 
console.log(arr = filter(arr, isNumeric)) ; // arr = [3,4,-1, 2], 过滤出数字
 console.log(arr = filter(arr, function(val) { return val > 0 })); // arr = [2] 过滤出大于0的整数
 

字符串
1.写一个 ucFirst函数，返回第一个字母为大写的字符

 ucFirst("hunger") == "Hunger"
 

 function ucFirst(str){
 var arr=str.split('');
 for(var i=0;i < arr.length;i++)
 {
 arr[0]=arr[0].toUpperCase();
 }
 console.log(arr.join(''));
 }
 ucFirst("hunger")
 

2.写一个函数truncate(str, maxlength), 如果str的长度大于maxlength，会把str截断到maxlength长，并加上...，如

 truncate("hello, this is hunger valley,", 10)) == "hello
 thi...";truncate("hello world", 20)) == "hello world"
 

实现：

 function truncate(str,maxlength){
 if(str.length>maxlength){
 str=str.slice(0,maxlength+1)+"...";
 }
 console.log(str) ;
 }
 
 
truncate("hello, this is hunger valley,", 10)
 truncate("hello world", 20)
 

数学函数
1.写一个函数limit2，保留数字小数点后两位，四舍五入， 如:

 var num1 = 3.456
 limit2( num1 ); //3.46
 limit2( 2.42 ); //2.42
 

实现：

 function limit2(num){
 return (Math.round(num*100))/100;
 }
 console.log( limit2(3.456) ); //3.46
 console.log( limit2(2.42) ); //2.42
 

2.写一个函数，获取从min到max之间的随机数，包括min不包括max

 function getRandomNum(min,max){
 var result=Math.random()*(max-min)+min;
 console.log(result);
 }
 getRandomNum(6,16);
 

3.写一个函数，获取从min都max之间的随机整数，包括min包括max

 function getRandomNum(min,max){
 var result=Math.floor(Math.random()*(max-min+1)+min);
 console.log(result);
 }
 getRandomNum(6,16);
 

4.写一个函数，获取一个随机数组，数组中元素为长度为len，最小值为min，最大值为max(包括)的随机数

 function getRandomNum(min,max,len){
 var arr=[];
 for(i=0;i < len;i++){
 arr[i]=Math.floor(Math.random()*(max-min+1)+min);
 }
 console.log(arr);
 }
 getRandomNum(1,10,9)
 

版权归本人所有，如有转载，请注明来源