js基本语法

输入输出语句

  • alert(msg):浏览器弹出警示框

  • console.log(msg):浏览器控制台打印输出信息

  • prompt(info):浏览器弹出输入框,用户可以输入

    此方法输入的为字符串类型的模式

常见方法

  • eval('字符串'):把字符串当作代码运行

  • length:检测字符串的长度,也可以用来检测数组长度

    var a='49gu';
    console.log(a.length);
    //结果:4
    
    var names = ['哦呢','ones','twos','three','ogji'];
    console.log(names.length);
    //结果:5
    
    var names = ['哦呢','ones','twos','three','ogji'];
            for(var i = 0; i < names.length; i++) {
                console.log(names[i]);
            }
    /*结果:
     哦呢
     ones
     twos
     three
     ogji
    */
    
  • typeof:检测变量的类型

    var a=null;
    console.log(typeof a);
    
  • toString():转换成字符串

    var num=1;
    aler(num.toString());
    
  • String():强制转换成字符串

    var num=1;
    aler(String(num));
    
  • parseInt(string):字符型转换成数值型整数,会去掉 px单位(其他字母也可以,注意首个必须是字母)

            var data='124px',num='34';
            console.log(parseInt(data));
            console.log(parseInt(num));
    
  • parseFloat(string):字符型转换成数值型的

    		var data='124.4px',num='34.5';
            console.log(parseFloat(data));
            console.log(parseFloat(num));
    //结果:124.4 34.5
    
  • Number(变量):强制转换

            var a=true,b='345nd',c='123';
            console.log(Number(a));
            console.log(Number(b));
            console.log(Number(c));
    //结果:1 NaN 123
    
  • Boolean(变量):代表空,否定的值('' 0 NaN null undefined)转换成false,其余的转换为true

            var a=0,b='ett';
            console.log(Boolean(a));
            console.log(Boolean(b));
    //结构:false true
    
  • isNaN(变量):判断是否为数值型,如果式数值型则返回false,非数值型的返回true

           var de = prompt('判断是否为数值型');
           alert(isNaN(de) ? '返回true,非数值型' : '返回false,数值型');
    
  • toFixed(2):取小数点后面几位

    ~~a 也可以去小数

变量

变量的概述

变量是用于存放数据的容器,我们通过变量名获取数据,甚至数据可以修改

5中基本数据:number string null undefined boolean

一种引用类型:就是一个数据容器

本质:变量是程序在内存中申请的一块用于存放数据的空间

变量的使用

  1. 申明变量

    var age; 
    

    var是一个js关键字,用来声明变量,使用该关键字声明变量后,计算机会自动为变量分配内存空间

  2. 赋值

    用=来将右边的值赋值给左边的变量空间中,此处代表赋值的意思

    变量值是程序员保存到变量空间的值

注意

  • 更新变量:一个变量被重新赋值后,它原有的值会被覆盖,变量值将以最后一次赋的值为准

  • 可以声明多个变量

    var myname='卡卡西',
                age='30',
                address='火影村',
                email='kakaxi@itcat.cn',
                wage='2000';
    
  • 只声明,不赋值

    返回undefind

  • 不声明,只赋值

    在js中允许,但不提昌,会变成全局变量

  • 不声明也不赋值

    报错

变量的命名规范

  • 字母,数字,下划线,美元符号($)组成

  • 严格区分大小写

  • 不能以数字开头

  • 不能是关键字,保留字

    name不用

  • 变量名必须有意义

  • 遵守驼峰命名法,首字母小写,后面单词的首字母需要大写

  • 推荐翻译网站:有道,爱词霸

字面量

字面量在代码中一个固定值的表示法,通俗的说,就是字面量表达如何表达的值。

  • 数字字面量:8,9,10
  • 字符串字面量:’pink老师‘,'大前端'
  • 布尔字面量:true,false

数据类型

变量的数据类型决定了如何将代表这些值的位存储到计算机中内存中。javascript是一种弱类型或者说动态语言。在程序运行过程中,类型会被自动确定

注意:变量的数据类型是可以改变的

js把数据类型分为简单数据类型和复杂数据类型

简单数据类型

又叫值类型,在存储时变量中存储的是值本身,因此又叫值类型,String,number,boolean,undefined,null

number

数字型包含小数和整数

常见的有二进制,八进制,十六进制

在数字前填0表示八进制,添加0x表示十六进制

注意:在输出的时候会转换为十进制

有最大值和最小值

alert(Number.MAX_VALUE);	
alert(Number.MIN_VALUE);	
  • infinity:代表无穷大

  • -infinity:代表无穷小

  • NaN:not a number,代表一个非数字

    isNaN()	//判断是否为数字,返回一个结果,如果是数字则返回false,如果不是数字,则返回的是true
    
