本篇将会对js数组和字符串以及函数进行讲解。

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

push:在数组最后添加一个元素,语法是数组.push (所要添加的元素);,返回值为数组长度

pop: 删除数组最后一个元素,语法为数组.pop( );返回值为删除的元素名称

shift:删除数组第一个元素,语法为数组.shift( );返回值为删除的元素名称

unshift:在数组首位添加一个元素,后面元素向后偏移,语法为数组.unshift (所要添加的元素);,返回值为数组长度

join:将数组连接为字符串,不修改原本的数组,语法为数组.join(),返回值为连接完成的字符串

split: 将字符串分隔并变为数组,不修改原本的字符串,语法为字符串.split('分隔符');

代码:

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

splice实现push:

new1
[91, 3, 2, 1, 34, 5] //new1数组的元素new1.splice(new1.length,0,91) //new1.length代表数组最后一位后面,0为关键字添加,91为所要添加元素[]

new1
[91, 3, 2, 1, 34, 5, 91] //成功在数组new1最后添加元素91

用splice实现pop:

new1
[91, 3, 2, 1, 34, 5, 9, 91] //new1数组的元素new1.splice(new1.length-1,1) //new1.length代表数组最后一位,1为长度[91]

new1
[91, 3, 2, 1, 34, 5, 9] //成功删除最后一位元素91

splice实现shift:

new1
[91, 3, 2, 1, 34, 5, 645] //new1数组的元素new1.splice(0,1) //0代表数组下标索引数,1代表删除个数[91] //返回删除的元素new1
[3, 2, 1, 34, 5, 645] //成功删除new1数组第一个元素

splice实现unshift:

new1
[3, 2, 1, 34, 5, 645] //new1数组的元素new1.splice(0,0,91) //第一个0代表数组下标索引数,第二个0为关键字添加,91为所要添加的元素[]

new1
[91, 3, 2, 1, 34, 5, 645] //成功在数组第一位添加元素91

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

var prod = { name: '女装', styles: ['短款', '冬季', '春装'] };function getTp(data){ var new1 = prod.name; var new2 = prod.styles; var arrey =[]; arrey.push('<dl class="product">'); arrey.push("<dt>"+new1+"</dt>"); for(var i =0;i<new2.length;i++){ arrey.push("<dd>"+new2[i]+"</dd>") } arrey.push('</dl>'); console.log(arrey.join()); } getTp(prod)//<dl class="product">,<dt>女装</dt>,<dd>短款</dd>,<dd>冬季</dd>,<dd>春装</dd>,</dl>

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

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

写一个函数filterNumeric,实现如下功能

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

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

var obj = { className: 'open menu'}; var shu = obj.className.split(" "); function addClass(obj,nano){ for(var i = 0;i< shu.length; i++) { if(shu[i] === nano) { return console.log("因为"+nano+"已经存在,此操作无任何办法"); } } shu.push(nano); //console.log(shu); obj.className = shu.join(" "); console.log(obj); } addClass(obj, 'new'); //Object {className: "open menu new"}addClass(obj, 'open'); //因为open已经存在,此操作无任何办法addClass(obj, 'me'); // Object {className: "open menu new me"}console.log(obj.className); // open menu new mefunction removeClass(obj,habo){ //console.log(shu) for(var i = 0;i<shu.length;i++){ if(shu[i] === habo) { shu.splice(i,1); } } obj.className = shu.join(' '); console.log(obj); } removeClass(obj,"open"); //Object {className: "menu new me"}removeClass(obj, 'blabla'); //Object {className: "menu new me"}

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

function camelize(lama){ var lala = lama.split("-"); //["list", "style", "image"] var a =[lala[0]]; for(var i =1; i<lala.length; i++) { var num =lala[i][0].toUpperCase(); //"S", "I" var b = lala[i].replace(lala[i][0],num) a.push(b) }console.log(a.join("")) } camelize("background-color") //"backgroundColor"camelize("list-style-image") //"listStyleImage""

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

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

输出的是function函数的内容'hello hunger valley'并弹出窗口显示underfined。因为第二段直接将整个函数添加到数组arr后面成为它最后一个元素,最后一句代表将arr数组的最后一个元素执行调用,console.log执行完会销毁,所以打印结果为'hello hunger valley',而弹窗结果为underfined