AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts1

分类：ES6作者：编程之家原文地址

文章目录


此篇仅包含JS语法基础

编程语言

分为机器语言，汇编语言，高级语言（C++,Pyhton,Jave…)；
高级语言需要翻译器翻译成计算机能识别的；

计算机基础

计算机组成

在这里插入图片描述

JavaScript初识

JS的概念

JS是一种运行在客户端的脚本语言（Script）是脚本的意思；脚本语言：不需要编译，运行过程由js解释器（js引擎）逐行来进行解释并执行；现在也可以基于Node.js技术进行服务器端编程；

在这里插入图片描述

JS的作用

在这里插入图片描述

HTML/CSS/JS的关系

HTML/CSS标记语言-描述类语言
JS脚本语言-编程类语言

浏览器执行JS简介

浏览器分为两部分：渲染引擎和JS引擎

在这里插入图片描述

浏览器本身并不执行JS代码，而通过内置JS引擎（解释器）执行JS代码，JS引擎执行代码时逐行解释每一句源码（转为机器语言）然后计算机去执行，所以JS语言归为脚本语言，会逐行解释执行。

JS的组成

在这里插入图片描述


在这里插入图片描述


js有三种书写位置，分为行内、内嵌、外部。
js用单引号，html用双引号；
ECMA简称es

js输入输出语句

@H_886_404@    // 这是一个输入框
    prompt('请输入您的年轻');
    // alert弹出警示框 输出的 展示给用户的
    alert('计算的结果是：');
    // console 控制台输出，给程序员测试用
    console.log('我是程序员能看到的');

给程序员看到的在检查网页的console里看；想要输出多个变量用逗号分开即可~

变量

什么是变量

变量是存放数据的容器，通过变量名获取数据，甚至修改数据；
本质：变量是内存中申请的存放数据的一块空间；

变量的使用

声明变量

var age;

在这里插入图片描述

@H_886_404@    // 1.声明了一个age的变量
    var age;
    // 2.赋值,把值存到变量中
    age = 18;
    // 3.输出结果
    console.log(age);
    // 变量的初始化
    var myname = 'xiaohu';
    console.log(myname);

变量应用（弹出输入的用户名）

@H_886_404@    // 用户输入名字 存储到myname的变量里
    var myname = prompt('请输入您的用户名');
    // 弹出用户名
    alert(myname);

变量的语法扩展

@H_886_404@    // 1.更新变量
    var myname = '小苹果';
    console.log(myname);
    myname = '肖央';
    console.log(myname);
    // 2.声明多变量
    var age = 18,
        address = '火影村',
        gz = 2000;
    // 3.声明变量的特殊情况
    // 3.1 只声明不赋值 结果是undefined 未定义的
    var sex;
    console.log(sex);
    // 3.2不声明不赋值,会报错,且不会继续执行后面的内容
    // console.log(apple);
    // 3.3不声明只赋值,可以,但这个是全局变量
    sex = 'girl';
    console.log(sex);

变量命名规范

在这里插入图片描述

交换两个变量值

@H_886_404@    var apple1 = '青苹果';
    var apple2 = '红苹果';
    var temp;
    temp = apple1;
    apple1 = apple2;
    apple2 = temp;
    console.log(apple1);
    console.log(apple2);

数据类型

简介

在计算机中，不同的数据所需占用的存储空间不同

变量的数据类型

JS是一种弱类型或动态类型的语言，变量是不确定它属于哪张数据类型，只有程序在运行过程中根据等号右边的值来确定，变量的数据类型是可以变化的；

数据类型的分类

JS分为两类：
简单数据类型 复杂数据类型

简单数据类型（基本数据类型）

在这里插入图片描述

数字型

八进制：在数值前面加0，log后显示的是转换成的10进制。
十六进制：在数值前面加0x 0-9 a-f

