18.数组、字符串、数学函数

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

1.栈方法
堆栈:是一种支持后进先出(LIFO 全称:Last-In-First-Out)的集合,即后被插入的数据,先被取出。
push和pop都为栈方法，使用时数组index和length会自动改变，pop和push能够让我们使用堆栈那样先入后出的使用数组。

Paste_Image.png

①push:从数组的最后添加一个或多个元素，并返回新数组的长度,该方法会改变原来的数组

Paste_Image.png

还可以用push把一个数组的元素添加到另一个数组里面。

Paste_Image.png

②pop:删除数组的最后一个元素，并且返回这个被删除的元素，该方法会改变原来的数组。

Paste_Image.png

2.队列方法
队列:是一种支持先进先出(FIFO 全称First-In-First-Out)的集合,即先被插入的数据,先被取出。
shift和unshift是先入先出的模拟队列方法，index和length会自动改变

Paste_Image.png

①shift:删除数组最前面的元素,就相当于把数组整体往左移一位，这样就挤掉了第一个数。后面元素的index和数组的length会自动减一,返回被删除的元素。

Paste_Image.png

②unshift:在数组最前面添加一个或多个元素，并返回新数组的长度。就相当于把数组往右移位，这样移动的前几位就空了，然后把括号里的的参数传入前面空的。

Paste_Image.png

3.join:把数组元素（对象调用其toString()方法）使用参数作为连接符连接成一字符串，不会修改原数组内容。其中作为连接符的参数可以指定，如果不写，默认就是逗号。

Paste_Image.png

4.split:将一个字符串分割成字符串数组，返回一个数组，不改变原始字符串。
　提示： 如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割

Paste_Image.png

Paste_Image.png

参考split

补充：

5.splice:该方法用于一次性解决数组添加、删除，会自动调整索引和length。返回一个由删除元素组成的新数组，没有删除则返回空数组。这两种方法一结合就可以达到替换效果。

该方法有三个参数：
①开始索引：表示从数组的哪一位开始修改内容，也就是数组的下标。如果超出了数组的最大索引值，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位。
②删除元素的位移：表示要移除位数的个数。
③添加和插入元素：如果元素的位移是0的话也就是第二个参数，那么表示插入，第三个参数就是指插入的数。如果元素的位移不是0的话，那表示删除，第三个参数就值添加的数。
例如：

Paste_Image.png

注意：
splice的第一个参数是绝对索引值，而不是相对于数组索引，第二个参数并不是删除元素的个数，而是删除动作执行多少次，并不是按数组实际索引移动，而是连续移动。

Paste_Image.png

6.slice(start,end):如果只写一个参数,则返回从开始指定的位置一直到结束的所有项；它返回数组中一个片段或子数组，不会改变原数组，而splice刚好相反；如果参数出现负数，则从数组尾部计数；如果start大于end返回空数组。

①slice只有一个参数

Paste_Image.png

②slice有两个都为正数的参数

Paste_Image.png

③slice有负数的参数

Paste_Image.png

④slice中start大于end返回空数组

Paste_Image.png

7.reverse:将数组逆序，它会修改原数组。注意当索引不是从0开始时的情况。

Paste_Image.png

8.sort:当没有参数的时候数组的排序不是按数字的大小去排序，而是按照字符串的秩序去排序。sort方法会改变原数组。

Paste_Image.png

如果我们要实现真正大小的排序，就需要传入自定义排序函数。

Paste_Image.png

sort内部使用快速排序,比较的两个参数传入自定义方法并调用（正在比较的两个数会传给自定义方法的v1、v2）,如果返回值大于0表示v1 > v2，如果等于0，表示v1 = v2，如果小于0，表示v1 < v2。其实我们传入的方法就是告诉sort怎么比较两个元素谁大谁小，至于排序移动元素过程人家写好了

Paste_Image.png

二、代码

数组

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

①实现push

function myPush(arr,val) { 
  arr.splice(arr.length,0,val); 
  return arr.length;
};

Paste_Image.png

②实现pop

function myPop(arr){
  return arr.splice(arr.length-1,1)[0]
};