string

字符串型可以是引号中的任意文本,其语法为双引号和单引号

字符串是不可变性的,改变后会重新开辟一个新的空间,容易占有内存空间,所以不要大量的拼接字符串

注意:因为html标签里面的属性使用是双引号,js推荐使用单引号

嵌套引号:使用的是最近原则

字符串转义字符

转义符都是\开头,常见的

\n:换行
\\:斜杠\
\':'单引号
\*:双引号
\t:tab缩进
\b:空格,b是blank的意思
  • 检测获取字符串的长度

    length
    
  • 字符串的拼接

    +
    

    注意:只要有字符串型和其他类型相加,就会是字符串型的

    数值相加,字符相连

Boolean

布尔类型:true和false,其中true表示对,false表示错

参与运算的时候true表示为1看,false表示0来看

当值为 ‘’(空) 0 NaN undefined null 表示为false,其余的为true

undefined

undefined:声明了变量,但是没有赋值

undefined和一个数字相运算,结果为NaN

unll

null:表示空

和数值相加则表示原来数值的

var a = null,
b = a + 4;
console.log(typeof a);
console.log(b);

注意:null类型返回的是一个对象

var temp = null;
console.log(typeof temp);
// Object

简单数据类型的转换

使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能直接简单进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型

转换成字符串的格式
  • toString():转换成字符串

    var num=1;
    aler(num.toString());
    
  • String():强制转换成字符串

    var num=1;
    aler(String(num));
    
  • 加号拼接字符串:和字符串拼接的结果都是字符串,又称为隐式转换

    注意:toString()和String()使用方法不一样

转换为数字型
  • parseInt(string):字符型转换成数值型整数,会去掉 px单位(其他字母也可以,注意首个必须是数字)

            var data='124px',num='34';
            console.log(parseInt(data));
            console.log(parseInt(num));
    //结果:124 34
    
  • parseFloat(string):字符型转换成数值型的

    		var data='124.4px',num='34.5';
            console.log(parseFloat(data));
            console.log(parseFloat(num));
    //结果:124.4 34.5
    
  • Number(变量):强制转换

            var a=true,b='345nd',c='123';
            console.log(Number(a));
            console.log(Number(b));
            console.log(Number(c));
    //结果:1 NaN 123
    
  • js隐式转换(- * /)

            console.log('123'-13);
            console.log('123'-'23');
            console.log(3*'3');
    //结果:110 100 9
    
转换成布尔型
  • Boolean():代表空,否定的值(''(空) 0 NaN null undefined)转换成false,其余的转换为true

            var a=0,b='ett';
            console.log(Boolean(a));
            console.log(Boolean(b));
    //结构:false true
    

复杂数据类型

又叫引用类型,在存储变量中存储的仅仅是地址,因此叫做引用数据类型,通过关键字new创建的对象(系统对象,自定义对象),如Object,Array,Date等

复杂数据类型传参把地址复制,所以,函数里面修改值,外面的对象也会修改

object

对象是一组无序属性和方法的集合,所有的事物都是对象

对象由属性方法组成的

  • 属性:事物的特征
  • 方法:事物的行为

对象的创建

  • 利用字面量创建对象(直接用花括号,有点像是数组的创建方式)

    var student = {
                name: '张三',
                age: '13',
                text: function() {
                    console.log('考试');
                }
    
            }; 
            console.log(typeof student);
    

    注意

    1. 里面的属性或则方法我们采取键值对的形式 键 属性名 :值 属性值
    2. 多个属性中间用逗号隔开
    3. 方法冒号后面跟的是一个函数对象
  • 利用new Obeject创建对象

    var student = new Object();
            student.name ='可可';
            student.type = '阿拉斯加';
            student.age = '5';
            student.color = 'red';
            student.bark = function() {
                console.log('汪汪汪');
            };
            student.showFilm = function() {
                console.log('演电影');
            }
            console.log(student);
    

    注意

    1. 我们利用等号 = 赋值的方法,添加对象的属性和方法
    2. 每个属性和方法之间用分号结束
  • 利用构造函数来创建对象

    构成函数泛指一大类,对象特指某一个事物

    我们利用构成函数创建对象的过程也称为对象的实例化

    为什么使用构造函数:每次创建一个对象,里面的很多苏醒和方法是相同的,我们只能复制,因此我们可以利用构成函数来重复这些相同的代码,我们把这个函数称为构造函数。构造函数就是我们把对象里面的一些相同的属性和方法抽象出来封装到函数里面

    function 构造函数名() {
                this.属性 = 值;
                this.方法 = function() {}
            }
            new 构造函数名()  //调用构造函数
            var 对象名 = new 构造函数名()  //调用构造函数构建对象
    

    注意

    1. 构造函数名字首字母要大写
    2. 我们构造函数不需要return 就可以返回结果
    3. 我们调用构造函数,必须使用new
    4. 我们只用new 构造函数名() 函数调用就创建了一个对象
    5. 构造函数属性和方法必须添加this

    new关键字执行过程

    1. new 构成函数可以在内存中创建一个空的对象
    2. this 指向刚才创建的空对象
    3. 执行构成函数里面的代码,给这个空对象添加属性和方法
    4. 返回这个对象
      注意:如果返回的是一个引用类型,则返回的是引用类型,如果不是则返回创建的对象
         function fn() {
             var name = 'jack';
             var obj = {
                 name: 'marry',
                 fm: function() {
                     this.name = 'kale'
                 }
             }
             return obj;
         }
         var one = new fn();
         console.log(one.name);  // 所有one得到的obj这个引用,one.name为marry
         var one = new ((new fn()).fm)();
         console.log(one.name);  // kale
    

