【JavaScript基础】

js基础 html、css 属于描述型语言js属于脚本，编程语言js代码是通过内置JavaScript引擎来执行JS代码，（逐行解释每一句源码） 书写位置 行内式内嵌外部 快捷键 注释 单行：CTRL+/多行：Shift+Alt+A修改多行注释的快捷键：Ctrl+Shift+/

---

格式：alt+shift+f

语法基础 输入输出

<script>
        //这是一个输入框
        prompt('请输入您的年龄');
        // alert d出警示框 输出的 展示给用户的
        alert('计算的结果是');
		// console 控制台输出 给程序员测试用
        console('程序员看')
script>

变量

<script>
        //1.声明了一个age的变量
        var age;
        //2.赋值 把值存入这个变量中
        age = 18;
        //3.输出结果
        console.log(age);
        //4. 变量的初始化
        var myname = 'ouyang';
        console.log(myname);
    script>

变量d出用户名

<script>
        //1.用户输入姓名 存储到一个myname的变量里面
        var myname = prompt('请输入您的名字');
        //2.输出这个用户名
        alert(myname);
    script>

语法扩展

<script>
        //1.更新变量
        var myname = 'ou';
        console.log(myname);
        myname = 'yang';
        console.log(myname);
        //2.声明多个变量
        /* var age = 18;
        var address = '思维';
        var gz = 2000; */
        var age = 18,
            address = '思维',
            gz = 2000;
        //3.声明变量的特殊情况
        //3.1只声明不赋值 结果？
        var sex;
        console.log(sex);//undefined
        //3.2不声明 不赋值，直接使用会报错
        console.log(tel);
        //3.3 不声明直接赋值使用
        qq = 110;
        console.log(qq);
    script>

//命名规则：尽量不使用name作为变量名

数据类型

简单数据类型包括Number Boolean String Undefined Null

数字型Number 在js八进制前面加0，十六进制前加0x

//数值的最大值和最小值
alert(Number.Max_VALUE);
alert(Number.MIN_VALUE);

数字的三个特殊值

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

isNaN() 用来判断一个变量是否为非数字的类型，返回true或者false 字符串型String 字符串引号嵌套 *** 外单内双，外双内单*** 字符串转义字符 换行：\n缩进：\t 字符串拼接

//1.获取字符串长度 length
var str = 'my name is kiki';
console.log(str.length);//15
//2.字符串的拼接 + 
console.log('你是' + '谁');//字符串的 你是谁
//3.字符串拼接加强
var age = 18;
console.log('我'+age+'岁');
//"引引加加"

显示年龄案例

var age = prompt('请输入你的年龄');
var str = '您今年已经'+age+'岁了';
alert(str);

布尔型 true参与加法运算当1来看false参与加法运算当0来看如果一个变量声明未赋值，就是undefined未定义数据类型

<script>
var str;
console.log(str);//undefined
var variable = undefined;
console.log(variable + 'pink');//undefinedpink
console.log(variable + 1);//NaN 
//null 空值
        var space = null;
        console.log(space + 'pink');//nullpink
        console.log(space + 1);//1
    script>

typeof检测变量数据类型

<script>
        var num = 10;
        console.log(typeof num);//number
        var str = 'pink';
        console.log(typeof str);//string
        var flag = true;
        console.log(typeof flag);//boolean
        var vari = undefined;
        console.log(typeof vari);//undefined
        var timer = null;
        console.log(typeof timer);//object
//prompt 取过来的值是字符型的
script>

数据类型转换 转换为字符型

<script>
        //1.把数字型转换为字符串型 变量.toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        //2.利用 String(变量)
        console.log(String(num));
        //3.利用+拼接字符串的方法实现转换效果 隐式转换
        console.log(num + '');
    script>

转换为数字型

<script>
        var age = prompt('请输入你的年龄');
        //1.parseInt(变量) 可以把字符型的转换为整数的数字型
        console.log(parseInt(age));
        console.log(parseInt('3.14'));//3 取整
        console.log(parseInt('120px'));//120
        console.log(parseInt('rem120px'));//NaN
        //2.parseFloat(变量) 可以把字符型的转换为数字型 得到的是小数 浮点数
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('120px'));//120
        console.log(parseFloat('rem120px'));//NaN
		//3.利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        //4.利用了算数运算 - * / 隐式转换
        console.log('12' - 0);;//12
        console.log('123' - '120');//3
        console.log('123' * 1);//123
    script>

