JavaScript学习笔记

JavaScript

JavaScript的组成：

ECMAScript 5.0:定义了js的语法标准：包含变量，表达式，运算符，函数，if语句 for循环，while循环，内置的函数
DOM: 操作网页上的api，一些皆对象，比如html标签
BOM: 操作浏览器部分功能的API，比如说刷新页面、前进、后退、让浏览器自动滚动

ECMAScript 5.0

所有的变量都挂在到了全局对象window

javascript的引入方式：

内接式：

<script type="text/javascript">

</script>

外接式：

<!--相当于引入了某个模块-->
    <script type="text/javascript" src="./js/index.js"></script>

注释

//这个是注释

变量的使用

在js中使用的是var关键字声明变量，js语言是一个弱类型的语言

    <script type="text/javascript">
        // 1.变量的声明和定义（赋值）
        var a = 10;
        alert(a);

        // 2.先声明变量 未来定义
        var b;
        b = '200';
        console.log(a);
        console.log(b);
        
        var c;
        //Uncaught ReferenceError: c is not defined c没有定义
        console.log(c);//undefined 未定义

    </script>

变量的命名规范

// 变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。
bstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

基础数据类型

js基本的数据类型：

1. number   数字类型
2. string   字符串类型
3. boolean  布尔类型(True False)
4. null     空值
5. undefined    未定义

数字类型

<script type="text/javascript">
        // typeof 变量名
        var a = 100;
        console.log(typeof a); //number

        var b = 5/0;
        console.log(b);//Infinity 无限大
        console.log(typeof b)//number
    </script>

字符串类型

‘+’ 号可以表示连字符，也可以是数字相加。字符串+数值相当于字符串拼接，数字加数字相当于相加

<script type="text/javascript">

        var c = 'abc';//可以使用单引号或者双引号表示字符串
        console.log(typeof c);//string

        var d = 'abc'+'cbd'+1;
        console.log(d);//abccbd1

        //将数值类型转换成字符串类型
        var e = 10+'';
        console.log(typeof e);//string

    </script>

其他三种数据类型

    <script type="text/javascript">
        //布尔类型
        var isshow = false;
        console.log(isshow);//false
        
        //空对象
        var a = null;
        console.log(typeof a);//object空对象
        
        // null
        var b;
        console.log(b);//值是 undefined
        console.log(typeof b)//undefined是数据类型
        
    </script>

复杂（引用）的数据类型

Function 相当于python中的函数，def
Object 相当于python中的字典，dict
Arrary 相当于python中的字典，list
Date 相当于python中的time模块

JavaScript比较运算符的特殊情况

JavaScript的运算符与python基本上类似，只是javascript多了一个++&-- 自增自减运算符，还有== === 以及！==（不等同于，值和类型有一个不相等，或者两个都不相等）与！=（不等于）比较运算
比较运算符特殊情况代码：

    <script type="text/javascript">

//        var a = 5;
//        var b = a++;//先将a赋值给b 然后a进行自增+1
//        console.log(a);//输出6
//        console.log(b);//输出5
//         var a = 5;
//         var b = ++a;//先进行a++ 然后再将a++的值(6)赋值给b
//         console.log(a);//6
//         console.log(b);//6
        var x = 5;
        var y = '5';
        // console.log(x == y);//true  ==比较的是值相同
        console.log(x === y);//false === 比较的是值和数据类型（内存地址）
        

    </script>

数据类型转换

数值类型转字符串类型

<script type="text/javascript">
    // 数值类型转字符串类型
        //1.隐式转换
        var n1 = 123;
        var n2 = '123';
        var numStr = n1+n2;
        console.log(typeof numStr);//string
        //2.强制转换
        //内置函数：toString()
        var n3 = 100;
        var StrNum = n3.toString();
        console.log(typeof StrNum);//string

        //内置函数：String()
        var n4 = 100;
        var strNum = String(n4);
        console.log(typeof strNum)//string
</script>

字符串类型转数值类型

