一、数组方法里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
网友评论