JavaScript基础语法及数据类型

Oʀɪɢɪɴᴀʟ .822

已于 2023-10-27 16:18:53 修改

阅读量85

点赞数

文章标签： javascript 前端开发语言

于 2023-10-26 19:07:50 首次发布

本文链接：https://blog.csdn.net/weixin_70374250/article/details/134062725

版权

js基础语法

JS概念

JavaScript是用于实现用户交互、动态控制文档的外观和内容,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言

特点

是基于对象的弱类型语言
- 弱类型语言：是一种弱类型定义的语言，某一个变量被定义类型，该变量可以根据环境变量自动进行转换，不需要经过显性强制转换。弱类型语言包括vb，php，javascript等。
- 强类型语言：是一种强制类型定义的语言，一旦某一个变量被定义类型，如果不经过强制转换，则它永远就是该数据类型了，强类型语言包括java，net，c++等
跨平台
- Linux，windows，mac只要有浏览器，就能够运行
事件驱动
- 鼠标点击，鼠标悬浮，鼠标移动，键盘按下，键盘弹起，获取焦点，失去焦点，加载等常用的事件

如何在HTML中引入Javascript

引入js文件
写在script标签内部（可以使用多个，每一个之间都是有联系的）
注意事项：
- js代码必须放在结束的后面【原因：js会阻塞dom的解析；当js加载没有完成，页面是不会继续往下执行的】
- 在head中添加js代码，必须使用window.onload
- 不能在style中添加js代码

如何在HTML中使用Javascript

使用事件传入javascript代码

  <div onclick="alert('hello world')"></div>

使用超链接传入javascript代码

<a href="javascript:alert('hello world');"></a>

如何在页面输出JavaScript

alert（"这是我的输出页面"）；弹窗输出
document.write（“这是我输出的内容”）；在页面输出，可以输出标签
console.log（）在控制台中打印，打印任意字符或者js的变量信息；可以接受任何字符串、变量、数字、对象；

JS的命名规范

命名规范
1. 一定要有意义
2. 不能以数字开头
3. 第一个字符必须是一个字母、下划线或是一个美元符号$
4. 其他字符可以是字母、下划线、美元符号或是数字
5. 不能是系统的关键词
6. 推荐使用小驼峰命名法
javascript区分大小写变量名、函数和操作符，第一个单词小写以后每个单词首字母大写（getElementById 、aaBbCc）驼峰式命名法
注意：不能把关键字、保留字、true、false和null用作标识符

JS语句与注释

javaScript中的语句以一个分号结尾，如果省略分号，则由解析器确定语句的结尾，一般情况下，换行会被当做一个语句的结尾

alert('hello world') ;
document.write('hello world');

注释

//…… 单行注释

/…/ 多行注释

数据类型

变量命名规则

1. 第一个字符必须为字母，_或$，其后的字符还可以是数字
2. 严格区分大小写，要有一定的含义
3. 建议使用小驼峰规则来命名变量。redApple
4. 不能使用关键词，保留字作为变量名

变量的命名和赋值

var 变量名变量名=值
var 变量名=值
变量名=值
var 变量1=值1，变量2=值2，变量3=值3

注意：

变量名是浏览器关闭后才释放在，在没关闭之前随时使用
重新声明的变量，不会丢失原始值，除非重新赋值
换行是语句的结束，最好结束时都加上 “ ； ”

JavaScript的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）； js常用的基本数据类型包括

undefined - - (未定义)、null- - (空的)、number - - (数字)、boolean- - (布尔值)、string- - (字符串)

js的引用数据类型也就是

对象类型Object- - (对象)，比如：array - - （数组）、function - - （函数）、data - - （时间）等；

JS为弱类型语言，不必声明数据类型，而是在使用或赋值的时候确定其类型

强类型语言/弱类型语言

强类型语言【java】：

要求变量的使用要严格符合定义，所有变量都必须先定义后使用。
一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了

弱类型语言【js/python/php】：

它与强类型定义语言相反, 一个变量可以赋不同数据类型的值

对象类型

本地对象：string，Array，Date，Math，Golbal，独立于宿主环境的ECMAScript实现提供的对象
宿主对象：DOM，BOM。ECMAScript中的‘宿主’就是我们网页的运行环境，即‘操作系统’和‘浏览器’

判断数据类型

可以通过typeof运算符来判断数据类型

String

js中用来表述文本的数据类型

字符串用单引号或双引号包括起来
单双引号均不能解析变量
变量与字符串，变量与变量之间可以使用运算符‘+’来链接
单引号和双引号可以互相嵌套，如果单引号中要嵌套单引号，需要使用转义字符

转义字符

注意：

\n换行（在alert中生效）
8进制表示法【进行两次转换，这里面的数字是ASCII中表示的八进制数字】
16进制表示法
16进制unicode表示法

