zoukankan      html  css  js  c++  java
  • JavaScript笔记01_基本操作

    1. JS代码编写的位置

    1. 标签的onclick属性中
    2. 超链接的href属性中
    3. script标签中
    4. JS外部文件中
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>JS代码编写的位置</title>
    		<script type="text/javascript">
    			<!-- 3. 可以将JS代码写在script标签中 , 加载页面立即执行-->
    			alert('我是script标签中的代码!!!');
    			
    		</script>
    		
    		<!-- 4. 可以将JS代码写在JS外部文件中,需要使用script标签的src属性引用 
    			注意:script标签一旦用于引入外部文件了,就不能在编写代码了。即使编写了浏览器也会忽略
    			如果需要则可以在创建一个新的script标签用于编写内部代码
    		-->
    		<script type="text/javascript" src="js/scipt.js" ></script>
    	</head>
    	<body>
    		
    		<!-- 1. 可以将JS代码编写到标签的onclick属性中, 点击按钮执行代码 -->
    		<button onclick="alert('弹窗');"></button>
    		
    		<!-- 2. 可以将JS代码写在超链接的href属性中, 点击超链接时执行代码 -->
    		<a href="javascript:alert('弹窗2');">这是一个超链接</a>
    		
    		<!-- 下面的代码常用来控制一个链接点击之后没有反应的情况-->
    		<a href="javascript:;">这是一个超链接</a>
    		
    		<!-- 虽然可以卸载标签的属性中, 但是他们属于结构和行为耦合, 不方便维护, 不推荐使用  -->
    		
    		
    	</body>
    </html>
    

    scipt.js

    alert("我是JS外部文件中的代码!!!");
    

    2. 为什么JavaScript中代码要以分号结束

    如果不加分号,浏览器会自动添加,但是会消耗一些系统资源,有的时候,浏览器会加错分号,导致运行出错。

    3. 字面量和变量

    字面量:都是一些不可以改变的值,如1, 2, 4, 5;字面量可以直接使用,但是我们一般不会直接使用字面量。

    变量: 变量是用来保存字面量的,而且变量的值是可以任意改变的。变量更加方便我们使用,所以开发中都是通过变量去保存一个字面量,而很少直接使用字面量。

    4. 数据类型

    1. 基本数据类型:String、 Number、 Boolean、 Null、Undefined
    2. 引用数据类型:Object
    3. 使用typeof 变量可以检验一个变量的类型
    4. NaN是一个特殊的数字,表示Not A Number ,使用typeof检验一个NaN也会返回number
    5. 如果使用JavaScript进行浮点数运算,可能得到一个不精确的结果。
    6. Null类型的值只有一个,就是null, null这个值专门用来表示一个为空的对象,使用typeof检查null值时,返回Object。
    7. Undefined类型的值只有一个,就是undefined,当声明一个变量,但是并不给变量赋值时,他的值就是undefined,使用typeof检查一个undefined时会返回undefined。

    5. 类型装换

    • 其他类型转为String类型

      • 方式一:调用被转换数据类型的toString()方法。该方法不会影响到原变量,null和undefined没有该方法。
      • 方式二:使用String()函数,并将被转换的数据作为参数传递给函数。
    • 其他类型转换位Number类型

      • 方式一:使用Number()函数

        如果是纯数字的字符串吗,则直接转换位数字;如果字符串中有非数字的内容,则转换位NaN;如果字符串是一个空串或者是一个全是空格的字符串,则转换为0;true转为1,false转为0;null转为0;undefined转为数字NaN;

      • 方式二:parseInt()和parseFloat()函数,专门用来转换字符串的,如果是非String类型的变量会先转换为String再操作;

    6. ++a和a++

    a++的值等于原变量的值(自增前的值)

    ++a的值等于原变量的新值(自增后的值)

    var d = 20;
    
    // 20 + 22 + 22
    var result = d++ + ++d + d;
    console.log("result = " + result);
    
    var e = 20
    e = e++;
    console.log("e = " + e);//20
    

    a--的值等于原变量的值(自减前的值)

    --a的值等于原变量的新值(自减后的值)

    var n1 = 10, n2 = 20;
    
    var n = n1++;			//n1 = 11  n1++ = 10
    console.log('n=' + n);	//10
    console.log('n1=' + n1);//11
    n = ++n1;				//n1 = 12;  ++n1 = 12
    console.log('n=' + n);	//12
    console.log('n1=' + n1);	//12
    
    n = n2--;					//n2 = 19  n2-- = 20
    console.log('n=' + n);		//20
    console.log('n1=' + n2);	//19
    n = --n2;				//n2 = 18 --n2 = 18
    console.log('n=' + n);		//18
    console.log('n2=' + n2);	//18
    

    7. 逻辑运算符

    JS中为我们提供了三种逻辑运算符

    1. ! 非
      !可以用来对一个值进行非运算。所谓非运算就是值对一个布尔值进行取反操作,true变false,false变true。如果对一个值进行两次取反,它不会变化。如果对非布尔值进行元素,则会将其转换为布尔值,然后再取反。所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值。可以为一个任意数据类型取两次反,来将其转换为布尔值,原理和Boolean()函数一样。

    2. && 与
      &&可以对符号两侧的值进行与运算并返回结果,运算规则:
      两个值中只要有一个值为false就返回false,只有两个值都为true时,才会返回true。JS中的“与”属于短路的与,如果第一个值为false,则不会看第二个值。

    3. || 或
      ||可以对符号两侧的值进行或运算并返回结果,运算规则:
      两个值中只要有一个true,就返回true。如果两个值都为false,才返回false。JS中的“或”属于短路的或。如果第一个值为true,则不会检查第二个值。

    4. && || 非布尔值的情况

    对于非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,并且返回原值

    • 与运算:
      如果第一个值为true,则必然返回第二个值
      如果第一个值为false,则直接返回第一个值
    • 或运算:
      如果第一个值为true,则直接返回第一个值
      如果第一个值为false,则返回第二个值
    //与运算:如果两个值都为true,则返回后边的;如果两个值中有false,则返回靠前的false
    var result = 5 && 6;
    
    //如果第一个值为true,则直接返回第一个值
    result = 2 || 1;
    result = 2 || NaN;
    result = 2 || 0;
    
    //如果第一个值为false,则直接返回第二个值
    result = NaN || 1;
    result = NaN || 0;
    

    8. 相等运算符

    /*
    * 相等运算符用来比较两个值是否相等,
    * 	如果相等会返回true,否则返回false
    * 
    * 使用 == 来做相等运算
    * 	- 当使用==来比较两个值时,如果值的类型不同,
    * 		则会自动进行类型转换,将其转换为相同的类型
    * 		然后在比较
    * 不相等
    * 	 不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false
    * 	- 使用 != 来做不相等运算
    * 	- 不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false
    * 
    * 		
    *  ===
    * 		全等
    * 		- 用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换
    * 			如果两个值的类型不同,直接返回false
    * 	!==
    * 		不全等
    * 		- 用来判断两个值是否不全等,和不等类似,不同的是它不会做自动的类型转换
    * 			如果两个值的类型不同,直接返回true
    

    9. 特殊值undefined、null和NaN的比较和判断

    undefined衍生自null,所以两个值做相等判断时,会返回true;

    console.log(undefined == null); //true
    

    NaN不和任何值相等,包括他本身。因此,判断一个值是否是NaN时候,需要借助函数isNaN();

    var a = NaN;
    
    console.log(a == NaN);//false
    
    console.log(isNaN(a));//true;
    

    10. 对象

    1. 基本概念:

    JavaScript中的数据类型有String、Number、Boolean、Null、Undefined五种基本数据类型。只要不是上面的五种类型,都是Object对象类型。

    基本数据类型都是单一值,值和值之间没有任何联系。对象属于一种复合的数据类型,在对象中可以保存多个不同类型的属性。

    2.对象的分类:

    ①内建对象:由ES标准中定义的对象,在任何的ES的实现中都可以使用;比如Math、String、Number、Boolean、Function、Object。

    ②宿主对象:由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象比如BOM、DOM。

    ③自定义对象:由开发人员自己创建的对象。

    3. 对象的基本操作

    使用new关键词调用的函数,是构造函数constructor。构造函数是专门用来创建对象的函数。使用typeof检查一个对象时,会返回object。

    var obj = new Object();
    
    
    /*
     * 在对象中保存的值称为属性
     * 向对象添加属性
     * 	语法:对象.属性名 = 属性值;
     */
    
    //向obj中添加一个name属性
    obj.name = "孙悟空";
    //向obj中添加一个gender属性
    obj.gender = "男";
    //向obj中添加一个age属性
    obj.age = 18;
    
    /*
    * 读取对象中的属性
    * 	语法:对象.属性名
    * 
    * 如果读取对象中没有的属性,不会报错而是会返回undefined
     */
    
    console.log(obj.gender);
    console.log(obj.hello);
    
    /*
    * 修改对象的属性值
    * 	语法:对象.属性名 = 新值
    */
    obj.name = "tom";
    
    /*
     * 删除对象的属性
     * 	语法:delete 对象.属性名
    */
    delete obj.name;
    

    4. 属性名和属性值

    向对象中添加属性时,对象的属性名不强制要求遵循标识符的规范,什么乱七八糟的名字都可以使用,但是我们还是尽量按照标识符的规范去做。

    var obj = new Object();
    			
    obj.name = "孙悟空";
    

    如果要使用特殊的属性名,不能采用.的方式操作,需要使用另一种方式:

    语法:对象["属性名"] = 属性值

    读取时也需要采用这种方式。使用[]这样的形式去操作属性,更加的灵活,在[]中可以之际金额传递一个变量,这样变量值是多少就会读取那个属性。

    obj["123"] = 789;
    obj["nihao"] = "你好";
    var n = "nihao";
    //console.log(obj["123"]);
    

    JavaScript对象的属性值,可以是任何类型的数据类型,甚至也可以是一个对象。

    obj.test = true;
    obj.test = null;
    obj.test = undefined;
    
    //创建一个对象
    var obj2 = new Object();
    obj2.name = "猪八戒";
    
    //将obj2设置为obj的属性
    obj.test = obj2;
    

    in运算符:通过该运算符可以检查一个对象中是否含有指定的属性,如果有则返回true,没有则返回false。

    语法:"属性值" in 对象

    //检查obj中是否含有test2属性
    //console.log("test2" in obj);
    //console.log("test" in obj);
    console.log("name" in obj);
    

    11. 基本数据类型和引用数据类型

    基本数据类型:String、Number、Boolean、Null、Undefined

    引用数据类型:Object

    JavaScript中的变量都保存到栈内存中。基本数据类型的值直接在栈内存中存储,值和值之间是相互独立的,修改一个变量不会影响其他变量的值。

    引用类型的对象是保存在堆内存中,每创建一个新的对象,就会在堆内存中开辟一个新的空间,而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象的引用,当一个通过变量修改属性时,另一个也会受到影响。

    当比价两个基本数据类型的值时,就是比较的值。而比较两个引用数据类型时,他比较的时内存地址,如果两个对象一模一样,但是地址不一样,使用==比较时也会返回false。

    12. 对象的字面量

    创建一个对象可以使用关键词new

    var obj = new Object();
    

    也可以使用对象字面量来创建一个对象

    var obj = {}
    

    使用对象字面量,可以在创建对象时,直接指定对象中的属性,语法:

    {属性值:属性名, 属性名:属性值}
    

    对象字面量的属性名可以加引号也可以不加,建议不加,如果要使用一些特殊的名字,则必须加引号。

  • 相关阅读:
    js对象的直接赋值、浅拷贝与深拷贝
    如何使ElementUi中的el-dropdown传入多参数
    机器学习之垃圾邮件分类2
    机器学习之手写数字识别-小数据集
    机器学习之深度学习-卷积
    机器学习之朴素贝叶斯-垃圾邮件分类
    机器学习之分类与监督学习,朴素贝叶斯分类算法
    机器学习之主成分分析(PCA&特征选择)
    机器学习之逻辑回归实践
    机器学习之特征选择
  • 原文地址:https://www.cnblogs.com/itzhouq/p/JavaScript1.html
Copyright © 2011-2022 走看看