review javascript 13:数组API

(1)知识点

  • (1.1)将数组转化为字符串
  • (1.2)连接数组 concat
  • (1.3)获取子数组 slice
  • (1.4)splice:删除 插入 替换
  • (1.5)reverse:颠倒数组中所有元素的位置
  • (1.6)sort():排序
  • (1.7)栈和队列

(2)细化

(2.1)将数组转化为字符串

有两种方式:

var str=arr.toString(); //返回数组中元素的内容,用逗号分隔
var str=arr.join("连接符"); //可自定义连接符

  1. 无缝拼接数组每个元素:var str=arr.join("")
    如果不加"",等效于toString,用逗号
  2. 将单词拼接为句子: var str=arr.join(" ");
  3. 将数组拼接为html元素:
    优化:数组的拼接比字符串拼接效率更高!

建议:今后凡是频繁的字符串拼接,都要2步:
(1)先将要拼接的子字符串放入一个数组中
(2)调用数组的join方法,一次性生成结果字符串

(2.2)连接数组

var newArr=arr1.concat(arr2,值1,值2,......)

强调:concat不修改原数组,总是返回一个新数组

(2.3)获取子数组

var subArr=arr.slice(starti,endi+1);

starti: 开始获取的下标位置
endi:表示获取截止到的下标位置
** 含头不含尾 **
slice方法支持倒数参数:其实负数下标不存在,假定的负数下标从-1开始

(2.4)删除 插入 替换

splice() 方法 向/从 数组中添加/删除项目,然后返回被删除的项目。

arrayObject.splice(index,howmany,item1,.....,itemX)

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

  1. 删除: arr.splice(starti,n)
    从starti位置开始,删除n个元素
  2. 插入: arr.splice(starti,0,新值1,新值2,......)
    在starti位置插入新值1,新值2,......
    原starti位置及其之后的元素,被向后顺移
  3. 替换: arr.splice(starti,n,新值1,新值2,......)
    新元素的个数和n不一定相等
    数组会自动调整元素的位置和长度

(2.5)颠倒数组中所有元素的位置

arr.reverse();

(2.6)sort()

arr.sort();

sort() 方法用于对数组的元素进行排序;数组在原数组上进行排序,不生成副本。
特点:默认按升序排列,默认一切都转为字符串,再按字符串比大小

如果想要自定义排序规则,那么需要2步:
第一步. 定义比较器函数:专门比较任意两值大小的函数
规定:两个参数(a , b),必须返回数字:
    如果a>b,就要返回正数
    如果a<b,就要返回负数
    如果a=b,就要返回0

第二步. 将比较器函数对象作为参数传入sort方法中
    arr.sort(比较器函数名); //函数名不加圆括号
tips:升序改降序: 只要给比较器的逻辑*-1

(2.7)栈和队列

其实都是数组,只不过使用了不同的方法


  1. 一端封闭,只能从另一端进出的数组
    何时使用栈:只能从数组一端进出

LIFO ---->last in first out
a. 结尾出入栈:
入栈:

arr.push(新值); ==>arr[arr.length]=新值;

出栈:

var last=arr.pop();

** 无论出入栈都不影响已有元素的位置——效率高 **

b. 开头出入栈:
入栈:

arr.unshift(新值);

出栈:

var first=arr.shift()

** 每次出入栈都会影响所有剩余元素的位置发生顺移——效率低 **

  1. 队列
    只能从一端进入,必须从另一端出
    何时使用:只要先到的先得

FIFO---->first in first out
结尾入队列:

arr.push(新值);

开头出队列:

var first=arr.shift();


