JavaScript笔记(回顾一,基础知识篇)

简介: JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。

javascript是什么?

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。

ECMAScript是什么?

ECMAScript是脚本语言的一种标准化规范。ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。

JavaScript语法

1.字面量

一般固定不变的值,称为字面量。

-数字型字面量(整数,小数,或者科学计数) 3.14 , 13e6 , 1024 这些数字都可以作为字面量。

-字符型字面量(用单引号或者双引号括起来的字符串)
“hello world” ,‘c’

–同理,表达式字面量,数组型字面量,对象型字面量…

<script type="application/javascript">
        console.log(3.14);//数字型字面量
        console.log(1+2);//表达式字面量
        console.log("hello world");//字符型字面量
        console.log([0,2,3,7]);//数组型字面量
        console.log({
   name:"bird",age:21,sex:"男"});//对象型字面量
        //tip: console.log() 相当于java中的system.out.println()控制台打印输出
</script>

在浏览器控制台中查看输出
进入开发者工具
字面量

2. 变量

  • 在JS中,变量由(var let )来定义,let和var的区别在后面会说。
  • 标识符的定义
    不能以数字开头,可以以字母,符号下划线开头,由数字字母下划线特殊符号组成。JavaScript严格区分大小写。

JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好世界</title>
    <script type="application/javascript">
        var a =5;//定义一个变量 a且它的值为5
        var b =6;
        var sum =a+b;
        console.log(sum);//打印输出sum
    </script>
</head>
<body>

</body>
</html>

控制台查看输出

let和var 定义变量的区别

1.使用未声明的变量

<script type="application/javascript">
        console.log(a);//打印undefined
        console.log(b);//直接报错
        var a = 3;
        let b =2;
</script>

未声明变量使用反馈

  • 2.声明后不赋值,默认值都为undefined
  • 3.变量作用域范围不同,var 类似全局变量,let类似局部变量
<script type="application/javascript">
       var a = "var 1";
       let b = "let 1";//此时的let b相当于当前的全局变量
       {
   
           var a = "var 2";
           let b ="let 2";//只在大括号内有效(存在)
           console.log("内部let\t"+b);
       }
       console.log("被覆盖掉了重新赋值"+a);
       console.log("外部le\t"+b);
</script>

局部与全局变量

3.操作符

赋值,算术和位运算符 = + - * /

条件,比较及逻辑运算符 == != < > && || !

注意,在js中==并不代表全等。

在js中== 和 === 的区别

\== 只判断值是否一致,它会自动替我们做数据类型转换

<script type="application/javascript">
        let a = 1; //数字类型
        let b = "1"; //字符类型
        console.log(a==b);//打印true
</script>

而=== 会判断值和类型是否都一致(真正意义上的全等)

<script type="application/javascript">
        let a = 1; //数字类型
        let b = "1";//字符类型
        console.log(a===b);//打印false
</script>

typeof 操作符

typeof 操作符用来检测变量的数据类型。

console.log(typeof "a1213");//string
console.log(typeof 123);//number
console.log(typeof true);//boolean
console.log(typeof {
   name:"zhangsan",age:21});//object
console.log(typeof [1,2,3]);//object

在这里插入图片描述

4.关键字

  • 和其他语言一样,Js中也有关键字,即你的标识符的名称不能是这些关键字。
    链接: Js中的关键字

5.注释

  • 单行注释 //
 // var a =2;
  • 多行注释 /* */
 /* let a = 1;
        let b = "1";
        console.log(a===b);*/

可以这样说,在JavaScript中,一切数据类型的变量,都用var,let来修饰。JavaScript拥有动态类型,即相同的变量可以用作不同的类型。

6.流程控制语句

if if…else if…else if…else…

//if语句
var day = 7;
if(day===7){
   
     console.log("今天是第"+day+"天");//今天是第7天
}
//if else 语句
var number = 1;
if(number===0){
   
    console.log("这个数是0");
}else{
   
    console.log("这个数是非0数");//这个数是非0数
}
//if else if else语句
var time =11;
if (time<10)
{
   
     console.log("早上好")
}
else if (time>=10 && time<20)
{
   
     console.log("今天是个好日子");//今天是个好日子
}
else
{
   
     console.log("晚上好");
}

