学习JS的第三天之数组_if( array.some(function ( item , index ){ return i-CSDN博客

本文链接：https://blog.csdn.net/HtmlNewPeople/article/details/120796395

学习JS的第三天之数组

其他学习笔记：点击前往

前言

对象的介绍和数组方法以及遍历数组的方法和set的理解

一、对象

什么是对象？
可以理解为一个变量可以存储多个数据。

    var obj = {
        属性:"属性值"；
    }
属性：
    属性就是一个静态的数据(你自定义命名的一个名字)。

二、方法（函数）

方法：
方法就是一个函数，一段可以执行的代码。

    //方法的定义
    //可以用对象来存放对个方法
    var obj = {
        方法名：function(){
            //可执行的代码
        }
    }
    //方法的调用
    obj.方法名（）；

三、数组

1、数组理解

        也是对象，也会用于存储数据的，数据是按顺序进行排列的，储存的数据可以是任意类型。

2、数组的创建

        构造函数创建
            var colors = new Array('red','biue','green')
        
        自变量创建：
            var colors = ['red','biue','green'];

3、数组的length方法

        数组默认的属性，用于展示当前数组存储数据的长度。

        数组名.length；
        console.log(数组名.length) //会返回数组的长度给你

4、数组的下标

        数组中的每一个元素都对应了一个下标，下标从0开始，依次增大。
        最后一个下标 = 数组长度 - 1；

5、如何访问数组里的元素

        数组[下标]

6、如何修改数组里的元素

        数组[下标] =新值；###  7、 数组的方法（数组内置的方法）
        1、array.push(值)
        向数组的末尾增加新元素。

        2、array.pop()
        删除数组末尾的元素

        3、array.unshift(元素)
        添加元素到数组的头部。

        4、array.shift()
        删除数组头部元素。

        5、array.splice(开始下标，删除长度，新增加元素)
        可以在任意位置给数组添加或者删除元素。

        6、array.reverse()
        颠倒数组中元素的排列顺序。

        7、array.sort()
        对数组元素进行排序。
        如果不加参数默认按26个字母排序，内容如果不是字符串，会被转化为字符串。
        
        使用sort的一个排序的方法：
        array.sort(function(a,b){
            return 正负数；
        })
        function:可选，用来制定按某种顺序进行排列的函数
        a 和 b 分别代表第一个、第二个用于比较的元素；
        如果return 小于 0 那么 a 会排在 b 前面；
        如果return 等于 0 那么 a 和 b 的位置保持不变；
        如果return 大于 0 b 排在前面；
        如果是数字的话，可以直接通过 a - b 判断大小；
        array.sort(function(a,b){
            return a - b；升序 ，b - a ；降序
        })

        8、array.slice(start，end)
        抽取当前数组中的一段元素，组成一个新数组。
        不会影响到原数组，原数组不变
        start：开始下标，包含
        end:结束下标，不包含，如果不给该值，就截取后面所有的

        9、array:concat()
        合并两个或者多个数组，并返回新数组。

        10、arrau.join()
        连接数组所有元素，组成一个字符串
        默认各元素之通过逗号连接
        如果参数为空字符串，则各元素直接连接。
        里面的参数为字符连接符

        11、array.indexOf（指定值）
        返回数组中第一个元素与指定值相等的下标，如果找不到这样的元素，返回-1.
        查找顺序是从左往右，匹配到第一个就不会再匹配了。

        12、last.IndexOf()
        查找顺序是从右往左，匹配到第一个就不会再匹配了。

四、遍历数组的方法

1、for循环

        for(var i = 0;i < arr.length; i++) {
            consoloe.log(arr[i]);
        }

        for in 循环：
        for(var i in arr) {
            console.log(i,arr[i])
        }

        for(var i in obj) { //i是属性名
            console.log(i，obj[i]);//遍历对象只能使用for in
        }

2、forEach(function(item,index,array){})

    forEach(function(item,index,array){})
        遍历数组。
        
        item:数组元素 
        index：该元素对应的下标，
        array：可选，遍历的数组本身

3、 map(function(item,index,array){})

    map(function(item,index,array){})
        遍历数组，并且根据新的规则返回新数组。
        
        item:数组元素 
        index：该元素对应的下标，
        array：可选，遍历的数组本身
        使用return输出

4、 filter(function(item,index,array){})

     filter(function(item,index,array){})
        遍历数组，并且根据新的规则返回符合条件的元素组成新数组。
        如果没有符合条件的，返回一个空数组。

        item:数组元素 
        index：该元素对应的下标，
        array：可选，遍历的数组本身
        使用return输出

5、 find(function(item,index,array){})

   find(function(item,index,array){})
        遍历数组，返回数组中满足条件的第一个值。
        如果没有符合条件的，返回undefined。

        item:数组元素 
        index：该元素对应的下标，
        array：可选，遍历的数组本身
        使用return输出

6、 every(function(item,index,array){})

    every(function(item,index,array){}) 
        遍历数组，如果数组中每个元素都满足条件，则返回true。
        如果没有符合条件的，返回undefined。

        item:数组元素 
        index：该元素对应的下标，
        array：可选，遍历的数组本身
        使用return输出

7、 some(function(item,index,array){})

  some(function(item,index,array){})
        遍历数组，数组中只要有一个符合条件就返回true。
        如果没有符合条件的，返回undefined。

        item:数组元素 
        index：该元素对应的下标，
        array：可选，遍历的数组本身
        使用return输出

四、遍历数组的方法

    理解：
        是ES6中新增加的数据结构，类似数组，但是没有重复的元素。
        set 函数可以接受一个数组作为参数，用于初始化。

    使用
        var list = new Set();
        list.add('a');//add()添加元素
        list.size         //获取set的长度
        list.delete（'b'）//删除set的元素
        list.has('b')  //返回一个布尔值表示该值是否存在
        list.clear     //清空set
        list.keys()    //返回所有的键名，由于set结构没有键名，keys和values行为一致，输出结果一样。
        list.values()  //返回所有的键值

五、简单练习

1、根据输入的数字弹出对应的饮料：

var a = ['停止运行','可口可乐','雪碧','鲜橙多','冰红茶','矿泉水']
for (var i = 1; i > 0; i++) {
var phot = parseInt(prompt('请输入你需要什么饮料'));
if (phot >= 0 && phot <= 5) {
    alert(a[phot]);
    break;
}
alert('非法操作');
}

2、挑出其中所有是大一的女生的的名字：
[‘小A’,‘女’,21,‘大一’],
[‘小B’,‘男’,23,‘大三’],
[‘小C’,‘男’,24,‘大四’],
[‘小D’,‘女’,21,‘大一’],
[‘小E’,‘女’,22,‘大四’],
[‘小F’,‘男’,21,‘大一’],
[‘小G’,‘女’,22,‘大二’],
[‘小H’,‘女’,20,‘大三’],
[‘小I’,‘女’,20,‘大一’],
[‘小J’,‘男’,20,‘大三’]

var arr = [['小A', '女', 21, '大一'],
          ['小B', '男', 23, '大三'],
          ['小C', '男', 24, '大四'],
          ['小D', '女', 21, '大一'],
          ['小E', '女', 22, '大四'],
          ['小F', '男', 21, '大一'],
          ['小G', '女', 22, '大二'],
          ['小H', '女', 20, '大三'],
          ['小I', '女', 20, '大一'],
          ['小J', '男', 20, '大三']]

for(var i = 0;i < arr.length; i++) { 
    if (arr[i][1] == '女' && arr[i][3] == '大一') {
        document.write(arr[i][0] + '<br/>')
    }
}

3、输出99乘法表

 for (var i = 1; i < 10; i++) {
        for (var j = 1;j <= i; j++) {
            document.write(j + ' * ' + i + ' = ' + i * j + '&nbsp;&nbsp;&nbsp;');
        }
        document.write('<br/>')
    }


    document.write('<table>')
    for (var i = 1; i < 10; i++) {
    document.write('<tr>')
        for (var j = 1;j <= i; j++) {
            document.write('<td>' + j + ' * ' + i + ' = ' + i * j + '</td>');
        }
        document.write('</tr>')
    }

    document.write('</table>')