Paste_Image.png

③实现shift

function myShift(arr){
   return arr.splice(0,1)[0];
};

Paste_Image.png

④实现unshift

function myUnshift(arr,val){
  arr.splice(0,0,val);
  return arr.length
};

Paste_Image.png

这里需要注意一下push、pop、shift、unshift和splice的返回值的区别？
push和unshift返回的是新数组的长度值length；pop和shift返回的是被删除的元素（不是数组形式显示）。
splice插入元素时，返回的是空数组；删除元素时，返回的是被删除的元素（以数组的形式显示）。

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

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

    <dl class="product"> 
      <dt>女装</dt> 
      <dd>短款</dd> 
      <dd>冬季</dd> 
      <dd>春装</dd>
    </dl>

方法1(用push和数组变字符join方法)

var prod = { 
      name: '女装', 
      styles: ['短款', '冬季', '春装']
};
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(''));
};
var result = getTplStr(prod); //result为下面的字符串
console.log(result);

打印结果

Paste_Image.png

方法2(字符串相加)

var prod = { 
      name: '女装', 
      styles: ['短款', '冬季', '春装']
};
function getTplStr(data){
  var a = '<dl class="product">';
  a= a+'<dt>' + data.name + '</dt>';
  for (var i = 0; i < data.styles.length; i++) {
      a=a+'<dd>' + data.styles[i] + '</dd>';
  }
  a=a+ '</dl>';
  return a;
};
getTplStr(prod);

打印结果

Paste_Image.png

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

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

方法1：

var arr = [ "test", 2, 1.5, false ]
function find(arr,val){
      for(var i=0;i<arr.length;i++){
          if(arr[i]===val){
              return i;
          };    
      };
      return -1;
};

Paste_Image.png

方法2(利用ES5的.indexOf(element)方法):

var arr = [ "test", 2, 1.5, false ];
function find(arr,val){ 
    console.log(arr.indexOf(val));
}
find(arr, "test") // 0
find(arr, 2) // 1
find(arr, 0) // -1

Paste_Image.png

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

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

方法1：

arr = ["a", "b", 1, 3, 5, "b", 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
};
newarr = filterNumeric(arr);
console.log(newarr)

Paste_Image.png

方法2：

arr = ["a", "b", 1, 3, 5, "b", 2];
function filterNumeric(arr) {
    var newarr = new Array();
    var j = 0;
    for (var i = 0; i < arr.length; i++) {
      if (typeof arr[i] == 'number') {
        newarr[j] = arr[i];
        j++;
      };
    };
    return newarr;
};
  newarr = filterNumeric(arr); 
  console.log(newarr)

Paste_Image.png

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

var obj = {
  className: 'open menu'
}

function addClass(obj,val) {
  var addNew = obj.className.split(" ");//["",""]
  for (var i = 0; i < addNew.length; i++){
      if (addNew[i] === val) {
          return obj.className;
      } 
  }
  addNew.push(val);
  obj.className = addNew.join(" ");
  return obj.className;
}

function removeClass(obj,val){
    var newRemove = obj.className.split(' ');
    for(var i=0;i<newRemove.length;i++){
        if(newRemove[i]===val){
           newRemove.splice(i,1);
           obj.className=newRemove.join(" ");
           return obj.className;
        };
    };
    return obj.className
};

Paste_Image.png

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

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

function camelize(val) {
    var arr = val.split('-')
    if (arr.length === 1) {
        return val
    }
    for (var i =1; i < arr.length; i++) {
        arr[i] = arr[i][0].toUpperCase().concat(arr[i].substr(1)) 
        /*arr[i] = arr[i].replace(arr[i][0],arr[i][0].toUpperCase())
        还可以用replace的方法*/
    }  //concat不仅拼接数组还可以拼接字符串
    return arr.join('')
}
camelize("background-color") 
camelize("list-style-image")

Paste_Image.png

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

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

弹窗上显示的是undefined，控制台上打印的是hello hunger valley。

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

/*因为.push的优先级高于函数，arr.push就是把函数添加到数组中，成为最后一个元素。相当于：
arr = ["a", "b",function() { alert(console.log('hello hunger valley')) }];*/

