JavaScript基础阶段笔记及案例总结

总结

我觉得没什么好说的,就普普通通的语法知识,跟学习大部分语言一样的过程.另外,总结等到wed API阶段来写吧

初识JavaScript

是什么

1.JS是世界上最流行的语言之一，是一种运行在客户端的脚本语言。
2.脚本语言：不需要编译，运行过程由JS解释器逐行来进行解释并执行。
3.现在也可以基于Node,js技术进行服务端编程

JS有什么用?

1.表单检测
2.网页特效
3.服务端开发
4.桌面程序
5.APP
6.物联网（控制硬件）
7.游戏开发

HTML/CSS/JS的关系

JS的组成

JS注释

变量的概述

变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间

变量声明

//var age；// 声明一个名称为age的变量

变量的扩展

var age = 18,
 	address = '阿阿阿阿',
 	gz = 2000;

//声明变量的特殊情况
var sex;
console.log(sex);// 输出结果:undefined

变量的命名规范

数据类型

数字型

        //数字型Number
        //八进制 要在数字前加0
        var num1 = 010;
        console.log(num1);
        //十六进制 数字前加0x
        var num2 = 0x9;
        console.log(num2);

数字型范围

数字型的三个特殊值

		//无穷大
        alert(Number.MAX_VALUE * 2); //Infinity
        //无穷小
        alert(-Number.MAX_VALUE * 2); //-Infinty
        //NaN 非数字
        console.log('阿阿' - 100); //NaN
        

字符串型 String

字符串引号嵌套

字符串转义符

字符串长度检测

字符串拼接

布尔型

undefined 和 NaN

获取变量数据类型

注：prompt 的取得值是 字符型

转换为字符串类型

        //1.把数字型转换为字符串类型 变量.toString（（）
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        //2.利用string（）强制转换
        console.log(String(num));
        //3.加号拼接字符串也称之为隐式转换
        var num2 = 19;
        var str2 = console.log(num2 + '');
        console.log(typeof str2);

转换为数字型

        //1.parseInt 将字符型转换为数字型 得到的是整数（即抹去小数点）
        var age = prompt('wwww');
         console.log(parseInt(age));
        console.log(parseInt('120px'));
        //2.parseFloat() 同上 但是却得到小数
        console.log(parseFloat('30.14'));
        //3.利用number
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        //4.利用算术运算 - * / 隐式转换
        console.log('12' - 0);
        console.log('123' - '120');

浮点数的精度问题

逻辑运算符

短路与

        //1.用我们的布尔值参与的逻辑运算 true && false == false
        //即如果第一个值为真则返回第二个值，如果第一个值为假，则返回第一个
        console.log( true && false); // false
        
        

短路或

       //2.逻辑或短路运算 如果表达式1 结果为真 则返回表达式1 如果表达式1 为假 则返回表达式2
        console.log(false || false); //f

三元表达式

        //   1.三元表达式
        //   2.条件表达式 ？ 表达式1 ： 表达式2
        //   3.如果条件表达式为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回表达式2的值
        var num = 10;
        var result = num > 5 ? '是的' : '不是的';
        console.log(result); // 是的

判断语句的区别

#循环语句

for循环语句得执行循序

        // for(初始化变量;条件表达式;操作表达式){
     
        //     循环体
        // }
        for (var i = 1; i <= 100; i++) {
     
            console.log('我错了');

        }

初始化变量判断条件是否满足执行循环体i++

循环案例（平均成绩计算）

        //  学生的成绩1+...+A/总人数A
        var average = prompt('请输出总人数');
        var sum = 0;
        for (var i = 1; i <= parseInt(average); i++) {
     
            var achievement = prompt('请输入第' + i + '个同学的成绩');
            sum = sum + parseFloat(achievement);
        }
        alert('总成绩' + sum);
        alert('学生的平均成绩是：' + sum / average + '');

筛选数组

        // 方法1
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        var arr1 = []
        var j = 0;
        for (var i = 0; i < arr.length; i++) {
     
            if (arr[i] >= 10) {
     
                arr1[j] = arr[i];
                j++;
            }
        }
        console.log(arr1);
        // 方法2
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        var arr1 = []
            //刚开始 arr1.length 就是0
        var j = 0;
        for (var i = 0; i < arr.length; i++) {
     
            if (arr[i] >= 10) {
     
                arr1[arr1.length] = arr[i];
            }
        }
        console.log(arr1);