Number

按照进制划分：二进制、八进制、十进制、十六进制按照其他划分：整形、浮点型、NaN（not a number） js中所有的数字是以IEEE-75标准格式表示的，浮点数的精确问题不是js特有的；因为有点小树以二进制表示位数是无穷的

整形： 0，6，-100，0xff00（十六进制），0377（八进制），0b1010（二进制），不管输入的是几进制，最终显示时都会转为10进制

浮点型： 1.2，0.123，3.14e11=>3,14*10^11 科学计数法

0.375+0.248.toFixed(2)=>保留两位小数（四舍五入）
console.log(1.0-0.9==0.1)//false
console.log(1.0+0.9==1.9)//true

NaN（not a number）： NaN是一个特殊的number值，not a number表示非数字，当程序由于某种原因计算错误时，将产生一个无意义的数字NaN NaN与任何值都不想等，包括NaN本身任何涉及NaN的操作，结果都为NaN

var a='hello';
b=10;
alert(a-b)  // NaN

Boolean

值只有true和false。分别代表逻辑真与假
布尔值通常用来表示比较所得的结果
true和false是严格区分大小写的

var n=10;
if(n>8){
    alert('我是true');
}else{
    alert('我是false');
}

undefined

定义了一个变量但没有为该变量赋值，使用了一个并未赋值的变量
使用了一个不存在的对象的属性时

var n;
alert(n);

var people=new Object; // 创建一个object对象
people.height =162;  // 添加属性height
alert(people.height);  // 输出属性height
people.show=function(){  // 添加方法show
  alert(this.color);   // 调用属性color
  alert(this.height);  // 调用属性 height
}
people.show()  // 调用方法show

null

null表示一个空值
null不等于空字符串""、''或0
null和undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值

null值表示一个空对象指针，它代表的其实就是一个空对象，所以使用typeof操作符检测时返回”object”

在JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null的类型标签也成为了 0，typeof null就错误的返回了”object”。在ES6中，当时曾经有提案为历史平凡, 将type null的值纠正为null, 但最后提案被拒了,所以还是保持”object”类型
————————————————
原文链接：https://blog.csdn.net/zsd0819qwq/article/details/105290202

Array(数组)

创建数组方法一：var 数组名=new Array(); 方法二：var cars=new Array("Audi","BMW","BYD"); 方法三：var cars=["Audi","BMW","BYD"];

获取数组中的值

var arr = ['少林寺','龙门石窟','二七塔','华谊电影小镇'];
console.log（arr[0]）;
console.log（arr[1]）;
console.log（arr[2]）;
console.log（arr[3]）;

循环输出所有的数据

var cars=new Array("Audi","BMW","BYD");
for(i=0;i<cars.length;i++){
  document.write(cars[i]+"<br/>")
}

多维数组

var arr = [
  ['北京','上海','深圳'],
  ['合肥','石家庄','昆明'],
  ['','','']
];
console.log（arr[0]）;
console.log（arr[1]）;
console.log（arr[2]）;
console.log（arr[3]）;

Object 对象

对象： { },使用{ }包括起来的都是对象 [ ], 使用[ ]包括起来的都是数组

创建对象：方法一：var 对象名称 = new Object();

方法二：var 对象名称 = {'键'：‘值’，'键'：‘值，'键'：‘值，'键'：‘值}；

创建对象

    // 车
    var car = new Object();
    // 属性
    car.color = 'red';
    car.brand = 'BMW';
    car.price = 28.5;
    // 方法
    car.run = function(){
        console.log('我能跑');
    }
    car.stop = function(){
        console.log('我能停止');
    }
    car.setSpeed = function(){
        console.log('我能定速巡航');
    }

获取对象中的属性和方法

// 调用整个对象
console.log(car);
// 类似数组的方式调用
console.log(car['color']);
console.log(car['price']);

// 使用对象的方式调用
console.log(car.color)
console.log(car.price); 
// 调用对象里面的方法
car.run();

使用第二种方式创建人的对象

var obj2 = {
    // 定义属性
    'name':'jack',
    'sex':'男',
    'age': 18,
    // 创建方法
    'eat':function(){
        console.log('我能吃');
    },
    'sleep':function(){
        console.log('我能睡觉');
    }
};
console.log(obj2);
// 调用属性
console.log(obj2.name);
// 调用方法
obj2.eat();

JS的严格模式

在js中存在一个严格模式，使用 use strict来定义；这个是ES5中新增加的；

"use strict";
x = 3.14; 
console.log(x);

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

Oʀɪɢɪɴᴀʟ .822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础语法及数据类型

JavaScript是用于实现用户交互,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言。
复制链接

扫一扫