(3)实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组API</title>
</head>
<body>
<p>var arr1 = [1, 2, 3, 'a', 'b', 'c'];</p>
<p>var arr2 = ['a', 'b'];</p>
<p>var del = [1, 2, 3, 4, 5, 6];</p>
<p>var insert = [1, 2, 3, 4, 5, 6];</p>
<p>var replace = [1, 2, 3, 4, 5, 6];</p>
<p>var sortArray = [6,3,5,44,22,1];</p>
<script type="text/javascript">
    init();
    function init() {
        var arr1 = [1, 2, 3, 'a', 'b', 'c'];
        arrToString(arr1);  //(1)数组转为字符串
        //(2)连接两个或多个数组:concat
        var arr2 = ['a', 'b'];
        concatArr(arr1, arr2);
        //(3)获取子数组 slice
        childArr(arr1);
        //(4)删除 插入 替换 splice,然后返回被删除的项目
        var del = [1, 2, 3, 4, 5, 6];
        delArr(del);
        var insert = [1, 2, 3, 4, 5, 6];
        insertArr(insert);
        var replace = [1, 2, 3, 4, 5, 6];
        replaceArr(replace);
        //(5)颠倒数组中所有元素的位置
        reverse(arr1);
        //(6)sort排序
        var sortArray = [6, 3, 5, 44, 22, 1];
        sort(sortArray);
        sort2(sortArray);
        sort3(sortArray);
    }


    function arrToString(arr) {
        var str = arr.toString();  //1,2,3     返回数组中的元素内容,用逗号分隔
        var str2 = arr.join("");   //123       无缝拼接数组中的元素内容,可自定义连接符
        console.log('数组转字符串,用“,”分隔:');
        console.log(str);
        console.log('数组转字符串,无缝拼接:');
        console.log(str2);
    }

    function concatArr(arr1, arr2) {
        var newArr = arr1.concat(arr2);
        console.log('连接数组:');
        console.log(newArr);    //[1, 2, 3, "a", "b"]     concat不修改原数组,总是返回一个新数组
    }

    function childArr(arr) {
        var newArr = arr.slice(0, 4);    //[1, 2, 3, "c"]
        var newArr1 = arr.slice(-1, 4);     //[]
        console.log('获取子数组0-4:');
        console.log(newArr);
        console.log('获取子数组(-1)- 4:');
        console.log(newArr1);
    }

    function delArr(arr) {
        var delArr = arr.splice(2, 1); //从位置2开始,删除1个元素
        console.log('splice删除的元素:');
        console.log(delArr);
        console.log('返回新的数组:');
        console.log(arr);
    }
    function insertArr(arr) {
        var insetArr = arr.splice(2, 0, 'c', 'd', 'e');    //从2的位置开始,插入新值'c','d','e'
        console.log('splice插入的元素:');
        console.log(insetArr);
        console.log('返回新的数组:');
        console.log(arr);
    }
    function replaceArr(arr) {
        var replaceArr = arr.splice(2, 2, 'r', 'e', 'p', 'l', 'a', 'c', 'e');  //新元素的个数和n不一定相等,数组会自动调整元素的位置和长度
        console.log('splice替换的元素:');
        console.log(replaceArr);
        console.log('返回新的数组:');
        console.log(arr);
    }

    function reverse(arr) {
        var reverse = arr.reverse();
        console.log('reverse颠倒数组中所有元素的位置:');
        console.log(reverse);
    }

    function sort(arr) {
        var sortArr = arr.sort();
        console.log('sort对数组进行排序,默认按升序排列:');
        console.log(sortArr);   //[1, 22, 3, 44, 5, 6]
    }
    /**
     * 默认一切转为字符串,按升序排列
     * 自定义排序,按数字大小升序排列
     * (1)先定义一个排序函数
     * (2)将排序函数对象作为参数传入sort方法中
     */
    function sort2(arr) {
        var sortArr = arr.sort(sortNum);
        console.log('sort自定义排序,按大小升序排列:');
        console.log(sortArr);   //[1, 3, 5, 6, 22, 44]
    }
    function sortNum(a, b) {
        return a - b;
    }
    /**
     * 自定义排序,按降序排列
     * 给比较器的逻辑*-1
     * @param arr
     */
    function sort3(arr) {
        var sortArr = arr.sort(sortNumDown);
        console.log('sort自定义排序,按大小降序排列:');
        console.log(sortArr);   //[44, 22, 6, 5, 3, 1]
    }
    function sortNumDown(a, b) {
        return (a - b) * (-1);
    }

    /**
     * 结尾出入栈
     */
    var bottomStack = new Array();
    //入栈 push
    for (var i = 1; i <= 10; i++) {
        bottomStack.push(i);
    }
    console.log(bottomStack);

    //出栈 pop
    //如果使用栈的时候,length的实时发生变化的
    //for(var i = 1; i < bottomStack.length; i++) {
    for (var i = 1; i <= 10; i++) {
        console.log("出栈:" + bottomStack.pop());
        console.log("当前栈:" + bottomStack.toString());
        console.log("_____");
    }

    /**
     * 开头出入栈
     */
        //入栈 unshift
    var headStack = [];
    for (var i = 1; i <= 10; i++) {
        headStack.unshift(i)
    }
    console.log(headStack);

    //出栈 shift
    for (var i = 1; i <= 10; i++) {
        console.log("开头出栈:" + headStack.shift());
        console.log("当前栈:" + headStack.toString());
        console.log("*****")
    }

    /**
     * 队列:只能从一端进入,从另一端出去
     */
        //进:push
    var lineArr = [];
    for (var i = 1; i <= 10; i++) {
        lineArr.push(i);
    }
    console.log(lineArr);
    //出:shift
    for (var i = 1; i <= 10; i++) {
        console.log("队列:" + lineArr.shift());
        console.log("当前队列:" + lineArr.toString());
        console.log("*****")
    }


</script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容