@H_886_404@    var num2 = 010;
    console.log(num2);
    var num3 = 0xa;
    console.log(num3);
    // 数字型的最大值
    alert(Number.MAX_VALUE);
    // 1.7976931348623157e+308
    // 数字型的最小值
    alert(Number.MIN_VALUE);
    // 5e-324
    // 数字型的最大值
    alert(Number.MAX_VALUE);
    // 1.7976931348623157e+308
    // 数字型的最小值
    alert(Number.MIN_VALUE);
    // 5e-324
    // 无穷大 Infinity
    console.log(Number.MAX_VALUE * 2);
    // 无穷小 -Infinity
    console.log(-Number.MAX_VALUE * 2);
    // 非数字 NaN
    console.log('xiaopingg' - 100);
    // isNaN()判断是否不是数字,用于验证用户输入的是不是数字
    console.log(isNaN(12));

在这里插入图片描述

字符串型

转义符要在引号里面
注意是反斜杠！

在这里插入图片描述

@H_886_404@    // 关于引号外单内双(或外双内单)
    var str = '我是一个"白富美"程序媛';
    console.log(str);
    var str1 = "我是一个'白富美'\n的程序媛";
    console.log(str1);
    var str = 'my name is andy';
    console.log(str.length);
    //.length检测字符串长度

+号口诀，数值相加，字符相连

@H_886_404@    // 关于引号外单内双(或外双内单)
    var str = '我是一个"白富美"程序媛';
    console.log(str);
    var str1 = "我是一个'白富美'\n的程序媛\\";
    console.log(str1);
    //length检测字符串长度
    var str = 'my name is andy';
    console.log(str.length);
    //字符串拼接+ 只要有字符串和其他类型拼接,最终是字符串型
    console.log('沙漠' + '骆驼' + 10);
    console.log(12 + 12);//24
    console.log('12' + 12);//1212
    var age = 18
    console.log('pink' + age + '岁');

解释型语言和编译型语言

js是解释型语言 java是编译型语言；

在这里插入图片描述

运算符

算术运算符

浮点数精度问题

在这里插入图片描述

表达式和返回值

表达式由数字、运算符、变量等组成的式子；
结果就是返回值，如2=1+1， 2就是返回值；

前（后）置自增（减）运算符

必须和变量一起使用噢~

@H_886_404@    var num = 1;
    num = num + 1;//++num；
    console.log(num);//2
    console.log(++num + 10);//13
    age = 10;
    age++;
    console.log(age);//11
    console.log(age++ + 10);//21 不是22噢~先返回11进行运算，后来age才变化；
    console.log(age);//12

前置自增和后置自增如果单独使用效果是一样的，后置自增先返回原值后自加1；见上面age的例子；代码常用的是后置递增且独占一行。

比较运算符

@H_886_404@    // 等号==会自动转换数据类型 ！=不等
    console.log(18 == '18');//true
    //全等===数据类型和值都要一样 !==不全等
    console.log(18 === '18');//false

    var num1 = 10;
    var num2 = 100;
    var res1 = num1 > num2;//false
    var res2 = num1 == 11;//false
    var res3 = num1 != num2;//true
    console.log(res1);
    console.log(res2);
    console.log(res3);

逻辑运算符

@H_886_404@      // 逻辑与&&
    console.log(3 > 5 && 3 > 2);//false
    console.log(3 < 5 && 3 > 2);//true
    // 逻辑或 ||
    console.log(3 < 5 || 3 < 2);//true
    console.log(3 > 5 || 3 < 2);//flase
    // 逻辑非!
    var isOK = !true;
    console.log(isOK);//false
    console.log(!true);//false

逻辑中断（短路操作）

当逻辑与（或）两端是表达式或值时：
123 & 456
（表达式1）&&（表达式2）
逻辑与：如果表达式1是真，则返回表达式2，如果表达式1是假，则返回表达式1；
（0 ’ ’ null undefined NaN都是假）
逻辑或：如果表达式1是真，则返回表达式1，如果表达式1是假，则返回表达式2；

