Javascript从零基础到精通——对象和数组

对象

js语言中一切皆为对象，比如数字、字符串、数组、Math、Object、函数

js中对象的本质：属性和方法的集合（无序，所以对象没有length属性）

用官方语言来解释对象：
什么是对象，其实就是一种类型，即引用类型。而对象的值就是引用类型的实例。在 ECMAScript 中引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称做为类，但 ECMAScript6以前却没有这种东西。虽然 ECMAScript 是一门面向对象的语言，却不具备传统面向对象语言所支持的类等基本结构。

面向对象

类

类----定义属性和方法

对象

类的具体实现，继承了类所定义的属性和方法（是一种数据类型）

类是对象的抽象，对象是类的实例

创建对象的方式

1. 字面量

	var obj = {
        键值对
        key:value
    }

2. 通过new运算符

	var obj = new Object()

删除对象的属性

	delete obj.key

对象遍历：for…in循环（隐式迭代）

for in的语法：for (var 变量 in 要遍历的对象) { }

var obj= new Object(); // 构造函数
obj.name = "zhangsan";
obj.age = 18;
obj["gender"] = "male";
for(var key in obj){
    console.log(key);
    console.log(obj[key]);
}

获取对象属性

如果我们确切的只是属性名是什么 那么就直接 对象名.属性名
如果属性名是存在一个变量里的  这个时候就需要 对象名[变量名]

javaScript的内置对象：系统提供的对象

1. Object对象 是所有JavaScript对象的超类(基类)

2. Array对象 数组对象–定义数组属性和方法

3. Boolean对象 布尔对象–布尔值相关

4. Date对象 日期对象–日期时间相关

5. Error对象 错误对象–处理程序错误

6. Function对象 函数对象–定义函数属性和方法

7. Math对象 数学对象–各种数学运算工具(不是构造函数)

8. Number对象 数字对象–定义数字属性和方法

9. RegExp对象 正则表达式对象–定义文本匹配与筛选规则

10. String对象 字符串对象–定义字符串属性和方法

数组

一组数据（一个变量来承载）

var str = "Hello world"; // 一个变量存放一个数据
var arr = [1,2,3,4,5,6,7,8,9];
//往数组结尾插入元素
arr[arr.length] = 20

定义数组的方式

var arr = [];
//字面量的方式
var arr = new Array();
//构造函数的方式
var arr = new Array(10);//一个参数指数组长度为10
var arr = new Array(10，20，30);//多个参数指定义数组元素

因为js是弱类型语言，所以数组也是弱类型，同一个数组变量里可以有各种不同类型的元素

数组的长度: arr.length
数组的索引（下标）: arr[0] ~ arr[arr.length-1]

数组遍历

for循环

var arr = [9,2,35,5,74,12,43,4];
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

for…in（ES5）

遍历稀疏数组的时候不会遍历到undefined

稀疏数组：即元素稀疏，有些元素没有值的数组，如 [2,undefined,4,5,6]

var arr = [9,2,35,5,74,12,43,4];
for(var key in arr){
    console.log(typeof key); //string
    console.log(arr[key]);
}

for…of（ES6）

var arr = [9,2,35,5,74,12,43,4];
for(var value of arr){
    console.log(value);
}

数组是引用类型

var str = "Hello World";
var str2 = str;//内存开辟另外一段空间存放str2

var arr = [1,2,3,4,5,6,7,8,9];
var arr2 = arr;//arr和arr2指向同一段存储空间

基本数据类型：number、string、boolean、undefined、null
引用数据类型：object（array也属于object）、function

函数的值传递和引用传递
基本类型作为参数传递的是指，而引用累心作为参数传递的是引用，即地址

数组常见的API

ES5新增数组常见方法

