01-js基础学习

目录

一、JavaScript介绍

1.JS的组成:

2.JS三种写法

3.输入输出语句

二、变量

1.声明变量

2. 变量命名规范

三、数据类型

1.分类

四、类型转换

五、拓展

课后作业 

 六、常用运算符

1.分类 

2.优先级 

 七、流程控制

1.顺序流程控制

2.分支流程控制if语句

3.三元表达式

4.分支流程控制switch语句

八、循环

1.for循环

2.双重for循环

3.while循环

4.do while循环

5.continue break

九、数组

1.创建数组

2.访问数组元素

3.遍历数组

4.数组长度

案例

5.数组新增元素

 案例

6.数组案例

7.冒泡排序

十、函数

1.函数使用

2.arguments的使用

3.函数的两种声明方式

4.作用域

作用域链

十一、JS预解析

1.预解析

2.案例

十二、JS对象

1.对象

2.创建对象的三种方式

利用字面量创建对象

利用new Object创建对象 

利用构造函数创建对象

构造函数和对象

3.new关键字

4.遍历对象属性

十三、内置对象

1.内置对象

2.查文档

1)MDN / W3C

3.Math对象

4.日期对象

日期格式化

获得Date总毫秒数

案例-倒计时效果 

5.数组对象

检测是否为数组的两种方式

添加删除数组元素的方法

数组排序

数组索引方法

数组转换为字符串

6.字符串对象

基本包装类型

 字符串的不可变

根据字符返回位置

案例-求某个字符串出现的位置以及次数

根据位置返回字符(重点)

统计出现子数最多的字符

