云迈博客

您现在的位置是:首页 > 前端技术 > 原生js相关 > 正文

原生js相关

数组的常用操作

俗人将庸2020-08-27原生js相关347
针对数组的常规操作官方参考链接:http://www.w3school.com.cn/jsref/jsref_obj_array.asp

针对数组的常规操作

官方参考链接:http://www.w3school.com.cn/jsref/jsref_obj_array.asp

创建数组

// 原始写法: var abc = new Array();abc[0]=234;abc[1]=275;abc[2]=645;
// 简化写法: var abc=[234,275,645]

var abc = new Array();//abc = [];
var abc=[];        //abc = [];
var abc= new Array(2);    //abc = [null,null];
var abc = new Array(2,3,4);        //abc = [2,3,4]
var abc=[2];    //abc = [2]
var abc=[2,3,4];    //abc = [2,3,4]

循环数组

//使用 for...in 声明来循环输出数组中的元素。
    var x;
    var data = ["Saab","Volvo","BMW"];
    for (x in data){    console.log(data[x]);    }
    //依次输出:"Saab","Volvo","BMW"

常用数组处理方法

var arr = ["George","John","Thomas"],arr2 = ["James","Adrew","Martin"];
//1:concat()    连接两个或更多的数组(原数组不发生变化)
var arr3=arr.concat(arr2);
console.log(arr3);    //["George","John","Thomas","James","Adrew","Martin"]

//2:join()    把数组的所有元素放入一个字符串。并对元素通过指定的分隔符进行分隔。
var data_arr = arr.join('-');
console.log(data_arr);    //'George-John-Thomas'
//2-1:split()将字符串分割成一个字符串数组(与join()操作相反)
var data='a/b-c/d/e-f';
var data_a = data.split('-');
var data_b = data.split('/');
var data_c = data.split('');
console.log(data_a);    //['a/b','c/d/e','f']
console.log(data_b);    //['a','b-c','d','e-f']
console.log(data_c);    //['a','/','b','-','c','d','/','e','-','f']

//3:pop()    删除并返回数组的最后一个元素(原数组发生变化)
console.log(arr.pop());    //'Thomas'
arr.pop();
console.log(arr);    //["George","John"]

//4:shift()    删除并返回数组的第一个元素(原数组发生变化)
console.log(arr.shift());    //'George'
arr.shift();
console.log(arr);    //["John","Thomas"]

//5:push()    向数组的末尾添加一个或更多元素,并返回新的长度。
console.log(arr.push(arr2[0],arr2[1]));    //5
arr.push(arr2[0],arr2[1]);
console.log(arr);    //["George","John","Thomas","James","Adrew"]
//5-1:array.push.apply()    方法合并数组(该方法会改变原数组。)
arr1.push.apply(arr1, arr2);
console.log(arr1);    //["George","John","Thomas","James","Adrew","Martin"]
console.log(arr2);    //["George","John","Thomas"]

//6:unshift()    向数组的开头添加一个或更多元素,并返回新的长度。
console.log(arr.unshift(arr2[0],arr2[1]));    //5
arr.unshift(arr2[0],arr2[1]);
console.log(arr);    //["James","Adrew","George","John","Thomas"]

//7:reverse()    颠倒数组中元素的顺序(原数组不发生变化)。
var data_arr = arr.reverse();
console.log(data_arr);    //["Thomas","John","George"]

//8:slice()    从某个已有的数组返回选定的元素的新数组,包含从 start 到 end (不包括该元素)的数组中的元素。
    //arrayObject.slice(start,end);
    //start    必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
    //end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
var data_arr=['a','b','c','d','e','f'];
console.log(data_arr(3));    //['d','e','f']
console.log(data_arr(1,3));    //['b','c']

//9:splice()    删除元素,并向数组中间特定位置添加删除字符
arr.splice(2,1,"Lemon","Kiwi");
console.log(arr);// ["George","John","Lemon","Kiwi"]
    //运算方式为从数组第二个开始,删除1个并在当前位置添加两个字符串

//10:toSource()    返回该对象的源代码。
function employee(name,job,born){
        this.name=name;this.job=job;this.born=born;}
var data_arr=new employee("Bill Gates","Engineer",1985);
console.log(data_arr);    //({name:"Bill Gates", job:"Engineer", born:1985})

//11:sort()    对数组的元素进行排序(原数组发生变化,不生成副本)
    //语法:arrayObject.sort(sortby);
    //如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
    //如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
//若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
//若 a 等于 b,则返回 0。
//若 a 大于 b,则返回一个大于 0 的值。
//11-1:对字母进行排序
var arr = ["George","John","Thomas","Adrew","James","Martin"];
arr.sort();
console.log(arr);    //["Adrew","George","James","John","Martin","Thomas"]
//11-2:对数字进行排序
function sortNumber(a,b){    return a - b    }
var arr=[10,5,40,25,1000,1]
arr.sort(sortNumber);
console.log(arr);    //[1,5,10,25,40,1000]
//也可以使用ES语法书写
console.log(arr.sort((x,y)=>(x-y)));    //[1,5,10,25,40,1000](从小到大排列)
console.log(arr.sort((x,y)=>(y-x)));    //[1000,40,25,10,5,1](从大到小排列)
//可以实现排序功能的js语法如下
function test(els) {    //从大到小排序(els为纯数字数组)
    for (var i = 0; i < els.length; i++) {
        for (var j = i; j < els.length; j++) {
            var a=els[i];
            if (els[i]<els[j]) {
                els[i]=els[j];els[j]=a;
            }
        }
    }
    return els
    //console.log(els);
}
var arr=[1,3,5,6,7,14];
test(arr);    //[14,7,6,5,3,1]