注意：逻辑中断相当于执行到那里就中断了

@H_886_404@    var num = 0
    console.log(123 || num++);//123
    console.log(num);//0
    var num = 0
    console.log(123 && num++);//0
    console.log(num);//1

###运算符优先级

在这里插入图片描述

JS流程控制

流程控制

在这里插入图片描述

分支结构

if语句（else)

if (条件表达式) {
条件表达式为真就执行这条语句；
}
else后面直接跟大括号

@H_886_404@    var age = prompt('请输入您的age:')
    if (age >= 18) {
        alert('欢迎光临');
    }

    var age = prompt('请输入您的age:')
    if (age >= 18) {
        alert('欢迎光临');
    } else {
        alert('不欢迎你');
    }

if else if多分支语句

在这里插入图片描述

三元表达式

有三元运算符组成的表达式；如? :
(条件表达式）?表达式1：表达式2
如果条件表达式成立则输出表达式1，否则输出表达式2；

@H_886_404@    var num = 10;
    var result = num > 5 ? 'yes' : 'no';
    console.log(result);

switch语句

switch里（）通常为变量，case后的和switch里的表达式要**===全等**！ 要写break不然会继续执行下一个case;

switch(x) {
case x:
xxx;
break;
case x:
xxx;
break;
…
default:
xxx;
}

在这里插入图片描述


下面这个案例一定要加引号，因为输入是string数据类型，必须是全等！

@H_886_404@    var fruit = prompt('请输入水果：');
    switch (fruit) {
        case '榴莲':
            alert('70/斤');
            break;
        case '苹果':
            alert('2.5/斤');
            break;
        default:
            alert('没有这个水果');
    }

循环语句

for(初始化变量;条件表达式;操作表达式）{
//循环体
}

在这里插入图片描述

断点调试

通过F12检查Sources里点击要设置断点的一行，刷新后，按下面这个到下一步

在这里插入图片描述


可以通过watch观察i循环多少次了：

在这里插入图片描述

for案例

一行打印五颗♥

@H_886_404@    var str = '';
    for (var i = 1; i <= 5; i++) {
        str += '♥';
    }
    console.log(str);

双重for循环

案例，打印五行五列♥

@H_886_404@    // 打印五行五列的♥
    var str = '';
    for (var i = 1; i <= 5; i++) {
        for (var j = 1; j <= 5; j++) {
            str += '♥';
        }
        str += '\n';
    }
    console.log(str);

打印倒三角：

@H_886_404@    // 打印倒三角
    var str = '';
    for (var i = 1; i <= 10; i++) {
        for (var j = i; j <= 10; j++) { str += '♥'; }
        str += '\n';
    }
    console.log(str);

结果：

在这里插入图片描述


打印九九乘法表：

在这里插入图片描述


代码：

@H_886_404@    str = '';
    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            var res = i * j;
            str += j + '*' + i + '=' + res + '\t';
        }
        str += '\n';
    }

while循环

while(条件表达式) {
//循环体
}

while循环与do while循环

@H_886_404@    var age = 1;
    while (age <= 100) {
        console.log(age);
        age++;
    }
    var age = 1;
    do {
        console.log(age);
        age++;
    } while (age <= 100)

在这里插入图片描述


do while循环语句至少执行一次；

continue和break

continue用于退出当前次循环，但继续执行后面的循环。
break关键字用于立刻跳出整个循环。

@H_886_404@    for (var i = 1; i <= 5; i++) {
        if (i == 3) {
            continue;
        }
        console.log(i);// 1 2 4 5 
    }
    for (var i = 1; i <= 5; i++) {
        if (i == 3) {
            break;
        }
        console.log(i);//1 2
    }

JS命名规范和语法格式

标志符命名规范

在这里插入图片描述


还有操作符规范…

数组

数组概念和创建

数组array是一组数据的集合，存储在单个变量中。里面的数据类型不限，数组元素要用逗号隔开。

