JavaScript入门

JavaScript入门

常用的CSS预处理器：

• SESS 基于Ruby
• LESS 基于NodeJs，较推荐

JavaScript：弱类型脚本语言

常用框架

• JQuery
• Angular
• React
• Vue：渐进式javascript框架，即逐渐实现新特性
• Axios

UI框架

• Ant-Design
• ElementUI、iview、ice
• Bootstrap
• AmazeUI

构建工具

• Babel：JS编译工具
• WebPack：模块打包器

创建JavaScript项目

既可以在html中编写js代码，也可以创建js文件进行编写

HTML中的js标签

也可以直接进行js文件引用

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

实现效果相同

<!--script标签type类型不需要显式定义，默认是javascript-->
<script type="text/javascript"></script>

注释

<!--script标签中的注释与java相同，都是加//，建议后面再加一个空格-->
<script>
	// 这是注释
</script>

基本语法

变量定义

<script>
    // 任何变量都是用var进行定义,变量不能以数字开头
	var num = 1;
</script>

条件语句

<script>
    var num = 1;
    if(2>1){
        alert("true");
    }
</script>

if语句与java类似，可以进行嵌套

    <script>
        var num = 1;
        if(num>1 && num<2){
            alert("1~2");
        }else if(num>2 && num<3){
            alert("2~3");
        }else{
            alert("other");
        }
    </script>

浏览器调试js

在html页面按f12进行开发者调试界面

可以直接在下方的控制台进行log打印

source界面可以查看当前页面代码，可以进行断点设置，设置断点后刷新进入调试模式

数据类型

Number

js不区分小数和整数类型，统一使用number

123 //整数
123.1 //浮点数
1.123e3 //科学技术法
-1 //负数
NaN //not a number
Infinity //无穷大

字符串

'abc' "abc"

布尔值

true false

逻辑运算符

&&
||
!

比较运算符

= 
== 等于 值相等类型不一样也为true
=== 绝对等于 值和类型都相等才为true

特殊

NaN===NaN
// 该语句返回false

判断是否为NaN时可以使用isNaN方法

isNaN(NaN);
// 该方法返回true

浮点数

尽量避免使用浮点数进行运算，会有精度问题

null与undefined

• null 空
• undefined 未定义

数组

var arry = [1,2,3,4,null,true,"hello"];
// js的数组内的数据不一定要同一种类型
console.log(arry[0])
// 1

如果取数组下标越界会显示undefined

对象

使用{}进行定义

var person = {
    name: "stone",
    age: 22,
    tags: ['javascript', 'java']
}

在浏览器控制台中输入对应的属性可以得到相应的值

严格检查模式

<script>
    // 通过use strict进入严格检查模式，预防javascript的随意性，放在js代码的第一行
	'use strict';
</script>

局部变量

let是ES6的新特性，需要在idea的设置里进行选择才能使用

let i = 1;
// 通过let定义局部变量（var是全局变量）

数据类型详解

字符串

<script>
    'use strict';
    console.log('hello\"\'');
    console.log("hello\"\'");
</script>

javascript的字符串既可以使用' '，也可以使用" "。要输出双引号或者单引号可以使用转义字符+符号。

var hello = `
hello
你好
China
中国`
console.log(hello);

