JavaScript—数据类型、对象与构造方法

这篇具有很好参考价值的文章主要介绍了JavaScript—数据类型、对象与构造方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

js是什么?

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

js有哪些特点呢?

(1)脚本语言。js不编译,直接解释执行

  1. (2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,声明时不会检查数据类型,任何赋值都可以成功,程序自动识别

(4)动态性。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。

C++

C#

派生类继承了哪些?

一个派生类继承了所有的基类方法,但下列情况除外:

  • 基类的构造函数、析构函数和拷贝构造函数。
  • 基类的重载运算符。
  • 基类的友元函数。

继承父类所有非私有的属性方法

个数

一个子类可以有多个父类

一个子类只能有一个父类

传递性

不可以

可传递。B继承A,A又继承C,B既继承A的属性方法,又继承B的属性方法

隐藏基类

如果派生类中存在和基类同名的函数,基类就会隐藏这个同名的函数。

借助作用域分解操作才能访问这些被隐藏的函数

可以重写,但不隐藏

js有哪些功能?

编辑语音

1.嵌入动态文本于HTML页面。[7] 

2.对浏览器事件做出响应。[7] 

3.读写HTML元素。[7] 

4.在数据被提交到服务器之前验证数据。[7] 

5.检测访客的浏览器信息。[7] 控制cookies,包括创建和修改等。[7] 

6.基于Node.js技术进行服务器端编程。

为什么要学js?

web开发必须语言之一,让页面动态显示

html、css、js三者的关系是怎样的?

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 控制了网页的行为


JavaScript—数据类型、对象与构造方法,javascript,开发语言

JavaScript—数据类型、对象与构造方法,javascript,开发语言

DOM(文档对象模型):对节点增删改查

BOM(浏览器对象模型):浏览器兼容性

jQuery

JavaScript—数据类型、对象与构造方法,javascript,开发语言

📎js-邓礼梅-2021年11月12日-V1.0.xmind


基础知识

如何使用js?

head标签中添加<script type="text/javascript"></script>

第一个js程序

<html>
	<head>
		<title></title>
		<style type="text/css">			
		</style>
		<script type="text/javascript">
			//alert("Hello World");      //相当于C#的Messagebox.show
			console.log("Hello World");  //前台不显示,打印在后台
		</script>
	</head>
	<body>
	</body>
</html>

注释

// 行注释

/*  */ 块注释

快捷键

notepad++快捷键

Ctrl+K:多行注释

Ctrl+q:取消多行注释

Ctrl+shift+K:

命名规则

C# :帕斯卡,GetMax(int num1,int num2)

js:骆驼命名规则,getMax(num1,num2)

特点:

  • 大小写敏感
  • js不编译,直接解释执行

打印

Alert("Hello World");  (弹出警告框。相当于C#的Messagebox.Show,缺点:会阻塞程序)

console.log("Hello World");   写入到浏览器的控制台

alert和console有什么区别?

相当于C#的Messagebox.Show

前台不显示,打印在后台

既然有了alert为什么还有console

每执行一次alert就会阻塞程序,console不需要阻塞程序就直接在后台打印内容


变量

C# 使用数据类型声明变量

int num =0; //需要检查类型赋值如果不符合要求就报错,编译不通过

int num ="123"; 报错

Js 使用var声明变量

var num =123; //不会检查类型,任何赋值都可以成功

js不编译,直接解释执行

变量声明需要注意:

1、在js中只有函数可以限定作用域的范围

2、变量的作用范围除了在制定函数内以外,还有一个特殊的作用域,就是没有用var声明的全局作用域,一般不建议使用

3、在变量作用域中,内部代码可以访问外部的变量

4、重复声明变量相当于赋值操作

var n = 10;

var n = 20;

等价于:var n = 10;

n = 20;


运算符

算术运算符

JavaScript—数据类型、对象与构造方法,javascript,开发语言

赋值运算符

JavaScript—数据类型、对象与构造方法,javascript,开发语言

x=5+5;
y="5"+5;
z="Hello"+5;

x,y, 和 z 输出结果为:
10
55
Hello5
比较运算符

JavaScript—数据类型、对象与构造方法,javascript,开发语言

逻辑运算符

JavaScript—数据类型、对象与构造方法,javascript,开发语言

条件运算符

variablename=(condition)?value1:value2

如果变量 age 中的值小于 18,则向变量 voteable 赋值 "年龄太小",否则赋值 "年龄已达到"。
voteable=(age<18)?"年龄太小":"年龄已达到";

流程控制语句

条件语句
  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

JavaScript—数据类型、对象与构造方法,javascript,开发语言

循环语句
  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

JavaScript—数据类型、对象与构造方法,javascript,开发语言

for-in实战
<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        //遍历数组
                        var arr =[2,3,4,"abc",true];   //字面值
                        for(var item in arr){
                                //alert(item);   //输出的是索引
                                console.log(arr[item]);   //输出具体值
                        };var arr =[2,3,4,"abc",true];   //字面值
                        for(var item in arr){
                                //alert(item);   //输出的是索引
                                console.log(arr[item]);   //输出具体值
                        };
                        
                        
                        //遍历键值对(json)
                        var kv ={
                                "key1":"邓礼梅",
                                "key2":"王思琪"
                        };
                        for(var key in kv){
                                console.log(key);      //输出key1  key2
                                console.log(kv[key]);  //输出具体的key值
                        }
                </script>
        </head>
        <body>
        
        </body>
</html>
求水仙花数
<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        //1到100的和
                        //方法1循环
                        var sum =0; 
                        for(var i=1;i<=100;i++){
                                sum +=i;
                        }
                        alert(sum);
                        
                        //方法2公式
                        //(1+100)*/2
                        var n =100;
                        var sum =(1+n)*n/2;
                        alert(sum);
                        
                        //水仙花数
                          for(var i=100;i<1000;i++){
                                var gNum=i%10;
                                var sNum =parseInt(i/10)%10;
                                var bNum =parseInt(i/100);
                                if(i == (Math.pow(gNum,3)+Math.pow(sNum,3)+ Math.pow(bNum,3))){
                                        console.log(i);
                                }
                        }
                </script>
        </head>
        <body>
        
        </body>
</html>

问题:求

1-2+3-4+……100

1+2-3+4-……100

parseInt:小数变整数



函数

基于原型继承的,本质上还是面向对象

C#:函数、方法一样

js:不一样

Function:
Function 函数名(参数列表){
	//函数体
	//如果有返回值直接return即可
}
Lambda:
Lambda函数(匿名函数){
Var func=function(参数){
	方法体
};
在C#中委托如何使用的?
声明委托类型
定义委托变量
授权方法(匿名)
	Func = delegate(参数) { 方法体 };
	Func= (参数) => { 方法体 };
使用委托变量调用方法
实战—求数组的最大数
<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                //js中使用驼峰命名法
                //参数表中不用指明变量类型
                <!-- //求两数的最大值
                        function getMax(num1,num2){
                                return num1 > num2 ? num1:num2;
                        }
                                
                        alert (getMax(100,23)); -->
                        
                        //求数组的最大数
                        var arr = [1,3,-4,-200];
                        var getMax =function(arr){
                                var max =arr[0];
                                for(var i =1;i<arr.length;i++){
                                         if(arr[i] > max ){
                                                max =arr[i];
                                        }
                                }
                                return max;
                        };
                        
                        alert (getMax(arr));
                </script>
        </head>
        <body>        
        </body>
</html>
arguments参数

函数内部都有一个arguments参数,表示函数的参数

像数组的对象

js不支持重载,但利用arguments帮助实现了重载

<script type="text/javascript">
        var func = function(n1,n2){
                var arr = arguments;  //引用
                for(var i = 0 ; i<arr.length ; i++){
                        console.log(arr[i]);
                }
        };

        func(1,2,3,4,"测试",true);
</script>

F12打印出:

JavaScript—数据类型、对象与构造方法,javascript,开发语言

function f(){
   alert(arguments[0]);   //打印123
   alert(arguments[1]);   //打印456
   alert(arguments[2]);   //打印undefined
}

f(123,456);

自动获取传进来参数对应的下标值


Function对象(动态函数)

语法
var func = new Function(……);
//Function参数中最后一个参数是方法体,前面的参数都是该方法的参数
//参数类型都是字符串
和其他函数写法有什么不同?
Var getMax = function (n1 , n2 ) {
	Return n1 > n2 ? N1 : n2;
};  (原本的写法)

Function对象的写法:
Var func = new Function ("n1" , "n2" , " return n1>n2?n1:n2;");
这样的好处是什么?

将字符串变成函数

<html>
        <head>
                <title></title>
                <style type="text/css">			
                        #txt{
                                width:500px;
                                height:400px;
                        }
                </style>
                <script type="text/javascript">
                        var func = function(){
                                //获得页面中id为txt的元素
                                //value属性获得其中的值
                                var txt = document.getElementById("txt").value;   //这里的txt变量实际获得是字符串
                                //new Function(txt)();
                                var func1= new Function(txt);   //把字符串当作函数去执行
                                func1();
                        };
                </script>
        </head>
        <body>
                <textarea id ="txt"></textarea><br/>
                <input type="button" value="点击执行" onclick="func();"/>
        </body>
</html>

JavaScript—数据类型、对象与构造方法,javascript,开发语言

JavaScript—数据类型、对象与构造方法,javascript,开发语言

JavaScript—数据类型、对象与构造方法,javascript,开发语言

NaN=not a number

json对象

用花括号包含变量

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #txt{
                width:150px;
                height:150px;
        }
    </style>
        <script type="text/javascript">
                var o ={
                        name:"张三",
                        sex:"男",
                        age:19,
                        sayHello:function(){
                                alert("你好")
                        }
                };
                
                alert(o.name);
                alert(o.sex);
                alert(o.age);
                o.sayHello();
        </script>
</head>
<body>
        
  
</body>
</html>

数据类型

基本类型:数字类型、布尔类型、字符串类型

引用类型:对象类型(Object)、函数类型(Function)、数组(Array)

空类型:null、undefined

运算符:typeof(用来检测一个变量的类型)

   语法:typeof (变量):对变量做运算

typeof(表达式):对表达式做运算

<script type="text/javascript">
	//基本数据类型
	alert (typeof "123");
	alert (typeof 123);
	alert(typeof true);			
	
	//对象类型:都返回object
	alert(typeof {});
	alert(typeof new Array());
	alert(typeof new Date());
  var cars=new Array("Saab","Volvo","BMW");  //数组
  var person={firstname:"John", lastname:"Doe", id:5566};  //对象
	
	//函数类型
	var func = function(){};   //定义函数
	alert(typeof func);        //打印object
	alert(typeof typeof func);  //打印string
	
	//空类型
	var num=null;   //int num;object num
	var num;   //undefined
	alert (typeof num);
</script>

js是一个弱类型的语言

弱类型不代表没有类型, 不严格的检查类型。它在声明变量时无需确定变量的类型,js在运行时会自动判断。那么如何判断一个变量的类型呢?js提供了typeof运算符,用来检测一个变量的类型

//C#
int num =0;       //需要检查类型赋值如果不符合要求就报错,编译不通过
int num ="123";  报错
         
         
//Js:使用var声明变量(js不编译,直接解释执行)
var num =123;    //不会检查类型,任何赋值都可以成功
注意
  • 在js中双引号和单引号都表示字符串
<input type="button" onclick="alert("Hello World")"/>   //此时认为是:alert(是一个字符串,)是一个字符串,Hello World是一个无法识别的东西
  <input type="button" onclick="alert('Hello World')"/>   //用单引号括起来
  • 数组
//以下这两种写法都是创建一个数组
var arr1 = [];          //字面值,直接量
var arr2 = new Array(); //用构造函数创建数组

字面值创建的好处是什么呢?

减少相应的逻辑计算,比较直观


类型转换

JavaScript—数据类型、对象与构造方法,javascript,开发语言

数字—>字符串
  • String(数字)
  • 数字+""
  • 数字.toString()
字符串—>数字
  • 字符串-0
  • Number(字符串)
  • parseInt() parseFloat()
转boolean

if(!!val){

}

常常会有能力判断

var o ={ };

不知道o里面有没有foo这个方法,如果有,那么就不添加

如果没有,就添加(某一个对象是否具有某个方法,如果有使用自定义,如果没有就手动的添加一个,一边调用)

if(!o.foo){

o.foo=function(){ };

}

o.foo( );

//典型的就是jQuery中trim方法


包装类型

  • 基本类型:number、string、boolean
  • 包装类型:Number、String、Boolean

基本类型不是对象,那么就不具备方法,只是一个简单的数据

在执行诸如“num.toString()"的时候

编译器会自动的根据num生成一个Number类型的对象,并调用toString方法

将结果返回,然后释放Number对象,等待垃圾回收

 文章来源地址https://www.toymoban.com/news/detail-683222.html

到了这里,关于JavaScript—数据类型、对象与构造方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python-面向对象:面向对象、成员方法 、类和对象、构造方法、魔术方法、封装、继承、类型注解、多态(抽象类(接口))

    当前版本号[20230806]。 版本 修改说明 20230806 初版 生活中数据的组织 学校开学,要求学生填写自己的基础信息,一人发一张白纸,让学生自己填, 易出现内容混乱 但当改为登记表,打印出来让学生自行填写, 就会整洁明了 程序中数据的组织 在程序中简单使用变量来记录学

    2024年02月14日
    浏览(49)
  • Python的类与对象、构造方法、类与对象三大特性封装、继承和多态、类型注解

      使用对象组织数据 在程序中是可以做到和生活中那样,设计表格、生产表格、填写表格的组织形式的。 在程序中设计表格,我们称之为: 设计类(class) class Student: name None #记录学生姓名 在程序中打印生产表格,我们称之为: 创建对象 #基于类创建对象 stu_1 Student() stu_2 St

    2024年02月02日
    浏览(53)
  • JavaScript:js数组/对象遍历方法

    一、js遍历方法 序号 方法 描述 1 for 使用最基本的for循环可以遍历数组 2 for of for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值,而不是索引。 3 for in for...in语句用来遍历对象的可

    2024年02月09日
    浏览(55)
  • JavaScript -- Map对象及常用方法介绍

    Map用来存储键值对结构的数据**(key-value)** Object中存储的数据就可以认为是一种 键值对结构 Map和Object的主要区别: Object中的属性名只能是 字符串或符号 ,如果传递了一个其他类型的属性名,JS解释器会自动将其 转换为字符串 Map中任何类型的值都可以成为数据的key map.si

    2024年02月10日
    浏览(48)
  • JavaScript 入门指南(二)JavaScript 的数据类型

    undefined 类型:只有一个值 undefined(未定义),它是一个保留字。表示变量虽然已经声明,但却没有赋值 number 类型:所有的整数和小数 注: NaN 是一个特殊的数字值( typeof NaN 的结果为 number ),是 not a number 的缩写,表示不是一个合法的数字。不是数字的字符串通过函数进

    2024年03月27日
    浏览(61)
  • 【JavaScript】对象 ② ( 对象使用 | 调用对象属性 | 调用对象方法 | 变量与属性区别 | 函数与方法区别 )

    使用字面量创建对象要点 : 在上一篇博客 【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对象 | 空对象字面量 | 小括号 / 中括号 / 大括号 作用 ) 中 , 介绍了 使用 字面量 创建对象 , 有如下要点 : 键值对 : 对象字面量 中的 属性 和 方法 都是以 \\\" 键值对 \\\" 的形

    2024年04月14日
    浏览(52)
  • 【JavaScript精通之道】掌握数据遍历:解锁现代化遍历方法,提升开发效率!

    ​ 🎬 岸边的 风 :个人主页  🔥  个人专栏  :《 VUE 》 《 javaScript 》 ⛺️  生活的理想,就是为了理想的生活 ! ​ 目录  📚 前言  📘 1. reduce方法 📘 2. forEach方法 📘 3. map方法  📘 4. for循环 📘 5. filter方法 📘 6. for...of循环 📘 7. Object.keys方法 📘 8. Object.values方法 📘

    2024年02月10日
    浏览(44)
  • JavaScript判断对象是否为空对象的几种方法

    目录 1、空对象对应的字符串为 \\\"{}\\\" 2、for in 3、jquery 的 isEmptyObject()方法 4、Object.getOwnPropertyNames() 5、ES6 的 Object.keys() JSON.stringify()扩展 1、第一大特性 小结 2、第二大特性 3、第三大特性 4、第四大特性 5、第五大特性 6、第六大特性 7、第七大特性 8、第八大特性 var data = {}; v

    2024年01月16日
    浏览(86)
  • 掌握 JavaScript:从初学者到高级开发者的完整指南之JavaScript对象(二)

    可以大体分页3大类: 第一类:基本对象,我们主要学习Array和JSON和String 第二类:BOM对象,主要是和浏览器相关的几个对象 第三类:DOM对象,JavaScript中将html的每一个标签都封装成一个对象 1.1.1 基本对象 1.1.1.1 Array对象 语法格式 Array对象时用来定义数组的。常用语法格式有如下

    2024年02月07日
    浏览(58)
  • JavaScript Array对象(属性、方法) 留言板案例

    一、创建数组对象的方式 var arrOb=new Array(值,........) var arrOb=Array(值,.......) var arrOb= [ 值,.........] var arrOb=new Array(n); arrOb [ 0]=值1; arrOb [ 1]=值2; 二、数组的属性 length      //数组中元素的数目 三、数组的方法 1、转为字符串 2、 join(\\\'连接符\\\')         将数组元素连接成字符串   

    2024年02月06日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包