switch case语句

          var d=new Date().getDay();
        var x="";
        switch (d)
        {
   
            case 0:x="今天是星期日";
                break;
            case 1:x="今天是星期一";
                break;
            case 2:x="今天是星期二";
                break;
            case 3:x="今天是星期三";
                break;
            case 4:x="今天是星期四";
                break;
            case 5:x="今天是星期五";
                break;
            case 6:x="今天是星期六";
                break;
        }
        console.log(x);
        // 如果在switch语句中没有任何匹配项,则执行default
        // 如果case 后面没有break,会继续执行下一个case

do while() ,while()语句

//while循环
var num = 6;
while(num){
   
    console.log(num);//打印 6 5 4 3 2 1
    num--;
}
//do while循环 
var num =6;
do{
   
    num--;//num先减一
    console.log(num);// 5 4 3 2 1 0
}while(num)

for循环

var a = 6;
for(let i=0;i<a;i++){
   
    console.log(i);// 0 1 2 3 4 5 
}

7.基本数据类型

字符串(String)

—使用单引号或者双引号括起来的文本字符串。

<script type="application/javascript">
       let a ="123";
       let b ='hello123';
       console.log(a);
       console.log(b);
</script>

在这里插入图片描述

字符串的基本操作 常用函数方法
length 求字符串长度

var a ="我是字符串";console.log(a);//打印输出5

charAt() 返回指定索引位置的字符
var a="我在哪里?";
console.log(a.charAt(0));//打印输出我
console.log(a.charAt(1));//打印输出在
字符串遍历

字符串遍历, 结合length 和 charAt() 即可完成遍历。

   var a= "123he45llo78";
   for(let i=0;i<a.length;i++){
   
       console.log(a.charAt(i));//依次打印输出1,2,3,h,e,4,5,l,l,o,7,8
   }
在字符串中通过转义字符添加特殊字符,比如’’ 或者"" ,\

在Js中转义字符也是\

var a = 'hello\'';
console.log(a);\\打印输出 hello' 
var b = 'hello\\';
console.log(b);\\打印输出 hello\  
var c = 'hello\"\'\\';
console.log(c);\\打印输出 hello"'\

还有\n,\r,\t,\b,\f,分别为换行,回车,制表符,退格,换页,自行尝试。

concat() 连接两个或多个字符串,返回连接后的字符串
var a = "123";
var b = "456";
console.log(a.concat(b));//打印输出123456
console.log(a);//123
console.log(b);//456
//注意 concat函数是把两个字符串拼接到一个新的字符串而不是拼接到其本身
split() 把字符串分割为子字符串数组
var a = "晚上好,打工人!";
console.log(a.split());//['晚上好,打工人!'] 没有提供分割点,直接切成了字符数组
var time = "2020-9-28 19:36";
console.log(time.split("-"));//['2020', '9', '28 19:36'],根据-将time字符串分成了3段
substring() 求子串,根据起始索引和终止索引。

注意,截取时左开右闭[),包含左边不包含右边

var time='2022年9月28日,1940';
console.log(time.substring(0));//从索引0,且没有终止索引来截取子串,相当于从头截取到最后
console.log(time.substring(0,3));//202
console.log(time.substring(2,4));//22
toLowerCase() 和 toUpperCase() 把字符串转换为小写和大写
var a = "heLLo";
console.log(a.toLowerCase());//hello
console.log(a.toUpperCase());//HELLO
trim() 移除字符串首尾空白
var a = "   heLLo  ";
console.log(a);//   heLLo  
console.log(a.trim());//heLLo

数字(Number) —javascript中只有一种数字类型Number

和其他语言也一样,有整数,小数,科学计数(指数),8进制数,16进制数来表示。
<script type="application/javascript">
       let a = 123;//整数
       let b =123e5;//科学计数
       let c= 0x48;//16进制数 0x开头
       let d= 0o17;//8进制数 0o开头
       let e=131.2;//小数
       console.log("a:"+a);
       console.log("b:"+b);
       console.log("c:"+c);
       console.log("d:"+d);
       console.log("e:"+e);
</script>

在这里插入图片描述
所有 JavaScript 数字均为 64 位
NaN (not a number) 非数字值,可以使用isNaN()函数来判断一个变量是否为number类型,返回值为布尔值 true或false.
注意 :当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。同理还有负无穷大(-infinity)

<script type="application/javascript">
       let a = '123'+'hi';//字符串
       let b =123;//数字
       console.log("a:"+a);
       console.log("b:"+b);
       console.log(isNaN(a));
       console.log(isNaN(b));