<script type="text/javascript">

    var stringNum1 = '12345';
    var num1 = Number(stringNum1);
    console.log(typeof num1);//number

    var stringNum2 = '1234dhwjuijdwio';
    var num2 = Number(stringNum2);
    console.log(typeof num2);//number
    console.log(num2);//NaN Not a Number  不是一个数值，但是强制转换成了数值类型

    // 解析字符串中的整数 内置方法：parseInt()
    var num3 = parseInt(stringNum2);
    console.log(num3);//stringNum2 = '1234dhwjuijdwio'; num3 = 1234

    // 解析字符串中的浮点型 内置方法：parseFloat()
    var stringNum3 = '1.2546dw485dwdhf';
    var num4 = parseFloat(stringNum3);
    console.log(num4);//1.2546

</script>

流程控制

if

    <script type="text/javascript">
        // if
        var age = 20;
        if(age > 18){
            //{}相当于一个作用域
            console.log('在if里面，条件为真时执行');
        }
        console.log(1111);
    </script>

if - else

    <script type="text/javascript">
        var age = 18;
        if(age==18){
            console.log('今年十八岁');
        }else{
            console.log('管你今年多少岁')
        }
    </script>

if-else if-else

    <script type="text/javascript">
        //if - else if -else
        var age = 20;
        if(age==18){
            console.log('今年十八岁');
        }else if(age >= 20) {
            console.log('今年大于十八');
        }else{
            console.log('今年小于十八');
        }
        console.log('执行完啦')
    </script>

逻辑与&& 逻辑或||

逻辑与相当于python中的and

// 逻辑与：如果a大于5 并且b大于10，只有两个条件同时成立才打印条件成立
    var a = 10;
    var b = 20;
    if(a > 10 || b > 10){
        alert('在if里面');
    }else{
        alert('判断失败')
    }

逻辑或||相当于python中的or

// 逻辑或：如果a大于10 或者b大于10，只要其中一个条件成立便打印条件成立
    var a = 10;
    var b = 20;
    if(a > 10 || b > 10){
        alert('在if里面');
    }else{
        alert('判断失败')
    }

switch

case穿透：switch语句 case表示一个条件，满足这个条件就会输出，直到遇到break跳出，如果break不屑，那么程序会遇到下一个break停止

var gamescore = 'good';
    switch (gamescore) {
        case 'good':
            console.log('还可以');
            break;
        case 'better':
            console.log('合格');
            break;
        case 'best':
            console.log('优秀');
            break;
        default:
            console.log('回家种田吧');
            break;
    }

while循环

// 使用while循环将1～100所有是2的倍数在控制台打印
    //初始化循环变量
    var i = 1;
    //判断循环条件
    while (i <= 100){
        if (i%2==0) {
            console.log(i);
        }else {
            console.log('不是2的倍数');
        }
        i++;//更新循环变量
    }

do-while

用途不大
不管条件如何，上来先做一次，然后再去循环

// 先执行一次do作用域内部的代码，然后再判断条件是否继续循环
    var i = 3;
    do {
        console.log(i);
        i++;
    }while(i<2);

for循环

// 计算100之间所有数的和

    //i = 1  初始化循环变量
    //i<100  判断循环条件
    // i++   更新循环条件
    var x = 0;
    for (var i = 1;i<=100;i++){
        x +=i;
    }
    console.log(x)

双重for循环

// 在页面上显示等边三角形
// document.write('喵喵喵')  往页面上写入内容
    for (var i=1;i<=6;i++){
        for (var s=i;s<6;s++){
            document.write('&nbsp;');
        }//控制空格数量
        for (var j=1;j<=2*i-1;j++){
            document.write('*');
        }//控制每行的输出*数
        document.write('<br>')
    }
    
// 在页面显示直角三角形
    for (var i=0;i<=6;i++){
        for (var j=1;j<=i;j++){
            document.write('*')
        }
        document.write('<br>')
    }

常用内置对象（复杂数据类型）

数组：Array

// 创建列表的两种方式
    // 1.字面量方式：
        var colors = ['red','yello','blue'];
        console.log(colors);
// 2.使用构造函数(js中创造对象使用的是构造函数)
        var colors = new Array();
        colors[0] = 'red';
        colors[1] = 'yellow';
        colors[2] = 'bule';
        console.log(colors);

数组的常用方法

使用for循环遍历列表

    var colors = ['yellow','red','green'];
    // for循环遍历数组:length函数  返回数组的长度
        for(var i=0;i<colors.length;i++) {
            console.log(i, colors[i])
        }

使用forEachd遍历数组

