JS数组、字符串、数学函数

  • 数组方法里push、pop、shift、unshift、join、split分别是什么作用。（*）
  • (push、pop)堆栈方法：
    push、pop方法可以使数组类似于栈，在栈的顶部(数组末尾)进行插入和移除。栈是一种限制插入和删除项的数据结构(最新添加的项最早被移除--后进先出)
var arr = [1,2,3];
arr.push(4);//返回4并添加到数组末尾
console.log(arr);//[1, 2, 3, 4]
arr.pop();//取得数组末尾4并移除
console.log(arr);//[1,2,3]
  • (shift、unshift)队列方法：
    shift、unshift方法使数组以队列数据结构的方式对数组首位进行添加(推入)删除(先进先出)
var arr = [1,2,3];
arr.shift();//取得数组首位1并移除
console.log(arr);//[2, 3]
arr.unshift(0,1);//返回数组当前长度4，并在数组首位推入0,1
console.log(arr);//[0, 1, 2, 3]
  • join操作方法：
    数组对象的方法都是默认用逗号分隔字符串的形式返回数组的每一项。如果使用join()方法，则可以使用不同的分隔符来构建这个字符串。join()方法是把数组分隔并返回字符串
var arr = [1,2,3,4,5,6,7];
arr.join("||");
console.log(arr);//"1||2||3||4||5||6||7"
arr.join("--");
console.log(arr);//"1--2--3--4--5--6--7"

  • 利用转义字符对数组进行转化:
    /r(横向跳到下一制表符位置)
    /t(回车这里不换行)
    /n(回车并换行)


    利用转义字符分隔数组

  • split操作方法：
    split()是把一段字符串以设定的分隔符来分隔并返回为数组的方法，split(separator, limit)， separator指定用来分割字符串的字符，limit为返回的数组长度是个可选值

var str = "Hello,world";
str.split("");//按""进行分隔["H", "e", "l", "l", "o", ",", "w", "o", "r", "l", "d"]

var str1 = "a b c d e";
str1.split(" ", 3);//按" "空格进行分隔并返回的数组长度为3["a", "b", "c"]
  • 数组
    • 用 splice 实现 push、pop、shift、unshift方法 （3*）
        var arr = [1,2,3,4,5];
        function push(arr, val) {
            arr.splice(arr.length, 0, val);
            return arr.length;
        }
        function pop(arr) {
            return arr.splice(arr.length - 1, 1)[0];
        }
        function unshift(arr, val) {
            arr.splice(0, 0, val);
            return arr.length;
        }
        function shift(arr) {
            return arr.splice(0, 1)[0];
        }
  • 使用数组拼接出如下字符串 （3*）
var prod = {
    name: '女装',
    styles: ['短款', '冬季', '春装']
};
function getTpl(data){
          var dom = [];
          dom.push('<dl class="product">');
        dom.push('<dt>' + data.name + '</dt>');
        for (var i = 0; i < data.styles.length; i++) {
          dom.push('<dd>' + data.styles[i] + '<dd>');
          }
          dom.push('</dl>');
          return dom.join("\n");;
};
var result = getTplStr(prod);  //result为下面的字符串

<dl class="product">
    <dt>女装</dt>
    <dd>短款</dd>
    <dd>冬季</dd>
    <dd>春装</dd>
</dl>
  • 写一个find函数，实现下面的功能 （3*）
var arr = [ "test", 2, 1.5, false ]
find(arr, "test") // 0
find(arr, 2) // 1
find(arr, 0) // -1

            function find(arr, val){
                // return arr.indexOf(val);
                for(var i = 0; i < arr.length; i++){
                    if (arr[i] === val) {
                        return i;
                    }
                }
                return -1;
            }

function find(arr, val) {
      return arr.indexOf(val); 
}//ES5方法
  • 写一个函数filterNumeric，实现如下功能 （****）
arr = ["a", "b", 1, 3, 5, "b", 2];
newarr = filterNumeric(arr); // [1,3,5,2]

            var arr1 = ["a", "b", 1, 3, 5, "b", 2];
            function filterNumeric(arr) {
                var arr2= [];
                for (var i = 0; i < arr.length; i++) {
                    if (typeof arr[i] == "number") {
                        arr2.push(arr[i]);
                    }
                }
                return arr2;
            }
            var newarr = filterNumeric(arr1); //[1,3,5,2]
  • 对象obj有个className属性，里面的值为的是空格分割的字符串(和html元素的class特性类似)，写addClass、removeClass函数，有如下功能：(****)