@H_886_404@    // 创建数组方法1：
    var arr = new Array();
    var arr1=new Array(2);//表示数组长度为2，里面是空的数组元素
    var arr1=new Array(2,3);//写多个数到里面，就是创建数组，里面的元素是2，3
    // 创建数组方法2：
    var arr = [];//创建一空数组
    var arr1 = [1, 2, 'pink', true];
    //里面的数据为数组元素

检测是否为数组（对象）

@H_886_404@    // 判断是否是数组
    // instanceof运算符检测是否为数组
    var arr = [],
        obj = {};
    console.log(arr instanceof Array);
    //Array.isArray(参数) H5新增方法 IE9以上版本浏览器可以用
    console.log(Array.isArray(arr));

数组的索引

索引号从0开始

@H_886_404@    // 获取数组元素 数组名[索引号] 
    console.log(arr1);
    console.log(arr1[2]);//pink
    console.log(arr1[5]);//undefined

indexOf():对象

@H_886_404@    //indexOf在括号里写数组元素，返回数组的索引；如果有多个相同的元素，则返回第一个索引；如果数组没有查找的元素则返回-1；
    console.log(arr2);
    var arr3 = [12, 4, 77, 1, 7];
    console.log(arr3.indexOf(4));
    //LastIndexOf也是返回数组的索引，但它是从后面往前查找，索引号不变
    console.log(arr3.lastIndexOf(4));

遍历数组

即把数组从头到尾访问一次

在这里插入图片描述

数组长度

数组名.length

在这里插入图片描述

@H_886_404@    //求数组[2,6,1,7,4]所有元素和与平均值
    var arr = [2, 6, 1, 7, 4],
        sum = 0;
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    // console.log(sum);
    // console.log(sum / arr.length);
    console.log(sum, sum / arr.length);

数组案例求最大值

@H_886_404@    var arr = [2, 6, 17, 9, 21, 8],
        max = arr[0];
    for (i = 1; i < arr.length; i++) {
        if (max < arr[i]) {
            max = arr[i];
            continue;
        }
    }
    console.log(max);

另一种方法：（Math对象）

在这里插入图片描述

数组去重（对象）

@H_886_404@    function unique(arr) {
        let newArray = [];
        for (i = 0; i < arr.length; i++) {
            if (newArray.indexOf(arr[i]) == -1) {
                newArray.push(arr[i]);
            }
        }
        return newArray;
    }
    var res = unique([1, 1, 3, 3, 9, 10, 8, 9]);
    console.log(res);

新增数组元素

1.修改length长度；

@H_886_404@    var arr = [1, 2, 3, 4];
    console.log(arr.length);
    arr.length = 5;
    console.log(arr);
    console.log(arr[4]);//undefined

2.新增数组元素，修改索引号，注意不要直接给数组名赋值不然所有数组元素都换了。

@H_886_404@    var arr1 = [1, 2, 3];
    arr1[3] = 4;
    console.log(arr1);//[1,2,3,4]
    arr1[0] = 9;
    console.log(arr1);//[9,2,3,4]替换了原来的数组元素

push()和unshift()–对象

@H_886_404@    var arr1 = [1, 2, 3, 4];
    // arr1.push(4, 'pink');
    console.log(arr1.push(4, 'pink'));//6
    console.log(arr1);//[1, 2, 3, 4, 4, "pink"]
    //push可以给数组追加新元素；括号里直接写元素就可以；push完毕后返回的结果是数组的长度；原数组也会放生变化；

    // arr1.unshift('red', 'purplr');
    console.log(arr1);//["red", "purplr", 1, 2, 3, 4, 4, "pink"]
    console.log(arr1.unshift('red', 'purplr'));//8
    //unshift可以在数组前给它添加新元素；括号里直接写元素就可以；push完毕后返回的结果是数组的长度；原数组也会放生变化；

案例1：找出数组中大于10的数并构成一个新的数组。

