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

(1).arr.push()用于向数组的末尾新添加一个或者多个元素，本身会返回新数组的长度

var arr = [1,2,3]
arr.push(4,5)
console.log(arr)  //[1,2,3,4,5]
console.log(arr.length)  //  7
console.log(arr.push(6,7))  //7    本身返回arr.length

arr.push('str')
console.log(arr)  //[1, 2, 3, 4, 5, 6, 7, "str"]

arr.push([1,2,3])  
console.log(arr)   //[1, 2, 3, 4, 5, 6, 7, "str", [1, 2, 3]]

arr.push(['a','b'])
console.log(arr)  // [1, 2, 3, 4, 5, 6, 7, "str", [1, 2, 3], ["a", "b"]]

arr.push([c,d,e])
console.log(arr)  //报错

(2).arr.unshift()用于在数组前开头新添一个或者多个元素，也会返回新数组的长度；

var arr = [3,4,5]
arr.unshift(2)
console.log(arr)//[2, 3, 4, 5]
console.log(arr.length)  //4
console.log(arr.unshift(2))  //4  返回arr.length

arr.unshift(-1,0,1)
console.log(arr)  //[-1, 0, 1, 2, 3, 4, 5]

arr.unshift([-3,-2])
console.log(arr)  //[[-3, -2], -1, 0, 1, 2, 3, 4, 5]

arr.unshift  //(['hi','hello'])
console.log(arr)  //[["hi", "hello"], [-3, -2], -1, 0, 1, 2, 3, 4, 5]

(3).arr.pop()用于删除数组最后一位元素，并返回删除的值；

var arr = [1,2,3] 
console.log(arr.pop()) //删了最位一位，返回删除的值3
console.log(arr)  //[1, 2]
console.log(arr.pop()) //返回删除的值2
console.log(arr.length) //剩余长度1

(4)arr.shift()用于删除数组第一位元素，并返回删除的值；

var a = [1,2,3,4];
a.shift();            //返回删除的值 1；
console.log(a);     //  a = [2,3,4]
console.log(a.length);  //  3

(5)arr.join()方法——把数组变成字符串
连接数组中的元素，有且只返回一个字符串，多用于给变量赋值；
通过传入的分隔符进行分隔的，分隔符可以是空格,横线等；
如果（）括号里不传参数，则默认以逗号，作为分割；
注意：无论传参后结果如何，都不会修改原数组内容。

var a = [1,2,3,4];
console.log(a.join());// 不填写参数时默认逗号作为连接符 "1,2,3,4"
console.log(a) // 依然是[1,2,3,4]

console.log(a.join("")); //参数为空字符串时输出  "1234"
console.log(a.join(" "))  //参数时空格字符串时输出 "1 2 3 4"
console.log(a.join("-"));  // "1-2-3-4"
console.log(a.join("@"))  //"1@2@3@4"
console.log(typeof a);  //  object
console.log(a);       // [1,2,3,4] 不会修改原数组内容

(6)str.split()方法——把字符串变成数组
split()与join()正好相反，可以把字符串分割成数组，而且也不会更改字符串本身，只是输出值传递给变量。
如果不传入参数，那么它会把字符串完整的转换为数组，并且数组的长度为1.
如果传入了参数（一般以逗号或者字符串中出现的字符分割）就以该参数分割数组。
留意：这两个参数，第一个参数作为分隔作用来分隔元素，第二个是分割出来的数组项个数。

var str = "1a2b3c4d"
console.log(str.split())//默认不传参["1a2b3c4d"]
console.log(str.split("")) //参数为空字符串时输出["1", "a", "2", "b", "3", "c", "4", "d"]
console.log(str.split(" "))//参数时空格字符串时输出["1a2b3c4d"]
console.log(str.split("",2))//分割出来的数组项的前2个["1", "a"]
console.log(str.split("",4))//分割出来的数组项的前4个["1", "a", "2", "b"]
console.log(str.split(","))//因为原字符串无逗号，所以以逗号分割也无效
console.log(str.split("-"))//因为原字符串-逗号，所以以-分割也无效
console.log(str)  //依然是"1,2,3,4" 
console.log(typeof str);//"string"

