小白のJS学习笔记

  交互效果：用户在该程序上操作，游览器程序给予反馈
    js:动态脚本语言 弱数据类型

一. 注：在程序运行过程中才确定变量数据类型
变量数据类型
1.简单数据类型:Number(包含整数和浮点、String、Boolean、Undefined(声明变量未赋值)、Null(未声明未赋值)
2.复杂数据类型:Object
NaN:非数值标识符-isNaN() 判断是否是非数值
Infinity:无穷大；
数据类 String: 单双引号使用规则: 内单外双 外单内双
booleab:ture(相加时为1),false(相加时为0)
注：获取用户输入的的都是字符串类型
1.2转换类型：字符串类型:1.tosting(value),2.string(value)->强制转换的内置函数,3. + 号 隐式转换为字符串
Number数字类型:
1.parseInt(string) 取整数 只是切出整数
2.parseFloat(string) ->能去除数字后面如px单位
3.Number()强制转换,
4.* / - 运算符隐式转换Number类型
boolean类型:Boolean(value),""、0、null、Nan、undefind都是false，其余值都是ture
注：浮点数在算术运算符中会有精度损失，== 相比时会false
二. 前置自增和后置自增的区别
++i:先自加后返回值
i++:先返回i本身的值，后i自加
比较运算符需要注意的：
== :进行比较时会转为数值型
=== / !== ：全等 判断数据类型、value是否相同
三. 逻辑运算符：
&&: 与 true&&false
||: 或 true||false
! ：非->取反 !true
3.1短路运算： 逻辑 与
1. 如: 123&&456 如左边的值/表达式 已经确认结果时 就不再计算右边的 直接给出左边的结果
2.如左边表达式1为true，返回表达式2
console.log(“哈哈” && “表达式2”); //返回表达式2
3.如左边表达式1为false，返回表达式1，之后的表达式不再执行 哪怕有+相连都不再执行
console.log(0 && “表达式2”); // 返回0
逻辑 或
2.如左边表达式1为true，返回表达式1
console.log(“哈哈” && “表达式2”); //返回 “哈哈”
3.如左边表达式1为false，返回表达式2，之后的表达式不再执行 哪怕有+相连都不再执行
console.log(0 && “表达式2”); // 返回 “表达2”
四
注： if多用于范围判断，switch多用于较为确定的值和数据类型相同时判断。
switch判断效率更高，直接跳到条件所属程序的条件语句

4.1
if (条件表达式) {

}else if(条件表达式) {

}
if (条件表达式) {

}else{

}

4.2
注：合适针对变量的特定值所进行的选项
注：如没写break 会继续执行下一个，直到遇到break为止，break都没有则执行default，在这种情况下不关心是否相等
switch(表达式) {
case value/条件表达式 : //case 本身判断条件为 数据类型与value相等
语句1;
break; //跳出 循环/判断等
case value/条件表达式 :
语句2;
brek;
…
default:
如都不满足，执行最后语句;
}

4.3 三元运算符
条件表达式 ? 表达式1(true) : 表达式2(false);

4.4 while循环 ->返回true时 结束循环 先判断后循环
while (条件表示式) {

}

4.5 do while循环 ->返回true时 结束循环 先执行后判断
do {

} while (条件表示式)

coutinue(跳过本次循环) brek(结束当前)

五.数组
var arr= new Array();
var arr=[];
注：循环遍历时,arr.length 要-1，因为length并没有把0起始偏移量算进去
注:empty翻译过来就是空元素
新增元素:
1.允许用+号新增
2.修改length长度实现数组扩容
3.length属性为可读写
4.arr5.length为数组整体长度，偏移量从0开始;
冒泡排序:将一系列数据按照一定顺序进行排列显示，从小到大或者从大到小等;
当元素冒泡到顶端时，这个元素就不需要再循环比较了
核心：让一个数经过和另一个比较，最大的元素慢慢浮动到顶端，之后完成一次就可减去一个内循环的次数，减少算法复杂度；
名字由来：越大的数会慢慢在数列顶端，直到没用再需要交换的数据；

六.函数
注：编程语言特性除了变量、数据类型、数组、函数等，函数之间是可以进行相互调用的；
所有的都可以相互关联调用的，以如何节省代码、空间复杂度、时间复杂度为主，不要拘泥于形式
注：没有return时返回 undefined
注：js里 封装只是给出函数的一个接口，表现形式一般为变量。
声明方式1
funtion 函数名(形参1,形参2…) {
函数体
return ; //终止并返回最后一个value 也可返回数组等
};
函数名(实参,实参2…);
声明方式2 ->匿名函数 (安全性高)：
var f= funtion (形参1,形参2…) {};
f(实参,实参2…);
函数内置了一个arguments对象，该对象中存储了传递的所有实参。
该对象返回一个伪数组
1.具有length属性、
2.可遍历
3.按[索引]方式存储数据
4.不具有数组的push、pop等方法；

七.作用域
全局变量，游览器关闭时销毁
局部变量 该程序运行完毕后销毁
函数的形参为局部变量
没有块级作用域，es6有块级作用域，没用es6时 {}内所定义的变量可以在外面使用

1.js的作用域链：从最接近的上级开始一级一级的查找

2.js运行机制分为预解析和执行两步，预解析：会把 var(变量预解析/提升) funtion(函数预解析/提升)等声明 
    提升到作用于最前面，优先级高，只提升声明本身，不进行赋值操作，行为语句在中间，赋值操作在后面
    在函数预解析/提升时，带有{}会跟随funtion一起解析
    var a=9,b=9,c=9; 集体声明
    var a=b=c=9,在局部作用域中只有a是声明为局部变量，其余都是全局变量
3.js对象(Object)三种创建方式：
 一. var obj={} //创建空对象 键值对创建形式 
    var obj={
        a:1,
        b:2,
        c:3,
        fangfa: funtion (){//匿名函数
            函数体
        }
    }
    obj.a;
    obj['a'];  //由于是键值对形式 必须要加引号
    obj.fangfa();
二. var obj=new Object();
    obj.a=1;
    obj.fangfa=funtion(){

    }
三.构造函数创建，可创建多个不同或者相同对象,类似于java的类
注：不需要return返回当前对象/函数体内代码
注：首字母大写，this指向当前
    funtion 构造函数名(uname) {
        this.name=uname;//当前函数的属性为 传入的实参
        this.方法=fution(s){
            console.log(this.n); //使用构造函数的属性需要this,指向当前对象所传递的实参
            console.log(s);
        }
    }
    new 构造函数名('有参或者无参都行'); //创建一个对象 才能使用该对象
    构造函数名.name;
    构造函数名['name'];
    构造函数名.方法('value')；
new 关键字：创建某个对象并申请好内存空间，this指向这个对象，再开始执行函数体，最后返回该对象及所存属性方法等
for...in 循环推导式 也可用来遍历对象
for (var i in 对象->如数组、列表、函数等){ //推导函数只是得到函数名和函数体
    console.log(i);//输出属性名 键
    console.log(对象[i]);//输出value 值  对
}

八 内置对象： 学会看文档并使用
Math对象：为静态对象，不是构造函数，无需new 来进行创建并调用对象，可直接访问。
Date对象:只能通过构造函数new调用来实例化日期对象，Date对象没有字面量格式，用常规函数会返回一个字符串。
1.一般参数跟字符串型日期
总的毫秒数，从1970年1月1日至今的毫秒数；valueof(); getTime()
简单写法 var a= +new Date();//总的毫秒数
注：H5新增获取总毫秒数方法
Date.now();
数组(Array)对象: 1. instanceof 运算符 检测是否为数组或者 isArray(obj) 方法判断
注：2~4都是修改原数组 添加删除方法
2.push() 在数组末尾添加一个或者多个数组元素 ,会返回添加后数组的长度；不会让元素移动，减少运算，这个更合适使用
3.unshift() 在数组前面添加一个或者多个数组元素,返回添加后数组的长度。 不建议使用添加在数组前面的
4. pop() 删除数组最后一个元素并将长度减一，无参，返回所删除的值
5. shift() 删除数组第一个元素并将长度减一,无参，返回所删除的值;

                    注：返回新数组            数组排序
                    6.reverse() 颠倒顺序，无参，改变原数组 返回新数组
                    7. sort() 对数组元素进行排序, 改变原数组 返回新数组  只能排序个位数的，碰到多位数时需要重新定义sort方法
                                                 a1.sort(function(a,b){
                                                     return a - b;//升序
                                                     // return b - a;//降序
                                                 })
                    注： 数组索引
                    8. indexOf()  数组中查找指定元素的第一个索引， 存在返回索引号，不存在返回-1 
                    9.lastIndexOf()  返回指定元素在数组中的最后一个的索引，不存在返回 -1。从数组的后面向前查找
                       注：数组转字符串
                    10 tostring() :   转为字符串，逗号分隔每一项,返回字符串
                    11. join('分隔符') :  把所有元素转换为字符串, 返回字符串  不写分割符时默认逗号分割
                    12.  str.splice(index, 1); //从 删除index索引位置的一个
                    
    基本包装类型： 字符串对象 （把简单数据类型保证成复杂数据类型 ）
    引用类型：String boolean Number  字符串不可变 ，最多更改指向地址或开辟新空间，未变前的字符串空间依然存在
        1.字符串对象有的内置函数，所有函数完成都会返回新字符串  
        注：字符串索引从0开始。
             indexOf(value,[起始位置])  : 未找到该值返回-1    默认：从头开始找第一个value并返回索引
             lastIndexOf(value,[起始位置]):    默认：从尾开始找第一个value并返回索引
        重点：根据位置返回字符方法
                1.charAt(index)  返回指定索引的字符
                2.charCodeAt(index)  返回指定索引的字符的ASCll码  为了判断用户按下哪个键
                3.str[index]  返回指定索引的字符 H5新增 IE8+支持和charAt()等效
                4.concat(str1,str2,...) 拼接多个字符串 等效于+；
                5.substr(start,length) 从start开始，length 截取多少个 按索引来
                6.slice(start,end) 从start位置开始，截取到end位置，end取不到。在索引号之前/之后取
                  
                1.replase('被替换的字符','替换的字符')  只替换第一个字符
                2.字符转换为数组split('分隔符')  分隔符是在该方法中去除的
        注：形参和实参用的都是同一个地址

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 要求当前网页使用IE最高版本的内核渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, inital-scale=1.0, maximum-scale=1.0, minimun-scale=1.0">
    <title>js基础练习</title>
    <!--
  
                     
-->
    <script>
        var mname = prompt('第一个数');
        // 获取用户输入的的都是字符串类型
        // 查看数据类型
        alert(Boolean(undefined));
        mname = '哈哈哈嗝:\"收破烂\"\n了';
        alert(mname);
        // a++:先返回i本身的值，后自加
        var a = 5;
        console.log(a++ + 5); //10
        console.log(a + 5); // 11
        var e = 10;
        var d = e++ + ++e; // 1. e++ 后 返回原值 d=10 e本身为11  ++e后 e=11+1 再返回给d d=22= 10 + 12
        console.log(d, "输出e值", e);
        // 如左边的值/表达式 已经确认结果时 就不再计算右边的 直接给出左边的结果
        console.log(e / d && d / e);
        console.log(0 || d / e);
        // 逻辑 与
        // 如左边表达式1为true，返回表达式2
        console.log("哈哈" && "表达式2");
        // 如左边表达式1为false，返回表达式1
        console.log(0 && "表达式2");
        var o = prompt("名字");
        if (o == "刘德华") {
            alert("5");
        } else if (o != "刘德华") {
            alert("未");
        }
        // 三元运算符练习
        var a = prompt("0~99");
        alert(a < 10 ? a = "0" + a : a);
        // for 循环练习
        var nums = 0;
        var z, x;
        for (z = 0; z <= 100; z++) {
            nums = z + nums;
        }
        console.log(x = nums / 100);
        var ou = 0;
        var ji = 0;
        for (var c = 0; c <= 100; c++) {
            if (c % 2 == 0) {
                ou += c;
            } else if (c % 2 != 0) {
                ji += c;
            }
        }
        console.log(ou, ji);
        var numss = 0;
        for (var c = 0; c <= 100; c++) {
            if (c % 3 == 0) {
                numss += c;
            }
        }
        console.log(numss);
        var str = "";
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str += j + "×" + i + "=" + (i * j) + '\t';
            }
            str += "\n";
        }
        console.log(str);
        // while 练习
        var b = 1;
        var sumou = 0;
        var sumji = 0;
        while (b <= 100) {
            if (b % 2 == 0) {
                sumou += b;
            } else if (b % 2 != 0) {
                sumji += b;
            }
            b++;
        }
        console.log(sumji, sumou);
        // do while 练习
        var n = 0;
        var m = 1;
        do {
            n += m;
            m++;
        } while (m <= 100);
        console.log(n);
        // for 循环练习
        var x = "";
        for (var i = 4; i >= 0; i--) {
            for (var j = 0; j <= 5; j++) {
                x += "♥";
                console.log(x);
            }
            console.log("\n");
        }
        // 数组
        var arr = [1, 2, 3, 4];
        for (var i = 0; i <= arr.length - 1; i++) {
            console.log(arr[i]);
        }
        // 数组 最大最小值练习
        var arr2 = [2, 6, 77, 52, 25, 7, 1, 123];
        var max = arr2[0];
        for (var i = 1; i <= arr2.length - 1; i++) {
            if (max > arr2[i]) {
                max = arr2[i];
            }
        }
        console.log(max);
        // 分割字符串练习
        var arr3 = ['a', 'b', 'c', 'd', 'g'];
        var strings = '';
        for (var i = 0; i < arr3.length; i++) {
            if (i < arr3.length - 1) {
                strings += arr3[i] + '|';
            } else if (i = arr3.length - 1) {
                strings += arr3[i];
            }
        }
        console.log(strings);
        arr3.length = arr3.length + 1;
        console.log(arr3.length);
        //放入新数组练习1
        var arr4 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var arr5 = [];
        for (var i = 0; i < arr4.length; i++) {
            if (arr4[i] >= 10) {
                arr5[arr5.length] = arr4[i];
            }
        }
        console.log(arr5);
        //放入新数组练习2
        var arr6 = ["2", "6", "1", "77", "52", "25", "7"];
        var arr7 = [];
        for (var i = arr6.length - 1; i >= 0; i--) {
            arr7[arr7.length] = arr6[i];
        }
        console.log(arr7);
        //冒泡排序练习
        var arr8 = [5, 3, 4, 2, 1];
        for (var i = 0; i < arr8.length; i++) {
            for (var j = arr8.length - 1; j >= 0; j--) {
                if (arr8[j - 1] > arr8[j]) {
                    var a = arr8[j];
                    arr8[j] = arr8[j - 1];
                    arr8[j - 1] = a;
                }
            }
        }
        console.log(arr8);
        //函数练习
        function as(c) {
            var max = c[0];
            for (var i = 0; i < c.length; i++) {
                if (c[i] > max) {
                    max = c[i];
                }
            }
            console.log(max);
            // 函数内置了一个arguments对象，该对象中存储了传递的所有实参。
            //   该对象返回一个伪数组，
            // 1.具有length属性、
            // 2.可遍历
            // 3.按[索引]方式存储数据
            // 4.不具有数组的push、pop等方法；
            for (var j = 0; j < arguments.length; j++) {
                console.log(arguments[j]);
            }
        }
        // 注：没有return时返回 undefined
        console.log(as([5, 2, 99, 101, 67, 77])); //输出为undefined
        // 冒泡排序练习
        function maop(a) {
            for (var i = 0; i < a.length; i++) {
                for (var j = i + 1; j < a.length; j++) {
                    if (a[i] > a[j]) {
                        var d = a[j];
                        a[j] = a[i];
                        a[i] = d;
                    }
                }
            }
            return a;
        }
        var n = maop([1, 9, 46, 498, 123, 2]);
        console.log(n);
        // 构造函数
        function Gz(names) {
            this.n = names;
            this.fangfa = function(s) {
                console.log(this.n);
                console.log(s);
            }
        }
        var a = new Gz('构造函数');
        a.fangfa('练习');
        console.log('构造函数对象', Gz)
            //内置对象练习
        console.log(Math.max(99, 1));
        var myMath = new Object();
        myMath.pi = 3.1415926;
        myMath.max = function() {
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (max < arguments[i]) {
                    max = arguments[i]
                }
            }
            return max;
        }
        myMath.min = function() {
            var min = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (min > arguments[i]) {
                    min = arguments[i]
                }
            }
            return min;
        }
        console.log(myMath.max(123, 456, 77, 1, 356, 777));
        console.log(myMath.min(123, 456, 77, 49, 1, 65, 8, 2.5));
        console.log(myMath.pi);
        //内置对象、猜数字游戏练习
        function getron(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        var b = 0;
        while (b < 10) {
            var yh = parseInt(window.prompt("1~50"))
            b += 1;
            if (yh == getron(1, 10)) {
                console.log(b);
                alert("猜对");
                break;
            } else if (yh > getron(1, 10)) {
                console.log(b);
                alert("大了");
            } else if (yh < getron(1, 10)) {
                console.log(b);
                alert("小了");
            } else if (b == 10) {
                console.log(b);
                alert("已达到10次");
            }
        }
        //日期对象练习
        var date = new Date();
        var datearr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        console.log(date.getFullYear(), date.getMonth() + 1, date.getDate(), "周" + datearr[date.getDay()], " ", date.getHours() + '点', date.getMinutes() + '分', date.getSeconds() + '秒');

        function gethourshm() {
            var h = date.getHours();
            h = h < 10 ? "0" + h : h;
            var m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            var s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return h + ':' + m + ":" + s;
        }
        console.log(gethourshm());
        console.log(Date.now());
        //倒计时练习
        function conutDown(time) {
            var nowtime = +new Date(); //返回当前总毫秒数
            var inputtime = +new Date(time); //返回用户输入的总毫秒数
            var times = (inputtime - nowtime) / 1000;
            var d = parseInt(times / 60 / 60 / 24); //天数
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24) //小时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60); //分钟
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60) //秒数
            s = s < 10 ? "0" + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(conutDown('2020-8-25 19:00:00'));
        //数组对象 添加删除
        var arr = [12, 3, 9, 7, 9, 1, 6, 5, 79, 12, 33, 33];
        console.log(arr instanceof Array);
        console.log(Array.isArray(arr));
        console.log(arr.push(1, 13, 4, 5));
        console.log(arr.unshift('前面', '的'));
        console.log(arr);
        console.log('所删除的值：' + arr.pop());
        console.log(arr);
        console.log('所删除的值：' + arr.shift());
        console.log(arr);
        // 数组排序
        var a1 = arr.reverse();
        console.log(a1);
        a1.sort(function(a, b) {
            return a - b; //升序
            // return b - a;//降序
        })
        console.log(a1);
        //数组查询 索引
        console.log(a1.indexOf('的'));
        console.log(a1[7]);
        console.log(a1.lastIndexOf(12));
        console.log(a1[10]);
        //数组转字符串
        console.log(a1.toString());
        console.log(a1.join());
        // 字符串对象练习
        var k = 'jkljkllcmlasdkjlk'
        console.log(k.indexOf(j));
        console.log(k.lastIndexOf('k'));
        console.log(k.charAt(2)); //l
        console.log(k[2]); //l
        console.log(k.charCodeAt(2)); //返回ASCII码 
        //案例练习
        var l = 'abcoefoxyozzopp';

        function lk(strings) {
            var s = strings.indexOf('o');
            var f = [];
            while (s !== -1) {
                f.push(s);
                s = strings.indexOf("o", [s + 1]);
            }
            return f;
        }
        console.log(lk(l));
        //案例练习2
        var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            if (o[chars]) {
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        var max = 0;
        var m = '';
        for (var i in o) {
            if (max < o[i]) {
                max = o[i];
                m = i;
            }
        }
        console.log(o);
        console.log(m, ':', max);
        //截取字符串
        console.log(str.substr(0, 5));
        //替换字符串
        var u = '1,34,56,7,89';
        console.log(u.replace('3', 9));
        var t = 'k#k#k#k'
        console.log(t.split('#'));
    </script>
</head>

<body>

</body>

</html>