arr[arr.length-1]() 

/*arr[arr.length-1]表示数组最后一个元素，也就是函数
function() { alert(console.log('hello hunger valley')) }，然后后面加上小
括号()也就是调用该函数。alert里面是console.log，所以会弹出undefined，
同时会打印hello hunger valley*/

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

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

方法1：

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

Paste_Image.png

注意：重点i--。假如i为0，arr.splice(0,1)就把a删除了，原数组的长度发生了改变，元素整体向前移动一位，这是b的下标变为0。如果没有i--的话，下一次循环就是i为1，那么b就会被跳过。加上i--，arr.splice(0,1),i为0，继续往下执行i--，此时i变为-1。然后进行第二次循环i++，此时i为0，然后往下执行，这时arr.splice(0,1),b被删除，接着i--，i又变为-1。然后再次循环i++，此时i又变为0，这时arr[0]是1，不符合判断语句if，然后在循环i++，这时i变为2，还是符合判断语句if。一直循环到i为4的时候，这是arr[4]为b，符合判断语句if，然后b被删除且执行i--，i又变为3。最后一次循环i++，i变为4，arr[4]为2，不符合判断语句if。所以当执行到不是数字类型的时候，i都会i--，然后再i++，相当于没有变化。

方法2：
上面是从前面开始循环，这里从后面开始循环

arr = ["a", "b", 1, 3, 4, 5, "b", 2]; 
function filterNumeircInPlace(arr){
    for(var i=arr.length-1;i>=0;i--){
        if(typeof arr[i] !== "number"){
          arr.splice(i,1);           
        }
    }
};
filterNumeircInPlace(arr);
console.log(arr);

Paste_Image.png

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 ]

function ageSort(arr){
    arr.sort(function(v1,v2){//v1,v2表示从arr数组里面拿出两个元素来比较
        return v1.age-v2.age; //比较其中的元素也就是比较对象的age值，
       //v1.age>v2.age就调换顺序。假如v2.age-v1.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 ]

Paste_Image.png

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的整数

function filter(arr,func){
    for(var i=arr.length-1;i>=0;i--){
        if(!func(arr[i])){ 
//func(arr[i])相当于function isNumeric (el){  return (typeof el) === 'number'; })(arr[i]),
//所以arr[i]是函数isNumeric的实参。
//如果函数isNumeric返回是false就满足判断语句if，然后执行。
            arr.splice(i,1)
        }
    }
    return arr
};

function isNumeric (el){  //函数isNumeric(el)返回的ture或false
      return (typeof el) === 'number'; 
}

arr = ["a",3,4,true, -1, 2, "b"]
arr = filter(arr, isNumeric) ;
console.log(arr);

arr = filter(arr, function(val) { return  ((typeof val) === "number") && (val > 0) });
//filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或
//等价于 true 的值 的元素创建一个新数组
console.log(arr)

Paste_Image.png

字符串

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

ucFirst("hunger") == "Hunger"

function ucFirst(val){
    return val[0].toUpperCase().concat(val.substr(1));
}
ucFirst("hunger");

Paste_Image.png

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){
        return str.substr(0,maxlength)+'...'
    }else{
       return str 
    }
};

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

Paste_Image.png

数学函数

1.写一个函数，获取从min到max之间的随机整数，包括min不包括max（***）

function rand1(min,max){
    return min+Math.floor(Math.random()*(max-min))
};  //floor方法返回小于参数值的最大整数

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

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

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

 function randArr(len, min, max){
     var arr = [];
     for(var i = 0;i<len;i++){
         arr[i] = min + Math.floor(Math.random()*(max-min+1));
     }
     return arr;
 };

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

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

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

Paste_Image.png

最后编辑于：2018.07.06 07:17:07

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342

18.数组、字符串、数学函数

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

二、代码

数组

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

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

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

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

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

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

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

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

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

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

字符串

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

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

数学函数

1.写一个函数，获取从min到max之间的随机整数，包括min不包括max（***）

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

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

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

推荐阅读更多精彩内容

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

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

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

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

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

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

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

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