遍历对象

for(变量 in 对象) {
    console.log(对象[变量]);
}

注意:变量得到的值是对象里面的属性,想得到值必须使用对象[变量]的方法

使用对象

  • 调用对象的属性

    //对象名.属性名
    student.name
    
  • 调用函数的方法

    //对象名.方法名()
    student.text()
    

    注意:不用忘记加小括号

基本类型包装

为了方便操作基本数据类型,javascript还提供了三种特殊的基本引用类型:Sting,Number和Boolean

基本包装类型就是把简单数据类型包装成复制数据类型

var str = 'andy';
console.log(str.length);
//等价以下
var tem = new String('andy');	//生成临时变量,把简单数据类型包装成复杂数据类型
str = tem;	//赋值给我们声明的字符变量
tem = null;	//销毁临时变量

运算符

也称操作符,用于实现赋值,比较和执行算数运算等的符号。

表达式:由数字,运算符,变量等求得有意义排列方法所得的组合

返回值:由表达式得出结果的值

算术运算符

算数运算符:+ - * / %

注意:浮点数有精确的问题,最好不要直接参与运算,不要直接判断两个浮点数是否相等

递增递减运算符

递增递减运算符:++ --

注意:递增递减运算符必须和变量配合使用

放在变量前面,称为前置递增(递减)运算符

使用口诀:先加一,后返回

        var num=10;
        console.log(++num + 10);
//结果:21

放在变量后面,称为后置递增(递减)运算符

使用口诀:先返回,后自加

		var num=10;
        console.log(num++ + 10);
//结果:20

比较运算符

比较运算符:> < >= <= ==(会转型) !=(会转型) =(全等 要求值和数据类型一致) !(不全等 要求值和数据类型一致)

两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(false true)作为运算结果

       console.log(18=='18');
       console.log(19!=='19');
//结果:true true
//==默认转换数据类型,会把字符串类型的数据转换为数字型

逻辑运算符

也称布尔运算符,用来进行布尔值的运算符,其返回值也是布尔值

逻辑与&&

		console.log(4>5&&4<5);
//结果:false
		console.log(4<5&&4<5);
//结果:true
		console.log(4>5&&4>5);
//结果:false

逻辑非||

		console.log(4>5||4<5);
//结果:true
		console.log(4<5||4<5);
//结果:true
		console.log(4>5||4>5);
//结果:false

逻辑否!

短路运算

短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式

  1. 逻辑与

    • 语法:表达式1&&表达式2

    • 如果第一个表达式1为真,则返回表达式2

    • 如果第一个表达式1为假,则返回表达式1,不执行后面的

              console.log(4+5 && 0);
              console.log(0 && 4+7);
              console.log(1+2&&2+3);
      //结果:0 0 5
      // 相当于
      if(4+5) {0}
      else (4+5)
      
  2. 逻辑非

    • 语法:表达式1&&表达式2

    • 如果第一个表达式1为真,则返回表达式1,不执行后面的

    • 如果第一个表达式1为假,则返回表达式2

              console.log(4+5 || 0);
              console.log(0 || 4+7);
              console.log(1+2||2+3);
      //结果:9 11 3
      // 相当于
      if(4+5) {4+5}
      els {0}
      

赋值运算符

= += -= *= /= %=

        var num=10;
        console.log(num+=10);
        console.log(num*=2);
//结果:20 40

运算符优先级

  • 一元运算符里面的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高

流程控制

