专栏首页web前端JavaScript基础学习--14 json、数组

JavaScript基础学习--14 json、数组

Demos:   https://github.com/jiangheyan/JavaScriptBase

一、json

     1、格式与取值:{key: value}

var json = {'name': 'jiang'}     //最好用字符串的形式保存key,否则安全性不高
console.log(json.name);     //jiang
console.log(json[name]);     //undefined
console.log(json['name']);     //jiang

     2、前后端常用格式:

var response = {
    result: [{
        'id': 1,
        'name': 'nihao'
 
    }, {
        'id': 1,
        'name': 'nihao'
    }],
    length: 2
};
 
======================================
var response = {
    result: [{...},{...}],
    length: 2
};

     3、for  in 遍历json

var json = {
    'name': 'nihao',
    'id': '1'
};
for (var key in json) {
    alert(key);
    alert(json[key]);     //因为key是变量,所以只能用[], 而不能用点方法
}

     4、for in 遍历对象

     5、关于for in 和for循环

          5.1     json和对象都没有length属性,所以遍历只能用for in 不能用for循环

          5.2     数组既可以用for in,还可以呀for循环---》for in 范围广

二、数组

1、定义

var arr = [1, 2, 3];          //方便推荐
var arr2 = new Array(1, 2 3);
//小细节: arr2 = new Array(4) 此时如果参数是数字类型,且只有一个,则定义的是length。此时length = 4
//小细节: arr2 = new Array('4') 此时如果参数是数字类型,且只有一个,则定义的是length。此时是字符串形式,所以length = 1,且值为'4'

2、length属性可读可写

//tips. 快速清空数组的方法:
arr.length = 0;
arr = [];  //当数组中有万以上数据时,效率更高的方法是给数组重新赋值为空[], 这种清空数组的方法效率高

注意:数组中的length属性可写,但是字符串中的length属性不可写,无效

3、数组方法(操作原数组)

     3.1     arr.push();     //往数组的最后一位添加,且返回一个数组长度值     alert(arr.push('abc'));     //返回数组长度

   3.2     arr.unshift();     //往数组的第一位添加值,返回数组长度,但是 IE6、7不支持unshift的返回值

     3.3     arr.pop();     //删除数组的最后一位,返回值是删除的数据

     3.4     arr.shift();     //删除数组的第一位,返回值是删除的数据

//tips 
arr = ['12', '34', '56'];
arr.unshift(arr.pop()); // '56', '12', '34'
arr.push(arr.shift());     //'34', '56', '12'

     3.5     arr.splice(ind, length, val2)     //从第ind位置开始删除,一共删除length项,用val2替换

          注意:返回值只返回删除的数据,如果没有删除,则返回空

4、数组去重

//方法一
function deRepeat(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
 
var a = [1, 1, 2, 3];
alert(deRepeat(a));
 
================================================
//方法二
function deRepeat2(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--;
            }
        }
    }
    return arr;
}
var a = [1, 1, 2, 3];
alert(deRepeat2(a));

5、sort排序     arr.sort();

     注意:排序是按照字符串的ascll码排序的

//js原生排序的方法,sort里面的函数,如果是a - b > 0; 则交换a b 位置......
arr.sort(function(a, b){
     return a-b;
     //return parseInt(a) - parseInt(b);     只会交换位置,不会改变数据格式,所以此时如果数据是 '123px' ,则用parseInt方法转换之后计算,最后输出仍然是 '123px'
});
 
//其他排序:快速、希尔、冒泡、归并、选择、插入

6、随机排序

arr.sort(function(a, b){
     return Math.random() - 0.5;     //Math.random() 返回0-1之间的随机数
});

7、Math.random()     0 ~ 1 随机数

     7.1     0 || 1     Math.round(Math.random());   

//2 ~ 6
Math.round(Math.random() * 4 + 2);
 
//0 ~ 10
Math.round(Math.random() * 10);
 
//12 ~ 99
Math.round(Math.random() * (99 - 12) + 12);     //12 ~ 99 ,最小数是12,然后加上0 ~ (99-12)之间的数,结果就是12 ~ 99
 
//x ~ y
Math.round(Math.random() * (y - x) + x);
 
//0 ~ y
Math.round(Math.random() * y);
 
//1 ~ y
Math.ceil(Math.random() * y);

8、arr1.concat(arr2, arr3);     //连接几个数组

9、arr.reverse();     //倒序

//tips.     将字符串倒序
arr.split('').reverse().join('');

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SASS学习笔记(一)

    一、为什么使用SASS CSS不是编程语言,没有变量、条件语句等等,只是单纯的描述,因此为CSS加入编程元素(即“CSS预处理器”)。其基本思想:用一种专门的编...

    用户1148399
  • Vuejs --03 模板语法

    一、插值      1、文本 <span>{{msg}}</span> //mustache语法 <span v-once>{{msg}}</spa...

    用户1148399
  • JavaScript基础学习--03图片翻转

    一、利用纯js编写,兼容IE9以及IE9以上       1、两张图片重合排放,并且背面的图片display(none)。         2、点击事件中让正面...

    用户1148399
  • React源码解析之React.createRef()/forwardRef()

    一、React.createRef() GitHub: https://github.com/AttackXiaoJinJin/reactExplain/blo...

    进击的小进进
  • python中令人蛋疼的地方及一些技巧

    py3study
  • 搞来两端模拟自由落体与抛物运动的JS玩

    这里有更详细的讲解呵呵 http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 自由...

    练小习
  • 走向面试之数据库基础:二、SQL进阶之case、子查询、分页、join与视图

      假设我们有一个论坛网站,其中有一张User表{ UId,Name,Level },Level是一个int类型,代表了用户等级类型,例如:1代表骨灰,2代表大...

    Edison Zhou
  • 学界 | 密集对象网络:通过机器人操作学习密集的视觉对象描述符

    作者:Peter R. Florence、Lucas Manuelli、Russ Tedrake

    机器之心
  • JQuery实现聊天对话框

    skylark
  • 网页更换主题以及绘制图形js代码实现

    skylark

扫码关注云+社区

领取腾讯云代金券