JavaScriptNote

1.前端知识体系

1.1 前端三要素

  • HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容
  • CSS(表现):层叠样式表(Cascading Style Sheets),设定网页的表现样式。
  • JavaScript(行为):是一种弱类型脚本语言,其源码不需经过编译,而是由浏览器解释运行,用于控制网页的行为

1.2 结构层

就是一些网页的排版 设计的方向!!太简单就略过了…

1.3 表现层

CSS层叠样式表是一门标记语言,并不是 编程语言,因此不可以自定义变量,不可以引用等,换句话说就是不具备任何语法支持,它主要缺陷如下:

  • 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;

  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护;

    导致的问题 : 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题,前端开发人员会使用一种称之为【CSS预处理器】的工具,提供CSS缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。

什么是CSS预处理器?

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是 “用一种专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的CSS文件,以供项目使用,项目中通常将该CSS文件引入过后 采用class=“” 给标签的class赋值使用”。

常用的CSS预处理器有哪些?

  • SASS:基于Ruby ,通过服务端处理,功能强大。解析效率高。需要学习Ruby语言,上手难度高于LESS。
  • LESS:基于NodeJS,通过客户端处理,使用简单。功能比SASS简单,解析效率也低于SASS,但在实际开发中足够了,所以如果我们后台人员如果需要的话,建议使用LESS

1.4 行为层(JavaScript)

JavaScript一门弱类型脚本语言,其源代码在发往客户端运行之前不需要经过编译,而是将文本格式的字符代码发送给浏览器,由浏览器解释运行

JavaScript框架

  • JQuery:大家熟知的JavaScript库,优点就是简化了DOM操作,缺点就是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6,7,8;
  • Angular:Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用了TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如1代–>2 代,除了名字,基本就是两个东西;截止发表博客时已推出了Angular6)
  • React:Facebook 出品,一款高性能的JS前端框架;特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作,在内存中模拟 DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门【JSX】语言;
  • Vue:一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular(模块化)和React(虚拟 DOM) 的优点;【重点
  • Axios:前端通信框架;因为 Vue 的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery 提供的AJAX 通信功能;

UI框架

  • Ant-Design:阿里巴巴出品,基于React的UI框架

  • ElementUI、iview、ice:饿了么出品,基于Vue的UI框架

  • BootStrap:Teitter推出的一个用于前端开发的开源工具包

  • AmazeUI:又叫“妹子UI”,一款HTML5跨屏前端框架

2.什么是JavaScript

2.1 概述

JavaScript是世界上最流行的脚本语言

后端人员相比较起来 要更精通JavaScript

2.2 历史

https://blog.csdn.net/kese7952/article/details/79357868

ECMAScript 可以理解为是JavaScript的一个标准

2.3 JavaScript的执行流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-my1kySR4-1615419523224)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307104236529.png)]

小结

这里一定要切记 javaScript是被浏览器的JS引擎逐行解释代码的

3.入门JavaScript

3.1.内嵌

    <!--
    注意:这里为了避免不必要的情况 一定要双闭合 保证规范
    -->
<script>
    alert("今天开始学JavaScript的第一天");
</script>

3.2 行内

<!--
注意这里 外部是双引号"" 内部需要用到字符串只能 ''
-->
<input type="button" value="点我" onclick="alert('哈哈哈哈哈哈哈哈哈')">

3.3 外部引入

one 先在该包下建立js文件 testLink.js 注意后缀是js 内容如下:

alert("我是外部引入");

two 在html文件的head标签里引入(虽然没有强制性 但是为了规范) 内容如下:

<script src="testLink.js"></script>

Idea在html里面的快捷键

https://blog.csdn.net/zhangludcsdn/article/details/77670442

4.输入框,弹窗,控制台

<script>
        // 页面弹出输入框
        prompt("请输入你的姓名");
        // 弹窗
        alert("我弹出来了");
        // 控制台输出 程序员调试专用
        console.log("控制台输出");
</script>

5.变量

5.1 什么是变量?

数据存储空间的地址表示---->通俗一点来说就是开辟一片小空间 用来存取数据 用户能将里面的数据进行操作(增减改)都是可以的

5.2 区别于Java

java:

//在java中 声明某个变量必须要明确数据类型 
int num = 0;

javaScript:

<script>
    var num = 10;
</script>

5.3 命名规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mu4uLved-1615419523226)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307112158902.png)]

小结

