task-18
2016-09-12 本文已影响18人
Timmmmmmm
问答
数组方法里 push、pop、shift、unshift、join、split分别是什么作用？
push()，向数组的末尾添加一个或更多元素，并返回新的长度
pop()， 删除并返回数组的最后一个元素
shift()，删除并返回数组的第一个元素
unshift()，向数组的开头添加一个或更多元素，并返回新的长度
join()，把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
split()，用指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中。分隔符可以是字符串，也可以是一个正则表达式。split()方法可以接受可选的第二个参数，用于指定数组的大小，以便确保返回的数组不会超过既定大小。
代码
数组：
1. 用 splice 实现 push、pop、shift、unshift方法 (***)
var example = [2,4,5,6,7,2];
function push(arr,value){
arr.splice(arr.length,0,value);
return arr.length;
}
function pop(arr){
return arr.splice(arr.length-1,1)[0];
}
function shift(arr){
return arr.splice(0,1)[0];
}
function unshift(arr,value){
arr.splice(0,0,value);
return arr.length;
}
数组-1.png
2. 使用数组拼接出如下字符串 (***)
var prod = {
name: '女装',
styles: ['短款','冬季','春装']
};
function getStr(data){
var htmls = [];
htmls.push('<dl class="product">');
htmls.push('<dt>' + prod.name + '</dt>');
for(var i = 0; i < prod.styles.length; i++){
htmls.push('<dd>' + prod.styles[i] + '</dd>');
}
htmls.push('</dl>');
return htmls.join('');
}
var result = getStr(prod);
数组-2.png
3. 写一个 find 函数，实现以下功能 (***)
var arr = ["test", 2, 1.5, false];
function find(array,value){
for(var i = 0; i < array.length; i++){
if(value === array[i]){
return i;
}
}
return -1;
}
find(arr, "test") // 0
find(arr, 2) // 1
find(arr, 0) // -1
数组-3.png
4. 写一个函数 filterNumeric，把数组 arr 中的数字过滤出来赋值给新数组 newarr，原数组 arr 不变 (****)
var arr = ["a", "b", 1, 3, 5, "b", 2];
newArr = filterNumberic(arr); //[1,3,5,2]
function filterNumberic(){
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(typeof(arr[i]) === 'number'){
newArr.push(arr[i]);
}
}
return newArr;
}
数组-4.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'
console.log(obj.className);
removeClass(obj, 'blala'); // 因为 blala 不存在，所以此操作没有任何影响
console.log(obj.className);
function addClass(obj, value){
var classNameArray = obj.className.split(' '); // 字符串 --> 数组
// 检测是否已存在该字符串
for(var i = 0; i < classNameArray.length; i++){
if(classNameArray[i] === value){
return "已存在此 className";
// return obj.className;
}
}
classNameArray.push(value);
obj.className = classNameArray.join(' '); // 数组 --> 字符串
// obj.className = classNameArray.push(value).join(' ');
return obj.className;
}
function removeClass(obj,value){
var classNameArray = obj.className.split(' '); // 字符串 --> 数组
for(var i = 0; i < classNameArray.length; i++){
if(classNameArray[i] === value){
classNameArray.splice(i,1);
}
}
obj.className = classNameArray.join(' '); // 数组 --> 字符串
return obj.className;
}
数组-5.png
6. 写一个 camelize 函数，把 my-short-string 形式的字符串转化成 myShortString 形式的字符串 (***)
camelize("background-color");
camelize("list-style-image");
function camelize(str){
var strToArray = str.split('-');
console.log(strToArray);
for(var i = 1; i < strToArray.length; i++){
// 方法1，相当麻烦的一种(再将里面拆解)
// var strArrayInner = strToArray[i].split('');
// strArrayInner[0] = strArrayInner[0].toUpperCase();
// strToArray[i] = strArrayInner.join('');
// 方法2
strToArray[i] = strToArray[i][0].toUpperCase() + strToArray[i].substr(1);
// strToArray[i] = strToArray[i][0].toUpperCase() + strToArray[i].slice(1); // .substr(1) VS .slice(1)
}
var upperStr = strToArray.join('');
console.log(upperStr);
}
代码-6.png
7. 如下代码输出什么？为什么? (***)
arr = ["a", "b"];
arr.push( function() { alert(console.log('hello hunger valley')) } );
arr[arr.length-1]() // ?
输出结果为：弹框显示出undefined，控制台打印出hello hunger valley
原因：arr.push(function)(){...}这句代码会把函数function(){...}添加到数组的末尾，而arr[arr.length-1]运行的就是数组的最后一项，
所以最终结果就是将函数fucntion(){...}运行一遍，console.log(...)返回undefined，所以弹框显示undefined
8. 写一个函数filterNumericInPlace，过滤数组中的数字，删除非数字。要求在原数组上操作 (****)
var arr = ["a", "b", 1, 3, 4, 5, "b", 2];
// 对原数组操作，不需要返回值
filterNumber(arr);
// console.log(arr); // [1,3,4,5,2]
// console.log(filterNumber(arr))
// var arrNumber = [];
// arr.map( function(el){ if(typeof el === 'number') {arrNumber.push(el)} } );
// console.log(arrNumber);
function filterNumber(value){
// 方法 1
for(var i = 0; i < value.length; i++){
if( typeof(value[i]) !== 'number' ){
value.splice(i,1);
i--;
}
}
return value;
// 方法 2 把 'string' “赶到” 数组的最后，再把它割了。 !!! 但是这个方法会把原来的 'number' 的顺序打乱了
// var value = value.sort();
// for(var i = 0; i < value.length; i++){
// if( typeof(value[i]) !== 'number'){
// value.splice(i, value.length - i);
// }
// }
// return value;
// 方法 3 把数组每一个的 'string' 赋给一个新的数组，再将这个新数组赋值给原数组
// var temp = [];
// for(var i = 0; i < value.length; i++){
// if(typeof(value[i]) === 'number'){
// temp.push(value[i]);
// // temp[i] = value[i];
// }
// }
// value = temp;
// arr = temp;
}
代码-8.png
9. 写一个 ageSort 函数实现数组中对象按age从小到大排序 （***）
var john = {
name: "John Smith",
age: 23
};
var mary = {
name: "Marry Key",
age: 18
};
var bob = {
name: "Bob-small",
age: 6
};
var people = [john, mary, bob];
ageSort(people) // [ bob, mary, john]
// console.log(people[0].age)
function ageSort(arr){
arr.sort(function(a,b){
return a.age > b.age;
})
}
代码-9.png
10. 写一个filter(arr, func) 函数用于过滤数组，接受两个参数，第一个是要处理的数组，第二个参数是回调函数(回调函数遍历接受每一个数组元素，当函数返回true时保留该元素，否则删除该元素)。实现如下功能： （****）
function isNumberic(el){
return typeof el === 'number';
}
arr = ["a",3,4,true,-1,2,"b"];
arr = filter(arr, isNumberic); // 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])){
arr.splice(i,1);
}
}
}
代码10-1.png
代码10-2.png
字符串：
1. 写一个 ucFirst函数，返回第一个字母为大写的字符 （***）
function charUpper(value){
// var value = value[0].toUpperCase() + value.substr(1);
// return value;
return value[0].toUpperCase() + value.substr(1);
}
代码二-1.png
2. 写一个函数truncate(str, maxlength), 如果str的长度大于maxlength，会把str截断到maxlength长，并加上...，如 （****）
function truncate(str, maxlength){
if(str.length > maxlength){
return str.slice(0,maxlength) + "..."
// console.log(str)
// return str.substr(0, maxlength) + '...';
}else{
return str;
}
}
代码二-2.png
数学函数
1. 写一个函数，获取从min到max之间的随机整数，包括min不包括max （***）
function rangeRandomNumber1(min,max){
return Math.floor(Math.random() * (max-min)) + min;
}
代码三-1.png
2. 写一个函数，获取从min都max之间的随机整数，包括min包括max （***）
function rangeRandomNumber2(min,max){
return Math.floor(Math.random() * (max-min+1)) + min;
}
代码三-2.png
3. 写一个函数，获取一个随机数组，数组中元素为长度为len，最小值为min，最大值为max(包括)的随机整数 （***）
function getRandomArray(len,min,max){
var arr = new Array(len);
function getRandomNumber(min,max){
return Math.floor(Math.random() * (max-min+1)) + min;
}
for(var i = 0; i < len; i++){
arr[i] = getRandomNumber(min,max);
}
return arr;
}
代码三-3.png
4. 写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括0到9，a到 z，A到Z。
function getRandomStr(n){
var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var result = '';
for(var i = 0; i < n; i++){
result += str[Math.floor(Math.random() * str.length)]
}
return result;
}
代码三-4.png
