JavaScript基础语法

最新推荐文章于 2023-04-07 17:41:22 发布

Angletank

最新推荐文章于 2023-04-07 17:41:22 发布

阅读量167

点赞数

分类专栏： HTML CSS Javascript 文章标签： js javascript java 经验分享恰饭

本文链接：https://blog.csdn.net/Angletank/article/details/108287352

版权

HTML 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

Javascript

4 篇文章 0 订阅

订阅专栏

JavaScript基础语法

JavaScript

1.JavaScript 的组成

在这里插入图片描述

ECMAScript(基础语法)

JavaScript的核⼼语法ECMAScript描述了该语⾔的语法和基本对象

DOM(⽂档对象模型)

⽂档对象模型（DOM）—— 描述了处理⽹⻚内容的⽅法和接⼝

BOM(浏览器对象模型)

浏览器对象模型（BOM）—— 描述了与浏览器进⾏交互的⽅法和接⼝

2.基本⽤法

⾏内JS : 写在标签内部的js代码

<button onclick="alert('you clicked hered!!!')">click here</button>

内部JS : 定义在script标签内部的js代码

<script type="text/javascript" charset="utf-8">
 alert('this is inner js code')
</script>

外部JS : 单独的js⽂件，在HTML中通过script标签引⼊

js文件

alert('this is a outter js document');

.html

<!-- 在需要使⽤js的html⻚⾯中引⼊ -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

3.JavaScript基础语法

语句和注释

单⾏注释：⽤//起头；
多⾏注释：放在/* 和 */之间。
兼容html注释⽅式：<!-- -->

标识符和关键字

在这里插入图片描述

规则

由Unicode字⺟、_、$、数字组成、中⽂组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分⼤⼩写

规范

（1）⻅名知意
（2）驼峰命名或下划线规则

变量

变量的声明

// 先声明再赋值
var a ; 
a = 10;
// 声明同时赋值
var b = 20

变量的注意点

（1）若只声明⽽没有赋值，则该变量的值为undefined。

var box;
console.log(box);

（2）变量要有定义才能使⽤，若变量未声明就使⽤，JavaScript会报错，告诉你变量未定义。

console.log(box2);

（3）可以在同⼀条var命令中声明多个变量。

var a, b, c = 10;
console.log(a,b,c);

（4）若使⽤var重新声明⼀个已经存在的变量，是⽆效的。

var box = 10
var box;

（5）若使⽤var重新声明⼀个已经存在的变量且赋值，则会覆盖掉前⾯的值

var box = 10;
var box = 25;

（6）JavaScript是⼀种动态类型、弱类型语⾔，也就是说，变量的类型没有限制，可以赋予各种类型的值。

var box = 'hello world';
box = 10;

变量提升

JavaScript 引擎的⼯作⽅式是，先解析代码，获取所有被声明的变量，然后再⼀⾏⼀⾏地运⾏。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

console.log(msg);

var msg = "so easy";

// 变量提升，相当于下⾯的代码

var msg;

console.log(msg);

msg = "so easy";

// 说明： 最后的结果是显示undefined，表示变量msg已声明，但还未赋值。

注意：变量提升只对 var 命令声明的变量有效，如果变量不是⽤ var 命令声明的，就不会发⽣变量提升。

console.log(msg);
msg = "error";

数据类型

数 值（Number）： 整数和⼩数（⽐如 1 和 3.14）
字符串（String）： 字符组成的⽂本（⽐如"Hello World"）
布尔值（Boolean）：true（真）和 false（假）两个特定值
Undefined： 表示“未定义”或不存在，即此处⽬前没有任何值
Null： 表示空缺，即此处应该有⼀个值，但⽬前为空
对象（object）(引⽤) ： 各种值组成的集合
 1)、对象（object）{name:”zhangsan”,age:”18”}
 2)、数组（array）[1,2,3]
 3)、函数（function）function test()

undefined

undefined 类型的值是 undefined。undefined 是⼀个表示"⽆"的原始值，表示值不存在。