@H_886_404@    var arr1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7, 10],
        arr2 = [],
        j = 0;
    for (var i = 0; i < arr1.length; i++) {
        if (arr1[i] >= 10) {
            arr2[j] = arr1[i];
            j++;
        }
    }
    console.log(arr2);
   //方法2
    var arr1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7, 10],
        arr2 = [];
    for (var i = 0; i < arr1.length; i++) {
        if (arr1[i] >= 10) {
            arr2[arr2.length] = arr1[i];
        }
    }
    console.log(arr2);

案例2：数组翻转，把数组的内容从后到前排列重组。

@H_886_404@    //方法1
    var arr5 = ['red', 'orange', 'yellow']
    arr6 = [];
    for (i = arr5.length - 1; i >= 0; i--) {
        arr6[arr6.length] = arr5[i]
    }
    console.log(arr6);
    //方法2（对象）
    arr.reverse()

案例3：冒泡排序(源码/sort实现）

原理：从头到尾比较两两值的大小，如果不符合从大到小（或从小到大）就交换两两值。
外层for循环管循环的趟数，arr.length个元素就有arr.length-1趟，内层循环是每一趟要交换的次数，arr.length个元素，第0趟交换arr.length-1次，第1趟交换arr.length-2次…第i趟交换arr.length-i-1次（注意趟数是从0开始）

@H_886_404@    var arr = [6, 2, 4, 1, 3, 5],
        temp = 0;
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
            if (arr[j + 1] < arr[j]) {
                temp = arr[j + 1];
                arr[j + 1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    console.log(arr);
            //数组排序（冒泡）--对象
    var arr2 = [12, 4, 77, 1, 7];
    /*         arr2.sort();
                    console.log(arr2);//[1,12,4,7,77];按每一位来比较 */
    arr2.sort(function (a, b) {
        return b - a;//a-b为升序，b-a为降序
    });
    console.log(arr2);

删除数组元素（对象）

@H_886_404@    // pop删除数组最后一个元素
    console.log(arr1.pop());//返回的是删除的元素pink
    console.log(arr1);//["red", "purplr", 1, 2, 3, 4, 4]

    //shift删除第一个元素
    console.log(arr1.shift());//返回的是删除的元素red
    console.log(arr1);//["purplr", 1, 2, 3, 4, 4]

数组转为字符串（不影响原数组）–对象

@H_886_404@    var arr = ['pink', 'red', 'blue'];
    var arr2 = arr.toString()//pink, red, blue
    console.log(typeof arr2);//string
    var arr3 = arr.join('-');
    console.log(arr3);//pink-red-blue

其他–对象

在这里插入图片描述

基本包装类型

基本包装类型指的是把简单数据类型包装成了复杂数据类型；

在这里插入图片描述

字符串的不可变

给字符串赋值，旧的字符串并不会删除掉，会在内存新开辟一块空间存放这个字符串，然后str就指向这个新的空间。（慎用拼接…)
也就是说看上去变了的字符串其实是地址变了。

字符串对象 根据字符返回位置indexOf()

@H_886_404@    // str.indexOf('要查找的字符',[起始位置])
    var str = '改革春风吹满地,春天来了';
    console.log(str.indexOf('春', 3));//起始位置只要在2之前都返回2，在2之后都返回8;

查找案例（数组的写法同理）

@H_886_404@    // 查找所有o的位置并把所有的位置索引输出
    var str = 'abcofrqgjhdjojdioew';
    var index = str.indexOf('o');
    var num = 0;
    while (index != -1) {
        num++;
        console.log(index);
        index = str.indexOf('o', index + 1);
    }
    console.log(num);

根据位置返回字符

1.charat(index)

@H_886_404@    var str = 'abcofrqgjhdjojdioew';
    console.log(str.charat(4)); //f

2.charCodeAt(index) 返回相应索引号的字符的ASCII码 目的：判断用户按下了哪个键

在这里插入图片描述


3.str[index] H5新增的

案例Important（找字符串出现次数最多的字符）

@H_886_404@    var str = 'abcofrqgjhdjojdioew';
    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 ch = '';
    for (var k in o) {
        //k得到的是属性名，o[k]是属性值
        if (o[k] > max) {
            max = o[k];
            ch = k;
        }
    }
    console.log('最多的字符是：' + ch + '出现的次数是：' + max + '次');

其他方法（拼接，截取，替换，转数组）

在这里插入图片描述

concat(’’)拼接
substr(起始位置,个数）截取字符串
replace(‘被替换的字符’,‘替换为的字符’)

@H_886_404@    var stri = 'andyandy';
    console.log(stri.replace('a', 'b'));//只能替换第一个a  bndyandy
    //有一个字符串'abcjkdhsadadde'把所有a替换成*
    var str1 = 'abcjkdhsadadde';
    while (str1.indexOf('a') !== -1) {
        str1 = str1.replace('a', '*');
    }
    console.log(str1);

split(‘分隔符’)

@H_886_404@    var str = 'pink,red,blue';
    var str1 = 'pink&red&blue';
    console.log(str.split(','));
    console.log(str1.split('&'));

函数

函数概念何使用

函数是封装了一段可以被重复执行调用的代码块。
目的：让大量代码重复使用。

在这里插入图片描述


在这里插入图片描述

函数的参数

在这里插入图片描述


形参：在声明函数的小括号里面，形式上的参数。形参是可以不用声明的变量。
实参：在调用函数的小括号里，实际参数。
在声明函数时函数是不会执行的，调用函数时，实参会传递给形参，形参接受实参，函数被执行。

当形参和实参参数不匹配

在这里插入图片描述


任何数+undefined结果是NaN

return语句（注意事项）

在这里插入图片描述


相当于给调用的那句赋值。
案例：

@H_886_404@    // 求任意俩数的最大值
    function getMax(num1, num2) {
        var max = num1;
        if (num1 < num2) {
            max = num2;
        }
        return max;
    }
    console.log(getMax(10, 9));
    // 写法2：
    function getMax(num1, num2) {
        return num1 > num2 ? num1 : num2;
    }
    console.log(getMax(10, 99));


       // 利用函数求数组[5,2,99,101,67,77]中的最大数值。
    function getMax(arr) {
        var max = arr[0];
        for (var i = 1; i < arr.length; i++) {
            max = arr[i] > max ? arr[i] : max
        }
        return max
    }
    // console.log(getMax([5, 2, 99, 101, 67, 77])); 
    var res = getMax([5, 2, 99, 101, 67, 77]);
    console.log(res);

return终止函数，即遇到这个代码就终止函数的执行了。
且return只能返回一个值！要返回多个值可以用数组。

在这里插入图片描述


如果函数没有return则返回undefined。

arguments的使用

在这里插入图片描述


在这里插入图片描述


内置=无需再声明。

@H_886_404@    // 利用函数求任意个数的最大值
    function getMax() {
        var max = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            max = arguments[i] > max ? arguments[i] : max
        }
        return max
    }
    var res = getMax(5, 2, 99, 101, 67, 77);
    console.log(res);

函数实例

@H_886_404@    // 函数翻转任一数组
    function reverse(arr) {
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i];
        }
        return newArr;
    }
    var new_arr = reverse(['red', 'yellow', 'pink', 'blue']);
    console.log(new_arr);