控制代码按照一定的结构顺序来执行

顺序流程控制

按照顺序结构执行

分支流程控制

根据不同的条件,执行不同的条件,从而得到不同的结果

三元表达式
  • 语法结构

    条件表达式 ? 表达式1 : 表达式2
    
  • 执行思路

    如果表达式为真则返回表达式1,反之则返回表达式2

         var num = 4>3 ? 'T' : 'F' ;
         console.log(num);
//结果:T
if语句
  • 语法结构

    if (条件表达式1) {
    	//执行语句1
    }
    else if (条件表达式2) {
        //执行语句2
    } else {
        //执行语句3
    }
    
  • 执行思路

    如果条件表达式为真,则执行该语句

switch语句
  • 语法结构

    switch (表达式1) {
    	case value1:
    		执行语句1;
    		break;
    	
    	case value2:
    		执行语句2;
    		break;
    	...
        default:
        	执行最后的语句;
    }
    
  • 执行思路

    根据表达式1的值和value匹配,执行相匹配的语句,若没有匹配的,则执行default的语句

  • 注意事项

    1. 表达式经常写成变量
    2. 表达式里面返回的值和value里面的值要是全等匹配的,值和数据类型要一致
    3. break 如果当前case没有break,而是继续执行下一个case
     var i = 6;
            switch(i) {
                case 5 : i++;
                case 6 : i++;
                case 7 : i++;
                default : i++;
            }
    console.log(i);
    //结果:9
    

switch和if区别

  • 比较固定值的时候使用switch
  • 范围条件的时候使用if else if
  • switch效率高于if,switch直接跳到满足条件的语句,if else if 会进行顺序下来
  • 分支多的时候,使用switch更合适

循环流程控制

循环的目的是重复执行某些代码

在程序中,一组被重复执行的语句被称为循环体,能否继续重复执行,取决与终止条件。循环语句由循环体以及循环的终止条件组成

for循环
  • 语法格式

    for (初始化变量;条件表达式;操作表达式) {
    	//循环体
    }
    

    初始化变量: var声明的普通变量,通常用于作为计数器使用
    条件表达式 :用于决定每一次循环是否执行,是终止的条件
    操作表达式: 是每次循环最后执行的代码 经常用于我们计数器变量进行更新

  • 执行思路

    初始化变量--->条件表达式--->循环体--->操作表达式

    初始化变量只在for循环第一次运行的时候执行

    var i;
            for(i=1;i<=100;i++) {
                console.log(i);
            }
    
    1. 首先执行计数器里卖弄的var i=1,但这句话只在里面执行一次
    2. i<=100 来判断是满足条件,如果满足条件,就去执行循环体,不满足条件推出循环
    3. 最后执行i++
    //九九乘法表
    var sum='';
            for(var y=1;y<=9;y++) {
                for(var x=1;x<=y;x++) {
                    var result=x*y;
                    sum+=x+'*'+y+'='+result;
                    // console.log(typeof sum); string类型
                    sum+='\t';
                }
                sum+='\n';
            }
            console.log(sum);
    
     var sum = '';
            for(var i = 1; i <= 4; i++) {
                for(var j = i; j <= 3; j++) {
                    sum += '-';
                }
                for(var k = 1; k <= 2*(i - 1) + 1; k++){
                    sum += '*';
                }
                sum += '\n';
            }
    
            for(var i = 1; i <= 3; i++) {
                for(var j = 1; j <= i; j++) {
                    sum += '-';
                }
                for(var k = 1; k <= -2 * i + 7 ; k++) {
                    sum += '*';
                }
                sum += '\n';
            }
    console.log(sum);
    
    /*结果:
    ---*
    --***
    -*****
    *******
    -*****
    --***
    ---*
    */
    

考点

for(var i=0,j=6; i > 0, j>0; i++,j--) {
	console.log(i);
}
// 主要的看j>0为终止条件
while循环
  • 语法格式

    while (条件表达式) {
        //循环体
    }
    
  • 执行思路

    当条件为真的时候,执行循环体

    里面应该有计数器和操作表达式,否则容易形成死循环

do while循环
  • 语法格式

    do {
    	//循环体
    } while(条件表达式)
    
  • 执行思路

    先执行一次循环体,然后再判断条件表达式

    如果是true则执行循环体,否则则不执行

continue break关键字
  • continue:跳出本次循环,继续下次循环
  • break:跳出循环体

函数

函数就是封装一段可以重复执行的代码块,函数也是一种应用类型,就是一个内存空间

var fn = function() {
    fu['hqyj'] = 666;
    console.log(fn.hqyj);
}

// 从某种意义来说,函数是一种特殊的对象 typeof fn的值是function

