JS－－数组、字符串、数学函数

数组方法里push、pop、shift、unshift、join、split分别是什么作用。

(一)push/pop，unshift/shift分别是数组元素添加／删除的方法，其中push/pop使用堆栈“先入后出”（类似于一排车进入了死胡同）即栈方法；shift/unshift使用“先入先出”的队列（类似于超市结账排队）方法。具体操作方法如下：

• push() 方法添加一个或多个元素到数组的末尾，并返回数组新的长度（length 属性值）。

  
  push
• pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。

pop

push/pop代码释例：

var a = [1,2,3];
console.log(a.push('4'));// 4,注意返回的是数组新的长度，所以是4而非'4'，typeof a.push('4') === "number";(true),可添加不止一个元素
console.log(a);// [1,2,3,'4']
console.log(a.length);// 4
console.log(a.pop());// '4',注意返回的是被删除的数字，即数组中的最后的一个元素'4'，typeof a.pop() === "string";(true)
console.log(a);// [1,2,3]
console.log(a.length);// 3

• shift() 方法删除数组的 第一个 元素，并返回这个元素。该方法会改变数组的长度。

shift

• unshift() 方法在数组的开头添加一个或者多个元素，并返回数组新的 length 值。

unshift

shift/unshift代码释例：

var a = new Array(1,2,3);
console.log(a.unshift(true, false));// 5,返回数组新的length值
console.log(a);// [true, false, 1, 2, 3]
console.log(a.length);// 5
console.log(a.shift());// true,所删除数组的第一个元素，并返回这个元素
console.log(a);// [false,1,2,3]
console.log(a.length);// 4

（二）join、split的作用可以使数组和字符串之间互相转换。

• join:使数组内的元素连成一个字符串，可以自定义链接符。用于将数组转变为字符串。
  join
• split:通过把字符串分割成子字符串来把一个 String 对象分割成一个字符串数组，可以自定义分隔的符号。用于将字符串转变为数组。
  split

综上,可以简述为：

1. push:数组尾部添加元素，并返回数组的长度；
2. pop:数组尾部删除元素，并返回该元素；
3. shift:数组头部删除元素，并返回该元素；
4. unshift:数组头部添加元素，并返回数组的长度；
5. join:将数组转变为字符串；
6. split:用于将字符串转变为数组。

代码练习

（一）数组

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

   /*arr.splice(键位,长度,添加参数,添加参数,添加参数);
   长度为0添加,长度为1替换,长度>1删除再添加*/
   var a = [1,[2],'3',{},5];
   
   //push
    function push(arr,val){
       arr.splice(arr.length,0,val);
       return arr.length;
    }
    console.log(push(a,6));// 6
    console.log(a);// [1, [2], "3", Object, 5, 6]
    
    //pop
    function pop(arr){
       return arr.splice(arr.length-1,1)[0];
    }
    console.log(pop(a));// 6
    console.log(a);//[1, [2], "3", Object, 5]
    
   //shift
    function shift(arr){
    return arr.splice(0,1)[0];
    }
    console.log(shift(a));// 1
    console.log(a);// [ [2], "3", Object, 5]
    
   //unshift
    function unshift(arr,val){
      arr.splice(0,0,val);
      return arr.length;
    }
    console.log(unshift(a,"1"));// 5
    console.log(a);// ["1", [2], "3", Object, 5]
   

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

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

代码
function getTplStr(data){
var htmls = [];
htmls.push('<dl class="product">');
htmls.push('<dt>'+data.name+'</dt>');
for(var i = 0;i<data.styles.length;i++){
htmls.push('<dd>'+data.styles[i]+'</dd>');
}
htmls.push('</dl>');
console.log(htmls.join(' '));
}

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(a, val){
      for (var i = 0; i < a.length; i++){
        if (a[i] === val){
          return i;
        }   
      }
        return -1;  
    }
    //或者可写成
    // function find(a,val){
    //  return a.indexOf(val);
    // }
    console.log( find(arr, "test") );
    console.log( find(arr, 2) );
    console.log( find(arr, 0) );
   

4. 写一个函数filterNumeric，把数组 arr 中的数字过滤出来赋值给新数组newarr， 原数组arr不变 （****）

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

