数组、字符串、数学函数
2016-09-30 本文已影响0人
饥人谷区子铭
一、数组方法里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"