目的:让大量代码可以重复使用

函数声明

  • 利用函数关键字

    function(参数) 函数名 {
    	//函数体
    }
    

    注意

    1. function声明的关键字全部小写
    2. 函数不调用不执行
    3. 函数一般做某件事情,函数名一般就是动词
    4. 函数调用函数名加小括号
  • 函数表达式声明

    var 变量名 = function() {
        //表达式
    }
    

    注意

    1. 此方式声明的函数是没有函数名的,只有变量名,所有又叫匿名函数
    2. 函数表达式声明方式和声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数

形参和实参

function 函数名(形参1,形参2,形参3...) {
	//代码体
}
函数名(实参1,实参2,实参3...);

形参是接受实参的,相当于形参=实参的赋值,形参看成一个不用定义的变量

参数个数

  1. 变量个数等于形参个数

    输出正确结果

  2. 实参个数多于形参个数

    只取得新参的个数

  3. 实参个数小于新参个数

    多的形参定义为undefined,结果为NaN

return注意

  1. return只能返回一个值,返回的是最后一个值
  2. return后面的代码不会执行,return是终止函数
  3. 如果有return则返回值则返回值,若没有return则返回undefined

arguments

当前函数的内置对象,当我们不确定有多少个参数传递的时候,可以用arguments来获取,它是一个内置对象。所有函数都有,存储了传递的所有参数

argumens展示是一个伪元素

  • 具有length属性
  • 按照索引的方式存储数据
  • 不具有数组pusn,pop等方法

注意:只有函数才有arguments对象

