国强极客
有问题请加微信:guoqiang7585
国强极客

1、javascript语法 变量 运算符 数组 对象

1、javascript语法 变量 运算符 数组 对象

调试工具

检测JavaScript执行结果最好的工具就是浏览器(推荐Google浏览器,火狐浏览器)。
打开浏览器的控制台的方法:按F12
谷歌浏览器:右键检查
火狐浏览器:右键查看元素

//在script标签中写js代码
//document.write('hello'); //类似PHP中的echo 'hello';
//alert(123); //在浏览器上弹出窗口,窗口的内容是123

//console.log(456); //输出的内容在浏览器的控制台
console.log(456, 789, 'php69'); //一次性输出多个变量
console.log(['apple', 'huawei']); // 可以直观的输出复杂数据类型

语言基础

1、代码位置

JS代码要写到一对script标签中。
script标签要放到哪里?一句话,哪都行,只要在html页面中就可以。
除此以外,还可以单独创建一个后缀为js的文件,在js文件中写js。需要html文件引入js文件:

浏览器运行的是html文件,而不能直接是js文件。

2、输出

介绍3种输出方式:
1、document.write(输出的内容); //这种输出的内容会显示在浏览器页面上
2、alert(输出的内容); //这种方法输出的内容会以提示框的形式显示
3、console.log(输出的内容); //输出的内容会显示在浏览器的控制台。推荐使用。

3、语句与表达式

JavaScript程序的执行单位为行(line),也就是一行一行地执行。一般情况下,每一行就是一个语句。
语句(statement)是为了完成某种任务而进行的操作,比如下面就是一行赋值语句:

var a = 1 + 3;

这条语句先用var命令,声明了变量a,然后将1 + 3的运算结果赋值给变量a。
1 + 3叫做表达式(expression),指一个为了得到返回值的计算式。
语句和表达式的区别在于,前者主要为了进行某种操作,一般情况下不需要返回值;后者则是为了得到返回值,一定会返回一个值。
凡是JavaScript语言中预期为值的地方,都可以使用表达式。比如,赋值语句的等号右边,预期是一个值,因此可以放置各种表达式。一条语句可以包含多个表达式。

语句以分号结尾,一个分号就表示一个语句结束。多个语句可以写在一行内。

var a = 1 + 3 ; var b = 'abc';

分号前面可以没有任何内容,JavaScript引擎将其视为空语句。

;;;

上面的代码就表示3个空语句。
JS语言中,一条语句结束,可以不用写分号,直接用回车即可。但是建议大家每条语句后面都加分号。

4、注释

单行注释:

//这是一行注释

多行注释:

/*这是一段注释*/

六、变量

1、什么是变量

什么是变量
变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
为什么要使用变量
使用变量可以方便的获取或者修改内存中的数据

2、 如何使用变量

var声明变量

//声明变量
var a = 1; //声明变量,赋初值为1

变量的赋值
同时声明多个变量
同时声明多个变量并赋值

声明变量的时候,使用var,声明之后,再次使用变量的时候,就不要在写var了,直接就变量名即可。

3、变量在内存中的形式

4、 变量的命名规则和规范

规则 – 必须遵守的,不遵守会报错
由字母、数字、下划线、$符号组成,且不能以数字开头
不能是关键字和保留字,例如:for、while、this、name。
区分大小写
规范 – 建议遵守的,不遵守不会报错
变量名必须有意义
遵守驼峰命名法。(首字母小写,后面单词的首字母需要大写。例如:userName、userPassword)
下面哪些变量名不合法

5、只声明变量没有赋初值

6、重新声明变量

7、变量提升(hoisting)

实际运行过程:

在同一个作用域中,都会发生变量提升,比如函数中。

七、常量

1、定义常量

JS中定义常量,只有const语法。

//定义常量
const A = 123;
console.log(A); // 123

2、常量作用域

常量的作用域,是常量所在的块。(块可以理解为大括号)

//定义常量
    //const A = 123;
    //console.log(A);

    for(i=0; i<5; i++){
        const A = 3;
        console.log(A);
    }
    //console.log(A); // A is not defined

    function m() {
        const B = 4;
    }
    m();
    console.log(B); // B is not defined

八、运算符

1、赋值运算符(Assignment operators)

赋值运算符是一个 “=”。表示将“=”后面的内容赋值给左边的内容。

2、比较运算符(Comparison operators)

3、算数运算符(Arithmetic operators)

加减乘除取余