</script>

在这里插入图片描述

布尔(Boolean)—只能是true 或 false

var x=true;
var y=false;
console.log(x);//true
console.log(y);//false

空(Null)和 未定义(Undefined)

null表示"没有对象",即该处不应该有值。
undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。
<script type="application/javascript">
     let a;
     let b =123;
     console.log(a);//undefined
     console.log(b);//123
     b=null;
     console.log(b);// b此时为null
     console.log(undefined==null);//true 值相等
     console.log(undefined===null);//false 值相等但是类型不相等
</script>

8.类型转换

强制类型转换

转换成String类型:
1.toString()方法:

a = a.toString();
null和undefined不可以转换(这俩值没有toSring方法)。该方法不会影响原变量.

2.调用String函数:

a = String(a);
null和undefined会转换为字符串.

转换成Number类型
1.调用Number函数 :

a = Number(a);

2.parseInt()、parseFloat()函数

parseInt(); // 把字符串(中的有效整数)转换为整数;parseFloat(); // 把字符串(中的浮点数)转换为浮点数。
如果对非String使用这个方法,它会先将其转换成String,然后再进行操作。

转换成Boolean类型
调用Boolean函数:

a = Boolean(a);
数字 —> Boolean 除了0和NaN表示false,负数整数都是true。
字符串 —>Boolean 除了空串(连空格都没有,只有引号),其余的都是true。
null和undefined都会转换为false,对象会转换为true。

隐式转换

任何值加字符串都会转换为字符串
var num = 1;
var str = "hello,";
console.log(num+str);// 1hello,
console.log(typeof(num+str));// string
非Number类型的值进行运算(-、/) 回转换成Number类型
var a = "123";
console.log(a-0);//123
console.log(typeof (a-0));//number

任何值 运算符 NaN = NaN,就像数学中 1+正无穷=正无穷 一样

9.引用数据类型

数组

创建数组
//定义并赋值
var arr1 = new Array("张三","李四","王五");
console.log(arr1[0]);//张三
console.log(arr1[1]);//李四
console.log(arr1[2]);//王五
//先定义声明再赋值
var arr2 = new Array();
arr2[0] =1;
arr2[1] =2;
arr2[2] =3;
arr2[3] =4;
console.log(arr2);// [1, 2, 3, 4]
var arr3 =["eat","sleep","study"]
console.log(arr3);// ['eat', 'sleep', 'study']

数组中的元素,通过下标来访问

数组的常用方法
length方法,返回数组长度
var arr1 = new Array("123","456","789");
console.log(arr1.length);// 3
indexOf(),返回括号中的参数在数组对应的下标位置
var arr2 = new Array("1","2","3");
console.log(arr2.indexOf("2"));//返回数组下标  1
concat() 数组合并
var numbers = ['one','two','three'];
var ages = [18,19,20];
var names = ['张三','李四','王五'];
var all = numbers.concat(names);
console.log(all);//["one","two","three","张三","李四","王五"]
all = numbers.concat(ages,names);
console.log(all);//['one', 'two', 'three', 18, 19, 20, '张三', '李四', '王五']
join() 数组元素组成字符串
var names = ['张三','李四','王五'];
var str = names.join();//张三,李四,王五
console.log(str);
pop(),push()删除最后一个元素和末尾增加一个元素
var arr1 = ['123','hello',13,"zhangsan"];
console.log(arr1);// ['123', 'hello', 13, 'zhangsan']
arr1.push("lisi");
console.log(arr1);//['123', 'hello', 13, 'zhangsan', 'lisi']
arr1.pop();
arr1.pop();
console.log(arr1);//['123', 'hello', 13]
shift(),unshift()在数组的开头删除或者删除一个元素
var arr1 = ['123','hello',13,"zhangsan"];
console.log(arr1);// ['123', 'hello', 13, 'zhangsan']
arr1.unshift("lisi");
console.log(arr1);//['lisi', '123', 'hello', 13, 'zhangsan']
arr1.shift();
arr1.shift();
console.log(arr1);//['hello', 13, 'zhangsan']
sort() 数组排序

以Unicode码来进行排序

var arr1 = ['a','c','0',1,69];
console.log(arr1.sort());\\['0', 1, 69, 'a', 'c']
reservse() 数组反转
 var arr1 = ['a','c','0',1,69];
 console.log(arr1.reverse());\\[69, 1, '0', 'c', 'a']