字符串操作方法(重点

7.简单类型和复杂类型

简单类型和复杂类型

堆和栈

简单类型的内存分配

复杂类型的内存分配

简单类型传参

复杂类型传参


一、JavaScript介绍

1.JS的组成:

  • ECMAScript——Javascript语法
  • DOM——页面文档对象模型
  • BOM——浏览器对象模型

2.JS三种写法

  • 行内式js
  • 内嵌式js
  • 外联式js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style></style>
    <!-- 2.内嵌式的js -->
    <script>
        alert('沙漠骆驼')
    </script>

    <!-- 3.外部js script 双标签 -->
    <script src="01-my.js"></script>
</head>
<body>
    <!-- 1.行内式的js 直接写到元素内部-->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
</html>
alert('如果我是dj你还爱我吗')

3.输入输出语句

alert( msg )浏览器弹出警示框
console.log( msg )浏览器控制台打印输出信息
prompt( info )浏览器弹出输入框,用户可以输入

二、变量

(变量式程序在内存中申请的一块用来存放数据的空间)

1.声明变量

let 变量名 / var 变量名

var是函数作用域,let是块级作用域

let声明的变量只在其所在的代码块有效,在代码块外部无效无法访问

var声明的变量在该代码块所在的函数作用域内都有效

var声明的变量存在变量提升,而let不存在

    <script>
        {
            var one='红色';;
            let two='蓝色';
        }
        console.log(one);
        console.log(two);
    </script>

2. 变量命名规范

  • 不能用关键字
           关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等
  • 只能用下划线、字母、数字、$组成,且数字不能开头
  • 字母严格区分大小写,如 Age 和 age 是不同的变量
  • 变量名要有意义
  • 遵守小驼峰命名法(如:userName)

三、数据类型

(js的数据类型是只有程序在运行过程中,根据等号右边的值来确定的)

(js拥有动态类型,同时也意味着相同的变量可用作不同的类型)

1.分类

typeof可以检测数据类型(typeof a) 

  • 简单数据类型
简单数据类型说明默认值
Number

数字型,包含整型值和浮点型值,如21、0.21

Infinity: 无穷大,大于任何数值

-Infinity:无穷小,小于任何数值

NaN,Not a number,一个非数值

isNaN:判断非数字。(false—数字)

0
Boolean布尔值类型。如true、false,等价于1和0false
String

字符串类型,如"张三",在js中字符串都带引号

length:检测获取字符串的长度

字符串拼接:字符串+任何类型=新的字符串

变量不要写到字符串里面,是通过和字符串相连的方式实现的

" "
Undefined

var a; 声明了变量a但是没有给值

此时a=undefined

undefined
Nullvar a = null; 声明了变量a为空值null
  • 复杂数据类型

四、类型转换

由于使用表单、prompt获取过来的数据默认是字符串类型,不能直接简单的进行加法运算

而需要转换变量的数据类型。即把一种数据类型的变量转换成另外一种数据类型。

  • 转换成字符型
方式说明案例
toString()转成字符串var num=1;alert(num.toString());
Sring()强制转换转成字符串var num=1;alert(String(num));
加号拼接字符串(隐式)和字符串拼接的结果都是字符串var num=1;alert(num+"我是字符串");
  • 转换成数字型
方式说明案例
parseInt(string)函数将string类型转换为整数数值型(小数向上取整)parseInt('78')
parseFloat(string)函数将string类型转换为浮点数数值型parseFloat('78.21')
Number()强制转换函数将string类型转换为数值型Number('12')

js隐式转换( - * / )     (隐式)

利用算数运算隐式转换为数值型'12'-0
  • 转换成布尔型
方式说明案例
Boolean()其他类型转换成布尔值Boolean('true');

(代表空的否定的值会被转换成false——如:''、0、NaN、null、undefined) 

五、拓展

计算机不能直接理解任何除机器语言以外的语言,所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具,被称为翻译器。

  • 翻译器翻译的方式有两种:一个是编译,另外个是解释。 两种方式之间的区别在于翻译的时间点不同
  • 编译器是在代码执行之前进行编译,生成中间代码文件
  • 解释器是在运行时进行及时解释,并立即执行(当编译器以解释方式运行的时候,也称之为解释器)

课后作业 

<script>
    var name = prompt('您的姓名是')
    var age = prompt('您的年龄是')
    var sex = prompt('您的性别是')
    alert('您的姓名是:'+name+''
    +'\n'+'您的年龄是:'+age+''
    +'\n'+'您的性别是:'+sex+''
    )
</script>

 

 六、常用运算符

1.分类 

  • 算术运算符
  • 递增递减预算符
  • 比较运算符

  • 逻辑运算符

逻辑与 短路运算:

        如果表达式1 结果为真 返回表达式2;如果表达式1为假,返回表达式1

console.log(123 && 456);    //456
console.log(0 && 456);    //0
console.log(0 && 1 + 2 && 456 * 56789);    //0

 逻辑或 短路运算: 

        如果表达式1 结果为真 返回表达式1;如果表达式1为假,结果为假,返回表达式2

console.log(123 || 456);    //123
console.log(123 || 456 || 456+ 123);    //123
console.log(0 || 456 || 456+ 123);    //456
  • 赋值运算符

2.优先级 

 七、流程控制

1.顺序流程控制

(程序按照代码的先后顺序,依次执行

2.分支流程控制if语句

(根据不同的条件,执行不同的路径代码,从而得到不同的结果)

3.三元表达式

表达式?结果1:结果2;

4.分支流程控制switch语句

switch是全等 

(switch效率高于if else)

  • switch语句进行条件判断后直接执行到程序的条件语句,效率更高
  • if…else语句有集中条件,就得判断多少次
  • 但分支较少时,if…else的执行效率高于switch
  • 分支较多时,switch的执行效率高,结构更清晰

八、循环

1.for循环

2.双重for循环

3.while循环

4.do while循环

5.continue break

九、数组

1.创建数组

  • new创建
  • 数组字面量创建
    <script>
      var arr = new Array();

      var arr1 = [];
      var arr2 = [1,2,'小白','小蓝',true];
      
    </script>

2.访问数组元素

    <script>

      var arr2 = [1,2,'小白','小蓝',true];

      console.log(arr2);
      console.log(arr2[1]);   //2

    </script>

3.遍历数组

  • 利用for循环

4.数组长度

  • 数组名.length

案例

1.找出最大值

    <script>
        //求数组中的最大值

        var arr = [2,6,1,77,52,25,7,99];
        var max = 0;
        for(var i = 0;i<arr.length;i++){
            if(arr[max]<arr[i]){
                max=i;
            }
        }
        console.log(arr[max]);
    </script>

2.数组转换为分割字符串

    <script>
        //将数组转换为字符串,并用其他符号分割

        var arr = ['red','green','blue','pink'];
        var str = '';
        for(var i = 0;i<arr.length;i++){
           str+=arr[i]+'/'
        }
        console.log(str);       //red/green/blue/pink/
    </script>

5.数组新增元素

  • 修改length长度
  • 修改数组索引
    <script>
      
        var arr = ['red','green','blue'];
        arr[3]='pink';
    </script>

 案例

1.筛选数组

    <script>
        //筛选数组中 大于等于 10 的元素,放入新数组
    
        var arr = [2,0,6,1,77,0,52,0,25,7];
        var arr2 = [];
        for(var i = 0;i<arr.length;i++)
        {
            if(arr[i]>=10){
                arr2[arr2.length]=arr[i];
            }     
        }
        console.log(arr2);
    </script>
    <script>
        //筛选数组中 大于等于 10 的元素,放入新数组
    
        var arr = [2,0,6,1,77,0,52,0,25,7];
        var arr2 = [];
        var j = 0;
        for(var i = 0;i<arr.length;i++)
        {
            if(arr[i]>=10){
                arr2[j]=arr[i];
                j++;
            }     
        }
        console.log(arr2);
    </script>

6.数组案例

1.删除指定的数组元素

    <script>
        //删除数组中的0,形成一个新数组
    
        var arr = [2,0,6,1,77,0,52,0,25,7];
        var arr1=[];
        for(var i = 0;i<arr.length;i++)
        {
            if(arr[i]!=0){
                arr1[arr1.length]=arr[i];
            }
        }
        console.log(arr1);
    </script>

2.翻转数组

    <script>
        //将数组的内容反过来存放
    
        var arr = ['red','green','blue','pink','purple'];
        var arr1=[];
        for(var i = 0;i<arr.length;i++)
        {
            arr1[arr1.length]=arr[arr.length-1-i];
        }
        console.log(arr1);
    </script>

7.冒泡排序

    <script>
        //将数组的内容反过来存放
    
        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);
    </script>

十、函数

1.函数使用

  • 声明函数

function 函数名( ){ }

  • 调用函数

函数名( );

2.arguments的使用

当我们不确定有多个参数传递的时候,可以有arguments来获取

在js中,arguments实际上是当前函数的一个内置对象

所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参

    <script>
        function fn(){
            console.log(arguments);
        }
        fn(1,2,3);

    </script>

arguments展示形式是一个伪数组,因此可以进行遍历

特点:

  • 具有length属性
  • 按索引方式储存数据
  • 不具有数组的push、pop等方法

3.函数的两种声明方式

  • 利用函数关键字自定义函数(命名函数)

function 函数名(){ }

函数名();

  • 函数表达式(匿名函数)

var 变量名 = function(){ };

4.作用域

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突

  • 全局作用域:整个script标签,或者是一个单独的js文件
  • 局部作用域(函数作用域):在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用

根据作用域的不同,变量分为:

  • 全局变量:再任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
  • 局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间。

作用域链

  • 内部函数访问外部函数的变量,采取的是链式查找的方式来决定取哪个值(就近原则

十一、JS预解析

js引擎运行js分为两步:

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

1.预解析

  • 变量预解析(变量提升)
    • 就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作
  • 函数预解析(函数提升)
    <script>

        //1.
        console.log(num);   //  undefined


        //2.    变量提升
        console.log(num);   //  undefined
        var num = 10;
        //  相当于:
        var num;
        console.log(num);
        num = 10;


        //3.    函数提升
        fn();  
        function fn(){
            console.log(22);
        }
        //相当于
        function fn(){
            console.log(22);
        }
        fn();



        //4.    变量提升
        fun();   //报错
        var fun = function(){
            console.log(22);
        }
        //相当于:
        var fun;
        fun();   
        fun = function(){
            console.log(22);
        }

    </script>

注意:

  • 函数表达式 调用必须写在函数表达式的下面

2.案例

1) 

        //源代码
        var num = 10;
        fun();
        function fun(){
            console.log(num);
            var num = 20;
        }
        //第一次预解析
        var num;
        function fun(){
            console.log(num);
            var num = 20;
        }
        num = 10;
        fun();
        //第二次预解析(fun函数内部)
        var num;
        function fun(){
            var num;
            console.log(num);
            num = 20;
        }
        num = 10;
        fun();
        //结果是undefined

2)

        //源代码
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1(){
            var a=b=c=9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        //第一次预解析
        function f1(){
            var a=b=c=9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        //第二次预解析
        function f1(){
            var a;
            a=b=c=9;
            console.log(a);
            console.log(b);
            console.log(c);

            //var a=b=c=9;
            //相当于var a=9;b=9;c=9;这里的b和c直接赋值,没有声明,当全局变量看
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        //9 9 9 9 9 报错

十二、JS对象

1.对象

  • 对象是一组无序的相关属性方法的集合,所有的事物都是对象。
  • 如字符串、数值、数组、函数等
    • 属性:事物的特征,在对象中用属性来表示(常用名词)
    • 方法:事物的行为,在对象中用方法来表示(常用动词)

2.创建对象的三种方式

  • 利用字面量创建对象

    • 里面的属性或者方法我们采取键值对的形式  键 属性名:值 属性值
    • 多个属性或者方法中间用逗号隔开
    • 调用对象的属性对象名.属性   -   obj.uname   /   对象名[' 属性名 ']   -   obj['uage']
    • 调用对象的方法对象名.方法名   -   obj.sayHi()   -   不要忘记加小括号
        //字面量
        var obj={
            uname:'张三',
            uage:18,
            usex:'男',

            sayHi:function(){
            console.log('hi~');
            }
        }
  • 利用new Object创建对象 

    • 等号赋值的方法添加对象的属性和方法
    • 每个属性之间用分号结束
        //new Object
        var obj = new Object();
        obj.uname='张三丰';
        obj.uage=18;
        obj.usex='女';
        obj.sayHi=function(){
            console.log('hi~');
        }
  • 利用构造函数创建对象

    • 构造函数的名字首字母要大写
    • 构造函数不需要return就可以返回结果
    • 我们只要new Star() 调用函数就创建了一个对象
    • 属性、方法前必须添加this

        function 构造函数名(){

            this.属性=值;

            this.方法=function(){}

        }

        new 构造函数名();

        //构造函数
        function Star(uname,uage,usex){
            this.name=uname;
            this.age=uage;
            this.sex=usex;

            this.sing=function(song){
                console.log(song);
            }
        }
        var ldh = new Star('刘德华',18,'男');
        ldh.sing('喜羊羊');
  • 构造函数和对象

    • 构造函数:如Star(),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类(class)
    • 创建对象:如new Star(),特指某一个,通过new关键字创建对象的过程也称对象实例化

3.new关键字

new关键字执行过程:

  • new 构造函数可以在内存中创建一个 空的对象
  • this 就会指向刚才创建的空对象
  • 执行构造函数里面的代码 给这个空对象添加属性和方法
  • 返回这个对象

4.遍历对象属性

  • for…in 语句用于对数组或者对象的属性进行循环操作
  • 我们使用for…in里面的变量,通常用 k / key
 var obj = {
            name:'pink老师',
            age:18,
            sex:'男'
        }

        for(var k in obj){
            console.log(k);     //k-变量  得到的是 属性名
            console.log(obj[k]);//obj[k]  得到的是 属性值
        }

十三、内置对象

1.内置对象

  • 对象分为三种:1.自定义对象  2.内置对象  3.浏览器对象
  • 内置对象:指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
  • 内置对象最大的优点:帮助我们快速开发
  • JS提供了多个内置对象:Math、Date、Array、String

2.查文档

1)MDN / W3C

  • 查阅该方法的功能
  • 查看里面参数的意义和类型
  • 查看返回值的意义和类型
  • 通过demo进行测试

3.Math对象

  • Math数学对象 不是一个构造函数,所有我们不需要new来调用  而是直接使用里面的属性和方法即可
    <script>
        //利用对象封装自己的数学对象 里面有PI最大值和最小值
        var myMath={
            PI:3.14159653,
            max:function(){
                var max = arguments[0];
                for(var i = 0;i<arguments.length;i++){
                    if(arguments[i]>max){
                        max=arguments[i];
                    }
                }
                return max;
            },
            min:function(){
                var min = arguments[0];
                for(var i = 0;i<arguments.length;i++){
                    if(arguments[i]<min){
                        min=arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(myMath.PI);
        console.log(myMath.max(1,5,99,2));
        console.log(myMath.min(1,5,99,2));
    </script>
  • 绝对值:Math.abs()
  • 向下取整:Math.floor()
  • 向上取整:Math.ceil()
  • 四舍五入 就近取整:Math.round()     0.5特殊往大了取(如-1.5—— -1)
  • 随机数方法:random()
    • 返回一个随机小数[ 0, 1 )
    • 不跟参数

 案例-猜数字

        //猜1~50数字 只有十次机会
        function getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1)+min);
        }
        var guess=getRandom(1,50);
        var op=0;
        for(var i=0;i<10;i++){
            var user=prompt('请猜数字');
            if(user>guess){
                alert('数字大了');
                continue;
            }
            else if(user<guess){
                alert('数字小了');
                continue;
            }
            else{
                alert('猜对啦');
                break;
            }
        }

4.日期对象

  • Date()日期对象 是一个构造函数 必须使用new来调用创建我们的日期对象
    • 参数常用的写法
      • 数字型 2019,10,01
      • 字符串型 '2019-10-1 8:8:8'
    <script>
        var date = new Date();
        console.log(date);
        //参数常用的写法
        var date1=new Date('2019-10-1 8:8:8');
        var date2=new Date(2019,10,01);
        
        console.log(date1);//Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)
        console.log(date2);//Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)
    </script>

日期格式化

  • 获取当月 月份记得+1
  • 获取星期几 周一返回1 周六返回6 但周日返回0 

获得Date总毫秒数

不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒

valueof()getTime()
    <script>
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());
        //简单的写法(常用写法)
        var date1 = +new Date();
        console.log(date1);
        //h5新增更简单方法
        console.log(Date.now());
    </script>

案例-倒计时效果 

毫秒转换

d=parseInt(总秒数/60/60/24);计算天数
h=parseInt(总秒数/60/60%24);计算小时
m=parseInt(总秒数/60%60);计算分数
s=parseInt(总秒数%60);计算当前秒数

    <title>Document</title>
    <script>
        function countDown(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(countDown('2022-8-18 18:00:00'));
        var date = new Date();
        console.log(date);
    </script>

5.数组对象

  • 字面量
  • new Array()
    <script>
        //1.字面量
        var arr = [1,2,3];
        console.log(arr[0]);

        //2.new Array()
        // var arr1 = new Array();//创建了一个空的数组
        // var arr1 = new Array(2);//这个2 表示数组长度为0 里面有两个空的数组元素
        var arr1 = new Array(2,3);///有两个数组元素,为2和3
        console.log(arr1);

    </script>

检测是否为数组的两种方式

    <script>
        //1.instanceof 运算符 可以用来检查是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);  //true
        console.log(obj instanceof Array);  //false

        //2.Array.isArray(参数)  H5新增的方法,ie9以上版本支持
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));

    </script>

添加删除数组元素的方法

    //1.push()
        var arr = [1,2,3];
        arr.push(4,'pink');

        //console.log(arr.push(4,'pink')); //5 //push完毕之后 返回的是新数组的长度
        console.log(arr);

    //2.unshift()
        arr.unshift('led');
        
        //console.log(arr.unshift('led')); //6 //完毕之后 返回的是新数组的长度
        console.log(arr);

    //3.pop()
        arr.pop();    //不跟参数 删除最后一个  一次删除一个
        console.log(arr);
        //console.log((arr.pop()));  //返回被删除元素



    //4.shift()    
        arr.shift();
        console.log(arr);
        //console.log((arr.shift()));  //返回被删除元素

数组排序

方法名说明是否修改原数组
reverse()颠倒数组中的元素的顺序,无参数该方法会改变原来的数组,返回新数组
sort()对数组的元素进行排序该方法会改变原来的数组 返回新数组
        var arr=[13,4,77,1,7];
        arr.sort();

        arr.sort(function(a,b){
            return a-b;  //升序
            return b-a;  //降序
        })
        console.log(arr);

数组索引方法

方法名说明返回值
indexOf()数组中查找给定元素的第一个索引如果存在 返回索引号 如果不存在 返回-1
lastIndex()在数组中的最后一个的索引如果存在 返回索引号 如果不存在 返回-1
    <script>
        var arr=['red','green','pink','blue','green','pink']
        console.log(arr.indexOf('green'));    //1  //只返回第一个满足条件的索引号
        console.log(arr.indexOf('yellow'));   //-1
        console.log(arr.lastIndexOf('pink')); //5  //倒着查找第一个满足条件的索引号
    </script>

数组转换为字符串

方法名说明返回值
toString()把数组转换成字符串,逗号分隔每一项返回一个字符串
join('分隔符')方法用于把数组中的所有元素转换为一个字符串返回一个字符串
        //1.toString
        var arr = [1,2,3];
        console.log(arr.toString());  //1,2,3

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

6.字符串对象

基本包装类型

为了方便操作基本数据类型,js提供了3个特殊的引用类型:String、Number、Boolean

基本包装类型-把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法

 字符串的不可变

指的是里面的值不可变,虽然看上去可以改变内容

但其实是地址变了,内存中开辟了一个内存空间

(因字符串不可变,所有不要大量拼接字符串)

根据字符返回位置

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。

案例-求某个字符串出现的位置以及次数

    <script>
        var str = "abcoefoxyozzopp";
        var sum = 0;
        var index = str.indexOf('o');
        while(index!=-1){
            console.log(index);
            index = str.indexOf('o',index+1);
            sum++;
        }
        console.log('o出现的次数是:'+sum);
    </script>

根据位置返回字符(重点)

    <script>
        var arr = 'abcdefg';
        console.log(arr.charAt(3));  //d

        console.log(arr.charCodeAt(3));  //100

        console.log(arr[3]);  //d
    </script>

统计出现子数最多的字符

    <script>
        //有一个对象 来判断是否有该属性 对象['属性名']
        var o = {
            age:18
        }
        if(o['age']){
            console.log('里面有该属性');
        }else{
            console.log('里面没有该属性');
        }


        //判断一个字符串中出现最多的字符,并统计其次数
        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;
            }
        }
        console.log(o);

        //遍历对象
        var max = 0;
        var ch = '';
        for(var k in o){
            if(o[k]>max){
                max=o[k];
                ch=k;
            }
        }
        console.log(max);          //4
        console.log(ch);           //o
    </script>