4、逻辑运算符(Logical operators)

或者、并且、非

/*if(0 && false){
    console.log(123);
}else{
    console.log(456);
}*/
var a = 1, b = 2, c = 0, d = false;
var e = a||b; // e = a;
//console.log(a||b); // 1
//console.log(a||c); // 1
//console.log(c||a); // 1
//console.log(c||d); // false
// || 关系,先看左边,左边为true,则直接等于左边;左边为false,直接等于右边

console.log(a&&b); // 2
console.log(a&&c); // 0
console.log(c&&a); // 0
console.log(c&&d); // 0
// && 关系,先看左边,左边为true,直接等于右边;左边为false,直接等于左边。
console.log(10||20); // 10
/*var x = 10&&20;
console.log(x||30); // 20*/
//console.log(0&&5); // 0

|| 关系,先看左边,左边为true,则直接等于左边;左边为false,直接等于右边
&& 关系,先看左边,左边为true,直接等于右边;左边为false,直接等于左边。

5、字符串运算符(String operators)

PHP中用 点(.) 连接两个字符串。
JS中用 加号(+) 连接两个字符串。
如果使用+的是两个数字,则表示加法运算;如果使用+的有一方是字符串,则表示字符串连接。

console.log(2+3); // 5,表示加法运算,因为参与运算的两个值都是数值型
console.log(2+'hello'); // 2hello,表示字符串相连
console.log('hello ' + 'world'); //hello world
var x = 35;
console.log('hahaha' + x); // hahaha35
console.log('35' + x); // 3535

6、条件(三元)运算符(Conditional operator)

元,表示参与运算的参数个数。三元意思就是参与运算的有三个值。

var a = (b>c) ? x : y;
var b=3,c=2;
var a = (b > c) ? 5 : 6;
console.log(a);//5
console.log('false' == false ? 1 : 2)//2

上述代码整体意思是给a赋值,值可能是x,也可能是y。关键取决于b是否大于c。如果b>c,则将x赋值给a;如果b不大于c,则将y赋值给a。

7、一元运算符(Unary operators)

自加/自减

var a = 2, b = 3;
var c = a++; // var c = a; a = a+1
var d = ++b; // b = b+1; var d=b;
console.log(a, b , c, d); // a=3, b=4, c=2, d=4

8、其他

– void 它是一个函数或是一个语言结构,返回值总是无效的undefined。经常用它来使得超链接变得无效。

– typeof它是一个函数或是一个语言结构。typeof(a)、 typeof a; 用于判断变量的数据类型。

console.log(typeof(123)); // number
console.log(typeof 123); // number
console.log(typeof 3.14); // number
console.log(typeof 'hello world');// string
console.log(typeof true); // boolean

– in — 用于判断下标是否存在数组中,或判断对象中是否有哪个成员
– instanceof — 判断对象的原型

九、数组

1、声明数组

在JS中,数组也是一种特殊的对象。
三种声明方式:

①、var arr = ['apple', 'pear'];  // 推荐使用
②、var arr = new Array('apple', 'pear'); // 一般推荐
③、var arr = new Array(3); //表示数组中有三个单元

声明数组的数据,数组的单元不能指定下标,只能使用默认的数字。

2、获取数组的元素

使用“数组[下标]”可以获取到数组中的值。JS中数组的下标一定是数字类型的。

3、判断下标是否存在

使用 in 来判断下标是否存在。
语法: 下标 in 数组 如果存在返回true,不存在返回false。

4、清空数组

    //声明数组
    var arr1 = []; //空数组
    var arr2 = ['apple', 'banana'];
    var arr3 = new Array(); //空数组
    var arr4 = new Array('apple', 'banana');
    var arr5 = new Array(4); // 小括号里的数字表示数组中有4个单元。

//    console.log(arr1);
//    console.log(arr2);
//    console.log(arr3);
//    console.log(arr4);
//    console.log(arr5);
    console.log(arr2[0]); //apple
    console.log(arr2.length);// 2 //表示数组的长度,表示数组中有几个单元
    console.log(1 in arr2); // true
    console.log(1 in arr1); // false

    //arr2 = []; //表示清空数组
    arr2.length = 0; //表示清空数组
    console.log(arr2); // 结果是 空数组

十、对象

1、创建对象

JS中要得到一个对象有很多种方式,今天学习的是直接量语法得到对象。

var obj = {}; //空对象
var obj = {成员名:值, 成员名:值}; 
var obj = {
    成员名:值,
    成员名:值
};