//12:toString()    把数组转换为字符串,并返回结果。
console.log(arr.toString());    //George,John,Thomas

//13:toLocaleString()    把数组转换为本地数组,并返回结果。

//14:valueOf()    返回数组对象的原始值
arr.valueOf();    //["George","John","Thomas"]

// sort()    排序实例
//实例目标:从100-300之间随机选取100个数字从大到小排序成一个数组并打印出来
    var array = [];        // 定义存放生成随机数的数组
    // var array = new Array();
    build();
    function build(){
        // 循环100次生成随机数
        for (var i = 0;array.length < 100; i++) {   generateRandom(100,300);    }
        // 循环遍历随机数数组
        // array.sort(function(a,b){return b - a;});//对数组中数据从大到小排序
        array.sort((x,y)=>(y-x));    //对数组中数据从大到小排序
        console.log(array);//将数组打印出来
    }
    function generateRandom(lower, upper) {        // 生成随机数并添加到数组
        var rand = Math.floor(Math.random() * (upper - lower)) + lower;        //生成随机数
        for (var i = 0; i < array.length; i++) {    //对随机数进行重复数字比较
            if (array[i] == rand) {return false;}
        }
        array.push(rand);
    }
    function random(lower, upper) {     //生成单个的随机数
        return Math.floor(Math.random() * (upper - lower)) + lower;
    }

针对json的操作

删除json下指定的元素

    var obj = {id:1, name:2}; 
    delete obj.id; 
    delete obj[id]; 
    console.log(obj); // {name:2}

删除数组中指定元素

var objArray = ['1','2','3','4']; 
objArray.remove('1'); 
console.log(objArray); // ['2','3','4'] 
//定义js数组删除元素
Array.prototype.remove = function(val) { 
    var index = this.indexOf(val); 
    if (index > -1) { 
        this.splice(index, 1); 
    } 
};

js中判断数组中是否包含某元素的方法

//方法一:arr.indexOf(某元素):返回当前元素下标,未找到则返回 -1,
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var a = fruits.indexOf("Apple"); // 2,以上输出结果意味着 "Apple" 元素位于数组中下标为 2 的位置。

    //indexOf()完整语法:array.indexOf(item,start)
    //item:必须。查找的元素。
    //start:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。

    var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
    var a = fruits.indexOf("Apple",4); // 6

    //注:string.indexOf()返回某个指定的字符串值在字符串中首次出现的位置。
    //查找字符串最后出现的位置,使用 lastIndexOf() 方法。


方法二:arr.find()

数组实例的find()用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素,然后返回该元素,否则返回undefined。 

find() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined 

注意: find() 对于空数组,函数是不会执行的。 

注意: find() 并没有改变数组的原始值。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10

实际用法:

arr.find(function(value) {

if(value === 要查找的值) {

   //则包含该元素
}
})

方法三:array.findIndex()

array.findIndex()和array.find()十分类似,返回第一个符合条件的数组元素的位置,如果所有元素都不符合条件,则返回-1。 
findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。 
如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的。 
注意: findIndex() 并没有改变数组的原始值

[1,5,10,15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2.  

方法二和方法三,这两个方法都可以发现NaN,弥补了方法一IndexOf()的不足。

[NaN].2.dexOf(NaN) 
//-1

[Na3..findIndex(y => Object.is(NaN, y))
// 0
方法四:for()

遍历数组,然后 if 判断

var arr = [1, 5, 10, 15];

//传统for

    for(let i=0; i<arr.length; i++) {

    if(arr[i] === 查找值) {

        //则包含该元素
    }
}
// for...of

  for(v of arr) {

    if(v === 查找值) {

        //则包含该元素
    }
}
//forEach

arr.forEach(v=>{

   if(v === 查找值) {

        //则包含该元素
}
})
四、方法四:就是使用jquery的inArray方法,该方法返回元素在数组中的下标,如果不存在与数组中,那么返回-1,代码如下所示:
/**

使用jquery的inArray方法判断元素是否存在于数组中
@param {Object} arr 数组
@param {Object} value 元素值
*/
function isInArray2(arr,value){
var index = $.inArray(value,arr);
if(index >= 0){
return true;
}
return false;
}

//jquery判断数组中是否含有某个元素 
$.inArray('1',objArray) //返回'1'的索引,如果不存在则返回-1

js读取json中key值


var obj = {"id": 1, "name":"张三"};
    datas=[]
    for (var key in obj){
        var data={}
        data.key=key;
        data.value=obj[i][key];
        datas.push(data);
        data={};
    }
    // console.log(tel_data); //=[{key:'id',value:1},{key:'name',value:'张三'}];

data={
    "id":121,
    "content":"您的订单已有人接单,请及时确认",
    "order_sn":"2019042711013279976",
    "oid":104,
    "type":1,
    "is_new":0};

var data_a=JSON.stringify(data);//将data转换成字符串
JSON.parse(data_a);//重新将字符串转换成对象

js读取json格式文件

    var city_json=null;
    var url = "../script/city_list_new.json"/*json文件url*/
    var request = new XMLHttpRequest();
    request.open("get", url);/*设置请求方法与路径*/
    request.send(null);/*不发送数据到服务器*/
    request.onload = function () {/*XHR对象获取到返回信息后执行*/
        if (request.status == 200) {/*返回状态为200,即为数据获取成功*/
            city_json = JSON.parse(request.responseText).citys;
            console.log(city_json);
        }
    }

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~