JavaScript学习—基础语法

引入JavaScript

1. 内部标签

<script>
	alert("hello world");
</script>

2. 外部引入

<script src="js/abc.js"></script>

基础语法

定义变量

<script>
    var num = 1;
    alert(num);
</script>

条件控制

if (2>1)
{
    alert("true");
}

<script>
    var score = 65;
    // alert(num);
    if (score>60&&score<70)
    {
        alert("60-70")
    }
    else if (score>70&&score<80)
    {
        alert(70-80)
    }
    else
    {
        alert("other")
    }
</script>

console.log("hello world");在浏览器控制台输出

数据类型

number

js不区分整数和小数

123  //整数123
123.1   //浮点数123.1
1.122e3   //科学计数法
NaN  //not a number
Infinity  //无限大

字符串

'a' "abc"

正常时使用单引号或者双引号包裹，注意转义符号\

\'
\n   //换行
\t   //空格
\u4e2d   //unicode编码
\x41    //ascii

多行字符串的编写，使用反引号

var str = `haha
        nihao
        666`

模版字符串

let name='xay';
let words=`你好，${name}`;

字符串长度

word.length

字符串的特性，不可变

大小写转换

word.toUpperCase()
word.toLowerCase()

substring()是字符串截取函数

substring(1)  //从第一个字符串截取到最后一个
substring(1,3)  //[1,3)

布尔值

true false

逻辑运算

&& //与
|  //或
!  //非

比较运算符

=
==  //类型不一样，值一样也是真
===  //绝对等于，类型和值都必须一样

NaN===NaN返回的是false，只能通过isNaN(NaN)来判断

数组

<script>
    var arr = [1,2,3,4,5,'hello']
</script>

取数组下标时，如果越界了，会输出undefined
在给arr.length赋值后，数组长度也会发生变化，如果赋值过小，数组中的元素会丢失

indexOf可以通过元素获得其下标索引

slice() 可以截取数组的一部分，相当于字符串中的substring

push() pop()分别是向尾部压入和弹出元素

unshift() shift()分别是向头部压入和弹出元素

sort() 按照ascii排序
reverse() 反转
concat() 拼接数组
join() 用指定符号将数组拼接起来

对象

js中{…}表示一个对象，键值对描述属性xxxxx:xxxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号

var person = {
    name: 'xay',
    age: 18,
    tags: ['js','java','python']
}

对象赋值

动态的删减属性delete person.name

对象属性的添加，直接赋值即可

判断属性是否在对象中

流程控制

if判断

if (2>1)
{
    alert("true");
}

<script>
    var score = 65;
    // alert(num);
    if (score>60&&score<70)
    {
        alert("60-70")
    }
    else if (score>70&&score<80)
    {
        alert(70-80)
    }
    else
    {
        alert("other")
    }
</script>

while循环

age=0;
while (age<100)
{
    age+=1;
    console.log(age);
}

for循环

for (let i = 0; i < 5; i++) {
    console.log(i);
}

for循环遍历数组

var arr=[1,2,3,4,5,6,7,8,9,10];
for (var num in arr)
{
    console.log(num)
}

Map和Set

Map

var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom');  //通过key获得value
console.log(name)

类似python中的字典，set()向Map中添加数据

map.set('admin',10);
map.delete('tom')  //map中的删除

Set
Set可以去重

var set=new Set([3,1,1,1,1]);

set.add(2)  //添加
set.delete(1)  //删除
console.log(set.has(3));  //是否存在3

iterator

遍历Map

var map=new Map([['tom',100],['jack',90],['haha',80]]);
for (let x of map)
{
    console.log(x);
}

遍历Set

var set=new Set([3,1,1,1,1]);
for (let x of set)
{
    console.log(x);
}

函数及参数获取

函数的定义

function abs(x)
{
    if (x>=0)
        return x;
    else
        return -x;
}

一旦执行到return代表函数结束，返回结果。还有另一种函数定义方式：

var abs = function (x) {
    if (x >= 0)
        return x;
    else
        return -x;
}

若参数的类型不符合，可以手动抛出异常

function abs(x)
{
    if (typeof x!=='number') {
        throw "not a number";
    }
    if (x>=0)
        return x;
    else
        return -x;
}

当函数有多个参数时，可以使用arguments，它代表传进来的参数是一个数组

function abs(x)
{
    console.log("x->"+x);
    for (var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
    if (typeof x!=='number') {
        throw "not a number";
    }
    if (x>=0)
        return x;
    else
        return -x;
}

当需要使用多余的参数来进行附加操作时，需要排除已有的参数，可以用rest

function aaa(a,b,...rest){
	console.log("a->"+a);
	console.log("b->"+b);
	console.log(rest);
}

变量的作用域

1. 假设在函数体内声明，则在函数外无法引用
2. 内部函数可以访问外部函数的成员，外部无法访问内部

方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法。

var kuangshen={
	name:"kuangshen",
	birth:2000,
	age:function (){
	    var now=new Date().getFullYear();
	    return now-this.birth;
	}
}

内部对象

Date

var now=new Date() //Tue Sep 28 2021 13:56:03 GMT+0800 (中国标准时间)
now.getFullYear(); //年
now.getMonth(); //月 0-11代表月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //时间戳
console.log(new Date(1632808811159)); //时间戳转时间

JSON对象

JavaScript中一切皆对象，任何js支持的类型都可以用json来表示。

格式：

• 对象用{}
• 数组用[]
• 所有的键值对用key:value

var user = {
    name:"qinjian",
    age:30,
    sex:"男"
}
//{name: 'qinjian', age: 30, sex: '男'}

//对象转json
var jsonUser= JSON.stringify(user);
//{"name":"qinjian","age":30,"sex":"男"}
//json转对象
var obj=JSON.parse('{"name":"qinjian","age":30,"sex":"男"}');

面向对象编程

原型

首先要理解原型对象

var user = {
    name:"qinjian",
    age:30,
    run:function (){
        console.log(this.name+"  run....");
    }
}

var xiaoming ={
    name:"xiaoming"
}

var bird={
    fly:function (){
        console.log(this.name+" fly...");
    }
}

//xiaoming.__proto__=user;
xiaoming.__proto__=bird;

这里的xiaoming.__proto__=bird;就是一个原型对象，继承等号右边对象里的一切参数

class继承

class的基础语法：

class student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('hello');
    }
}

var xiaoming = new student('xiaoming');
var xiaohong = new student('xiaohong');

class student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('hello');
    }
}

class xiaostudent extends student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    mygrade(){
        alert('我是小学生');
    }

}

var xiaoming = new student('xiaoming');
var xiaohong = new xiaostudent('xiaohong',1);

extends关键字用来表示继承

有关原型链可以参考这篇文章