代码
function filterNumericInPlace(a){
for(var i=0;i<a.length;i++){
if(typeof a[i] !== 'number'){
a.splice(i,1);
}continue;
}
}

   filterNumericInPlace(arr);
   console.log(arr);  // [1,3,4,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已经存在，所以不会再次添加open
   addClass(obj, 'me'); // me不存在，所以 obj.className变为'open menu new me'
   console.log(obj.className); // "open menu new me"
   removeClass(obj, 'open'); // 去掉obj.className里面的 open，变成'menu new me'
   removeClass(obj, 'blabla'); // 因为blabla不存在，所以此操作无任何影响
   

代码

    --方法1--
    var obj = {
  className: 'open menu'
        };
    function addClass(a,val){
       var arr = a.className.split(" ");
        for (var i=0; i<arr.length; i++){
            if (val !== arr[i]) {
                  arr.push(val);
            }break;
        }
        a.className = arr.join(" ");
    }
    
    --方法2--
    function addClass(obj,val){
    var arr = obj.className.split(" ");
    if (arr.indexOf(val) === -1) {
      arr.push(val);
    }
    obj.className = arr.join(" ");
    }
    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"

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

   camelize("background-color") == 'backgroundColor'
   camelize("list-style-image") == 'listStyleImage'
   

string->array->string

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

   arr = ["a", "b"];
   arr.push( function() {
   alert(console.log('hello hunger valley')) } );
   //弹出窗口undefined，控制台输出hello hunger valley
   arr[arr.length-1]();// 返回arr中的最后一个元素并执行。
   

8. 写一个函数filterNumericInPlace，过滤数组中的数字，删除非数字。要求在原数组上操作 (****)

   arr = ["a", "b", 1, 3, 4, 5, "b", 2];//对原数组进行操作，不需要返回值
   filterNumericInPlace(arr);console.log(arr) // [1,3,4,5,2]
   
   function filterNumericInPlace(e){
     for(i=arr.length-1;i>=0;i--){
       if (typeof arr[i] !== 'number'){
       arr.splice(i,1);
       }
     }
   }
   

假如从i=0;开始循环，会出现如下情况

错误演示

9. 写一个ageSort函数实现数组中对象按age从小到大排序 （***）

   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 ]
   

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 typeof val === "number" && val > 0 }
    ); // arr = [3,4,2] 过滤出大于0的整数
    

（二）字符串

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

ucFirst("hunger") == "Hunger"

函数

function ucFirst( str ){
    var arr = str.split('');
    arr[0] = arr[0].toUpperCase();
    str =arr.join(''); 
    return str;
}

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){
var arr = str.split('');
  if (str.length>maxlength){
    arr = arr.splice(0,maxlength);
    str =arr.join('')+'...';
  }else {
    arr = arr;  
    str =arr.join('');
  }return str;
}
console.log(truncate("hello, this is hunger valley,", 10));
console.log(truncate("hello world", 20));

或者

function truncate(str,maxlength){
    var arr = str.split('');
    var i = str.length-1;
    if (i>maxlength){
       for (;i<=maxlength;i--){
                arr = arr.pop();
       }return arr;
    }return arr; 
    str =arr.join('')+'...';
    return str;
}

（三）数学函数

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

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

代码

function limit2(num){
  return  Math.round(num*100)/100; 
}

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

function randomNumber(min,max){
  return Math.random()*(max-min)+min;
}

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

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}// 还是看不懂,若min是小数，最终结果不也是小数吗？

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

function getRandArr(len, min, max) { 
  var arr = []; 
  for (var i = 0; i < len; i++) { 
     arr.push(min + Math.random() * (max - min + 1));  
  } return arr; 
}
console.log(getRandArr(7, 3.1, 7.3));
// [8.219198430779274, 3.2052876770464747, 6.6854112464490285, 7.510676437249206, 4.095733421058058, 6.032794898474679, 4.866309235572825]

5. 写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括0到9，a到 z，A到Z。（难度4）

function getRandStr(len){ 
//todo...
}
var str = getRandStr(10); 
// 0a3iJiRZap

代码

function getRandStr(len) {
    var str = '',
        unity = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for (var i = 0; i < len; i++) {
        str += unity[Math.floor(Math.random() * unity.length)];
    }
    return str;
}
console.log(getRandStr(6));// Ac6JCK