引用类型(上)

本文详细介绍了JavaScript中Object和Array类型的创建方式、属性和方法,包括数组的栈、队列及排序方法等,并提供了示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. Object类型

//创建 Object 实例

//1. new 出对象
var person = new Object();
person.name = "Mike";
person.age = 18;

//2. 对象字面量
var person = {
    name : "Mike",
    age : 18
};

//属性名也可以用字符串
var person = {
    "name" : "Mike",
    "age" : 18,
    5 : true //5 会自动转换为字符串
};

//如果只留花括号,则可定义只包含默认属性和方法的对象
var person = {};
person.name = "Mike";
person.age = 18;

//示例
function displayInfo (args) {
    var output = "";

    if(typeof args.name == "string"){
        output += "Name : " + args.name + "\n";
    }

    if(typeof args.age == "number"){
        output += "Age : " + args.age + "\n";
    }

    alert(output);
}

displayInfo({
    name : "Mike",
    age : 18
});

displayInfo({
    name : "Bob"
});

//还可以使用中括号来访问属性名
alert(person["name"]);      //"Mike"
alert(person.name);     //"Mike"

//优点是,可以通过变量来访问属性,例如
var propertyName = "name";
alert(person[propertyName]);    //"Mike"

//会导致语法错误的,也可以通过这种方式来访问
person["first name"] = "Mike";

//通常,除非必须使用变量来访问属性,否则我们建议使用点表示法

2. Array类型

//创建数组
var colors = new Array();

//创建长度为20的数组
var colors = new Array(20);

//数组初始化
var colors = new Array("red", "blue", "green");

//数组字面量表示法
var colors = ["red", "blue", "green"];
var names = [];

//数组的 length 属性很有特点——它不是只读的。
//因此,通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项。
2.1 检测数组
  • value instanceof Array
  • Array.isArray(value)
2.2 转换方法
var person1 = {
    toLocaleString : function () {
        return "Nikolaos";
    },
    toString : function() {
        return "Nicholas";
    }
};
var person2 = {
    toLocaleString : function () {
        return "Grigorios";
    },
    toString : function() {
        return "Greg";
    }
};
var people = [person1, person2];
alert(people); //Nicholas,Greg
alert(people.toString()); //Nicholas,Greg
alert(people.toLocaleString()); //Nikolaos,Grigorios

var colors = ["red", "green", "blue"];
alert(colors.join(","));    //red,green,blue
alert(colors.join("||"));   //red||green||blue
  • 如果数组中的某一项的值是 null 或者 undefined,那么该值在 join()、
    toLocaleString()、 toString()和 valueOf()方法返回的结果中以空字符串表示。
2.3 栈方法
//栈示例
var colors = new Array(); // 创建一个数组
var count = colors.push("red", "green"); // 推入两项
alert(count); //2
count = colors.push("black"); // 推入另一项
alert(count); //3
var item = colors.pop(); // 取得最后一项
alert(item); //"black"
alert(colors.length); //2

//可以将栈方法与其他数组方法连用
var colors = ["red", "blue"];
colors.push("brown"); // 添加另一项
colors[3] = "black"; // 添加一项
alert(colors.length); // 4
var item = colors.pop(); // 取得最后一项
alert(item); //"black"
2.4 队列方法
//队列示例
var colors = new Array(); //创建一个数组
var count = colors.push("red", "green"); //推入两项
alert(count); //2
count = colors.push("black"); //推入另一项
alert(count); //3
var item = colors.shift(); //取得第一项
alert(item); //"red"
alert(colors.length); //2

//unshift
var colors = new Array(); //创建一个数组
var count = colors.unshift("red", "green"); //推入两项
alert(count); //2
count = colors.unshift("black"); //推入另一项
alert(count); //3
var item = colors.pop(); //取得最后一项
alert(item); //"green"
alert(colors.length); //2
2.5 重排序方法
//sort() 缺陷
var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5

//sort() 接受比较函数
function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15
  • 对于数值类型或者其 valueOf()方法会返回数值类型的对象类型,可以使用一个更简单的比较函数。
    这个函数只要用第二个值减第一个值即可。
    function compare(value1, value2){ return value2 - value1; }
    由于比较函数通过返回一个小于零、等于零或大于零的值来影响排序结果,因此减法操作就可以适
    当地处理所有这些情况。
2.6 操作方法
//concat()
var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown

//slice()
//如果 slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置。
//例如,在一个包含 5 项的数组上调用 slice(-2,-1)与调用 slice(3,4)得到的结果相同。
//如果结束位置小于起始位置,则返回空数组。
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow

//splice()
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red,返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置 1 开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两项,删除一项
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow,返回的数组中只包含一项
2.7 位置方法
//indexOf() 和 lastIndexOf()
//在比较第一个参数与数组中的每一项时,会使用全等操作符;
//也就是说,要求查找的项必须严格相等(就像使用===一样)。
var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5
alert(numbers.indexOf(4, 4)); //5
alert(numbers.lastIndexOf(4, 4)); //3
var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //0
2.8 迭代方法
//1. every()
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
    return (item > 2);
});
alert(everyResult); //false

//2. some()
var someResult = numbers.some(function(item, index, array){
    return (item > 2);
});
alert(someResult); //true

//3. filter()
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]

//4. map()
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]

//5. forEach()
var numbers = [1,2,3,4,5,4,3,2,1];
    numbers.forEach(function(item, index, array){
    //执行某些操作
});
2.9 归并方法
//1. reduce()
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur;
});
alert(sum); //15

//2. reduceRight()
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
});
alert(sum); //15

转载于:https://www.cnblogs.com/huoteng/p/4957545.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值