JavaScript中 变量的数据类型取决于 =右边 为字符串就是String类型 依此类推… 最终确定下来的数据类型为最后一次赋值 如果在函数内没有进行 var 声明 直接variable=0 那么此时这个variable会被当作全局变量看待

6.数据类型

6.1 Number

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pPCrqZC4-1615419523228)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307113741329.png)]

6.1.1 判断是否为数值的方法

判断无法为一个数值

<script>
    //输出结果为 NaN ----> Not a Number
    console.log("geb"-100);
</script>

isNaN()

返回结果 true : 为一个数值

返回结果 false: 不为一个数值

6.2 字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AhFDVMqm-1615419523230)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307114310102.png)]

6.2.1 转义字符

在这里插入图片描述

6.2.2 字符串拼接

在字符串中 使用 + 可以将任何数据类型都转化为字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KnljjXnG-1615419523235)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307114630745.png)]

6.3 boolean,undefined,null

<script>
        //boolean
        var variable = true;
        console.log(variable + 1); //true 默认值为1
        variable = false;
        console.log(variable + 1); //false 默认值为0

        //未定义
        variable = undefined;
        console.log(variable+"mm"); //输出结果undefinedmm
        console.log(variable+1);    // 输出结果 NaN

        //NULL
        variable=null;
        console.log(variable+1); //null的默认值为 0   输出结果为1
</script>

6.4 数据类型转换

字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NxvPifGV-1615419523236)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307115839407.png)]

数值型

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BnKmDPVC-1615419523240)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307120055158.png)]

布尔型

在这里插入图片描述

7.运算符

算术运算符

这一块就算了 太简单了

比较运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yDG2Xjo1-1615419523243)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307120728570.png)]

运算符优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lC7UKkZI-1615419523245)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307121013725.png)]

8.流程控制

9.循环

与java一致,没什么难点!!!

10.数组

10.1 数组创建方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LRJ9DQu-1615419523255)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307121919665.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9GWpWpEN-1615419523256)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307122353840.png)]

  • var array=new Array();
  • var array=[1,5,9,”chill”,true];

小结:

与java不同的是 : js里可以存放不一样的数据类型

10.2 数组增加元素

在这里插入图片描述

11.函数

概念

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RVJ6uvL1-1615419523257)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307122913697.png)]

小结

类似于java的方法!!!

11.1 arguments

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4DtXhOV-1615419523259)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307124145208.png)]

arguments的测试代码

<script>
    //测试 arguments 使用场景: 当不确定多个参数的情况下 注意:只要函数才有arguments对象  并且是声明函数的时候就已经内置好了
    function f() {
    //arguments 代表所传进来的参数
    console.log(arguments);
    console.log(arguments.length);
}
f(1,5,5,5,5,5,8,88);
f(1,5,5,5);
</script>

11.2 函数的两种声明方式

在这里插入图片描述

<script>
    //测试 匿名函数
    var fun=function (arg1,arg2,arg3) {
        console.log(arg1);
        console.log(arg2);
        console.log(arg3);
    }
//注意 fun是变量名 不是函数名 这个函数没有名字  只是调用时是这样调用
fun(1,4,5);
</script>

12.预解析【重点】

概念

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8QoLdHO-1615419523261)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307131212249.png)]

执行原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fLe7Aj4M-1615419523262)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307131812667.png)]

代码测试

<script>
            //测试预解析 (变量提升)
            //浏览器的JS引擎运行js 会分为两个步骤: 一是 预解析  二是代码执行
            //无论如何都会将带有var function 声明的代码先提升到当前作用域的最顶端
            console.log(variable);  //结果为 undefined
        var variable=8;

        //上面代码会被JS引擎解析为
        var variable;
        console.log(vasiable);
        variable=8; //所以答案为 undefined

        //自定义函数 (函数提升)
        f();
        function f() {
            console.log("==");
        }
        //解析为   
        function f() {
            console.log("==");
        }
        f();


        //匿名函数
        fun();
        var fun=function () {
            console.log("============");
        }
        //解析为: 先解析到 var 并不做赋值  赋值是最后操作
        var fun;
        fun(); //找不到该函数 所以会报错   Not Found a function
        fun=function () {
            console.log("============");
        }
</script>

案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2NnKeoNP-1615419523264)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307133408029.png)]

讲解

one 经过JS引擎执行js后

会将var function等字眼先提升到当前作用域的最顶端 当然了…函数内部的function 或者 var等该函数被调用时才会被解析