对象

对象也是一个变量,但是它可以包含多个值,多个变量,以name:value的形式存放(键值对)

创建一个对象

对象拥有属性和方法。

var person={
   name:"张三",age:20,sex:"男"};
console.log(person);//{name: '张三', age: 20, sex: '男'}
通过object来创建一个对象

在 JavaScript 中,几乎所有的对象都是 Object 类型的实例,它们都会从 Object.prototype 继承属性和方法。

var obj1 = new Object();
//通过 对象.key = value 来为对象设定属性和值
obj1.name ="zh";
obj1.age = 20;
console.log(obj1);//{name: 'zh', age: 20}
通过构造器来创建一个对象

和Java中的构造器基本一样,唯一区别是参数的类型没有限制

function student(sid,sname,age,gender){
   
    this.sid=sid;
    this.sname=sname;
    this.age=age;
    this.gender=gender;
}
st1=new student(2020040413,"zh",20,"男");
console.log(st1);//student {sid: 2020040413, sname: 'zh', age: 20, gender: '男'}
访问对象的属性
var person={
   name:"张三",age:20,sex:"男"};
//1.通过 对象.key 来访问value
console.log(person.name);// 张三
//2.通过 对象["key"] 来访问value
console.log(person["name"]);// 张三
访问对象的方法

对象中定义一个函数作为对象的属性值

var person = {
   
            firstName: "尼古拉斯",
            lastName : "凯奇",
            age :23,
            fullName : function()
            {
   
                return this.firstName + "." + this.lastName;
            }
        };
console.log(person);//{firstName: '尼古拉斯', lastName: '凯奇', age: 23, fullName: ƒ}
console.log(person.fullName());//尼古拉斯.凯奇  对象.方法名()
向对象中添加属性

对象.key = value;

var person = {
   
            firstName: "尼古拉斯",
            lastName : "凯奇",
            age :23,            
        };
person.sex="男";
console.log(person);//{firstName: '尼古拉斯', lastName: '凯奇', age: 23, sex: '男'}
对象属性的遍历 for in
var student = {
   sname :'zh',age:18,sid:2020040413};
var key;
var value;
for( key in student){
   
     value = ""+student[key];
     console.log(key+':'+value);//依次打印 sname:zh age:18 sid:2020040413
}

函数

函数就是包裹在花括号中的代码块,前面使用了关键词 function.

无参函数、有参函数、带返回值的函数
//无参函数,即函数的参数列表中没有参数
function prt() {
   
     var a="函数调用成功!";
     console.log(a);
}
prt();
//有参函数,函数列表中的参数以逗号分隔,且是变量
function prt(name,age){
   
    console.log(name+""+age);//张三71
}
var c = prt("张三",71);
//带返回值的函数
function prt(name,id) {
   
    return name+""+id;//通过return将值返回
}
var st1 = prt("法外狂徒",2020001);
console.log(st1);//法外狂徒2020001

Date() 日期对象

创建日期
//根据模板字符串,来获取你指定的日期
var d1 = new Date("October 13, 1975 11:13:00");
console.log(d1);//Mon Oct 13 1975 11:13:00 GMT+0800 (中国标准时间)
获取日期
       var today = new Date();//创建当前Date对象
       console.log(today);// 完整的时间字符串
       console.log(today.getFullYear());//年
       console.log(today.getMonth());//月
       console.log(today.getDate());//日
       console.log(today.getHours());//时
       console.log(today.getMinutes());//分
       console.log(today.getSeconds());//秒
       console.log("周"+today.getDay());//周几
       //还有设置日期,获取时间戳...参考下面的链接手册

JavaScript基础语法知识回顾就到这里了

相关文章
|
7月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
7月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
44 0
|
22天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
41 2
|
4月前
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
40 0
|
6月前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
137 1
|
6月前
|
Web App开发 JavaScript iOS开发
技术笔记:js数组定义和方法(包含ES5新增数组方法)
技术笔记:js数组定义和方法(包含ES5新增数组方法)
|
6月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
84 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
33 0
|
7月前
|
JavaScript 前端开发 Dart
JavaScript高级笔记-coderwhy版本(三)
JavaScript高级笔记-coderwhy版本
110 0
JavaScript高级笔记-coderwhy版本(三)
下一篇
无影云桌面