// 利用函数求任意个数的最大值
        function maxValue() {
            var max = arguments[0];
            for(var i = 1; i < arguments.length; i++) {
                if(max < arguments[i]) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(maxValue(3,44,3,6,7,8,88,556,43));

箭头函数

箭头函数不能用于构造函数,没有this,agruments,super或new.target

适用于哪些本来需要匿名函数的地方

语法

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于:(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

抛出异常

throw {	 // 后面的代码不会执行,抛出
	// 所有js的信息
}

try {
    // 执行的业务
}catch(e) {
    // 执行业务错误后,执行此处
} finally {
    
}

作用域

就是代码名字在某个范围里起作用和效果

目的:提高程序的可靠性,减少命名冲突

作用域

  • 全局作用域:在script里面定义的,作用全局范围
  • 局部作用域(函数作用域):在函数内部定义的,只能在函数内部使用

变量的作用域

  • 全局变量:在全局作用域下定义的变量

    注意:在函数内部没有声明,直接赋值的变量也是全局变量

  • 局部变量:在局部作用域下定义的变量,只能在函数内部使用

    注意:函数的形参也可以看成局部变量

注意

  1. 全局变量只有浏览器关闭时,才能销毁,比较占用资源
  2. 局部变量代码执行完,就能销毁,占用资源少
  3. 现阶段js没有块级作用域,在es6的时候才新增的块级作用域

作用域链

函数内部访问外部函数的变量,采用的是链式查找来决定取那个值,这种结构被我们称为域链

var num = 10;

        function fu() {     //外部函数
            var num = 20;

            function fun() {        //内部函数
                console.log(num);
            }
        }
//就近原则,结构式20

预解析

js引擎运行js分为两步,预解析和代码执行

预解析:把var 和 function提升到当前作用域的最前面

注意

  1. var只是提升声明,没有赋值

    		console.log(num);
            var num = 10;
    //结果:undefined
    
  2. var 变量名 = function() 函数不提升的

            fun();
            var fun = function() {
                console.log('33');
            }
    //报错:fun is not defined
    

案例

	    f1 ();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
            var a = b = c = 9;
            console.log(c);
            console.log(b);
            console.log(a);
        }
//注意: a=b=c=9 其中b和c相当于全局变量
/*
9 9 9 9 9 a is not defined
*/

内置对象

在javasrcipt中的对象分为:自定义对象,内置对象,浏览器对象

前面两种对象是Js中的基础,第三个浏览器对象是js所独有的

内置对象就是js语言自带的一些对象,这些对象提供开发者使用,并提供一些常用的或者最基础而必要的功能和方法

查阅文档https://developer.mozilla.org/zh-CN/

Math对象

Math数学对象,不是一个构造函数,所有不需要new来调用,而是直接使用里面的属性和方法即可

当有不认识的参数,不是数值型的时候,返回NaN

当为空的时,返回-Infinity

Math.PI:圆周率

Math.floor():向下取整

Math.ceil():向上取整

Math.round():四舍五入 就近取整,往大的方向取值,负数要注意

Math.round(-3.5);	//取得结果为-3
Math.round(3.5);	//取的结果为4

Math.abs():绝对值

Math.abs('-1');	//存在隐式转换 -1 转换成数字型
Math.abs(-2);

Math.max()//Math.min():取最大值和最小值

Math.random():随机数方法

返回一个随机的[0,1)的浮点数

不跟参数的

日期对象

  • 是一个构造函数,必须使用new来构成函数对象

  • 如果没有参数,返回系统的当前时间

参数常用写法

var times = new Date('2019-4-34 6:4:6');	//字符型的
var times = new Date(2019,3,5);	//数字型的
console.log(times)	//返回的比实际的打一个月

方法

getFullYear():获取年

getMonth():获取月,从0-11,所以比实际的小一个月,要加一

getDate():获取几号

getDay():返回周几 周一返回1 周六返回6 但周日返回0

getHours():获取当前几小时

getMinutes():获取当前几分钟

getSeconds():获取当前秒

 var time = new Date();
        year = time.getFullYear();
        month = time.getMonth() + 1;
        date = time.getDate();
        day = time.getDay();
        house = time.getHours();
        minutes = time.getMinutes();
        seconds = time.getSeconds();
        if(day == 0) {
            day = 7;
        }
        console.log(year);
        console.log(month);
        console.log(date);
        console.log(day);
        console.log(year+'年'+month+'月'+date+'日'+'星期'+day);
        console.log(house+'时'+minutes+'分'+seconds + '秒')

时间戳

距离1970年2月1号过了多少毫秒

  1. 通过valueOf() getTime()

    var date = new Date();
    console.log(date.valueOf());
    console.log(date.getTime());
    
  2. var date = +new Date();

    var date = +new Date();
    
  3. H5新增

    console.log(Date.new())
    

案例

//利用时间戳求倒计时
function countDown(time) {
            var end = +new Date(time);
            var newDay = +new Date();
            var count_Down = Math.abs(end - newDay) / 1000; 
            console.log(count_Down);

            var seconds = parseInt(count_Down % 60),
            minutes = parseInt(count_Down / 60 % 60),
            house = parseInt(count_Down /3600 % 60);

            seconds = seconds < 10 ? '0' + seconds : seconds;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            house = house < 10 ? '0' + house : house;
            return ('倒计时' + house + ':' + minutes + ':' + seconds);
        }

        var time = '2022-3-4 19:0:0';
        console.log(countDown(time));

数组对象

数组是值一组数据的集合,其中的每个数据被称为元素,再数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式

        var arr = [];
        arr.what = 'what';
        console.log(arr.what);
// 数组是一种引用数据类型,从某种意义上是一种对象

数组的创建

  • 利用new关键字创建

    var 数组名 = new Array();	//创建一个空的数组
    var 数组名 = new Array(2,4);	//表示里面有2个数组元素,是2和4
    
  • 数值字面量来创建数组

    方括号

    var 数组名 = [];
    

    注意

    1. 数组里面的数据用逗号隔开
    2. 数组里面放任意的数据类型元素都可
    3. 如果没有数组元素则返回undefined

数组的索引

索引(下标):数组下标是从0开始的

数组名[索引下标]

伪数组

  • 具有length属性
  • 按照索引的方式存储数据
  • 不具有数组push,pop等方法

案例:

//求数组中所有元素的和以及平均值
        var sum = 0;
        var ar = [2,6,1,7,4];
        for(var i = 0; i < ar.length; i++) {
            sum += ar[i];
        }
        var average = sum / ar.length;
        console.log(sum);
        console.log(average);
//结果:20 4
//求最数组中的最大值
        var ar = [2,6,1,77,53,25,7];
        var max = ar[0];
        for(var i = 1; i < ar.length; i++) {
            if(ar[i] > max) {
                max = ar[i];
            }
        }
        console.log(max);
//结果:77
//将数组中大于10的元素选择出来
//方法1
        var ar = [2,0,6,1,77,0,52,0,25,7];
        var ars = [];
        var j = 0;
        for(var i = 0; i < ar.length; i++) {
            if(ar[i] > 10) {
                ars[j] = ar[i];
                j++;
            }
        }
        console.log(ars);
//方法2
var ar = [2,0,6,1,77,0,52,0,25,7];
        var ars = [];
        for(var i = 0; i < ar.length; i++) {
            if(ar[i] > 10) {
                ars[ars.length] = ar[i];
            }
        }
        console.log(ars);
//去0
        var ar = [2,0,6,1,77,0,52,0,25,7];
        var ars = [];
        for(var i = 0; i < ar.length; i++) {
            if(ar[i] != 0) {
                ars[ars.length] = ar[i];
            }
        }
        console.log(ars);
//数组中的元素倒过来存储
        var ar = [2,0,6,1,77,0,52,0,25,7];
        var ars = [];
        for(var i = ar.length-1; i >= 0; i--) {
            ars[ars.length] = ar[i];
        }
        console.log(ars);
//冒泡排序
        var ar = [4,5,3,4,2,2,10,4,344,5,6];
        var exc = 0;
        for(var i = 0; i < ar.length; i++) {
            for(var j = 0; j <  ar.length-1-i; j++) {
                if(ar[j] < ar[j+1]) {
                    exc = ar[j];
                    ar[j] = ar[j+1];
                    ar[j+1] = exc;
                }
            }
        }
        console.log(ar);

新增数组元素

  • 可以通过修改length长度

    var ar = ['red','green','blue','pink'];
            ar.length = 6;
            console.log(ar.length);
            console.log(ar[4]);
            console.log(ar[5]);
    //结果:6 undefined undefined
    

    修改后数组扩容,但没有定义所有为Undefined

  • 追加数组元素

    
    
    
    
    var ar = ['red','green','blue','pink'];
            ar[4] = 'one';
            for(var i = 0; i < ar.length; i++) {
                console.log(ar[i]);
            }
    /*
    red green blue pink one
    */
    var ar = ['red','green','blue','pink'];
            ar[7] = 'one';
    		ar[3] = 'two'
            for(var i = 0; i < ar.length; i++) {
                console.log(ar[i]);
            }
    /*
    red green blue two undefined undefined undefined one
    */**检测数组**
    

检测数组

  1. instanceof运算符

    var arr = [];
    console.log(arr instanceof Array);	//是数组则返回true 不然返回false
    
  2. Array.isArray(参数)

    console.log(Array.isArray(arr));	//H5新增的方法 ie9以上版本支持
    

push(参数):末尾添加一个或者多个元素,注意修改原数组,返回新的长度

var arr = [2,3,5,'di'];
        console.log(arr);
        console.log(arr.push('di',5));

/*
0: 2
1: 3
2: 5
3: "di"
4: "di"
5: 5
------------
6
*/

pop():删除数组最后一个元素,把数组长度减一,注意修改原数组,并返回删除的元素

 var arr = [2,3,5,'di'];
        console.log(arr);
        console.log(arr.pop());

/*
0: 2
1: 3
2: 5
----------
di
*/

unshift(参数) :向数组开头添加一个或者多个元素,注意修改原数组,并返回新的数组长度

 var arr = [2,3,5,'di'];
        console.log(arr);
        console.log(arr.unshift(4,'123'));
/*
0: 4
1: "123"
2: 2
3: 3
4: 5
5: "di"
---------
6
*/

shift():删除数组的第一个元素,数组长度减1,无参数,修改原数组,并删除的元素

var arr = [2,3,5,'di'];
        console.log(arr);
        console.log(arr.shift());

/*
0: 3
1: 5
2: "di"
----------
2
*/

reverse():颠倒数组元素的顺序,无参数,该方法改变原来的数组,返回新数组

var arr = [1500,1200,2000,2100,1800];
        console.log(arr.reverse());
/*
0: 1800
1: 2100
2: 2000
3: 1200
4: 1500
*/

sort():对数组的元素进行排序,该方法会改变的数组,返回新数组,可能有问题

var arr = [1500,1200,2000,2100,1800];
        console.log(arr.sort(function(a,b) {	////a - b 升序,b - a 降序
            return a - b;
        }));
/*
0: 1200
1: 1500
2: 1800
3: 2000
4: 2100
*/

indexOf():在数组中查找给定元素的第一个索引,如果存在返回索引号,如果不存在,则返回-1(返回的数字型的)

var arr = ['张1','2','3','4'];
        console.log(arr.indexOf('张1'));
// 0

lastindexOf():在数组中的最后一个索引,如果存在返回索引号,如果不存在,则返回-1(返回的数字型的)

var arr = ['张1','2','张1','4'];
        console.log(arr.lastIndexOf('张1'));
// 2

案例

// 数组去重
// 方法一
        function deWeight(arr) {
            var arrs = [];
            while(arr.length != 0) {
                while(arr.indexOf(arr[0]) != arr.lastIndexOf(arr[0])) {
                    arr.shift();
                }
            arrs[arrs.length] = arr[0];
            arr.shift();
            }
            return arrs;
        }
        var arr = ['c','a','z','a','x','c','b','c'];
        console.log(deWeight(arr));
// 方法二
function deWeight(arr) {
            var arrs = [];
            while(arr.length != 0) {
                if(arrs.indexOf(arr[0]) == -1) {
                arrs.push(arr[0]);
                arr.shift();
                }
                else {
                    arr.shift();
                }
                
            }
            return arrs;
            
        }
        var arr = ['c','a','z','a','x','c','b','c'];
        console.log(deWeight(arr));
// 方法三
var arr = ['c','a','z','a','x','c','b','c'];
        function deWeight(arr) {
            var arrs = [];
            for(var i = 0; i < arr.length; i++) {
                if(arrs.indexOf(arr[i]) == -1) {
                    arrs.unshift(arr[i]);
                }
            }
            return arrs;
        }
        console.log(deWeight(arr));

toString():把数组转换成字符串,逗号分隔每一页,返回一个字符串

var arr = new Array('pink','teacher','is','nice','people');
console.log(arr.toString());
//pink,teacher,is,nice,people
        

join('分隔符'):方法用于把数组中的所有元素转换为一个字符串,返回一个字符串

var arr = new Array('pink','teacher','is','nice','people');
        console.log(arr.join('|'));
// pink|teacher|is|nice|people

concat():连接两个或者多个数组,不影响原数组,返回一个新的数组

slice():数组截取slice(begin,end),返回被截取项目的新数组

splice():数组删除splice(第几个开始,要删除个数),返回被删除项目的新数组,注意:这个会影响原数组

字符串对象

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串

字符串的创建

  • 字符串表面量

    var v ='dji'
    
  • new String

    var a = new String()
    
  • 使用String函数转换

    var c = String('foo')
    

不同:通过String直接创建字符串和字面量创建字符串为基本数据类型,为js的直接量,通过new 来实例化的字符串对象

比如eval()执行的时,若为基本字符串,则会将里面的字符串当作时源代码,若为字符串对象,则看作对象来处理

var a = '1+2';
var b = new String('1+2');
console.log(a);
// 3
console.log(b);
// 1+2

indexOf():返回指定内容字符串中的位置,如果找不到就返回-1,开始的位置是index索引号

 //查找字符串中所有出现o的位置以及次数
        // 方法一
        var str = 'abcoefoxyozzopp';
        var cis = [];
        for(var i = 0; i < str.length; i++) {
            if(str[i] == 'o') {
                cis.push(i);
            }
        }
        console.log(cis);
        console.log(typeof str[3]);
	 // 方法二
        var str = 'abcoefoxyozzopp';
        var index = str.indexOf('o');
        while(index != -1) {
            console.log(index);
            index = str.indexOf('o',index + 1);
        }

lastIndexOf():从前往后找,只招第一个匹配的

charAt(index):返回指定位置的字符

//判断一个字符串中出现次数最多的字符,并统计其次数

        // 先创建一个对象统计每个字符出现的次数
        var str = 'abcoefoxyozzopp';
        var time = new Object();
        for(var i = 0; i < str.length; i++) {
            var j = str.charAt(i);
            if(time[j]) {
                time[j] +=1;
            }
            else {
                time[j] = 1;
            }
        }
        console.log(time);


        //time是一个对象,返回对象属性的最大值的属性 返回的是一个字符串格式
        function maxChar(time) {
            var max = 0;
            var names = '';
            for(var i in time) {
                if(time[i] > max) {
                    max = time[i];
                    names = i;

                }
            }
            return names;
        }

       
        names = maxChar(time);


        // 找出一个字符在字符串中出现的位置
        
        function charPosition(str,a) {
            var arr = [a];
            var index = str.indexOf(a);
            while(index != -1) {
                arr.push(index);
                index = str.indexOf(a,index + 1);
            }
            return arr;
        }

        console.log(charPosition(str,names));

charCodeAt(index) :获取指定位置字符的ASCII码

str[index]:获取指定位置字符 注意:HTML5,IE8+支持,和charAt()效果一样

concat(str1,str2,str3...):用于连接两个或多个字符串,拼接字符串,等价于+

substr(star,length):从star开始(索引号),length取个数

slice(star,end):从star开始,截取到end位置,end取不到(都是索引号)

substring(star,end):从star开始,截取到end位置,end取不到,基本和slice相同,但不接受负值

replace('被替换的字符','替换为的字符'):只替换第一个字符

//利用while循环来不断替换字符串中的字符
		var str = 'abdkdigsajosdhsoajsaoddo';
        while(str.indexOf('o') !== -1) {
            str = str.replace('o','*');
        }
        console.log(str);

split('分隔符'):字符串转换成数组

posted @ 2020-11-12 15:05  a立方  阅读(68)  评论(0编辑  收藏  举报