前端之JS

1 引用方式

1.1 在html文件里面直接写js（弹出窗口输出）

  <script>
        alert("Hello,World!");
    </script>

1.2 将js和html'文件分开，并在html中引用js（弹出窗口输出）

html文件

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

js文件        

alert("好久不见")

1.3 页面输出

 <script>
        document.writeln("好久不见");
    </script>
    

1.4 控制台输出

<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

2 数据类型

2.1 用var声明一个变量 ps：现在用let创建变量

var a=123

var a; //定义全局变量
let b; // 定义局部变量
const c=1;//定义常量且不能再被修改

let a=1;       //定义a为整形,并且赋值为1
let a=1.3;     //定义a为浮点形,并且赋值为1.3
let a="ab2ba"; //定义a为字符串形,并且赋值为ab2ba
let =True;     //定义a为布尔形，并且赋值为True
let a=1,b=2;   //定义a和b均为整形,并且赋值为1,2

注意var用来创建全局变量，let用来创建局部变量

2.2 number

Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。

最大值：+1.7976931348623157e+308
最小值：-1.7976931348623157e+308
0以上的最小值：5e-324
特殊的数字：

Infinity：正无穷
-Infinity：负无穷
NaN：非法数字（Not A Number）
其它的进制：

二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持
八进制：0 开头表示八进制
十六进制：0x 开头表示十六进制

2.3 强制类型转换

将其它数值转换为字符串有三种方式：toString()、String()、 拼串。

转换为number类型

有三个函数可以把非数值转换为数值：Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而parseFloat()可以将字符串转换为浮点数。

2.4 输出与输入

1) 输入

类似于C语言的scanf()函数，js的输入是prompt()函数。但是要注意输入的是默认为string类型

输入会在网页中弹出提示框

prompt（""）;

3 运算符号

类c

4 分支语句

类c

5 循环语句

类c

demo:

使用for循环连续打印出某个数

var a=2,b='';
for(var i=1;i<=5;i++) {
    b+=a;
}
console.log(b);

6 数组和字符串

6.1 数组

JS的数组和C数组不同的是，JS的数组是动态的。比起这点它更像C++的vector。

var a=[];//定义空数组
var a=[1,2,'aaa',true,1.2]//定义有长度的数组

可以发现，和C不同的是，JS定义数组不用再方括号里写数组大小，并且由于JS定义是自适应，所以数组里的变量类型可以不是单一的。

访问数组的方式可以直接用下标索引。例如返回第2个元素，那么就是arr[1]（注意下标是从0开始的）。

字符串的库函数和数组的库函数大致相同。

6.2 数组的增删改查

let a=[0,1,2,4];   //定义数组
console.log(a[1]); //访问第二个元素,输出1
 
console.log(a);    //输出[0,1,2,4]
 
a[3]=3;            //修改下标3的数据
console.log(a);    //输出[0,1,2,3]
 
a[4]=4;            //增加大小并赋值
console.log(a);    //输出[0,1,2,3,4]
 
a[10]=10;          //增加大小并赋值
console.log(a);    //输出[0,1,2,3,4,空a~5,10],此时长度是返回的11

2）采用库函数a.push() 的方式进行尾插。

3）采用库函数a.unshift() 的方式进行头查。

删
删除数据可以利用库函数 a.pop() 进行尾删

查
1）查找数据可以利用a.find() 函数来查找，查到了返回下标，没查到返回-1

2）可以采用 a.indexOf(元素)  来查询下标。

3）利用 a.isArray(元素)  来查询该元素是否在数组中，若在返回true，若不在返回false。

改
1）改变数据可以直接利用下标索引的方式

至于排序依旧可以a.sort() 进行快排。

7.函数

JS声明函数的关键字：function。

由于JS没有主函数，被调函数之分，所以直接在下面调用即可。

语法格式：

function f() {
    console.log('呵呵呵')；
}
f();//调用函数

8.类与对象

8.1 创建对象方法一

1）字面量创建对象

数组是中括号，那么对象就是花括号了。

语法模板：

//创建对象的模板
let 对象名={
    属性1:属性值, //注意是逗号
    属性2:属性值,
    //对象中的函数叫做方法
    方法1:function(参数) {
        xxxx; //函数的内容
    },
    方法2:function(参数) {
        xxxx; 
    } //注意最后一个没有逗号
}

demo：

let person={
    Name: '张三',
    age: 18,  //这些就叫做属性
    Hobby: ['唱','跳','篮球','rap'], //属性值也可以是数组形式
 
    //对象中也可以嵌套其他的对象
    friend: { 
        Name: '李四',
        age: 19,
        ...
    }
}

2）访问方式

访问的方式也是大同小异，采用对象.属性，对象.方法() 的方式。

或者说采用 对象['属性'] 的方式调用

let person={
    Name: '张三',
    friend: {
        Name: '李四',
    }
}
 
console.log(person.Name); //张三
console.log(person['Name']) //张三
console.log(person.friend.Name); //李四

3）new一个对象

其方法是先new一个空的对象，然后再依次创建（可随时添加）属性和方法。

var obj =new Object();//创建空对象
 
obj.name='张三'; //创建属性
obj.age=18; //创建属性

4）构造函数创建对象

换句话说也就是创建类（结构体)。

//创建类
function Person(name,age) {
    this.name=name;
    this.age=age;
}
//实例化对象
let p1=new Person('张三',18);
let p2=new Person('李四',19);
 
console.log(p1.name)// 输出张三

5）数组对象

let person=[
    {
        Name: '张三',
        age: 18,
    },
    {
        Name: '李四',
        age: 19,
    },
    {
        Name: '王五',
        age: 17,
    }
] //定义数组对象
 
console.log(person[0]); //输出关于张三的这个对象
console.log(person[1].Name); //输出李四

9 迭代器

数组对象的迭代器也就是：forEach，map以及filter。

9.1 foreach

let person=[
    {
        Name: '张三',
        age: 18,
    },
    {
        Name: '李四',
        age: 19,
    },
    {
        Name: '王五',
        age: 17,
    }
] //定义数组对象
 
//函数形式
person.forEach( function(p) {
    console.log(p.Name);
});
//箭头形式
person.forEach(p=>{
    console.log(p.Name);
});
//依次输出 张三,李四,王五。

9.2 map

let person=[
    {
        Name: '张三',
        age: 18,
    },
    {
        Name: '李四',
        age: 19,
    },
    {
        Name: '王五',
        age: 17,
    }
] //定义数组对象
 
let name=person.map(function(p) {
    return p.Name;
}); //定义数组name来接收map的返回值
console.log(name[1]); //李四

9.3 filter

let person=[
    {
        Name: '张三',
        age: 18,
        flag: true,
    },
    {
        Name: '李四',
        age: 19,
        flag: false,
    },
    {
        Name: '王五',
        age: 17,
        flag: true,
    }
] //定义数组对象
 
let object=person.filter(function(p) {
    return p.flag===true;
});
console.log(object); //这时候object储存的是对象,并且只有张三和王五的对象

9.4 map 和 filter区别

不过map和filter的区别是filter的返回可以有筛选效果，也就是说在filter迭代器中，可以选择是否返回，如果true才返回，false就不返回。