zoukankan      html  css  js  c++  java
  • Javascript基础四(数组,字符,对象,日期)

    第一节:数组

    1.数组的概念及定义

        可以存放一组数据;
        
        当需要操作多个数据时;

    2.数组的创建方式

        var arr1 = [1,2,3];           //字面量方式
     
        var arr2 = new Array(1,2,3)   //构造函数方式 
        注意:当只有一个数据时,两种创建方式的不同。
     
        var arr1 = [5]             //表示有一个数组元素5
        var arr2 = new Array(5)    //表示有5个数组元素,值全部为undefined
     
      数组的赋值:
        1.静态赋值:直接使用指定的值给指定位置的数组
            arr[0] = 1;
            arr[1] = "hello";
        2.动态赋值:在程序运行过程中,创建具体的值给元素赋值
            arr[0] = Math.random();
            arr[1] = Math.random();

    3.数组的操作(push/pop/unshift/shift)

        数组中的项,可以放任何数据,如
        var arr = [1,"1",function(){console.log(1)},console.log(1),Math.danmom(‘’),1+1,[1,2,3],[0]]
        数组的增、删、改、查
        var arr = [1,2,3];
        arr.push("hello")       //在数组的末尾添加元素
        arr.unshift("first")    //在数组的开始添加元素
        
        arr.pop()            //删除最后一位元素
        arr.shift()          //删除第一个元素
        arr.splice(n,m,a......)    //从第n个项目开始删除,一共删除m个;a可选,表示在删除的位置添加新元素a
        
        arr.slice(n,m)       //返回一个新数组,从下标n的位置取到下标m位置的前一个(不包含m),可以实现截取的功能
        arr.sort(fn)         //对数组进行排序,fn为一个函数,可选;
                             //当数组内的元素为字符型数字,默认排序已经无法满足,需要手动处理;
                             //如function fn(n,m){return n-m}
        注意:每个方法的返回值
        注意:每个方法是否会修改原数组
        注意:看参数
      
     

    4.数组的遍历(获取数组中的每个元素)

        数组元素的获取:
           索引,数组元素的下标,表示数组元素在数组中的顺序,从0开始,到arr.length-1
     
        利用for循环,配合索引

    5.整数数组/字符串数组/对象数组/二维数组

        整数数组:arr = [1,2,3,4,5,6,7]
            数组的元素为整数
     
        字符串数组:arr = ["h","e","l","l","o”]
            数组的元素为字符串
     
        json对象数组:arr = [{name:"Lisa"},{name:"Jack"},{name:"Loss"}]
            数组的元素为对象
            如何获取对象数组内的元素:arr[1].name;    //Jack
     
        二维数组:arr = [[1,"a",3],["hello",6,8],["color","width"]]
            数组的元素为数组
            如何获取而为数组内的元素:arr[2][1];      //width
     
     随机数:
       Math.round( Math.random() * (max-min) + min )
     
     

    6.for-in循环

        在使用for遍历数组的过程中,需要至少确定数组的长度,以判断遍历的次数
     
        新的遍历方式:for-in循环
     
        注意:for-in循环一般用来遍历非数组对象
     
        for-in循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。我们也称这种循环为“枚举”。
        var obj = {
            name:"lz",
            age:36
        }
        for(var i in obj){
            console.log(obj[i]);
        }
     

    7.数组的排序(冒泡/选择)

        冒泡排序:依次对数组中相邻数字进行比较(两两比较),大的放后面
           
        var arr = [5,99,2,9,1,5,67,7,10,23]      //定义一个杂乱的数组
        for(var i=0;i<arr.length-1;i++){         //大循环,用于遍历数组每个元素
            for(var j=0;j<arr.length-i-1;j++){   //小循环,用于将数组中的某个元素与其它所有元素相比较
                var sum;                         //声明一个局部变量,当作第三个空瓶子
                if(arr[j]>arr[j+1]){             //判断当前元素和后一个元素的大小,如果当前元素比后一个元素大
                    sum = arr[j+1];              //将后一个元素(小元素)放在空瓶子里
                    arr[j+1] = arr[j];           //将当前元素(大元素)放在后一个元素的位置
                    arr[j] = sum;                //将小元素从空瓶子中拿出来,放在当前元素的位置
                }
            } 
        }
        console.log(arr);                        //完成循环之后,初始数组的顺序已经发生改变

       

        选择排序:
        将第一位依次与后面的元素相比较,得到最小值,与第一位交换。再用第二位依次与后面元素相比较,得到最小值,与第二位交换。
        从原始数据中找到最小元素,并放在数组的最前面。然后再从下面的元素中找到最小元素,放在之前最小元素的后面,直到排序完成。
             
        var arr = [5,99,2,9,1,5,67,7,10,23]
        for(var i=0;i<arr.length-1;i++){       //大循环,需要比对的次数
            var min = arr[i];                  //假定一个最小值
            var minIndex = i;                  //假定最小值的索引
            for(var j=i+1;j<arr.length;j++){   //小循环,每次需要比对的次数
                if(min>arr[j]){                //判断最小值是否为真的最小值
                    min = arr[j];              //获取真正的最小值
                    minIndex = j;              //获取真正最小值的索引
                }
            }
     
            arr[minIndex] = arr[i];            //将当前元素放在最小值的位置
            arr[i] = min;                      //将最小值放在当前元素的位置
        }
        console.log(arr);                      //输入排序好的数组   

    8.栈和堆及索引思维

        每个内存单元中分为两个部分,栈和堆
        
        栈在内存的最底部,类似于一个标记,名字,分类;稳定,不可更改
        
        堆数据,表示一组数据,可变更,数据量大,和栈一一对应
     
        多个栈可以对应一个堆,反之不行
     
        变量的声明,变量名存在了栈中
        变量的赋值,数据存在了堆中
     

    9.值传递和引用传递

        值传递:复制的是变量的值
        引用传递:复制的是指针的指向(传递的是对象在堆内存中的内存地址)
     
        如下:
        var a = 10;
        var b = a;
        var b = 20;
        console.log(a,b);
        var a = new Object();
        a.name = 10;
        var b = a;
        b.name = 20;
        console.log(a.name,b.name) 
        再比如:
        var a = {
            name:"张三"
        }
        var b = {
            name:"李四"
        }
        function change(obj){
            obj.name = "老张";
            obj = b;
            return obj;
        }
        var newName = change(a);
        console.log(newName.name);
        console.log(a.name);

    10.对象的本质和意义

    常规对象:
        var obj = {
            name:"lz",
            age:36,
            skill:function(){
                console.log(1)
            }
        }
     
        对象的本质就是key和value,如下
            obj的key为name / age
            obj的value为"lz" / 36
        key和value一一对应
     
    对象都是由函数产生的
     
        方法(Function),数组(Array),对象(Object)都是对象
     
        上面的常规对象其实等价于:
        var obj = new Object();
        obj.name = "lz";
        obj.age = 36
        obj.skill = function(){
            console.log(1);
        }
     
    外面的变量对应对象身上的属性
    外面的函数对应对象身上的方法
     
        由此可见对象的意义就是不仅可用来方便的存储数据,还可以用来编程
     

    11.JSON表示对象的方法

        JSON本身是字符型数据,格式如:数组和对象的组合
        var json = [
            {
                name:"LY",
                chinese:99,
                math:88
            },
            {
                name:"LY",
                chinese:99,
                math:88
            }
        ]    
        国际通用语言:英语
        中国通用语言:普通话
        计算机语言中的通用数据:JSON,是计算机各种语言之间数据沟通的桥梁
        
        在javascript中,JSON称为数组对象
        别的语言想要对外沟通的时候称为JSON
     
        小提示:在JSON文件中,不允许出现undefined和function和NaN,在强制转换过程中会省略undefined和function的属性,将NaN转成null
     
     

    第二节:字符

    1.ES5新增数组常见方法(indexof/forEach/map/filter)

        新增的数组常见方法:以下说明中,红色为必选参数,蓝色为可选参数
        1.indexOf(data,start);
            用于返回某个数组或者字符串中规定字符或者字符串的位置;
            var arr = ["a","b","c","d","e"];
            arr.indexOf("a");        //0
            //返回当前查询字符所在的位置的下标,如果查询不到,返回-1,start表示从第几位开始查询。        
           2.forEach(callback); 循环,遍历数组
            var arr = [2,3,4,5,6,7,8];
            arr.forEach(function(value,index,arr){
                console.log(value,index,arr);
                //函数中的三个参数分别代表,该项的值,该项下标,数组本身
            })
     
        3.map(callback); 会遍历当前数组,然后调用参数中的方法,返回当前方法的返回值;
            3.1 执行次数和参数,参考forEach
                var arr = [2,3,4,5,6];
                arr.map(function(value,index,arr){
                    console.log(value,index,arr);
                })
            3.2 返回值 及 应用
                map不会改变原有数组,而是将函数执行一次之后的返回值组成一个新数组,返回出来
                var arr = [2,3,4,5,6];
                var newArr = arr.map(function(value,index,arr){
                    return value-1;
                })
                console.log( newArr );  //得到一个经过计算的数组
                
        4.filter(callback); 同map方法,返回值为布尔值true 的时候,才会返回该数据
            4.1 同map的3.1
            4.2 filter不会改变原有数组,而是将函数执行一遍,只有在布尔值为true的时候才会返回该数据
                var arr = [2,3,4,5,6];
                var newArr = arr.filter(function(value,index,arr){
                    return value > 3;
                })
                console.log( newArr );  //得到一个经过筛选的数组
     

    2.字符串的两种创建方式(常量和构造函数)

        字符串的创建:
        var str = "hello world";                 //常量,基本类型创建
     
        var str2 = new String("hello world");    //构造函数创建 
     
        字符串的属性:
        str.length        //字符串的长度
     
     

    3.字符串常见API(indexOf/charAt/substring/slice/split/replace)

        1.indexOf(data,start);   //用于返回某个数组或者字符串中规定字符或者字符串的位置;
            var str = "abcdefg”;
            str.indexOf("a");    //0 返回当前查询字符所在的位置的下标,如无,返回-1,start表示从第几位开始查询。
     
        2.charAt(index);         //返回指定位置的字符,index为下标
     
        3.substr(n,m);           
     
        4.substring(n,m);        //返回从指定位置n,到结束位置(不含)m 的字符串,如果不指定结束位置,则从开始位置到结尾
     
        5.slice(n,m);            //同substring,需要注意和数组中方法slice()的相似
     
        6.split("-");            //通过指定字符分割字符串,返回一个数组
     
        7.replace("需要替换的字符串","替换之后的字符串")    //将字符串中的一些字符替换为另外一些字符。最好配合正则使用
     
     

    4.ASCII码和字符集

        ASCII:American Standard Code for Information Interchange,美国信息交换标准代码。
     
        Unicode(统一码、万国码、单一码)是计算机科学领域里的一项业界标准,包括字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言、跨平台进行文本转换、处理的要求。 Unicode目前普遍采用的是UCS-2,它用两个字节来编码一个字符。
    如汉字"经"的编码是0x7ECF,注意字符码一般用十六进制来 表示,为了与十进制区分,十六进制以0x开头,0x7ECF转换成十进制 就是32463,UCS-2用两个字节来编码字符,两个字节就是16位二进制, 2的16次方等于65536,所以UCS-2最多能编码65536个字符。
        
        GBK编码
        GBK全称《汉字内码扩展规范》(GBK即“国标”、“扩展”汉语拼音的第一个字母,英文名称:Chinese Internal Code Specification)。GBK 向下与GB2312编码兼容,向上支持 ISO 10646.1国际标准,是前者向后者过渡过程中的一个承上启下的产物。
        UTF-8编码:
        UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码。 UTF-8用1到4个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言(如英文,日文,韩文)。

     

    5.字符串常见API(charCodeAtfromCharCode)

    1.myStr.charCodeAt(num)
      返回指定位置的字符的Unicode(是字符编码的一种模式)编码。
     
    2.String.fromCharCode()
       String的意思就是不能用自己定义的字符串名字来调用,只能用String来定义调用。接受一个或多个指定的Unicode值,然后返回一个或多个字符串。(把unicode编码转换为字符串)。
     
     

    第三节:对象

    1.什么是对象

        对象的类型是Object。
     
        JS中所有的事物都是对象:字符串,数值,数组,函数……
     
        JS中的万物皆对象。
     
        官方的解释:
        什么是对象,其实就是一种类型,即引用类型,而对象的值就是引用类型的实例,在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起。它也常常被称为类,但ECMAScript中却没有类,虽然ECMAScript是一门面向对象的语言,却不具备传统面相对象语言所支持的类等基本结构
     
     

    2.创建对象

        var obj = {}                //字面量
        var obj2 = new Object()     //构造函数
        console.log( obj == obj2 )  //false
        所有对象都不相等
     
        var obj = { a:10 }
        var obj2 = { b:10 }
        console.log( obj.a == obj2.b )    //true
        对象身上的属性,相当于一个变量,当值一样的时候,属性相等
     
        存储数据的载体称为变量,在对象中称为属性
        功能实现的载体称为函数,在对象中称为方法
     
        面向对象,就是只对 对象进行编程
     
        this,指针,是函数中的关键字。它的指向规则是当前方法执行的对象
        this所在函数没有明确额的隶属对象
     
        var obj = {
            name:"admin",
            show:function(){
                console.log(obj.name);
                console.log(this.name);
            }
        };
        obj.show()        //admin        //admin
        函数中指向window的this,同理
     
        如何删除对象中的属性?
        var obj = {
            name:"admin",
            age:23,
            like:"篮球"
        }
        
        delete obj.name;
        delete obj.age;

    3.对象的深拷贝和浅拷贝

        var obj1 = {
            name:"admin"
        }
     
        var obj2 = {};
        for(var i in obj1){
            obj2[i] = obj1[i];
        }
     

    4.内置对象-Math

        Math对象用于执行 数学任务,Math 不像 Date 和 String 那样是对象的类,因此没有构造函数Math()。无需创建,直接把Math当成对象使用,就可以调用其所有的方法和属性。
     
    Math的方法
        Math.round(3.6);        //四舍五入
        Math.random();          //返回一个大于等于0到小于1的随机数
        Math.max(a,b);          //返回较大的值
        Math.min(a,b);          //返回较小的值
        Math.abs(num);          //返回绝对值
        Math.ceil(3.6);         //向上取整
        Math.floor(3.6);        //向下取整
        Math.pow(x,y);          //x的y次方
        Math.sqrt(num);         //开平方
        Math.sin(x);            //x的正弦值,返回值在-1到1之间
        Math.cos(x);            //x的余弦值,返回值在-1到1之间
            sin和cos的x为弧度值,而非角度,弧度计算公式:2 * Math.PI / 360 * 角度
     
    Math的属性
        Math.PI;                //约等于3.14159
     
     

    5.生成范围随机数

        Math.round( Math.random() * (max-min) + min );
     

    6.十进制数字转16进制或8进制

        //十进制转其他
        var x=110;
        console.log(x);
        console.log(x.toString(2) + "这是2");
        console.log(x.toString(8) + "这是8");
        console.log(x.toString(16) + "这是16");
        //其他转十进制
        var x='110';
        console.log(parseInt(x,2));
        console.log(parseInt(x,8));
        console.log(parseInt(x,16));
        //其他转其他
        //先用parseInt转成十进制再用toString转到目标进制
        console.log(parseInt('ff',16).toString(2));

    第四节:日期

    1.日期对象

        创建一个日期对象
        var d = new Date();
     
      从日期对象获取信息
        console.log(d.getFullYear());    //获取年
        console.log(d.getMonth());       //获取月,注意月份是从0开始
        console.log(d.getDate());        //获取日
        console.log(d.getDay());         //获取周
        
        console.log(d.getHours());       //获取小时
        console.log(d.getMinutes());     //获取分钟
        console.log(d.getSeconds());     //获取秒数
        console.log(d.getMilliseconds());//获取毫秒
        时间戳
        console.log(d.getTime());        //获取从1970年1月1日至今的毫秒
        
        console.log(d)                   //返回本地时间,包含年月日星期时分秒
     
        设置日期:
            1.粗野模式,简单粗暴,但是会清零时分秒
                var d = new Date("2008/8/8");
            2.复杂模式
                var d = new Date();
                d.setFullYear(2009);    //设置年
                d.setMonth(6);          //设置月,超过11,累加年
                d.setDate(27);          //设置日,超过最大日期,累加月
                d.setHours(40);         //设置小时,超过24,累加天
                d.setMinutes(40);       //设置分钟,超过60,累加小时
                d.setSeconds(40);       //设置秒,超过60,累加分钟
                d.setMilliseconds(40);  //设置毫秒,超过1000,累加秒
     
                d.setTime(10000)        //设置从1970年1月1日过去了多少毫秒
     
                console.log(d)          //返回更改后的年月日 时分秒
        注意set系列的返回值
            console.log(d.setFullYear(2009));
            //返回从1970年1月1日,到当前设置的时间的毫秒数
     
     

    2.延时器和计时器

        延时器:setTimeout(function(){
                     console.log(1);
                 },100)
        语法:setTimeout(函数或者代码串,指定的时间(毫秒));
        在指定的毫秒数后只执行一次函数或代码。
        清除延迟器:clearTimeout();
     
        定时器:setInterval(function(){
                     console.log(1);
                 },100)
        语法:setInterval(函数或者代码串,指定的时间(毫秒));
        按照指定的周期(毫秒)不断的执行函数或者是代码串。
        清除定时器:clearInterval();
     
  • 相关阅读:
    2020.05.27
    static{}静态代码块与{}普通代码块之间的区别
    Spring 注解@Autowired注解
    java:List的深拷贝
    IDEA中MAVEN无法自动加载的问题
    java Comparator接口
    JAVA ArrayList<E>
    JAVA BigInteger
    JAVA输入输出
    JAVA String,StringBuilder的一些API
  • 原文地址:https://www.cnblogs.com/ZhaoWeiNotes/p/11522105.html
Copyright © 2011-2022 走看看