函数声明方式

在这里插入图片描述

下面那种又叫匿名函数，它没有函数名。他也可以进行参数的传递：

在这里插入图片描述

JS作用域

作用域

概念

代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，减少命名冲突。

分类

js的作用域（es6之前）：全局作用域 局部作用域。
全局作用域 ：整个script标签，或一个单独的js文件；
局部作用域（函数作用域）：函数内部；

在这里插入图片描述


既能输出10（全局）又能输出20（局部）。

变量的作用域

根据作用域的不同变量分为全局变量和局部变量。
全局变量：在全局作用域下的变量，函数内部也可以使用。
局部变量：在局部作用域下的变量，只能在函数内部使用。
注意：如果在函数内部没有声明直接赋值的变量，也属于全局变量；函数的形参也可以看作是局部变量。
从执行效率来看：全局变量只有浏览器关闭时才会销毁，比较占内存；局部变量当程序执行完就销毁。

块级作用域

js中在es6之前没有块级作用域。
块级作用域：花括号里面的作用域{} 如：if{} for {}
现在是可以在外面调用的噢~

在这里插入图片描述

作用域链

内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构成为作用域链。（就近原则）

在这里插入图片描述


案例：

在这里插入图片描述

在这里插入图片描述

JS预解析

js解析器在运行js代码时分两步：预解析 、执行。
预解析：js引擎会把js里面所有的var和function提升到当前作用域的最前面。
代码执行：按照代码书写的顺序从上往下执行。
预解析分为变量预解析（变量提升）和函数预解析（函数提升）。