通过forEach遍历数组的每一项内容，毁掉函数中的参数第一个参数为item（每一项的内容）第二个参数是数组的索引

        var l = ['a','b','c'];
        l.forEach(function (item,index) {
            console.log(item,index)
        })

cancat：数组的合并

// 数组的合并
        var north = ['北京','山东','天津'];
        var south = [['北京','山东','天津']];
        var newCity = north.concat(south);
        console.log(newCity);//['北京','山东','天津','北京','山东','天津']

join：将数组中的元素使用指定的字符串拼接起来，返回一个新的字符串

// 字符串拼接
    //方式1
    var north = ['北京','山东','天津'];
    console.log(north.join('|'));//北京|山东|天津
    //方式2
    var str = north.join('|');
    console.log(str);//北京|山东|天津

slice(start,end) 返回数组的一段记录，相当于切片，于python中的切片一样，顾头不顾尾

    //字符串的切片
    var list = ['a','b','c','d'];
    var newlist = list.slice(1,3);
    console.log(newlist);//["b", "c"]

push：向数组最后添加一个元素，相当于python中的append方法

    var list = ['喵','汪','嗷呜'];
    list.push('嗷');
    console.log(list);//["喵", "汪", "嗷呜", "嗷"]

reverse 反转数组

    var list = ['喵','汪','嗷呜'];
    list.reverse();
    console.log(list);//["嗷呜", "汪", "喵

sort：对数组排序

按照字母进行排序，如果第一个字母相同则比较第二个字母

    var list = ['y','v','d','c','x'];
    list.sort();
    console.log(list)//["c", "d", "v", "x", "y"]

isArray()：判断是否为数组

返回值为true或者false

    var l = ['a','b','c'];
    var isList = Array.isArray(l);
    if(isList){
        console.log('是数组')
    }else{
        console.log('不是数组')
    }

字符串的常用方法

chartAt() 返回指定索引的位置的字符

    var str = 'abc';
    var charset = str.charAt(1);
    console.log(charset);

concat 返回字符串值，表示两个或多个字符串的拼接

var str1 = 'abc';
    var str2 = '123';
    var newstr = str1.concat(str2,str1); //可以跟多个参数
    console.log(newstr);//abc123abc

replace(old,new)字符串替换

    var str = '123456789';
    var newstr = str.replace('123','abc');
    console.log(newstr);//abc456789

indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1

    var str = 'abddwdwdasa';
    console.log(str.indexOf('a'));//0
    console.log(str.indexOf('w'));//4
    console.log(str.indexOf('x'));//-1

slice(start，end) 左闭右开分割字符串

    var str = 'abcd';
    console.log(str.slice(1,3));//bc

split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度

与python中的split方法一样

    var str = 'abcd|aa|dd|ccc';
    var strlist = str.split('|');
    console.log(strlist);//["abcd", "aa", "dd", "ccc"]

substr(statr,end) 左闭右开与slice方法一样

//顾头顾尾
    var str = 'abcd';
    console.log(str.substr(1,3));//bcd

toLowerCase()转小写

    var str = 'ABCDE';
    console.log(str.toLowerCase());//abcd

toUpperCase()转大写

    var str = 'abcde';
    console.log(str.toUpperCase());//ABCDE

去除字符串首尾空格与换行

与python中的strip方法一样

    var str = '       a       ';
    console.log(str.trim());//a

特别：

//1.将number类型转换成字符串类型
var num = 132.32522;
var numStr = num.toString()
console.log(typeof numStr)
//四舍五入
var newNum = num.toFixed(2)
console.log(newNum)

Math内置对象

方法	含义
Math.floor()	向下取整，称为地板函数
Math.ceil()	向上取整，称为天花板函数
Math.max(a,b)	求a和b中的最大值
Math.min(a,b)	求a和b中的最小值
Math.random()	随机数，默认0-1之间的随机数

随机数计算公式：min+Math.random()*(max-min),求min～max之间的数

    var num = 100+Math.random()*(300-100);
    console.log(num.toFixed());
    // toFixed()取整

函数

函数：就是将一些语句进行封装，然后通过调用的形式，执行这些语句，函数的作用：解决大量的重复性语句，简化编程使编程模块化

