js、day1 字符串 数组 对象 循环控制 map set一些基本语句

1.js

1.1什么是javascript

一个合格的后端人员,必须精通

  • javaScript是一门脚本语言

1.2简单历史

点击查看js历史

Nombas 和 ScriptEase

ecmascript(是一个标准)

大概在 1992 年,一家称作 Nombas 的公司开发了一种叫做 C 减减(C-minus-minus,简称 Cmm)的嵌入式脚本语言。Cmm 背后的理念很简单:一个足够强大可以替代宏操作(macro)的脚本语言,同时保持与 C (和 C ++)足够的相似性,以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中,它首次向开发人员展示了这种语言的威力。

Nombas 最终把 Cmm 的名字改成了 ScriptEase,原因是后面的部分(mm)听起来过于消极,同时字母 C “令人害怕”。

现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力。

Netscape 发明了 JavaScript

当 Netscape Navigator 崭露头角时,Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page(浓咖啡般的页面),它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。

当网上冲浪越来越流行时,对于开发客户端脚本的需求也逐渐增大。此时,大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络,即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是,仅仅为了简单的表单有效性验证,就要与服务器进行多次地往返交互。设想一下,用户填完一个表单,点击提交按钮,等待了 30 秒的处理后,看到的却是一条告诉你忘记填写一个必要的字段。

那时正处于技术革新最前沿的 Netscape,开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。

当时工作于 Netscape 的 Brendan Eich,开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。

就在 Netscape Navigator 2.0 即将正式发布前,Netscape 将其更名为 JavaScript,目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报,JavaScript 从此变成了因特网的必备组件。

2.快速上手

2.1三种导入方式

  • 内部标签

<script>
   alert('hello,world');
</script>
  • 外部引入

<script src="1.我的第一个javaScript文件.js"></script>
  • 注意事项

    • script必须成对出现

    • 有的<script type="text/javascript"></script>可以不写这个type,因为是默认的

 

2.2helloworld

会出现警告弹窗

alert(’hello,world‘);

2.3语法入门

2.3.1定义变量

<script>
   alert('hello,world');
   //定义变量 变量名 = 变量值;(定义变量可以用var let const)
   var name = "raoxin";
   var num = 1;
</script>

2.3.2条件控制

//2.条件控制
if(2>1){
   alert(num);
}

2.3.3一些语句console.log

alert(num);弹窗显示
//在浏览器的控制台打印变量
       console.log(num)

2.4如何调试

  • 在网页中右键检查

  • element显示的是html,样式显示的是css,控制台console显示的就是js

image-20220406190719878

2.5数据类型

数值

  • num 不区分小数和整数

  • nan :not a number(nan ===nan结果为假,nan与任何都不相等,包括自己只能通过isNaN判断自己是true)

  • infinity 无限大

  • 精度会有损失,比如1/3===(1-2/3)结果为假 ,换种方法

  • console.log((1-2/3)===1/3);//结果为假
    console.log(Math.abs((1-2/3)-1/3)<1e-5);//这样就为真
  • ’abc‘ "ABC" 单引号,双引号都可以

布尔值

  • true

  • false

逻辑运算

  • &&两个都为真就为真

  • ||只要有一个真就为真

比较运算符

  • =赋值

  • ==等于(类型不一样,值一样,也为真)

  • ===绝对等于(类型一样,值也要一样)

数组

 var sm=[2,3,4,5,5,'abc',null,true];//中括号
越界了sm[9]就是显示undefine
  • indexOf 通过索引获得第几个

var o = [1,3,3,2,3,445,3"1"];
o.indexOf(445)
o.indexOf(1)
o.indexOf("1")
5//获得445的下标是
0
7//字符串的1和数字1是不同的
  • slice(类似于string的substring)

  • push,pop

    • arr.push('a','b') 在数组最后面压入

    • arr.pop 弹出最后一个元素,也就是删去最后一个元素

  • unshift(),shift()

    • arr.unshift()在数组开头压入元素

    • arr.shift:弹出头部元素

  • sort排序

  • reverse反转

  • contcat()拼接(并没有改变原来的数组)

  • join(‘-‘)打印拼接数组就是数组的数据之间用-来链接

 

对象

  • var person = {
    name: "raoxin",
    age: 3,
    tags:['js','java','web']
    }//用冒号,然后每个属性用逗号隔开
    调用就是person.name之类的

    //可以赋值
    var arrys = [1,3,4,5];
    console.log(arrys[0]);
    1
    arrys[0]=2;
    2

    console.log(arrys[0]);
    2

    arrys.length=10;
    //这样也可以改变数组的长度

    //使用一个不存在的属性不会报错
    比如person.child
  • 可以动态的删除delete person.name

  • 可以动态的添加person.haha = 3;

  • 判断属性值是否在对象中 xxx in xxx age in person 但是比如toString没有定义,但结果也是true,因为是父类的方法

  • 可以用hasOwnproperty来判断是否是自己定义的