字符串操作方法(重点

replace ('被替换的字符','替换为的字符')

替换字符
split ('分隔符')字符转换为数组
        //1.替换字符 replace('被替换的字符','替换为的字符')
        console.log(str1.replace('春','冬'));

        //案例 将字符串里面所有的o换成*
        var str2='abcoefoxyozzopp'; 
        while(str2.indexOf('o') !==-1){
            str2 = str2.replace('o','*');
        }
        console.log(str2);     //abc*ef*xy*zz*pp


        //2.字符转换为数组 split('分隔符')
        var str3 = 'red,pink,blue';
        console.log(str3.split(','));

7.简单类型和复杂类型

简单类型和复杂类型

  • 简单类型
    • 又叫基本数据类型或者值类型
    • 值类型:在存储时变量中存储的是值本身(string number boolean undefined null)
        //简单数据类型null 返回一个空的对象 object
        var timer = null;
        console.log(typeof timer);  //object
        //如果有个变量我们打算存储对象,暂时没想好放啥,这时候就给null
  • 复杂类型
    • 又叫引用类型
    • 引用类型:在存储时变量中存储的仅仅是地址(引用)
    • 通过new关键字创建的对象(系统对象、自定义对象)(Object Array Date)

堆和栈

  • 栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等
    • 其操作方式类似于数据结构中的栈;简单数据类型放到栈里面
  • 堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收
    • 复杂数据类型放到堆里面

简单类型的内存分配

存放在栈里面 里面直接开辟一个空间存放的是值

复杂类型的内存分配

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

简单类型传参

复杂类型传参

 

完结撒花!黑马前端三件套,虽然仅仅是学了基础,未来也未必从事前端的工作,但每走一步都算数。开学就是大三了,准备软考的同时,也要好好打好基础!快面临考研啦。希望自己跨考成功,在计算机的道路上越走越远,可能学的前端这一点的知识会很快忘掉,在考研之前可能都不会再继续学了。未来再准备拾起这些知识的时候,看到这段话应该也会有点感触吧。加油哟!!

       2022.8.18

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

biank trrrry

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值