法2先对要更加巧妙一点，因为arr.length的长度的计数会比本身递增的数组元素大一位，所以每当存入一个新元素时都会存到旧元素的后一位。

如:

  var arr = [1,2,3,4]
  console.log(arr) //等于5

冒泡排序

        var arr = [5, 4, 3, 2, 1]
        for (var i = 0; i <= arr.length - 1; i++) {
     
            for (var j = 0; j <= arr.length - 1 - i; j++) {
     
                if (arr[j] > arr[j + 1]) {
     
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);

形参与实参问题

retrun终止函数

        var arr = [5, 2, 99, 101, 67, 77]

        function getArrMax(arr) {
     
            var max = arr[0];
            for (var i = 1; i <= arr.length; i++) {
     
                if (arr[i] > max) {
     
                    max = arr[i];
                }
            }
            return max;//return是终止函数，这之后的代码不会被执行，且只能返回一个值
        }
        console.log(getArrMax(arr));

如果函数有return 则返回的是return后面的值，如果没有 则返回undefined

函数命名的两种方式

全局变量与局部变量

全局变量

局部变量

作用域链

        var num = 10;

        function fn() {
     
            var num = 20;

            function fun() {
     
                console.log(num);
            }

内部函数访问外部函数变量，采取的是链式查找的方式来决定取那个值，这种结构我们称为作用域链

预解析

//1.js引擎运行js 分为两步 预解析 代码执行
//1）.预解析 js引擎会把js里面的所有var 还有function提升到当前作用域的最前面
//2）.代码执行 按照代码书写的顺序从上往下写
//2.预解析 分为 变量预解析（变量提升） 和 函数预解析（函数提升）
//1）.变量提升 就是把所有的变量声明提升到当前作用域的最前面，不提升赋值。
//2）.函数提升 就是把所有函数声明提升到当前作用域的最前面 不调用函数

        //1.js引擎运行js 分为两步 预解析 代码执行
        //1）.预解析 js引擎会把js里面的所有var 还有function提升到当前作用域的最前面
        //2）.代码执行 按照代码书写的顺序从上往下写


        //2.预解析 分为 变量预解析（变量提升） 和 函数预解析（函数提升）
        //1）.变量提升 就是把所有的变量声明提升到当前作用域的最前面，不提升赋值。

        //例1：
        console.log(num);
        var num = 10;
        // 相当于执行了以下代码
        var num;
        console.log(num);
        num = 10;


        //2）.函数提升 就是把所有函数声明提升到当前作用域的最前面 不调用函数

        fun();
        var fun = function() {
     
                console.log(22);

            }
            // 相当于执行了以下代码
        var fun
        fun();
        fun = function() {
     
            console.log(22);

        }

预解析案例

        var num = 10;
        fun();

        function fun() {
     
            console.log(num);
            var num = 20;

        }
        //相当于执行了以下操作


        var num; //将变量提升到当前作用域的最前面
        function fun() {
     
            var num;
            console.log(num);
            num = 20;

        }
        num = 10;
        fun();

        //案例2
        var num = 10;

        function fn() {
     
            console.log(num);
            var num = 20;
            console.log(num);
        }
        fn();

        //执行
        var num;

        function fn() {
     
            var num;
            console.log(num);
            num = 20;
            console.log(num);
        }
        num = 10;
        fn();

        //案例3
        var a = 18;
        f1();

        function f1() {
     
            var b = 9;
            console.log(a);
            console.log(b);
            var a = '123';
        }

        //执行
        var a;

        function f1() {
     
            var b;
            var a;
            b = 9;
            console.log(a);
            console.log(b);
            a = '123';
        }
        a = 18;
        f1();

       //案例4 
        f1();
        console.log(c);
        console.log(b);
        console.log(a);

        function f1() {
     
            var a = b = c = 9;
            //相当于 var = 9，b=9，c=9 bc相当于全局变量看
            console.log(a);
            console.log(b);
            console.log(c);
        }

        //执行
        function f1() {
     
            var a;
            a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a);

对象

对象的创建

        var obj = {
     
            uname: '咳咳',
            type: '爱丽丝加强',
            age: 18,
            color: '棕色',

            bark: function() {
     
                console.log('我干死你');


            },

            showFilm: function() {
     
                console.log('科技哈桑');


            }
        }
        console.log(obj.bark());

new object 创建对象

        var obj = new Object();
        obj.uname = 'll';
        obj.age = 18;
        obj.sex = 'nan';
        obj.sayHi = function() {
     
            console.log('hi~');

        }
        console.log(obj.age);


        var obj2 = new Object();
        obj2.uname = 'Mingren';
        obj2.sex = 'Man';
        obj2.age = 19;
        obj2.skill = function() {
     
            console.log('影分身之术');

        }
        obj2.skill();
        console.log(obj2.sex);

内置对象

        //1.绝对值方法
        console.log(Math.abs(1));
        console.log(Math.abs(-1));
        console.log(Math.abs('1')); //隐式转换,会把字符串转换为数字型;
        //2.三个取整方法

        //1).向下取整 取最小值
        console.log(Math.floor(1.1)); //1
        console.log(Math.floor(1.9)); //1
        //2).向上取整,取最大值
        console.log(Math.ceil(1.1)); //2
        console.log(Math.ceil(1.9)); //2
        //3).四舍五入       其他数字是四舍五入,而 .5 往大取值
        console.log(Math.round(1.4)); //1
        console.log(Math.round(1.5)); //2
        console.log(Math.round(-1.1)); //-1
        console.log(Math.round(-1.5)); //-1
        console.log(Math.round(-1.4)); //-1

构造函数

        //构造函数创建对象
        //创建四大天王的对象
        //构造函数的语法格式
        //   function 构造函数（）{
     
        //       this.属性=值;
        //       this.方法=function(){}
        //   }
        //   new 构造函数(){}
        function Star(uname, age, sex) {
     
            this.name = uname;
            this.age = age;
            this.sex = sex;
        }
        new Star('刘德华', 18, '男');

日期对象

获取时分秒对象

        var arr = new Array(); // 创建一个数组;
        var obj = new Object();
        var time = new Date();
        console.log(time);
        //2 参数常用的写法 数字型 2019,10,01 或者是字符串型 '2019-10-1 8:8:8'
        var date1 = new Date();
        console.log(date1.getFullYear());
        console.log(date1.getMonth()); //返回的月份会小一个月
        console.log(date1.getDate()); //返回几号
        console.log(date1.getDay()); //周一到周六返回1~6 周日是0
        var arr = ['0', '1', '2', '3', '4', '5', '6']
        var day = date1.getDay();
        var month = date1.getMonth() + 1;
        console.log('今天是' + date1.getFullYear() + '年' + month + '月' + '星期' + arr[day]);
        console.log('++++++++++++++++++++++++++++++++++++++++');
        console.log(date1.getHours()); //时
        console.log(date1.getMinutes()); //分
        console.log(date1.getSeconds()); //秒
        //要求封装一个函数返回当前的时分秒
        function getHMS() {
     
            var time = new Date();
            var h = time.getHours();
            var m = time.getMinutes();
            var s = time.getSeconds();
            return h + ':' + m + ':' + s;

        }
        console.log(getHMS());

获取毫秒(时间戳 )

       var date = new Date();

        console.log(date.valueOf());
        console.log(date.getTime());
        // 简单的写法(最常用的写法)
        var date1 = +new Date();
        console.log(date1);
        // H5 新增  获得总的毫秒数
        console.log(Date.now());

倒计时获取

        function conutDown(time) {
     

            var nowTime = +new Date(); //返回当前实际总毫秒数
            var inputTime = +new Date(time); //返回用户输入的实际

            var date = (inputTime - nowTime) / 1000; //date 就是剩余的时间

            var day = parseInt(date / 60 / 60 / 24);
            day = day < 10 ? '0' + day : day;

            var hours = parseInt(date / 60 / 60 % 24);
            hours = hours < 10 ? '0' + hours : hours;

            var minues = parseInt(date / 60 % 60);
            minues = minues < 10 ? '0' + minues : minues;

            var secound = parseInt(date % 60);
            secound = secound < 10 ? '0' + secound : secound;

            return day + '天' + hours + '时' + minues + '分' + secound + '秒';

        }
        console.log(conutDown('2020-7-3 20:00:00'));

数组对象

数组的增删改

        var arr = [1, 2, 3];
        arr.push(4, 5); //添加到末尾 参数直接写数组元素
        console.log(arr);
        console.log(arr.push(4, 5)); //返回值为数组的长度

        //2. unshift 在数组的开头,添加一个或者多个元素
        console.log(arr);
        console.log(arr.unshift(4, 6, 7)); //返回值为数组的长度

        //3.pop() 删除数组的最后一个元素
        var arr1 = [1, 2, 3]
        console.log(arr1.pop()); //返回被删除的那个元素
        console.log(arr1);

        //4.shift() 删除数组的第一个元素
        var arr2 = [1, 2, 3]
        console.log(arr2);
        console.log(arr2.shift()); //返回被删除的那个元素

数组的排序

        //1.翻转数组
        var arr = ['pink', 'sss', 'www'];
        arr.reverse();
        console.log(arr);

        //2.数组排数(冒泡排序)
        var arr1 = [1, 2, 5, 4, 2, 3, 5, 2, 9, 8, 6, 8];
        //对于超过个位数的数 只有以下写法可以解决该方法的排序问题
        var arr2 = [12, 123, 1254, 123, 125, 123, 125, 6, 678, 67, 89]
        arr2.sort(function(a, b) {
     
            // return a - b; //升序
            return b - a; //降序
        });
        console.log(arr2);

        //3.返回数组索引号的方法
        console.log(arr1.indexOf(5)); //如果数组有两个相同元素那返回第一个的索引号,找不到则返回-1
        //4.返回倒序索引号
        console.log(arr1.lastIndexOf(6)); //是从后往前找,但返回正序索引和

数组查重(案例)

        var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];

        function unique(arr) {
     
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
     
                if (newArr.indexOf(arr[i]) === -1) {
     
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var demo = unique(arr)
        console.log(demo);

数组字符串转换及拼接

        //toString
        var arr = [1, 2, 3];
        console.log(arr.toString());
        //join(分隔符)
        var arr1 = ['green', 'blue', 'pink'];
        console.log(arr1.join());
        console.log(arr1.join('-'));
        console.log(arr1.join('##'));

基本包针类型

执行过程:

        var str = 'andy';
        console.log(str.length);

        //(1)把简单数据类型包装成复杂数据类型
        var temp = new String('andy');
        //(2)把临时变量的值 给str
        str = temp;
        //(3)销毁这个变量
        temp = null;

字符串不可变性

求某个字符的位置.出现次数(案例)

        var str = "abcoefoxyozzopp";
        var index = str.indexOf('o');
        var num = 0;
        while (index !== -1) {
     
            console.log(index);
            index = str.indexOf('o', index + 1);
            num++;



        }
        console.log(num);

根据位置返回字符

        //1.根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3));
        //遍历字符串
        for (var i = 0; i < str.length; i++) {
     
            console.log(str.charAt(i));
        }
        //2.返回相应索引号的字符ASCCII值,目的:判断用户按下哪个键
        console.log(str.charCodeAt(0));
        //3.str[index] H5 新增
        console.log(str[2]);

判断出现最多次数和字符(案例***)

        var str = "abcoefoxyozzopp";
        var o = {
     };
        for (var i = 0; i < str.length; i++) {
     
            var chars = str.charAt(i); //chars 是字符串的每一个字符
            if (o[chars]) {
     
                o[chars]++;
            } else {
     
                o[chars] = 1;
            }
        }
        console.log(o);
        //2.遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
     
            //k的带 属性名
            //0[k] 得到的属性值
            if (o[k] > max) {
     
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符' + ch);

字符串转换为数组

        //1.concat
        var str = 'andy';
        console.log(str.concat('red'));
        //2.substr()
        var str1 = '改革春风吹满地';
        console.log(str1.substr(2, 2)); // 从2号位置开始取两个字符

        //3.替换字符串 replace('被替换','替换')
        var str3 = 'andy';
        console.log(str3.replace('a', 'p'));

        var str4 = "abcoefoxyozzopp";
        while (str4.indexOf('o') !== -1) {
     
            str4 = str4.replace('o', '*');
        }
        console.log(str4);

        //4.字符串转化为数组 split('分隔符') 
        var str5 = 'red,pink,blue';
        console.log(str5.split(','));

简单类型与复制类型

堆和栈

在js中是没有堆和栈的概念的

简单数据类型

存放在栈内

简单类型传参

复杂数据类型

复制数据类型,首先在栈内存放地址,十六进制表示,后这个地址指向堆里面的数据

复杂类型传参