注释:值可以是数字型、字符串型等基本数据类型,也可以是数组或其他对象,还可以是函数。

2、获取对象的成员

对象内部的this:理解它,对比php中的$this即可。

3、判断对象中的成员

用 in 判断对象中是否存在某个成员。

4、添加对象的成员

5、删除对象的成员

  var obj1 = {}; //空对象
    var obj2 = {name:'张三疯', age:99};
    var obj3 = {
        name:'张三疯',
        age:99,
        sex:'男',
        zhiye:['打手', '武力值>90'],
        wugong:function(){
            console.log('太极八卦连环掌');
        },
        hunpei:function(){

        }
    };

    //console.log(obj1);
    //console.log(obj2);
    //console.log(obj3);

    //点语法用于对象调用里面的成员 obj1.name;
    console.log(obj3.name);
    console.log(obj3.age);
    obj3.wugong(); //调用成员方法

    var obj4 = {
        name:123,
        age:32,
        a:function(){
            console.log('这是我的第一个对象,她的年龄是' + this.age);
        },
        b:function(){

        }
    };
    //console.log(obj4.age);
    //obj4.a();
    //console.log('name' in obj4); //true 表示判断name是否是对象的成员
    //console.log(name in obj4); //false  表示找变量为name的值是否在对象中
    //console.log('a' in obj4); //true

    //给obj4 添加一个成员sex
    obj4.sex = '男';
    //给obj4 添加一个成员,值是一个函数
    obj4.c = function(){
        console.log(this.name);
    };

    console.log(obj4);
    delete obj4.a; //删除成员方法,不要加小括号。
    delete obj4.name;
    console.log(obj4);

十一、数据类型

1、数据类型

JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有六种。(ES6 又新增了第七种 Symbol 类型的值)
number(int/float)
string
bool
null 空值,如果要设置一个变量的值为null,只能手动赋值为null。null也是一个对象。
undefined 未定义,如果一个变量声明了,但是没有给值,则这个变量的值就是undefined
object(纯对象狭义上的对象数组/函数/JS中任何数据类型都可以看做是对象)

通常,我们将数值、字符串、布尔值称为原始类型(primitive type)的值,即它们是最基本的数据类型,不能再细分了。而将对象称为合成类型(complex type)的值或引用类型,因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。至于undefined和null,一般将它们看成两个特殊值。
对象又可以分成三个子类型,即狭义的对象(object)、数组(array)、函数(function),其实,更加广义的讲,原始类型的值(数值、字符串、布尔)也可以看做对象。

2、数据类型示例

var a = 123;
var b = 3.14;
var c = 'hello';
var d = true;
var e;
var f = null;
var g = ['apple', 'banana'];
var h = {name:'李四', age:30};
function m(){
}

可以输出查看效果。

3、判断数据类型

使用typeof无法区分null、数组、对象,要想区分他们三个,必须使用instanceof。
使用instanceof的语法:

变量 instanceof 类型

类型:包括Array、Object
如果一个变量instanceof Array之后,结果为true,则表示变量是数组类型;
如果一个变量instanceof Object之后,结果为true,则表示变量是对象类型;

下面一个函数可以判断数据类型到底是什么?

function panduan(x){
    if(typeof(x) != 'object')
    {
        return typeof(x);
    }
    else
    {
        if(x instanceof Array)
        {
            return 'array';
        }else if(x instanceof Object){
            return 'object';
        }else{
            return 'null';
        }
    }
}
console.log(panduan(h));

4、原始类型和引用类型

引用类型指对象,指的是狭义上的对象。数组不应该算引用类型。
区分是否是引用类型,关键看内存图。
对象在内存的栈区只保存它的地址,在堆区保存它的实际内容,这种类型的变量就是引用类型。
引用类型的一些应用:

赞赏
对内容有疑问,请加我微信:guoqiang7585
# # # # # #
首页      全栈教程      JavaScript      1、javascript语法 变量 运算符 数组 对象

国强极客

文章作者

博客站长,有问题请加微信【guoqiang7585】。

国强极客

1、javascript语法 变量 运算符 数组 对象
调试工具 检测JavaScript执行结果最好的工具就是浏览器(推荐Google浏览器,火狐浏览器)。 打开浏览器的控制台的方法:按F12 谷歌浏览器:右键检查 火狐浏览器:右键查看元素 //在script…
扫描二维码继续阅读
2019-12-03