变量预解析（变量提升）就是把所有变量声明（不提升赋值）提升到当前作用域的最前面。

在这里插入图片描述


函数解析（函数提升）就是把所有函数声明（不执行）提升到当前作用域的最前面。函数表达式那种不可以，函数表达式调用必须写在函数下面！

在这里插入图片描述


案例：
1.undefined

在这里插入图片描述


在这里插入图片描述


2.undefined 20

在这里插入图片描述


在这里插入图片描述


3.undefined 9

在这里插入图片描述

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

对象

对象概念

对象是一个具体的事物。（不是泛指的）
js中对象是一组无序的相关属性和方法的集合。所有事物都是对象，如字符串、数值、数组、函数…
属性：事物特征（名词）
方法：事物的行为（动词）

在这里插入图片描述

为什么需要对象

在这里插入图片描述

创建方式

对象字面量创建对象{}

@H_886_404@    var obj = {
        uname: '张三疯',
        age: 18,
        sex: '男',
        sayHi: function () {
            console.log('hi~');
        }
    }
    //方法冒号后面跟的是匿名函数
    // 调用方法下面两中，后者必须加''';
    console.log(obj.uname);
    console.log(obj['age']);
    // 方法调用千万加小括号
    obj.sayHi();

变量和属性；函数和方法

在这里插入图片描述

new Object创建对象

@H_886_404@    //利用new Object创建对象
    var obj = new Object();
    obj.uname = '胡佩瑶';
    obj.age = 18;
    obj.sayHi = function () {
        console.log('hi~');
    }
    // 调用方法一样

构造函数创建对象

但我们希望创建多个对象时就可以使用函数创建对象。

在这里插入图片描述


在这里插入图片描述

@H_886_404@    function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function (song) {
            console.log(song);
        }
    }
    var ldh = new Star('刘德华', 18, '男');
    //构造函数名字首字母大写
    // 构造函数不需要return
    // 调用构造函数必须要用new，只要调用了就创建了对象
    console.log(typeof ldh);
    console.log(ldh.name);
    ldh.sing('她来听我的演唱会')
    var zxy = new Star('zxy', 50, 'man');
    console.log(zxy.age, zxy.sex);

调用构造函数就是实例化的过程。

在这里插入图片描述

@H_886_404@    var obj = {
        name: 'pink',
        age: 18,
        getJob: function () {
            console.log('老师');
        }
    }
    for (var k in obj) {//一般都写k或key
        console.log(k);//得到属性名
        console.log(obj[k]);//得到属性值，不加引号
    }

内置对象

Math对象

在这里插入图片描述

@H_886_404@    var myMath = {
        PI: 3.1415926,
        max: function () {
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (max < arguments[i]) {
                    max = arguments[i];
                }
            }
            return max;
        },
        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.PI);
    console.log(myMath.max(1, 3, 5, 7, 0));
    console.log(myMath.min(1, 3, 5, 7, 0));

