Javascript入门速成课2 数组，对象与json基本用法

1.数组 Arrays

alert(2) 
const fruits = ['apples', 'oranges', 'pears', 10, true];


console.log(fruits);

//调试器显示 ['apples', 'oranges', 'pears', 10, true]

fruits[5] = 'banana'
fruits[2] = 'new fruit'
console.log(fruits);

//调试器显示 ['apples', 'oranges', 'new fruit', 10, true, 'banana']

const numbers = new Array(1,2,3,4,5);
console.log(numbers);
//索引从0开始
console.log(fruits[1]);

//尾部填

fruits.push('mango');

//头部填

fruits.unshift('strawberry');

console.log(fruits);

//['strawberry', 'apples', 'oranges', 'new fruit', 10, true, 'banana', 'mango']

fruits.pop();
console.log(fruits);//
//['strawberry', 'apples', 'oranges', 'new fruit', 10, true, 'banana']
console.log(Array.isArray(fruits));//true
console.log(Array.isArray('hello'));//false
console.log(fruits.indexOf('oranges'))//2

2.对象 Object Literals

//object literals
const person = {
    firstName: 'John',
    lastName:'Doe',
    age:30,
    hobbies:['music', 'movies', 'sports'],
    address: {
        street:'50 main st',
        city:'Boston',
        state:'MA'
    }
}
alert(person);

//alert显示[object Object]

console.log(person);

/*
调试器显示
{firstName: 'John', lastName: 'Doe', age: 30, hobbies: Array(3), address: {…}}
address: {street: '50 main st', city: 'Boston', state: 'MA'}
age: 30
firstName: "John"
hobbies: (3) ['music', 'movies', 'sports']
lastName: "Doe"
[[Prototype]]: Object
*/

console.log(person.hobbies[1]);//movies

//解构赋值 destructuring(ES6新特性)

const { firstName, lastName, address: { city }} = person;
console.log(city);

解构赋值(destructuring), 可以将属性或值从对象/数组中取出,赋值给其他变量。

3.数组对象

const todos = [
    {
        id: 1,
        text: 'Take our trash',
        isCompleted: true
    },
    {
        id: 2,
        text: 'Meeting with boss',
        isCompleted: true
    },
    {
        id: 3,
        text: 'Dentist appt',
        isCompleted: false
    }
];
console.log(todos);

调试器输出：
(3) [{…}, {…}, {…}]
0: {id: 1, text: 'Take our trash', isCompleted: true}
1: {id: 2, text: 'Meeting with boss', isCompleted: true}
2: {id: 3, text: 'Dentist appt', isCompleted: false}
length: 3
[[Prototype]]: Array(0)

console.log(todos[1].text);

输出：Meeting with boss

4.JSON

JSON 全栈开发应用广泛，向服务器发送数据会用到json格式

const todoJSON = JSON.stringify(todos);
console.log(todoJSON);

/**
[{"id":1,"text":"Take our trash","isCompleted":true},{"id":2,"text":"Meeting with boss","isCompleted":true},{"id":3,"text":"Dentist appt","isCompleted":false}]
*/

本文可运行的完整代码：

//Arrays
alert(2) 
const fruits = ['apples', 'oranges', 'pears', 10, true];

console.log(fruits);
//调试器显示 ['apples', 'oranges', 'pears', 10, true]
fruits[5] = 'banana'
fruits[2] = 'new fruit'
console.log(fruits);
//调试器显示 ['apples', 'oranges', 'new fruit', 10, true, 'banana']
const numbers = new Array(1,2,3,4,5);
console.log(numbers);
//索引从0开始
console.log(fruits[1]);

//尾部填
fruits.push('mango');

//头部填
fruits.unshift('strawberry');

console.log(fruits);
//['strawberry', 'apples', 'oranges', 'new fruit', 10, true, 'banana', 'mango']

fruits.pop();
console.log(fruits);//
//['strawberry', 'apples', 'oranges', 'new fruit', 10, true, 'banana']
console.log(Array.isArray(fruits));//true
console.log(Array.isArray('hello'));//false
console.log(fruits.indexOf('oranges'))//2

//object literals
const person = {
    firstName: 'John',
    lastName:'Doe',
    age:30,
    hobbies:['music', 'movies', 'sports'],
    address: {
        street:'50 main st',
        city:'Boston',
        state:'MA'
    }
}
alert(person);

//alert显示[object Object]

console.log(person);

/*
调试器显示
{firstName: 'John', lastName: 'Doe', age: 30, hobbies: Array(3), address: {…}}
address: {street: '50 main st', city: 'Boston', state: 'MA'}
age: 30
firstName: "John"
hobbies: (3) ['music', 'movies', 'sports']
lastName: "Doe"
[[Prototype]]: Object
*/

console.log(person.hobbies[1]);//movies

//解构赋值 destructuring(ES6新特性)
const { firstName, lastName, address: { city }} = person;
console.log(city);

//数组对象
const todos = [
    {
        id: 1,
        text: 'Take our trash',
        isCompleted: true
    },
    {
        id: 2,
        text: 'Meeting with boss',
        isCompleted: true
    },
    {
        id: 3,
        text: 'Dentist appt',
        isCompleted: false
    }
];
console.log(todos);
/*
调试器输出：
(3) [{…}, {…}, {…}]
0: {id: 1, text: 'Take our trash', isCompleted: true}
1: {id: 2, text: 'Meeting with boss', isCompleted: true}
2: {id: 3, text: 'Dentist appt', isCompleted: false}
length: 3
[[Prototype]]: Array(0)
*/
console.log(todos[1].text);
//Meeting with boss


//JSON 全栈开发应用广泛，向服务器发送数据会用到json格式

const todoJSON = JSON.stringify(todos);
console.log(todoJSON);
/**
 [{"id":1,"text":"Take our trash","isCompleted":true},{"id":2,"text":"Meeting with boss","isCompleted":true},{"id":3,"text":"Dentist appt","isCompleted":false}]
 */
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容