字符串

字符串正常的字符串使用单引号或者双引号包裹

  • 有些标点符号可以使用转义符号来实现 比如\n就是换行 \ '就是单引号

  • 长字符串多行编写

  • <script>这里的不是单引号,而是esc键和tab键中间的那个键
    var a = `
    你好
    我是

    啊` ;
    </script>
  • 模板字符串

  • let name = "raoxin:";
    let age = 3;
    let msg = `你好,${name}`;
    • 我们在c中需要换行或者多个输出拼接

    • 但是在es6中可以进行直接换行显示

  • 字符串长度name.length

  • 方法:

    • 大小写转换 toUppercase() toLowcase()

    • name.substring(1,3)截取第一个到第三个输出

    • let name = "raoxin:";
      console.log(name.substring(1))//截取第一个字符串到第一个字符串
      console.log(name.substring(1,3))//截取字符串[1,3)
      >ao
  • 不可变性

  • var a = "dhfalsdfjl"
    console.log(a[0]);
    d

    a[0]=1;
    1
    console.log(a[0]);
    d

    spilt() 将字符串转化为数组

    var str1 = "1a2b3c4d5z";
    // 首先是将其转换为字符串
    var result = str1.split("b");
    console.log(result);
    // ['1a2', '3c4d5z'] 将a为分界线,转换为数组

    var str1 = "1a2B3b4d5z";
    var result = str1.split("b");
    console.log(result);
    // ['1a2', '3', '4d5z']也是以a为界限转化为数组

    // 想要将所有的字母都作为分割符号,那就借助正则表达式
    var str1 = "1a2b3B4d5z";
    var result = str1.split(/[a-z]/i);//部分大小写,并且从a-z都作为分隔符号并且转化为数组
    console.log(result);

    search() search() 方法返回字符串中指定文本第一次出现的位置

     // 想要将所有的字母都作为分割符号,那就借助正则表达式
    var str1 = "1a2b3B4d5z";
    console.log(str1.search(/[ab]/gi));
    // 没有就会返回-1,search会返回搜索的值所在的位置,也可以用正则表达式来 比如/a[b-z]c/,但是只会返回第一次检索到的值

    match()通过正则表达式将字符串中符合条件的内容提取出来

    会转化为字符串,但是碰到第一个符合条件的就会结束。

    var str1 = "1a2a3b4d5z";
    var str1 = "1a2a3b4d5z";
    var result = str1.match("a");
    console.log(result[0]);
    console.log(result[1]);
    // 结果是a undefine因为,可以理解为系统找到第一个符合条件的值就结束了
    // 所以要使用正则表达式,这样就可以更多样的匹配条件
    var str1 = "1a2a3b4d5z";
    var str1 = "1a2a3b4d5z";
    var result = str1.match(/a/g);
    console.log(result[0]);
    console.log(result[1]);
    //结果是a a 通过g全局搜索就可以使所有的a都匹配上

    replace() 替换其中的一段文本

    var str1 = "1a2a3b4d5z";
    var str1 = "1a2a3b4d5z";
    var result = str1.replace("a","@-@");
    console.log(result);
    //结果: 1@-@2a3b4d5z

    #

2.6在es6中let

  • 局部变量用let定义

2.7严格检查模式

image-20220409165543252

'use strict';写在script的第一行

 

3.流程控制

3.1if判断

if(){

}
else if{

}else{

}

3.2while循环for循环与c和java没有区别

避免死循环

3.3foreach循环

<script>
let age = [2,43,54,14,43,56,24,34,6];
age.forEach(function (value){
console.log(value);
})
</script>

2
text2.html:10 43
text2.html:10 54
text2.html:10 14
text2.html:10 43
text2.html:10 56
text2.html:10 24
text2.html:10 34
text2.html:10 6

3.4for in循环

//for( var index in object){ }就是索性该数组的所有下标index就是下标
//该数组就是索引了age的所有下标并打印
for (var num in age){
if (age.hasOwnProperty(num)){
console.log("存在");
console.log(age[num]);

}

}

3.5for of

//直接打印数组元素
for (var num of age){
console.log(num);//in是下标,of是元素内容
}

4.map和set

<script>
       let age = [2,43,54,14,43,56,24,34,6];

       let map = new Map([['xiaohong',35],['xiaoming',57],['xiaolu',89],['xiaobai',98]]);
       console.log(map.get('xiaoming'));//通过key获得value
       map.set('adimin',90);//添加了一个admin
       console.log(map);
       map.delete('xiaohong');//删除一个元素

       let set = new Set([1,1,1,1,3]);//无序不重复的集合,和java一样,会去重,比如四个1会变成1个1
   //   输出就是1,3
   </script>
posted @ 2022-04-15 17:32  newlive122  阅读(80)  评论(0)    收藏  举报