two 代码是一行一行被解释的

three 所以被解析出来是

var num;
function fun() {
    var num;
    //这里根据作用链   就近原则
    console.log(num);   //答案为: undefined
    num = 20;
}
num = 10;
fun();//执行到这里 才再预解析 该函数里的var function

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-78QhVf7R-1615419523265)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307134640682.png)]

解析完:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sQ4FDcgb-1615419523266)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307134741348.png)]

小结

这一块可以自己去找些题目练习一下 很重要!!!

13.对象

概念

万物皆对象 对象是看得见 摸得着的实物 具有特征和一些具体行为的实物

创建对象的几种方式

1.字面量

声明

		/**
         * 声明
         * @type {{address: string, name: string, age: number, sayHi: obj.sayHi}}
         */
var obj={
    // 1) 采用的是键值对形式赋值:
    // 2) 每个键值对中间以 , 隔开
    name : "chill",
    age : 19,
    address : "长沙市",
    sayHi : function () {
        console.log("长沙魂");
    }
}

使用

		/**
         * 使用
         */
console.log( obj.age);
console.log( obj["age"]);
//函数要加括号 ()
obj.sayHi();
2.通过 new Object()

声明

var object=new Object();
object.userName="黑旋风";
object.age=19;
object.address="三国";
object.sayHi=function(){
    console.log(object);
}

调用

console.log(object.userName);
object.sayHi();
3.构造方法【重点】

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4IfKeZpA-1615419523267)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307142628021.png)]

声明

/**
         * 测试构造函数 创建对象     new 构造函数名
         * 明星:迪丽热巴  周星驰 王一博
         * 共同特征:名字  年龄  身高  性别
         * 共同行为:演戏
         */
function Star(name, age, height, sex) {
    this.name = name;
    this.age = age;
    this.height = height;
    this.sex = sex;
    //actName 戏名
    this.act = function (actName) {
        console.log("演了" + actName);
    }
}

//创建对象 并赋值
var dlrb = new Star("迪丽热巴", 18, 185, "女");
dlrb.act("秋香点灯");

遍历对象

//k 是 对象的属性名
for (var k in dlrb) {
    //属性值需要dlrb[k] 调用
    console.log(dlrb[k]);
}

遍历对象与C#相似

注意事项

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XGInWyDg-1615419523269)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210307142748232.png)]

14.内置对象

Math

/**
         * 测试一些内置对象
         */
// Math 随机数
console.log(Math.random());
//绝对值
console.log(Math.abs(-10));

//向上取整
console.log(Math.ceil(1.2));

//向下取整
console.log(Math.floor(3.5));

小练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fXNE3G7w-1615419523270)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309093419416.png)]

		/**
         * 猜数游戏
         */
var target = Math.floor((Math.random() * 30) + 10);
do {
    var result = prompt("请输入需要猜的数字?");
    if (result == target) {
        alert("猜对啦");
        break;
    }
    if (result > target) {
        alert("猜大了");
    }
    if (result < target) {
        alert("猜小了");
    }
} while (true);

Date

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8cZbAhTu-1615419523271)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309093706808.png)]

测试

// Date  默认获取系统时间
var date=new Date();
console.log(date);
//字符串
date = new Date("1995-12-5 14:5:35");
console.log(date);
//数字
date = new Date(1995,10,4); //11月
console.log(date);

Date静态方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1nLJfz8T-1615419523272)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309094415048.png)]

Date获取当前毫秒数(距离1970年1月1日间隔多少毫秒)

//获取毫秒数
console.log(new Date().getTime());
console.log(new Date().valueOf());
//这一种 工作中最常用
date = + new Date();
console.log(date);
//H5 新增的方法
console.log(Date.now());

案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wjrxxzA5-1615419523273)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309103156656.png)]

/**
         * 封装一个函数    内置 built-in
         */
function countDown(time) {
    var startTime = +new Date();
    var endTime = new Date(time);  //目标时间
    var finallyTime = (endTime - startTime) / 1000; //将毫秒转换成秒
    var d = parseInt(finallyTime / 60 / 60 / 24); //剩余天
    var h = parseInt(finallyTime / 60 / 60 % 24); //剩余小时
    var m = parseInt(finallyTime / 60 % 60); //剩余分钟
    var s = parseInt(finallyTime % 60); //剩余秒
    return d + "天:" + h + "时 :" + m + "分:" + s + "秒";
}
console.log(countDown("2021-3-9 11:04:55"))