Math.abs() 取绝对值，含隐式转换；
Math.PI //圆周率

在这里插入图片描述


在这里插入图片描述


Math.random()取 0<=x<1随机小数

@H_886_404@    //得到两个数之间随机的整数（包含这两个数）
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    console.log(getRandom(2, 4));
    //随机点名
    var arr = ['pink老师', 'hpy', '鸣人'];
    console.log(arr[getRandom(0, arr.length)]);

日期对象（封装时间函数

在这里插入图片描述

@H_886_404@    // 封装函数返回当前的时分秒 格式 08：08：08
    function getTime() {
        var time = new Date();
        var h = time.getHours();
        h = h < 10 ? '0' + h : h
        var m = time.getMinutes();
        m = m < 10 ? '0' + m : m
        var s = time.getSeconds();
        s = s < 10 ? '0' + s : s
        return h + ':' + m + ':' + s;
    }
    console.log(getTime());



    // Data总的毫秒数（时间戳） 不是当前世界的毫秒数而是距离1970年1月1日过了多少毫秒
    var date = new Date();
    console.log(date.valueOf());
    console.log(date.getTime());
    var date1 = +new Date()//返回的就是毫秒数
    console.log(date1);
    // H5新增,考虑兼容性
    console.log(Date.Now());

简单数据类型和复杂数据类型

内存分配

复杂数据类型就是new声明的那些。注意：

@H_886_404@    //简单数据类型null 返回的是一个空对象object
    console.log(typeof null);

在这里插入图片描述


简单数据类型直接在栈里开辟空间，存放的是值；复杂数据类型在栈里开辟空间存放十六进制的地址，然后地址指向堆里面的数据。

在这里插入图片描述

传参

简单类型传参：

输出11，10

在这里插入图片描述

复杂数据类型传参

怕记录的不够清晰，可以参考

https://www.bilibili.com/video/BV1Sy4y1C7ha?p=190&spm_id_from=pageDriver

在这里插入图片描述


输出： 刘德华 刘德华 张学友 张学友

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ES6模块的import和export用法总结
原文连接：https://www.cnblogs.com/dupd/p/5951311.htmlES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，...
浅谈Es6中import * as xxx from几种基本用法
以为Es6，javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块，其中在项目中，我们会经常看到一种用法import * as obj from，这种写法是把所有的输出包裹到obj对象里。示例一 ...
ES6系列文章 异步神器async-await
视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、pro...
TypeScript看完就会了
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开源的编程语言TypeScript是JavaScript的超集，遵循最新的ES5 ES6规范，TypeScript扩展了JavaScript的语法TypeScript更像后端 Java c# 这样的面向对象语言可...
typeScript 变量名 冒号 类名 ＜–这种写法什么意思?
export class AppComponent { title = 'Tour of heroes'; hero: Hero = { id: 1, name: '张三' };}export class Hero { id: number; name: string;}就是这一段,看起来有点晕,这里是实例化...
用 async/await 来处理异步
用 async/await 来处理异步昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。先说一下async的用法，它作为一个关键字放到...
es6之解构赋值
es6的语法已经出了很长的时间了，在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法，但是依旧有很多开发在写代码的时候，依旧没有用es6的语法，而是习惯使用老的语法，这篇文章主要会介绍解构...
TypeScript 定义函数的几种写法
参考链接1 参考链接2写法1 - 使用 function 关键字function greeter(fn: (a: string) =&gt; void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToCo...
es6
ES6简介-ECMAScript是javascript标准-ES6就是ECMAScript的第6个版本-ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型...
ES6的函数写法总结，一看就会！
ES6  在ES5的基础上增加了一些新的特性和写法，特别在函数写法上，增加了箭头函数 1.正经的函数写法//普通的传递值的写法functionsum1(x,y){returnx+y;}constres=sum1(2,3);console.log(res);//传递对象的方式,调...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native