var str2 = "1:2:3:4" 
console.log(str2.split(':'))//["1", "2", "3", "4"]

var str3 = "1|2|3|4"
console.log(str3.split('|'))//["1", "2", "3", "4"]

(7)arr.reverse()颠倒数组中元素的顺序，修改并返回改变后的数组。

var arr = [1,2,3]
arrr.reverse()//[3,2,1]
console.log(arr)//[3,2,1]

(8)arr.sort()数组排序，修改并返回改变后的数组。
sort()是接受一个比较函数，用这个函数来判断大小，结果是字符的排序，不是数字大小的排序

var arr = [1,-2,3,-4]
arr.sort()  //[-2, -4, 1, 3]
console.log(arr)  //[-2, -4, 1, 3]

二、代码题

1.数组

• 用 splice 实现 push、pop、shift、unshift方法

arr.splice()给数组添加或者删除元素,同时修改着原数组
splice作用：用于数组的删除/插入/替换
splice()方法始终都会返回一个数组
splice(开始下标，删除个数，插入元素(可以是多个))

//splice(开始下标，删除个数，插入元素(可以是多个))
var arr = [1,2,3,4]
arr.splice(1,2);  //[2,3]
console.log(arr)  //[1,4]
var arr2 = [1,2,3,4]
arr2.splice(1,2,'a','b','c') //[2,3]
console.log(arr)  //[1,'a','b','c',4]

• 用splice 实现 push方法，末位添元素

var a = [1,2,3]
function push(arr,val){
    arr.splice(arr.length,0,val)
    return arr.length
}
push(a,1)//4
console.log(a)//[1, 2, 3, 1]

• 用splice 实现pop方法，删末位元素

var a = [1,2,3]
function pop(arr){
    arr.splice(arr.length-1,1)
    return arr.length
}
pop(a)//2
console.log(a)//[1, 2]
pop(a)//1
console.log(a)//[1]

• 用splice实现shift方法，删首位元素

var a = [1,2,3]
function shift(arr){
    arr.splice(0,1)
    return arr.length
}
shift(a)//2
console.log(a)//[2,3]
shift(a)//1
console.log(a)//[3]

• 用splice实现unshift方法，首位添元素

var a = [3,4,5]
function unshift(arr,val){
    arr.splice(0,0,val)
    return arr.length
}
unshift(a,2)//4
console.log(a)//[2, 3, 4, 5]
unshift(a,1)//5
console.log(a)//[1, 2, 3, 4, 5]

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

题目：
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>

方法一：先数组后转字符串

字符串拼接1.png

方法二：直接拼接字符

拼接字符串2.png

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

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

答题：
//兼容写法
function find(arr,val){
    if(arr.indexOf){
       return arr.indexOf(val)
    }
    for(var i=0;i<arr.length;i++){
        if(arr[i] === val){
           return i
        } 
    }
    return -1
}
console.log(find(arr, "test"))//0
console.log(find(arr, 2))//1
console.log(find(arr, 0))//-1

88.png

• 写一个函数filterNumeric，把数组 arr 中的数字过滤出来赋值给新数组newarr， 原数组arr不变。

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

模拟过滤器
方法一：用新数组
arr = ["a", "b", 1, 3, 5, "b", 2];
console.log(filterNumeric(arr)); // [1,3,5,2]
function filterNumeric(arr){
    var newArr = [];
    for(var i=0;i<arr.length;i++){
       if(typeof arr[i] === "number"){
           newArr.push(arr[i])        
        } 
    }  
    return newArr
}
方法二：若要用原数组
arr = ["a", "b", 1, 3, 5, "b", 2];
console.log(filterNumeric(arr)); // [1,3,5,2]
function filterNumeric(arr){
    for(var i=arr.length-1;i>=0;i--){
        if(typeof arr[i] !== "number"){
           arr.splice(i,1)        
         } 
    }  
    return arr
}

• 对象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不存在，所以此操作无任何影响

addClass方法一：

addClass(1).png

addClass方法二：

addClass（2）.png