与python中的函数基本类似，只是声明方式有所不同，JavaScript的函数调用可以在任意地方调用

//声明函数的方式
        //方式1
        function func(x,y){
            return x + y;
        }
        console.log(func(1,2));
        //方式2:匿名函数
        var func2 = function (x,y){
            return x+y;
        }
        console.log(func2(3,2))

JavaScript的面向对象

JavaScript创建对象的方法（部分）

使用Object或对象字面量创建对象
工厂模式创建对象
构造函数模式创建对象
原型模式创建对象

使用Object或对象字面量创建对象

    //使用Object字面量创建对象
    var person = new Object();
    //给对象赋值
    person.name = 'wualin';
    person.age = 20;
    console.log(person);

    //字面量方式1：对象中的函数以匿名函数传给对象函数
    var person2 = {
        name : 'wualin',
        age :22,
        func:function () {
            //this相当于python中的self，指的是对象本身
            console.log(this)
        }
    };
    //方式2：先定义好函数然后再将函数传入对象中
    var person3 = {
        name:'小黑',
        age:12,
        func:func
    };
    function func () {
        console.log(this)
    }

    //调用对象中的方法与属性
    person3.func();//调用方法
    console.log(person3.name);//调用属性

工厂模式创建对象
像工厂车间一样不停的生产对象，避免代码冗余，调用几次就生成几个对象

    //工厂模式创建对象:避免代码重复
    function ceratePerson(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        return obj;
    }
    var person1 = ceratePerson('alex',21);
    var person2 = ceratePerson('wualin',22);
    console.log(person1 instanceof Object);//instanceof判断某某是某某，返回值是true或者false

构造函数模式创建对象:使用new关键字来创建对象

    // 使用构造函数创建对象
    //与python中类似，用来区分对象是属于哪个类型的
    //函数名首字母大写
    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    var p1 = new Person('alex',21);
    console.log(p1 instanceof Person);//判断p1是不是Person类

原型模式创建对象

    //原型模式创建对象 propotype 它是当前类的父类
    function Person(name,age) {
        this.name = name;
        this.age = age;

    }
    //prototype相当于继承
    Person.prototype.alterNanem = function () {
        alert(this.name)//this相当于Person
    };
    var p1 = new Person('alex',18);//对象继承父类的方法
    p1.alterNanem();

补充

arguments的使用

arguments伪数组，有数组的索引以及length属性，但是没有数组的方法

    function add () {
        console.log(arguments);
        for (var i=0;i<arguments.length;i++){
            console.log(arguments[i]);
        }
    }
    add('wualin','miao')

Date的使用

        //使用构造函数创建一个时间对象
        var myDate = new Date();
		console.log(myDate);

		// 获取本地时间  月份中第几天（1~31）
		console.log(myDate.getDate());

		// getMonth()  获取指定日期对象月份（0~11）
		console.log(myDate.getMonth()+1);

		//  返回四位数的年份
		console.log(myDate.getFullYear());

		// 0 代指的是星期天
		// getDay() 返回一星期中星期几   0~6
		console.log(myDate.getDay());

		//getMinutes() getSecond()
		console.log(myDate.getMinutes());
		console.log(myDate.getSeconds());

		// 返回本地时间
		console.log(myDate.toLocaleString())

Json的用法

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

json的两种结构：对象&数组

对象

    //对象
    var packJSON = {"name":"wualin","age":29};

数组

    //数组
    var packJSON = ["wualin","miao","alex"];

JSON对象和JSON字符串转换
字符串转json对象

    //字符串转json
    var jsonStr = '{"name":"wualin","age":29}';
    var jsonobj = JSON.parse(jsonStr);
    console.log(jsonobj.name);

json对象转字符串

    //json对象转字符串
    var jsonObj = [{"name":"wualin","age":29},{"name":"alex","age":19}];
    var jsonStr = JSON.stringify(jsonObj);
    console.log(jsonStr);
    console.log(typeof jsonStr);

遍历JSON对象和JSON数组

遍历JSON对象

    //遍历json对象
    var jsonobj = {"name":"wualin","age":19};
    for (var key in jsonobj){
        console.log(key + ' ' + jsonobj[key]);
    }

遍历json数组

    var list = [1,2,3,4,5,6,7,8];

    for (var i in list){
        console.log(i,list[i])
    }