js、day1 字符串 数组 对象 循环控制 map set一些基本语句
1.1什么是javascript
一个合格的后端人员,必须精通
-
javaScript是一门脚本语言
1.2简单历史
Nombas 和 ScriptEase
ecmascript(是一个标准)
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
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]);
dspilt() 将字符串转化为数组
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严格检查模式
'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>

浙公网安备 33010602011771号