2个索引方法：indexOf() 和 lastIndexOf()；
5个迭代方法：forEach()、map()、filter()、some()、every()；
2个归并方法：reduce()、reduceRight()；
ES5新增数组详细用法:

        // 1. forEach()方法
        /*
            forEach()方法的功能是循环遍历数组中的每一个元素；
            forEach()方法会接收一个函数；
            这个函数包含三个形参，分别为：item, index, array, 用不到时可以不写
                item 表示每次迭代的元素
                index 表示每次迭代元素的下标
                array 表示原数组
        */
        var arr = [20, 13, 11, 8, 0, 11];
        var min = arr[0]; //假设数组的第一个元素的为最小值
        arr.forEach(function (item, index, array) {
            //练习一：输出数组的每个元素及其对应的下标
            console.log(index, item);
            //练习二：输出数组中值为奇数的元素
            if (item % 2) {
                console.log(item);
            }
            //练习三：求数组的最小值
            if (item < min) {
                min = item;
            }
        })
        alert(min);



        // 2. map()方法
        /*
            返回一个新数组，新数组是原数组的映射；
            不改变原数组的值；
            新数组的元素值是每次函数return的返回值；
            若不写return，接收的新数组的元素值将全为空；
        */
        var arr = [20, 13, 11, 8, 0, 11];
        var brr = arr.map(function (item) {
            //练习一：将数组的每个元素都将增加到原来的1.2倍
            return item * 1.2;
            // 此时brr为a数组每个元素的1.2倍
            //练习二：若return 1，则新数组的每个元素值均为1
            return 1;
        })



        // 3. filter()方法
        /*
            过滤元素，返回一个新数组；
            新的数组由每次函数返回值为true对应的元素组成；
            原数组不受影响；
        */
        var arr = [20, 13, 11, 8, 0, 11];
        var brr = arr.filter(function (item) {
            //返回值为奇数的元素
            return item % 2;
        })



        // 4. some()方法
        /*
            return返回的值只要有一项为true,最终的返回值就为true,不会继续遍历后边的元素；
            若没有一项满足返回值为true的，就返回false；
            原数组不受影响；
        */
        var arr = [20, 13, 11, 8, 0, 11];
        var brr = arr.some(function (item) {
            return item > 10;
        })
        alert(brr); //true



        // 5. every()方法
        /*
            对数组的每一项执行给定的函数，假如该函数每一项都返回true，最后结果才为true；
            只要有一项返回值为false，最后结果就是false。且后边的元素都不会再继续执行函数；
            原数组不受影响；
        */
        var arr = [20, 13, 11, 8, 0, 11];
        var brr = arr.every(function (item) {
            return item > 10;
        })
        alert(brr); //false



        // 6.reduce()方法
        /*
            收敛，返回值是最后一次函数调用的返回值；
            不写return时，默认返回undefined；

            运行机制：
            一开始，prev代表数组第一个元素，next指向数组第二个元素 ；
            函数有个返回值，会作为下次的prev值；
            当给方法第二个参数值时，prev从传的第二个参数值开始，next从第一个元素值开始
        */
        var arr = [1, 4, 5, 7, 8, 10];
        var res = arr.reduce(function (prev, next) {
            console.log(prev + "---" + next);
            return 4;
        })
        console.log(res);
        /*
            分析：
            一开始，prev代表数组第一个元素，next指向数组第二个元素  1---4
            函数有个返回值，会作为下次的prev值
            4---5
            4---7
            4---8
            4---10
        */

        // reduce()应用：求数组所有元素的和
        var arr = [1, 4, 5, 7, 8, 10];
        var res = arr.reduce(function (prev, next) {
            console.log(prev + "---" + next);
            return prev + next;
        })
        console.log(res);
        /*
            分析：
            一开始，prev代表数组第一个元素，next指向数组第二个元素  1---4
            函数有个返回值，会作为下次的prev值
            5---5  返回10
            10---7  返回17
            17---8  返回25
            25---10   返回35
        */

        //reduce()还可以有第二个参数
        var arr = [1, 4, 5, 7, 8, 10];
        var res = arr.reduce(function (prev, next) {
            console.log(prev + "---" + next);
            return prev + next;
        }, 100)  //prev从传的第二个参数值100开始，next从第一个元素值开始
        console.log(res);

        //reduce()应用：将两个数组合并成一个对象
        var arr3 = ["Lydia", "21"];
        var arr4 = ["name", "age"];
        arr4.reduce(function (prev, next, item) {
            prev[next] = arr3[index];
            return prev;
        }, {}); //传的第二个参数值是一个空对象
        console.log(obj);
        /*
            第一次的prev是一个空对象，对象的next属性（即arr4的第一个元素）的值为arr3的第一个元素值
        */

        // reduce()应用：把二维数组归并为一维数组
        var arr = [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9]
        ]
        var arr1 = arr.reduce(function (res, curr) {
            return res.concat(curr)
        }, [])
        console.log(arr1)



        // 7. indexOf()方法
        /*
            判断一个元素是否存在于数组中，若不存在返回-1，若存在就返回它第一次出现的位置。
        */
        var arr = [20, 13, 11, 8, 0, 11];
        arr.indexOf(11); //返回第一个11的索引：2
        arr.indexOf(2); //返回-1

数组练习题

1、定义一个30项的数组， 按顺序分别赋予从2开始的偶数；在每间隔 5个数 之后，求出前五个数的平均值

    var arr = new Array(30)
    // 0 2; 1 4; 2 6; 3 8; 4 10
    for (var i = 0; i < arr.length; i++) {
      arr[i] = 2 * (i+1)
    }
    console.log(arr)
    var sum = 0
    for (var j = 0; j < arr.length; j++) {
      sum += arr[j]
      // 4 9 14 19
      // if ((j+1) % 5 === 0) {
      if (j % 5 === 4) {
        console.log(sum / 5)
        // 每计算依次平均数之后要把sum重置为0，为后面五个数做准备
        sum = 0
      }
    }

**2、有一个数组，先从小到大排好序，再输入一个数，要求按规律将它插入数组中。 **

    var arr = [4,3,56,76,2] 
    // 升序
    arr.sort(function (a, b) {
      return a - b
    })
    console.log(arr)
    var num = Number(prompt())
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] >= num) {
        // num放在i这个位置
        arr.splice(i, 0, num)
        // 只需要插入一次数据，循环就可以结束了
        break
      }
    }
    // 如果num比数组中所有的数都大，还得在判断一次
    // 判断num是否比arr的最后一个数大, 如果是, 则插入到数组末尾
    if (num > arr[arr.length-1]) {
      arr.push(num)
    }
    console.log(arr)

3、定义一个含有11个元素的数组 计算下标为奇数的元素的平均数（自定义函数实现）

    function avg (arr) {
      var sum = 0
      var count = 0 // 记录下表为奇数的个数
      for (var i = 0; i < arr.length; i++) {
        if (i % 2) {
          sum += arr[i]
          count++
        }
      }
      return sum / count
    }
    var num = avg([4,2,4,5,7])
    console.log(num)

4、二维数组归并为一维数组

    var arr = [
      [1,2,3],
      [4,5,6],
      [7,8,9]
    ]
    var arr1 = arr.reduce(function (res, curr) {
      return res.concat(curr)
    }, [])
    console.log(arr1)