Array

JavaScript的 **Array** 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。

先来个反转练练手:

		/**
         * 测试 Array     反转数组
         */
//array为数组
function reserve(array) {
    //判断是否为数组
    if(array instanceof Array){ //或者 Array.isArray(数组参数)
        //创建空数组
        var newArray=[];            // var obj={}; 创建空对象
        for (var i = array.length; i >0 ; i--) {
            newArray[array.length-i] = array[i-1];
        }
        return newArray;
    }else {
        alert("该参数不是数组");
    }
}
//console.log(reserve((1)));

遍历

//遍历全部
/* reserve([1,5,"chill",99,88]).forEach(function (item,index,array) {
             console.log(item);
         })*/

//通过 typeof 筛选只为数字的   可以通过typeof筛选
reserve([1, 5, "chill", 99, 88]).forEach(function (value) {
    //这样能遍历数组中只为数字的
    if(typeof value=="number"){
        console.log(value);
    }
})

一些方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-geMqs35W-1615419523274)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309112703860.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Td320gPu-1615419523276)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309141140443.png)]

排序方法

**sort()** 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串

array.sort();   //结果是根据字符串排序的  无法排序数字

排序数字(正序):

console.log(array.sort(function (a, b) {
    return a - b;
}));

降序:

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

案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PpH8KTcd-1615419523277)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309120347153.png)]

思路

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-06hvTM9g-1615419523278)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309135046173.png)]

/**
         * 数组去重
         */
var array = ['a', 'a', 'b', 'c', 'd', 'd', 'a', 'b', 'c', 'e', 'd', 'g', 'd'];
var newArray = [];

function unique(array) {
    for (var i = 0; i < array.length; i++) {
        //如果新数组里不存在旧数组里的元素就添加   indexOf如果不存在就返回 -1
        if (newArray.indexOf(array[i])===-1) {
            newArray.push(array[i]);
        }
    }
    return newArray;
}
var test=unique(array);
console.log(test);

小结

与java不同的是 js数组添加元素的是push(参数)(追加该元素返回新长度,注意不是返回新数组),unshift(多个参数)(添加元素到数组的第一个元素)和删除元素 pop()(删除第一个元素,并返回该元素的值),shift()(删除第一个元素,并返回修改后的长度)

数组 转换为字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LOYwxddF-1615419523279)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309140826098.png)]

/**
         * 数组转换成字符串
         */
var  array=["cl",2,"1",2.5];
console.log(array.join("&"));//结果:cl&2&1&2.5

String

基本包装类型

在这里插入图片描述

一些方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O5y5wVR4-1615419523282)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309143658906.png)]

charCodeAt() 重点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FpgaCEE4-1615419523284)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309144545846.png)]

案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSptMatv-1615419523286)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309141954829.png)]

/**
* 查找字符串里 某个元素出现的所有索引位置并把出现多少次打印出来
*/
var str = 'hshwooaojwjjjshwhhuusw';

/**
* 封装一个函数
* @param target    查找目标
* @param str   哪个字符串里查找
*/
function select(target, str) {
    //最开始出现的位置
    var index = str.indexOf(target);
    //统计次数
    var count = 0;
    while (index != -1) {
        count++;
        console.log(index);
        //继续往后找
        index = str.indexOf(target, index + 1);
    }
    console.log("总共出现了" + count + '次');
}

select("whh", str);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H0pYhwyL-1615419523287)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309144652360.png)]

		/**
         * 查找字符串出现最多的字符     如果两个次数一样的字符 则一起打印
         */
var obj = {};
for (var i = 0; i < str.length; i++) {
    //将字符切出来存在chars里
    var mchar = str.charAt(i);
    //如果对象有这属性 则为true
    if (obj[mchar]) {
        obj[mchar]++;
    } else {
        obj[mchar] = 1;
    }
}
var target=[];
var max = 0;
for (var i in obj) {
    if (obj[i] > max) {
        max = obj[i];
    }
}
for (var j in obj){
    if(obj[j]==max){
        target.push(j);
    }
}
console.log("出现次数最多的字符是" + target);

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mlkjOw4C-1615419523288)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309150954157.png)]

简单数据类型传参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6EKQpT83-1615419523289)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309151507302.png)]

复杂数据类型传参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-27Q1T7t4-1615419523291)(C:%5CUsers%5CChill%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210309152003229.png)]

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

rapguys

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值