addClass方法三：

addClass（3）.png

removeClass方法一：

removeClass（1）.png

removeClass规范答案

function removeClass(obj, cls) { 
      var classArr = obj.className.split(' '); 
      for (var i = 0; i < classArr.length; i++) { 
        if (cls === classArr[i]) { 
            classArr.splice(i, 1);
            i--; //这个没注意到
          }
       } 
       obj.className = classArr.join(' '); 
}

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

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

解答

切割器.png

• 如下代码输出什么？为什么?

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

结果

结果.png

分析：控制台打印出hello hunger valley，alert框弹出undefined。为什么是这个结果呢？
(1)push( function() { alert(console.log('hello hunger valley')) } );就是push一个匿名函数放到了数组arr的最后一项
(2)arr = ["a","b",function() { alert(console.log('hello hunger valley')) }]
(3)arr[arr.length-1]（） 加括号变成了立即执行函数
(4)所以控制台打出 hello hunger valley，也正因为console.log只在控制台输出，并不返回值，所以报undefind。
(5)经测试发现平常写alert(console.log())也会弹出undefined，所以弹框结果如此

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

题目：
arr = ["a", "b", 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"){
         console.log( arr.splice(i,1))
          i--
        }
    }
}
filterNumericInPlace(arr);
console.log(arr)   //[1,3,4,5,2]
重点是i--,因为循环第一遍,如果typeof arr[0]≠number,i=i+1,
导致检测b是无法被取出,过程是0→匹配对→再i--变成负1→再i++→i重回0，所以需要i-- ,回到原始位置,再进行条件判断

filter.png

• 写一个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 ]

sort()方法巧妙之处能按需求的那部分来为数组作排序
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 ]; //people本身是数组
function ageSort(people){
    people.sort(function(v1,v2){
        return v1.age - v2.age;
    });
}
console.log(people);// [ bob, mary, john ]
ageSort(people)

• 写一个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的整数

//定义函数
function filter(arr, func) { 
      for (var i = 0; i < arr.length; i++) { 
          if (!func(arr[i])) { //不符合数字的就剔除
                arr.splice(i, 1);
                i -= 1; //剔除之后下标减一,否则会跳过删掉的元素的下一元素 
           } 
      } 
      return arr; 
}
//回调函数，条件：符合是数字
function isNumeric (el){   
      return typeof el === 'number'; 
}
arr = ["a", -1, 2, "b"]
arr = filter(arr, isNumeric) ; // arr = [-1, 2], 过滤出数字
arr = filter(arr, function(val) { return val > 0 }); // arr = [2] 过滤出大于0的整数

三.字符串

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

题目：ucFirst("hunger") == "Hunger"

解答：

substr和substring方法.png

简单粗暴

str方法.png

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

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

解题

QQ截图20160927181922.png

四.数学函数

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

//过程
function randomNum(min,max){
      var num = Math.floor(Math.random()*(max-min))
      console.log(min+num)
}
randomNum(6,10)// 输出68998998789787868  
//标准
function randomNum(min,max){
      return Math.floor(Math.random()*(max-min))+Math.floor(min)
}
randomNum(min,max)

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

function randomNum(min,max){
      return Math.floor(Math.random()*(max-min+1))+Math.floor(min)
}
console.log(randomNum(6.2342,10.23432)) //输出6、8、10、9、10、6

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

function randomNum(len,min,max){
      var newArr = [];
      for(var i=0;i<len;i++){
            randomNum = min+Math.floor(Math.random()*(max-min+1))
            newArr.push(randomNum)
      }
      return newArr
}
console.log(randomNum(4,1,5))
[2, 2, 3, 2]
[5, 2, 3, 2]
[4, 4, 4, 3]
[3, 3, 2, 4]
[1, 4, 2, 3]
[2, 3, 4, 5]

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

function getRandStr(len){
      var str="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
      var result = "";
      for(var i=0;i<len;i++){
            result = result+str[Math.floor(Math.random()*str.length)]
      }
      return result
}
var str = getRandStr(10); // "0a3iJiRZap"
var str = getRandStr(6); //"49vAja"