JavaScript笔记

javascript是什么？
- ECMAScript是什么？
JavaScript语法

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());//周几
       //还有设置日期，获取时间戳...参考下面的链接手册

Date日期完整手册链接: https://www.runoob.com/jsref/jsref-obj-date.html

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

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/105199.html

JavaScript笔记（回顾一，基础知识篇）