计算年龄案例

    <script>
        var year = prompt('请输入你的出生年份');
        var age = 2022 - year;
        alert('您今年已经'+age+'岁了');
    script>

简单加法器案例

<script>
	var num1 = prompt('请你输入第一个值：');
    var num2 = prompt('请你输入第二个值：');
    var result = parseFloat(num1) + parseFloat(num2);
    alert('结果为：'+result);
script>

转换为布尔型

boolean()

运算符 循环 continue

退出本次循环进入下次循环

//求100以内，除了能被7整除之外的整数和
<script>
    var sum = 0;
    for(var i = 1; i <= 100; i++){
        if(i % 7 == 0){
            continue;
        }
        sum += i;
    }
    console.log(sum);
script>

break

立即跳出整个循环（循环结束）

数组

<script>
        var arr = [1, 2, 3, 4];
        console.log(arr[0]);//1
        for(var i = 0;i < 4; i++){
            console.log(arr[i]);
        }
        console.log(arr.length);
        for(var i = 0;i < arr.length; i++){
            console.log(arr[i]);
        }
    script>

筛选数组

<script>
       //筛选出数组中大于等于10的元素
        //方法1
        var arr = [2, 3, 6,23, 45, 23, 23, 5];
        var newArr = [];
        var j = 0;
        for(var i = 0;i<arr.length;i++){
            if(arr[i] >=10){
                //新数组索引号从开始
                newArr[j] = arr[i];
                j++;
            }
        }
        console.log(newArr);
        //方法2
        var arr = [2, 3, 6,23, 45, 23, 23, 5];
        var newArr = [];
        for(var i = 0;i<arr.length;i++){
            if(arr[i] >=10){
                //新数组索引号从开始
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    script>

翻转数组

<script>
        //翻转数组
        var arr = ['red', 'aaa', 'blue', 'pink'];
        new newArr = [];
        for(var i = arr.length-1;i>=0;i++){
            newArr[newArr.length] = arr[i];
        }
        console.log(newArr);
    script>

冒泡排序

<script>
        //冒泡排序
        var arr = [6, 2, 1, 8, 2, 9, 3];
        for (var i = 0; i <= arr.length - 1; i++) {
            //外层循环管趟数
            for (var j = 0; j <= arr.length - i - 1; j++) {
                //内层循环管每次交换的次数
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);
    script>

函数

<script>
        //函数分为两步：声明函数和调用函数
        //1.声明函数
        //function 函数名(){
            //函数体
        //}
        function sayHi(){
            console.log('hi--');
        }
        //(1) function声明函数的关键字，全部小写
        //(2) 函数是做某件事情，函数名一般是动词sayHi
        //(3) 函数不调用自己不执行
        //2. 调用函数
        // 函数名
        sayHi();
    script>

形参、实参

<script>
//形参、实参
        // function 函数名（形参1，形参2.。。）{//在声明函数的小括号里面是形参（形式上的参数）

        //}
        // 函数名（实参1，实参2.。。）;//在函数调用的小括号里面是实参（实际的参数）
        //形参和实参的执行过程
        function cook(aru){//形参是接收实参的 are = '土豆' 形参相当于一个变量
            console.log(aru);
        }
        cook('土豆');
        cook('鸡腿');
    //-------------------------------------
    function getSum(num1, num2){
        console.log(num1 + num2);
    }
    getSum(1, 2);
    //1.如果实参的个数多于形参的个数，会取到形参的个数
    getSum(1, 2, 4);
    //2.如果实参的个数小于形参的个数
    // 形参可以看作是不用声明的变量 num2 是一个变量但没有接受值 结果就是undefined
    getSum(1);//NaN
    //形参个数和实参个数尽量匹配
script>

返回值

<script>
        //1.函数的返回值格式
        /* function 函数名(){
            return 需要返回的结果;
        }
        函数名(); */
        //(1)我们函数只是为了实现某种功能，最终的结果需要返回给函数的调用者函数（）通过return实现的
        //(2)只要函数遇到return就把后面的结果 返回给函数的调用者 函数名() = return 后面的结果
        function getResult(){
            return 222;
        }
        getResult();//getResult() = 222
        console.log(getResult());

        /* function cook(aru){
            return aru;
        }
        console.log(cook('鸡腿')); */
        //2.求任意两个数的和
        function getSum(num1, num2){
            return num1 + num2;
        }
        console.log(getSum(1, 2));
    
    //求两个数的最大值
    function getMax(num1, num2){
        return num1 > num2 ? num1 : num2;
    }
    console.log(getMax(1,5));
    script>

<script>
        //利用函数求数组[3,6,2,7,223,62,12]的最大数值
        function getArrMax(arr){
            var max = arr[0];
            for(var i = 1; i < arr.length;i++){
                if(arr[i] > max){
                    max = arr[i];
                }
            }
            return max;
        }
        var re = getArrMax([3,6,2,7,223,62,12]);
        console.log(re);
    script>

arguments

<script>
        //arguements 的使用 只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
        function fu(){
            console.log(arguments);//里面存储了所有传递过来的参数
            console.log(arguments.length);
            console.log(arguments[2]);
            //可以按照数组的方式遍历arguments
            for(var i = 0; i < arguments.length; i++){
                console.log(arguments[i]);
            }

        }
        fu(1,2,3);
        //伪数组
        //1. 具有数组的Length属性
        //2. 按照索引的方式进行存储
        //3. 它没有真正数组的一些方法 pop() push() 等等
    script>

<script>
        // 利用函数求任意个数的最大值
        function getMax() {//arguments = [1, 2, 3]
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(getMax(1, 2, 3));
        console.log(getMax(21, 32, 3, 12, 63));

        //利用函数翻转任意数组 reverse 翻转
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([2, 4, 25, 1, 65]);
        console.log(arr1);
    
    //利用函数冒泡排序 sort 排序
        function sort(arr) {
            for (var i = 0; i <= arr.length - 1; i++) {
                for (var j = 0; j <= arr.length - i - 1; j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var arr1 = sort([2, 4, 1, 9]);
        console.log(arr1);
    script>

函数两种声明方式

<script>
    //1.利用函数关键字自定义函数(命名函数)
    function fn(){
        
    }
    fn();
    //2. 函数表达式(匿名函数)
    // var 变量名 = function() {};
    var fun = function(aru){
        console.log('我是函数表达式');
        console.log(aru);
    }
    fun('pink');
    //(1) fun是变量名 不是函数名
    //(2) 函数表达式声明方式和声明变量差不多，只不过变量里面存的是值 函数里面存的是函数
    //(3) 函数表达式也可以进行传递参数
script>

作用域

<script>
        //1.JS作用域： 就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性更重要的是减少命名冲突
        //2.JS的作用域（es6）之前：全局作用域 局部作用域
        //3.全局作用域： 整个script标签 或者是一个单独的js文件
        var num = 10;
        //4.局部作用域
        function fn() {
            var num = 20;
            console.log(num);
        }
        fn();
    script>

如果在函数内部，没有声明直接赋值的变量也属于全局变量

函数的形参也可以看做是局部变量

<script>
    function fun(){
        var num1 = 10;//局部
        num2 = 20;//全局
    }
    fun();
script>

块级作用域

js中没有块级作用域

在es6的时候新增块级作用域

块级作用域{} if{} for{}

java:if(xx){

int num = 10;

}

<script>
    if(3 < 5){
        var num = 10;
    }
    console.log(num);//也可以调用num
script>

作用域链

<script>
        //作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来绝对取哪个值 就近原则
        var num = 10;
        function fn(){//外部函数
            var num = 20;
            
            function fun(){//内部函数
                console.log(num);
            }
            fun();
        }
    fn();
    script>

预解析

js引擎运行js分为两步： 预解析 代码执行

（1）预解析：js引擎会把js里面所有的var 还有function提升到当前作用域的最前面

（2）代码执行：按照代码书写的顺序从上往下执行

预解析分为 变量预解析（变量提升）和函数预解析（函数提升）

（1）变量提升：就是把所有的变量声明提升到当前的作用域最前面

不提升赋值 *** 作

（2）函数提升：就是把所有的函数声明提升到当前作用域的最前面

不调用函数

<script>
    console.log(num);//undefined
    var num = 3;
script>

<script>
    var num = 20;
    function fn(){
        console.log(num);//undefined
        var num = 10;
        console.log(num);//10
    }
    fn();
    //相当于执行了以下代码
    var num;
    function fn(){
        var num;
        console.log(num);
        num = 10;
        console.log(num);
    }
    num = 20;
    fun();
script>

<script>
    fn();
    console.log(a);//报错
    console.log(b);//9
    console.log(c);//9
    function f1(){
        var a = b = c = 9;
        //相当于 var a = 9; b = 9; c = 9; b和c直接赋值，没有var声明，当全局变量看
        //集体声明 var a = 9, b = 9, c = 9;
        console.log(a);//9
        console.log(b);//9
        console.log(c);//9
    }
    
script>

对象

在js中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等

对象是由属性和方法组成的

属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词） 创建对象的三种方式 1.利用对象字面量创建对象

 <script>
        //利用对象字面量创建对象{}
        //var obj = {};//创建了一个空白的对象
        var obj = {
            name: 'sh',
            age : 10,
            sex:'男',
            sayHi: function(){
                console.log('hi_');
            }
        }
        //(1)里面的属性或者方法我们采取键值对的形式 键 属性名：值 属性值
        //(2)多个属性或者方法中间用逗号隔开
        //(3)方法冒号后面跟的是匿名函数
        //2.使用对象
        //(1).调用对象的属性 我们采取 对象名.属性名   . 理解为 的
        console.log(obj.name);
        //(2).调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        //(3).调用对象的方法sayHi  对象名.方法名()
        obj.sayHi();
    script>

变量、属性、函数、方法的区别 变量、属性都用来存储数据变量单独声明、赋值 单独存在属性 在对象里面的不需要声明 对象.属性函数、方法都是实现某种功能 做某件事函数单独声明 并且调用的 函数名()单独存在方法 在对象里面 调用的时候 对象.方法() 2.用 new object 创建对象

<script>
//利用new Object 创建对象
        var obj = new Object();//创建了一个空的对象
        obj.name = 'zhang';
        obj.age = 23;
        obj.sex = '男';
        obj.sayHi = function(){
            console.log('hi-');
        }
        //(1)我们是利用 等号赋值的方法 添加对象的属性和方法
        //(2)每个属性和方法之间用分号结束
        console.log(obj.name);
        console.log(obj['sex']);
        obj.sayHi();
script>

3.利用构造函数创建对象

<script>
//利用构造函数创建对象
        //前两种创建对象的方式一次只能创建一个对象
        //利用构造函数：里面封装的是对象，不是普通代码
        //就是把我们对象中相同的属性和方法抽象出来封装到函数里面

        //格式
        /* function 构造函数名(){
            this.属性 = 值;
            this.方法 = function(){}
        }
        new 构造方法名(); */
        function Star(uname,age,sex){
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.song = function(song){
                console.log(song);
            }
        }
        var ldh = new Star('刘德华',18,'男');//调用函数返回的是一个对象
        //console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.song('冰雨');
        //1.构造函数名字首字母大写
        //2.构造函数不需要return 就可以返回结果
        //3.调用构造函数 必须使用new
        //4.只要new Star()调用函数就创建一个对象 ldh{
        //5.属性和方法前加this
    script>

构造函数 泛指某一大类，类似java中的类 class对象特指一个具体事物利用构造函数创建对象的过程我们称为对象的实例化

---

new的执行过程：

在内存中创建一个新的空对象让this指向这个新对象执行构造函数里面的代码，给这个新对象添加属性和方法返回这个新对象 - 所以构造函数里面不需要return 遍历对象

<script>
        //遍历对象
        var obj = {
            name: 'pink',
            age: 18,
            sex: '男',
            fn:function(){}
        }
        //for in 遍历对象
        /* for (遍历 in 对象){

        } */
        for(var k in obj){
            console.log(k);//k 变量，输出 得到的是属性名
            console.log(obj[k]);//obj[k] 得到的是属性值
        }
        //我们使用的for in 里面的变量 一般用k 或者key
    script>

内置对象 js中的对象分为3中：自定义对象、内置对象、浏览器对象（js独有）内置对象指js自带的一些对象，这些对象供开发者使用，并提供了些常用或基本、必要的功能内置对象最大的优点就是帮助我们快速开发Math Date Array String…