【JavaScript基础】

js基础

• html、css 属于描述型语言
• js属于脚本，编程语言
• js代码是通过内置JavaScript引擎来执行JS代码，（逐行解释每一句源码）

书写位置

1. 行内式
2. 内嵌
3. 外部

快捷键

注释

• 单行：CTRL+/
• 多行：Shift+Alt+A
• 修改多行注释的快捷键：Ctrl+Shift+/

---

格式：alt+shift+f

语法基础

输入输出

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

变量

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

变量弹出用户名

<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>

预解析

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

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

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

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>

变量、属性、函数、方法的区别

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

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的执行过程：

1. 在内存中创建一个新的空对象
2. 让this指向这个新对象
3. 执行构造函数里面的代码，给这个新对象添加属性和方法
4. 返回这个新对象 - 所以构造函数里面不需要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…