var obj = {
  className: 'open menu'
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open')  // 因为open已经存在，此操作无任何办法
addClass(obj, 'me') // obj.className='open menu new me'
console.log(obj.className)  // "open menu new me"
removeClass(obj, 'open') // obj.className='menu new me'
removeClass(obj, 'blabla')  // 不变

           var obj = {
                className: 'open menu'
            };
            function addClass(obj, value) {
                var arr = obj.className.split(" ");
                if (arr.indexOf(value) == -1) {
                    arr.push(value);
                    obj.className = arr.join(" ");
                    return obj.className;
                }
                else {
                    console.log("因为" + value + "已经存在，此操作无任何办法");
                }
            }
            function removeClass(obj, value) {
                var arr = obj.className.split(" ");
                if (arr.indexOf(value) != -1) {
                    arr.splice(arr.indexOf(value), 1);
                    obj.className = arr.join(" ");
                    return obj.className;
                }
                else {
                    console.log(value + "不存在");
                }
            }
  • 写一个camelize函数，把my-short-string形式的字符串转化成myShortString形式的字符串，如 (3*)
camelize("background-color") == 'backgroundColor'
camelize("list-style-image") == 'listStyleImage'

slice(start,end)数组方法可以直接用于数组，当对象是string和number时slice会把string和number拷贝到一个新数组里(转化成一个新数组进行操作)

          function camelize(str) {
                var arr = str.split("-");
                for (var i = 1; i < arr.length; i++) {
                    arr[i] = arr[i].slice(0, 1).toUpperCase() + arr[i].slice(1);
                }
                str = arr.join("");
                return str;     
            }
            camelize('background-color');
            camelize('list-style-image');
  • 如下代码输出什么？为什么? (***)
arr = ["a", "b"];
arr.push( function() { alert(console.log('hello hunger valley')) } );
arr[arr.length-1]()  // 控制台输出'hello hunger valley',弹窗显示undefined
//arr.push()方法把函数添加到了数组arr的最尾端
//arr[arr.length-1]() 直接执行了数组中的函数
//函数执行console.log('hello hunger valley')输出字符串,但返回的是undefined
//弹窗变为alert(undefined)弹出undefined结果
  • 写一个函数filterNumericInPlace，过滤数组中的数字，删除非数字 (4*)
arr = ["a", "b", 1, 3, 4, 5, "b", 2];
//对原数组进行操作，不需要返回值
filterNumericInPlace(arr);
console.log(arr)  // [1,3,4,5,2]

           arr = ["a", "b", 1, 3, 4, 5, "b", 2];
            //对原数组进行操作，不需要返回值
            function filterNumericInPlace(arr) {
                for (var i = arr.length-1; i >= 0; i--) {
                    if(typeof arr[i] != "number") {
                        arr.splice(i, 1);//会改变数组的长度
                    }
                }
            }//使用i++会因为数组长度改变，每进行删除时数组头部开始后面的每一项的位置都在前移。
//而使用i--，数组长度改变但数组前部的其他项的位置没有变只是尾部各项的位置前移，但尾部各项因为遍历过了的位置前移并不影响。
//就好像一个队列移走哪个位置的人后排的所有人就会向前走一步占据被移走的那个位置，但前排的人位置始终是不变的。
            filterNumericInPlace(arr);
            console.log(arr);  // [1,3,4,5,2]
  • 写一个ageSort函数实现如下功能 （3*）
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 ]

            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 ]
            function ageSort(people) {
                var arr = [];
                people.sort(function(a, b){ return a.age - b.age;});
                for (var i = 0; i < people.length; i++) {
                    arr.push(people[i].name);
                }
                return arr;
            }
            ageSort(people) // [ bob, mary, john]
//sort()数组方法可以随机抽取数组内的两个项进行比较，并进行排序。
  • 写一个filter(arr, func) 函数用于过滤数组，接受两个参数，第一个是要处理的数组，第二个参数是回调函数(回调函数遍历接受每一个数组元素，当函数返回true时保留该元素，否则删除该元素)。实现如下功能： （****）
            function isNumeric (el){
                return typeof el === 'number'; 
            }
            arr = ["a",3,4,true, -1, 2, "b"]
            function filter(arr, func) {
                for (var i = 0; i < arr.length; i++) {
                    if (!func(arr[i]) || typeof arr[i] == "boolean") {
                        arr.splice(i, 1);
                    }
                }
                return arr;
            }
            arr = filter(arr, isNumeric) ; // arr = [3,4,-1, 2],  过滤出数字
            arr = filter(arr, function(val) { return val > 0 });  // arr = [3, 4, 2] 过滤出大于0的整数
  • 字符串
  • 写一个 ucFirst函数，返回第一个字母为大写的字符 （***）
            function ucFirst(str) {
                str = str.slice(0, 1).toUpperCase() + str.slice(1);
                return str;
            }
ucFirst("hunger") == "Hunger"
  • 写一个函数truncate(str, maxlength), 如果str的长度大于maxlength，会把str截断到maxlength长，并加上...，如 （4*）
truncate("hello, this is hunger valley,", 10)) == "hello, thi...";
truncate("hello world", 20)) == "hello world"

              function truncate(str, maxlength) {
                if (str.length >= maxlength) {
                        str = str.slice(0, maxlength+1) + "...";
                    }
                return str;
            }
  • 数学函数
  • 写一个函数limit2，保留数字小数点后两位，四舍五入， 如: （**）
var num1 = 3.456;
limit2( num1 ); //3.46
limit2( 2.42 ); //2.42

            function limit2(num) {
                num = Math.round(num * 100);
                return num/100;
            }
            var num1 = 3.456;
            limit2( num1 ); //3.46
            limit2( 2.42 ); //2.42
  • 写一个函数，获取从min到max之间的随机数，包括min不包括max （***）
            function ran(min, max) {
                return Math.random() * (max - min) + min;
            }
  • 写一个函数，获取从min都max之间的随机整数，包括min包括max （***）
            function ran1(min, max) {
                return Math.floor(Math.random() * (max - min + 1) + min);
            }//floor是向下舍入。
  • 写一个函数，获取一个随机数组，数组中元素为长度为len，最小值为min，最大值为max(包括)的随机数 （3*）
               function ran2(min, max, len) {
                var arr = [];
                for (var i = 0; i < len; i++) {
                    arr.push(Math.floor(Math.random() * (max - min + 1) + min));
                }
                return arr;
            }

本博客版权归 本人和饥人谷所有，转载需说明来源

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

推荐阅读更多精彩内容