（1）当声明了⼀个变量⽽没有初始化时，这个变量的值就是 undefined

var box;

console.log(box); //undefined

（2）调⽤函数时，该函数有形参，但未提供实参，则该参数为 undefined。

function noData(str) { // js函数形参只需要变量名即可

 console.log(str); // undefined

}

noData(); // 调⽤⽅法时，未传递参数

（3）函数没有返回值时，默认返回 undefined。

// ⽅法没有返回值
function noData() {
 console.log("Hello");
}
var re = noData();// 定义变量接收⽆返回值的⽅法
console.log(re)

null

使⽤Null类型值时注意以下⼏点：

1）使⽤ typeof 操作符测试null返回object字符串。

2）undefined 派⽣⾃ null，所以等值⽐较返回值是true。未初始化的变量和赋值为null的变量相等。

console.log(undefined == null);
var box = null; // 赋值为null的变量
var a; // 未初始化的变量
console.log(a == box); // 两个的值相等

布尔类型

true、false

数值型

数值型包含两种数值：整型和浮点型。

console.log(1 == 1.0); // true
console.log(1 + 1.0); // 2
var num = 8.0; // ⾃动将可以转换为整型的浮点数转为整型
console.log(num); // 8

字符串

使⽤ ’ ’ 或 " "引起来，如：‘hello’，“good”。

使⽤加号 ‘+’ 进⾏字符串的拼接，如：console.log(‘hello’ + ’ everybody’);

对象

对象是⼀组数据和功能的集合。

说明：

{}：表示使⽤对象字⾯量⽅式定义的对象。空的⼤括号表示定义包含默认属性和⽅法的对象。

4.类型转换

⾃动类型转换

函数转换

parseInt()值转换成整数

在转换之前，

1.⾸先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，

2.如果不是，则直接返回NaN，不再继续，

3.如果是则继续，直到找到⾮字符

parseInt("1234blue"); // returns 1234
parseInt("22.5"); // returns 22
parseInt("blue"); // returns NaN

parseFloat()

parseFloat("1234blue"); // returns 1234.0
parseFloat("22.5"); // returns 22.5
parseFloat("22.34.5"); // returns 22.34
parseFloat("blue"); //returns NaN

显示转换

Number提供的toString()函数可以将数字转换为字符串。

Number还提供了toFixed()函数将根据⼩数点后指定位数将数字转为字符串，四舍五⼊

// 将内容转换为字符串形式
var data = 10
console.log(data.toString())
// 根据⼩数点后指定位数将数字转为字符串，四舍五⼊
data = 1.4;
console.log(data.toFixed(0));
data = 1.49;
console.log(data.toFixed(1));
 
// 不能对null和undefined使⽤
data = null
console.log(data.toString())
data = undefined
console.log(data.toString())

JS 为 Number、Boolean、String 对象提供了构造⽅法，⽤于强制转换其他类型的数据。此时操作的是整个数据，⽽不是部分。

Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number("5.5") 5.5
Number("56") 56
Number("5.6.7") NaN
Number(new Object()) NaN
Number(100) 100
Boolean(""); // false – empty string
Boolean("hi"); // true – non-empty string
Boolean(100); // true – non-zero number
Boolean(null); // false - null
Boolean(0); // false - zero
Boolean(new Object()); // true – object

String() 把任何值转换成字符串。

var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // won’t work, causes anerror

5.运算符

算数运算符

在这里插入图片描述

赋值和扩展运算符

在这里插入图片描述

⽐较运算符

在这里插入图片描述

逻辑运算符

在这里插入图片描述

三⽬运算符

在这里插入图片描述

6.控制语句

流程控制语句⼀共有三种：

\1. 流程执⾏:从上到下，从左到右

\2. 选择执⾏:分⽀选择

if语句

switch语句 switch中的值与case中的值用（===）比较

\3. 循环执⾏:重复执⾏

while

do…while

死循环

break 与 continue

break: 停⽌本层循环