使用反引号`可以输出多行字符串

模板字符串

let name = "stone";
let age = 23;
let string = `你好，我是${name},我今年${age}岁`;
console.log(string);
// 你好，我是stone,我今年23岁

${}是el表达式

字符串长度

let str = "";
console.log(str.length);

// 可以通过字符串下标操作取特定位置的字符
let name = "stone";
console.log(name[0]);
> s

字符串的可变性和不可变性

大小写转换

let name = "stone";
console.log(name.toUpperCase());// 转换为大写字符串
// STONE

let name = "STONE";
console.log(name.toLowerCase());// 转换为小写字符串
// stone

查找字符串指定字符的位置

let name = "stone";
console.log(name.indexOf('s'));
// 0

截取字符串指定位置的子字符串

let name = "stone";
console.log(name.substring(1,4));// [1,4)，包含第二个字符但是不包含第五个字符
// ton

数组

Array可以包含任何数据类型的数据

var arry = [1,2,3,4,5];
var num;
num = arry[0]; // 通过数组下标取值

数组长度

console.log(arry.lenth);
// 5

数组长度可变，多余的空间用undefined进行填充，过少则会丢失已存的数据

arry.length = 10;

arry.length = 2;
/* Array(2)
0: 1
1: 2
length: 2 */

indexOf

console.log(arry.indexOf(1));// 获取下标索引
// 0

arry = [1,2,3,4,5,6,'1'];
console.log(arry.indexOf(1));
console.log(arry.indexOf('1'));
// 0
// 6

数组中的数字1和字符'1'不同

slice

截取数组特定位置的数据，包头不包尾

console.log(arry.slice(1,3));
/*
Array(2)
0: 2
1: 3
length: 2
*/

push,pop

push：将数据压入数组

pop：将数组末尾数据弹出

arry.push('a','b');// 将a，b压入数组中
console.log(arry);
/*
(9) [1, 2, 3, 4, 5, 6, "1", "a", "b"]
0: 1
1: 2
2: 3
3: 4
4: 5
5: 6
6: "1"
7: "a"
8: "b"
length: 9
*/

arry.pop();// 将数组末尾数据弹出
console.log(arry);
// "b"

unshift,shift

unshift：将数据压入数组头部

shift：将数组头部数据弹出

arry.unshift("a","b");
console.log(arry);
/*
0: "a"
1: "b"
2: 1
3: 2
4: 3
5: 4
6: 5
7: 6
8: "1"
9: "a"
length: 10
*/

arry.shift();
// "a"

排序sort

对数组进行排序

arry.sort();
/*
0: 1
1: "1"
2: 2
3: 3
4: 4
5: 5
6: 6
7: "a"
8: "b"
length: 9
*/

数组反转

将数组中的数据进行反转

arry.reverse();
/*
0: "b"
1: "a"
2: 6
3: 5
4: 4
5: 3
6: 2
7: "1"
8: 1
length: 9
*/

concat()

将两个数组进行拼接，并生成新数组

arry.concat([1,2,3,4]);
/*
0: "b"
1: "a"
2: 6
3: 5
4: 4
5: 3
6: 2
7: "1"
8: 1
9: 1
10: 2
11: 3
12: 4
length: 13
*/

join()

使用特定字符串对数组进行拼接

arry.join(',');
// "b,a,6,5,4,3,2,1,1"

多维数组

let arr = [[1,2],[true,false],["3","4"]];
console.log(arr);
/*
0: Array(2)
0: 1
1: 2
length: 2
__proto__: Array(0)
1: Array(2)
0: true
1: false
length: 2
__proto__: Array(0)
2: Array(2)
0: "3"
1: "4"
length: 2
__proto__: Array(0)
length: 3
*/

对象

var 对象名 = {
    属性名: 属性值,
    属性名: 属性值
}

如

var person = {
    name: "stone",
    sex: "man",
    age: 23,
    school: "gdut"
}
/*
{name: "stone", sex: "man", age: 23, school: "gdut"}
age: 23
name: "stone"
school: "gdut"
sex: "man"
*/

• 当查看对象不存在的属性时，不会报错，但是提示undefined

• 对象属性支持动态删减增加

  delete person.name;
  person;
  /*
  {sex: "man", age: 23, school: "gdut"}
  age: 23
  school: "gdut"
  sex: "man"
  */
  

  person.prename = "St0n3";
  person;
  /*
  {sex: "man", age: 23, school: "gdut", prename: "St0n3"}
  age: 23
  prename: "St0n3"
  school: "gdut"
  sex: "man"
  */
  

• 判断属性是否在该对象中（继承的父类的属性同样存在子类中）

  'age' in person;
  // true
  'toString' in person;
  // true
  

• 判断属性是否存在对象自身中

  person.hasOwnProperty('age');
  // true
  person.hasOwnProperty('toString');
  // false
  

流程控制

if语句

if(){
   
   }else{
    
}

循环语句

while

let num = 1;
while(num < 100){
    num = num + 1;
    console.log(num);
}

for

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

foreach

es5.1引入

let arry = [12,12,3,4,214,5,6,1];
arry.forEach(function (value){
            console.log(value);
        });

forin

for(var num in arry){
    console.log(arry[num]);
}

Map和Set

Map--集合（存储键值对）

var map = new Map([["Tom",21],["stone",23],["Jacky",15]]);
var age = map.get("Tom");// 通过key获得value
map.set("John",12);// 插入键值对或更新键值对
console.log(age);
console.log(map);
// 21
/*
Map(4)
[[Entries]]
0: {"Tom" => 21}
key: "Tom"
value: 21
1: {"stone" => 23}
key: "stone"
value: 23
2: {"Jacky" => 15}
key: "Jacky"
value: 15
3: {"John" => 12}
key: "John"
value: 12
size: (...)
*/
map.delete("Tom");// 删除键为Tom的键值对
/*
Map(3) {"stone" => 23, "Jacky" => 15, "John" => 12}
*/

Set--无序不重复集合

var set = new Set([1,1,1,3,4,4,5]);
console.log(set);
/*
Set(4)
[[Entries]]
0: 1
value: 1
1: 3
value: 3
2: 4
value: 4
3: 5
value: 5
size: 4
*/
set.delete(1);// 删除指定数据
/*
Set(3) {3, 4, 5}
*/
set.add(6);// 添加数据
/*
Set(4) {3, 4, 5, 6}
*/
console.log(set.has(1));// 判断set中是否有该元素
/*
true
*/

iterator迭代器

es6新特性

Map、Set、数组都有自己的lterator迭代器，for of语句通过调用对象的迭代器的.next()方法实现遍历

使用for of遍历数组并输出

var arr = [2,3,4];
for(var x of arr){
    console.log(x);
}

for of也可以用来遍历map

var map = new Map([["Tom",12],["Jacky",22],["Alice",34]]);
for(let x of map){
    console.log(x);
}

for of也可以用来遍历set

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

函数

函数定义

定义方式一

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

等执行到return时，返回对应的值，若没有执行到return，则返回undefined（或NaN）

定义方式二

匿名内部类

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

函数调用

abs(10);// 10
abs(-10);// 10

当没有传入参数时，返回NaN

abs(); // NaN

可以通过判断抛出异常

function abs(x){
    if(typeof x !== "number"){// typeof用于调用x的数据类型
        throw "Not a number";// 抛出异常
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

arguments

var abs = function(x){
    console.log("x=>" + x);
    for(var i = 0; i < arguments.length; i++){// arguments是一个数组，用于存放输入函数的所有参数
        console.log(arguments[i]);// 输出为输入该函数的所有参数
    }
}

rest

function abs(x,y,...rest){
    console.log("x=>" + x);
    console.log("y=>" + y);
    console.log(rest);
}
/*
abs(21,324,23412,2321,11,2334);
x=>21
y=>324
(4) [23412, 2321, 11, 2334]
*/

变量作用域

var

在函数内定义的var变量只能在函数内使用，无法在函数外使用，即函数内定义的变量的作用域在该函数内

function fun(){
    var x = 1;
    x = x + 1;
}
x = x + 1; // Uncaught ReferenceError: x is not defined

当多个不同的函数定义了同一个变量，由于变量的作用域只在函数内，所以互不冲突

function fun(){
    var x = 1;
    x = x + 1;
    console.log(x);
}

function fun1(){
    var x = "a";
    console.log(x);
}
// 2
// a

内部函数可以调用外部函数的变量，但是外部函数无法调用内部函数的变量

function fun(){
    var x = 1;
    x = x + 1;
    console.log(x);
    function fun1(){
        x = x + 1;
        console.log(x);
    }
    fun1();
}
// 2
// 3

function fun(){
    var x = 1;
    x = x + 1;
    console.log(x);
    function fun1(){
        var y = x;
        x = x + 1;
        console.log(x);
    }
    fun1();
    console.log(y);
}
// 2
// 3
// Uncaught ReferenceError: y is not defined

内部函数与外部函数变量名相同，互不影响（就近原则）

function fun(){
    var x = 1;
    x = x + 1;
    console.log(x);
    function fun1(){
        var x= "A";
        console.log(x);
    }
    fun1();
}
// 2
// A

当函数内使用未定义的参数时，javascript会自动声明该参数，但不赋值

function fun(){
    var x = 1 + y;
    console.log(x);
    var y = 1;
}
// NaN
// 推荐先统一定义好参数再使用

在函数外定义的var变量为全局变量，作用域为整个js文件

var x= 1;
function print(x){
    console.log(x);
}
print(x);
// 1

window是系统默认定义的全局变量，所有var变量与window绑定在一起，alert（函数也是变量）也是绑定在window下的方法

var x= 1;
function print(x){
    console.log(x);
}
print(x);
alert(window.x);
// 1
// 1

由于window是全局变量，不同js文件下定义的全局变量（包括函数）都会绑定到window下，所以为了解决命名冲突的问题，我们可以创建一个自己的全局变量，将其他变量绑定到该全局变量下，如

var stone = {};
stone.create = function(a){
    return a;
}
stone.value = "a";

let

局部作用域，取代var某些情况下作用域过大

function a(){
    for(i = 0;i < 100;i++){
        console.log(i);
    }
    console.log(i+1);
}
// 98
// 99
// 101

而let为局部作用域，作用范围为for循环内

function a(){
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i + 1);
}
// 98
// 99
// Uncaught ReferenceError: i is not defined

const

常量关键字，es6新增特性

const PI = '3.14';
console.log(PI);

当修改const常量值时为报错

PI = '123';
// Uncaught TypeError: Assignment to constant variable.

方法

方法定义一

方法就是对象内部定义的函数，对象仅包含属性和方法

var stone = {
    name: "stone",
    birth: 1998,
    age: function (){
        var now = new Date().getFullYear();
        return now - this.birth;
    }
};
// stone.age();
// 23

属性调用：对象名.属性名

方法调用：对象名.方法名()

方法定义二

function getAge(){
    var now = new Date().getFullYear();
    return now - this.birth;
}
var stone = {
    name: "stone",
    birth: 1998,
    age: getAge// getAge后面不需要加括号，加上括号后age变成属性
};

getAge();// getAge内还有this，前面不加对象名默认指向window，而window内没有birth属性
// NaN
stone.getAge();
// 23

使用Apply可以不加对象名

getAge.apply(stone,[]);// 第一个参数为对象名，第二个参数为需要传入的参数

内部对象

Date

var now = new Date();
// Fri May 21 2021 15:31:56 GMT+0800 (中国标准时间)
now.getFUllYear();
// 2021
now.getMonth();// 月份从0开始到11
// 4
now.getDate();// 日期
// 21
now.getDay();// 星期数
// 5
now.getHours();
// 15
now.getMinutes();
// 31
now.getSeconds();
// 56
now.getTime();// 时间戳，全世界唯一，从1970年1月1日 00:00:00 到现在的毫秒数
// 1621582316776
console.log(new Date(1621582316776));/// 将时间戳转换为标准时间
// Fri May 21 2021 15:31:56 GMT+0800 (中国标准时间)
console.log(now.toLocaleString());// 将标准时间转换为本地时间
// 2021/5/21下午3:41:06

JSON

JavaScript Object Notation, JS 对象简谱

Json格式：

• 对象：{}
• 数组：[]
• 键值对：key:value

var person = {
    name: "stone",
    age: 23,
    school: "gdut"
};
var jsonPerson = JSON.stringify(person);// 将对象转换为json字符串
console.log(jsonPerson);
// {"name":"stone","age":23,"school":"gdut"}

var str = JSON.parse('{"name":"stone","age":23,"school":"gdut"}');// 将json字符串转换为对象
console.log(str);
/* {name: "stone", age: 23, school: "gdut"}
age: 23
name: "stone"
school: "gdut"
*/

面向对象编程

js中一切皆为对象（包括函数）

原型：__proto__指向的对象即为原型，类似于java继承中的父类，每个对象的__proto__都指向object

var person = {
    name: "stone",
    age: 23,
    run: function (){
        console.log(this.name + "run...")
    }
};

var xiaoming = {
    name: "xiaoming"
};

xiaoming.__proto__ = person;
console.log(xiaoming.run());
// xiaomingrun...

class继承

类似于java中的class

类：原型对象

class student{
    constructor(name) {// 构造方法
        this.name = name;
    }

    hello(){
        alert('hello' + this.name);
    }
}

class littleStudent extends student{// class继承
    constructor(name,grade){// 重写构造方法
        super(name);
        this.grade = grade;
    }

    hello(){// 重写hello()
        alert("我是一名" + this.grade + "年级的小学生");
    }
}

var xiaoming = new student("xiaoming");
xiaoming.hello();
var xiaohong = new littleStudent("xiaohong", "三");
xiaohong.hello();

xiaohong的原型还是student，而不是littleStudent

原型链：所有对象都有上一层原型，最终都指向object