continue:暂停本次循环，继续下⼀次

7.数组

数组定义

var arr = [值1,值2,值3]; // 隐式创建
var arr = new Array(值1,值2,值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定⻓度

基本操作

数组的⻓度可以通过length属性来获取，并可以任意更改

数组名.length
数组名.length = 新⻓度
数组名[下标]
数组名[下标] = 新值

数组遍历

普通的for循环遍历

for(var i=0; i<=数组.length-1; i++){
 
}
如：
for(var idx=0;idx<arr.length;idx++){
 console.log(arr[idx]);
}

for … in

for(var 下标(名称任意) in 数组名){
 数组名[下标]是获取元素
} // 下标(名称任意)
如：
for(var idx in arr){
 console.log(arr[idx]);
}

forEach

数组名.forEach(function(element,index){
 // element(名称任意)：元素，index(名称任意)：下标
}) 
如：
arr.forEach(function(elem,idx){
 console.log(idx + "-->" + elem);
});

了解

下标：

1.为⾮负整数(包括整数字符串)：⾃动从0开始,不存在添加 undefined

2.为负数、⼩数、⾮数字符串：这些内容不计算在⻓度内，当成"属性"处理，相当于⾃定义属性。

数组⾮常灵活，使⽤数组元素

1.下标: ⾮负整数(包括整数字符串)：

数组.下标

数组[下标]

2.下标：负数、⼩数、⾮数字字符串：

数组[属性]

* for --> 不遍历属性

* foreach -->不遍历属性和索引中的undefined

* for in -->不遍历索引中的undefined

数组提供的操作⽅法

Array对象为我们提供了⼀些⽅法，可以很⽅便地操作数组

push 添加元素到最后
unshift 添加元素到最前
pop 删除最后⼀项
shift 删除第⼀项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切⽚）数组，原数组不发⽣变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并

var arr = ['1','a',5,'3'];
console.log(arr);
arr.push(10);
console.log(arr);
arr.unshift('b');
console.log(arr);
arr.pop();
console.log(arr);
arr.shift();
console.log(arr);
arr.reverse();
console.log(arr);
console.log(arr.join('\''));
console.log(arr);
console.log(arr.indexOf('a'));
console.log(arr.slice(2,5));
console.log(arr);
arr.splice(1,1,'⼀','⼆');
console.log(arr);
var arr1 = [0,'100'];
console.log(arr.concat(arr1));
console.log(arr);
console.log(arr1);
console.log(arr1.(arr));

8.函数

函数也是对象。

函数的定义

函数声明语句(该种⽅式定义的函数具有声明提升的效果)

function 函数名([参数列表]){
 
}
例如：
function foo(){
 console.log(1);
}
foo();

函数定义表达式

var 变量名 = function ([参数列表]) {
 
}
变量名();
例如：
var fun = function(){
 console.log("Hello");
}
fun();

Function构造函数

var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
 return (x + y);
}
add();

注意：

\1. js中的函数没有重载，同名的函数，会被后⾯的函数覆盖。

\2. js中允许有不定数⽬的参数，后⾯介绍arguments对象

函数的参数、调⽤和return语句

参数

函数的调⽤

常⽤调⽤⽅式

函数名([实参]);

存在返回值可以变量接收，若接收⽆返回值函数则为undefined。

函数调⽤模式

function add(a,b){
 return a+b; }
var sum = add(1,2)
console.log(sum);

⽅法调⽤模式

var o = {
 m: function(){
 console.log(1);
 }
};
o.m();

return

作⽤：

\1. 在没有返回值的⽅法中，⽤来结束⽅法。

\2. 有返回值的⽅法中，⼀个是⽤来结束⽅法，⼀个是将值带给调⽤者。

函数的作⽤域(注意：仅在函数中由作用域)

函数作⽤域：全局 (global variable) 和局部 (local variable)

全局变量与局部变量同名问题

var box =1; // 全局变量
function display(box){
 var box = 3; // 此处box与全局变量box没有关系，这⾥的box为传递的参数，相当于新声明的局部变量
 var b = 2; // 局部变量
 console.log("box-->" + box);
}
display();
// b 不能访问
console.log("b-->" + b);

在函数中定义变量时，若没有加var关键字，使⽤之后⾃动变为全局变量

function fun(){
 a = 100; }
fun();
alert(a);

9.内置对象

Arguments 只在函数内部定义，保存了函数的实参
Array 数组对象
Date ⽇期对象，⽤来创建和获取⽇期
Math 数学对象
String 字符串对象，提供对字符串的⼀系列操作

String

◦ charAt(idx) 返回指定位置处的字符
◦ indexOf(Chr) 返回指定⼦字符串的位置，从左到右。找不到返回-1 ◦ substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
◦ substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末
尾。
◦ toLowerCase() 将字符串中的字符全部转化成⼩写。
◦ toUpperCase() 将字符串中的字符全部转化成⼤写。
◦ length 属性，不是⽅法，返回字符串的⻓度。

Math

◦ Math.random() 随机数
◦ Math.ceil() 向上取整，⼤于最⼤整数
◦ Math.floor() 向⼩取整，⼩于最⼩整数String

Date

// 获取⽇期
◦ getFullYear() 年
◦ getMonth() ⽉ 
◦ getDate() ⽇
◦ getHours() 时 
◦ getMinutes() 分 
◦ getSeconds() 秒
// 设置⽇期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换成本地时间字符串

说明：

\1. getMonth()：得到的值：0_11（1⽉12⽉）

\2. setMonth()：设置值时0~11

\3. toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。

10.对象

谓对象，就是⼀种⽆序的数据集合，由若⼲个"键值对"（key-value）构成。

JavaScript 的所有数据都可以被视为对象。

JavaScript对象满⾜的这种"键值对"的格式我们称为JSON格式。

对象的创建

字⾯量形式创建

var 对象名 = {};//创建⼀个空的对象
var 对象名 = {键:值,键2:值2,...}
var obj = {
 'name' : 'hello',
 age : 12,
 sayHello : function () {
 console.log("我是对象中的⽅法");
 },
 courses : {
 javase : 4,
 javascript : 3
 },
 isLike : true,
 members : [
 {name : "⼩红",age : 20},
 {name : "⼩绿",age : 22},
 {name : "⼩蓝",age : 27},
 {name : "⼩⻩"}
 ]
};

通过new Object创建

var 对象名 = new Object(); // 创建⼀个空的对象
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);

通过Object对象的create⽅法创建

var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);
 
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)

对象的序列化和反序列化

// 序列化对象，将对象转为字符串
JSON.stringify(object
// 反序列化，将⼀个Json字符串转换为对象。
JSON.parse(jsonStr);

this

在函数中使⽤this属于全局性调⽤，代表全局对象，通过window对象来访问。

function test () {
 this.x = 1;
 console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性
var x = 10;
console.log(x) // 10
function test (){
 console.log(this.x) // 10
 this.x = 1;
 console.log(this.x) // 1
 console.log(this) }
test();
console.log(x); // 1
console.log(this);

在对象中使⽤this

在对象中的函数使⽤this，代表当前的上级对象。

var obj = {
 name : '张三',
 age : 20,
 sayHello : function () {
 console.log(this.name)
 console.log(this)
 } }
obj.sayHello();

Angletank

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础语法

JavaScript基础语法JavaScript1.JavaScript 的组成ECMAScript(基础语法)JavaScript的核⼼语法ECMAScript描述了该语⾔的语法和基本对象DOM(⽂档对象模型)⽂档对象模型（DOM）—— 描述了处理⽹⻚内容的⽅法和接⼝BOM(浏览器对象模型)浏览器对象模型（BOM）—— 描述了与浏览器进⾏交互的⽅法和接⼝2.基本⽤法⾏内JS : 写在标签内部的js代码<button onclick="alert('you clicked her
复制链接

扫一扫