- Javascript基础(语法,关键字,变量数据类型,运算符)
- 数据类型
- 值类型(原始值):字符串(string)、数字(number)、布尔(Boolean)、对空(null)、未定义(undefined)、symbol(ES6新引入的一种原始数据类型,表示独一无二的值)
- 引用数据类型(引用值):对象(object)、数组(array)、函数(function)
<body>
<script>
var msg; //定义变量但是没有赋值 就是未定义undefined
console.log(msg)
console.log(msg1) //没有定义变量,报错
var msg1='jarvis'
msg1= null
msg1=1 //Number
msg1=true//Boolean
msg1='true'//string
msg1='1'
msg="1"
msg1=2+''
var sum=msg+msg1
console.log(sum )
msg='lili'
console.log("你好"+msg)//es5字符串拼接
console.log(`你好${msg}`)//es6字符串拼接
msg='123'
prompt("输入数字")
num=12
var num=Number(msg)
if(isNaN(num)){
console.log("不是数字")
}else{
console.log("是数字")
}
console.log(num)
</script>
</body>
2.类型判断
1)Typeof操作符
var li = "你好";
alert(typeof li)
alert(typeof 86)
2)Instanceof操作符:用于判断一个引用类型属于哪种类型
3类型转换
- )Number:将变量转换为数字类型
- )String:将变量转换为字符串类型
- )Boolean:将变量转换为布尔值类型。Boolean会将非零的数字转为true,将零转为false
- )parseFloat:将变量转化为浮点类型
- )parseInt:将变量转化为整数类型
4运算符
1)赋值运算符
var s ='hello'//将hello字符串赋值给变量s
2)算术运算符
var a = 3+2 //加法
var b = 3-2 //减法
var c = 3*2 //乘法
var d = 3/2 //除法
var e = 3%2 //取余数
3)比较运算符
4)逻辑运算符
5)一元运算符
var i =3
var a = i++
document.write("a="+a+",i="+i)
6)二元运算符
7)三元运算符
8)运算优先级
算术运算级>比较运算级>逻辑运算级>赋值运算级
其他的一些知识点
1.提示框
alert("提示框")
2.确认框
// 定义变量
var msg;
// 确认框
msg = confirm('确认信息')
console.log("msg",msg)
确认信息就是true,取消则是false
3.用户输入框提示
msg = prompt("请输入内容")
console.log("msg",msg)
4.交互操作,函数方法
<body>
<p onclick="clickListener()">按钮</p>
<script>
// 定义变量
var msg;
document.write("aaaaa")
// 如果是交互操作,原来内容则会删除掉原来内容。如果不是,则就是直接加内容。
document.write("<p>aaaaa</p>")
// 函数(方法)
function clickListener() {
console.log("-------------")
document.write("<p>bbbbbbbbb</p>")
}
</script>
</body>
点击按钮之后则会变成
5.
// 函数(方法)
function clickListener() {
console.log("-------------")
//document.write("<p>bbbbbbbbb</p>")
var btn = document.getElementById("btn")
btn.className='box1'
// btn.style.color = "red"
// btn.style.background = "blue"
var list = document.getElementById("list")
//获取网络数据
for(let index = 0; index < 5; index++){
//新增创建li标签节点
var li = document.createElement("li")
//给li标签添加内容
li.innerHTML=index
//将li标签添加到ul里
list.append(li)
}
}
二、分支循环
1.if循环
var a = 9
var b = 17
if(a>b){
console.log('a>b');
}else if(a==b){
console.log('a=b');
}else{
console.log('a<b');
}
2.Switch语句
var day = new Date().getDay();
switch(day)
{
case 0:
x="今天是周日"
break
case 1:
x="今天是周一"
break
}
document.write(x)
3.for循环
//冒泡排序 从大到小排列
//1
var list = [2,28,66,36,59,89,99]
for (var i =0;i<list.length;i++){
for(var j=i+1;j<list.length;j++){
if( list[i]<list[j]){
var msg=list[i]
list[i]=list[j]
list[j]=msg
}
}
}
console.log(list)
//2
for(var i=0;i<list.length;i++){
for(var j=0;j<list.length-1;j++){
if(list[j]>list[j+1]){
var msg=list[j]
list[j]=list[j+1]
list[j+1]=msg
}
}
}
console.log(list)
4.for in遍历
遍历对象的属性,多用于对象、数组等复合类型,以及遍历其中的属性和方法。
var Person = {id:1,name:"李四",age:20}
for(key in Person){
document.write(key+":"+Person[key])
document.write('<br/>')
}
5.while循环
var i = 1
var sum =0
while(i<101){
sum += i;
i++;
}
document.write(sum)
输出结果5050
6. do-while循环
do{
代码
}循环(表达式)
三、数组
- 数组定义
- )使用new关键字创建一个Array对象,直接创建一个数组空间,向数组添加元素
- )使用new关键字创建一个array的对象赋值n个初始值
- )不用new,直接用[ ]声明一个数组,同时赋值初始值
// 定义数组
//1
var mycars = new Array();
var mycars = new Array(3);
//2
var mycars = new Array("saab","wool","bmn")
//3
var mycars = ["saab","wool","bmn"]
2.数组操作
1)添加删除元素
// 直接为数组的下标赋值
var mycars=new Array()
mycars[0]="saab"
mycars[1]="wool"
mycars[2]="bmn"
//追加数组
var mycars=new Array()
mycars.push("saab")
mycars.push("wool")
mycars.push("bmn")
document.write(mycars)
2)遍历数组
//遍历数组
//1 for循环遍历
var mycars = ["saab","wool","bmn"]
var len = mycars.length
for(i =0;i<len;i++){
document.write(mycars[i])
document.write('<br/>')
}
//2 for in 遍历数组
var mycars = ["saab","wool","bmn"]
for(key in mycars){
document.write(key+':'+mycars[keys])
document.write('<br/>')
}
3)删除元素
//删除元素
//1 pop尾部删除
var mycars = ["saab","wool","bmn"]
var car = mycars.pop()
document.write(mycars)
document.write('<br/>')
//2 shift头部删除
var mycars = ["saab","wool","bmn"]
var car = mycars.shift()
document.write(mycars)
document.write('<br/>')
//3 指定位置删除元素
var mycars = ["saab","wool","bmn"]
var car = mycars.splice(1,2)
document.write(mycars)
4)插入元素
unshift:从头部插入
splice:从指定位置插入
5)合并数组
//合并数组
var arr=[1,6,5]
var arr1=[11,6,5]
var newArr = arr.concat(arr,arr1)
document.write(newArr)
6)数组转化为字符串
数组提供join元素用指定分割符
7)数组元素倒叙
//数组元素倒叙
var mycars = ["saab","wool","bmn"]
mycars.reverse()
document.write(mycars)
8)数组元素排序
var list = [2,28,66,36,59,89,99]
for (var i =0;i<list.length;i++){
for(var j=i+1;j<list.length;j++){
if( list[i]<list[j]){
var msg=list[i]
list[i]=list[j]
list[j]=msg
}
}
}
//输出结果从大到小
3.二维数组
//二维数组
var arr =new Array()
for(i =0;i<5;i++){
arr[i]=new Array() //每个元素声明一个新数组
for(j=0;j<8;j++){
arr[i].push(i*j)
}
}
var len=arr.length //获取arr长度
var clen = arr[0].length //获取子数组长度
for(i=0;i<len;i++){ //循环打印出二维数组
for(j=0;j<clen;j++){
document.write(arr[i][j])
document.write(",")
}
document.write('<br/>')
}
四、字符串
1.获取字符串长度
<script>
var myname="xingjiahui,xjh"
var Length=myname.length
document.write(Length)
</script>
输出结果14
2.字符串连接
var myname1 = "x"
var myname2 = "nihao"
var myname = myname1 + " " + myname2
document.write(myname)
//输出结果为x nihao
//concat函数
var name1 = "xii"
var name2 = "nihao"
var name = myname1.concat(name2)
document.write(name)
//输出结果为xiihao
3.字符串搜索
//indexOf 从前往后
var str = 'abcdabcd'
console.log(str.indexOf('a'))
//第二个数字不写则默认从零开始
console.log(str.indexOf('a',2))
//从下标值为2的元素开始找
console.log(str.indexOf('cd'))
//lastIndexOf 返回的是最后出现的位置
var str = 'abcdabcd'
console.log(str.lastIndexOf('a'))
console.log(str.lastIndexOf('a',2))
输出结果 4
0
)//search 指定字符串,返回第一个匹配子字符串的起始位置,没有匹配,则返回-1
var str = 'abcdabcd'
console.log(str.search('a'))
console.log(str.search('c'))
console.log(str.search('e'))
//match
var str = 'abcdabcd'
console.log(str.match('a'))
console.log(str.match(/a/))
console.log(str.search('e'))
4.字符串截取
//substring 包前不包后,参数不能为负数
var str = '13464888204'
var length = str.length
console.log(str.substring(0,3))
console.log(str.substring(length-4))
//slice 可以是负数,则从尾部开始算起
var str = '13464888204'
console.log(str.slice(0,3))
console.log(str.slice(-3,-2))
//substr 包括开始的数,结束的数
var str = '13464888204'
console.log(str.substr(0,3))
console.log(str.substr(1,3))
5.字符串替换
6.字符串的切割
// 字符串的切割
var str ="123123@qq.com"
var newList=[]
var list =["123123@qq.com","456456@qq.com","789789@qq.com"]
for(let index = 0;index < list.length; index++){
var item = list[index];
var arr=item.split("@")
console.log(arr)
newList.push(arr[0])
console.log(newList)
}
五、正则表达式
正则表达式:有普通字符以及特殊字符组成的文字模式。字符串方法,正则对象方法。
//正则表达式
var str="a123123_qq"
var s=/^[a-zA-Z]\w{5,17}$/
var b=s.test(str)
console.log("b:",b)
//输出结果为true
六、对象
声明一个对象两种方法:赋值new object()和{ }实现
对象也是一个变量,但对象可以包含多个值(多个变量),每个值以 name:value 对呈现。
//对象 以键值对
var obj={
//声明一个对象
name:'xjh',
//为对象添加属性值
age:21
}
var str='name'
// console.log(obj.age)
console.log(obj[str])
for(var key in obj){
console.log('key:',key)
console.log('value:',key)
}
var obj={
name:'xjh',
age:21,
list:[1,2,3,4,5,6],
list1:[
{
name:'li',
age:23
}
]
}
obj.id=1
// console.log(obj.age)
console.log(obj.list[1].name)
for(var key in obj){
console.log('key:',key)
console.log('value:',key)
}
注习题练习知识点:item 列表项
数组[ ] 对象{ }
DOM 对象方法
getElementById() | 返回带有指定 ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
七、函数:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
大括号{ }
function 函数名(参数可有可无){
参数
return 返回值可有可无;
}
<script>
fun1() //调用fun1 可以提前调用
function fun1(){
console.log('---------')
}
var fun2 = function(){ //匿名函数(定义一个函数,给函数赋值)
console.log('=========')
}
fun2() //匿名函数不能提前调用
var obj={
name:'xjh',
age:20,
sayHi:function(){
console.log('hello---------')
}
}
obj.sayHi()
</script>
八、Es6新特性
新增的两个重要的JavaScript关键字let,const
1.let 声明的变量只在 let 命令所在的代码块内有效。
- let是在代码块内有效,var 是在全局范围内有效
2.let 只能声明一次 var 可以声明多次
3.for 循环计数器很适合用 let
//取数字大于3的数字
var list = [1, 2, 3, 4, 5, 6, 7, 8, ]
var newList = []
//1
for (let index = 0; index < list.length; index++) {
const item = list[index];
if (item > 3) {
newList.push(item)
}
}
2.const 声明一个只读的常量,一旦声明,常量的值就不能改变。一旦声明必须初始化,否则会报错
3.symbol:表示独一无二的值,用来定义对象的唯一属性名
ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ,还新增了 Symbol 。
- Symbol 作为对象属性名时不能用.运算符,要用方括号。因为.运算符后面是字符串,所以取到的是字符串 sy 属性,而不是 Symbol 值 sy 属性。
- Symbol 作为对象属性名时不能用.运算符,要用方括号。因为.运算符后面是字符串,所以取到的是字符串 sy 属性,而不是 Symbol 值 sy 属性。
let syObject = {};
syObject[sy] = "kk";
syObject[sy]; // "kk"
syObject.sy; // undefined
4.解构赋值
var list = [1, 2, 3, 4, 5, 6, 7, 8, ]
var newList = []
//上面所有值乘以2
//map()方法定义在JavaScript的Array中,
//它返回一个新的数组,新返回数组中的每个元素为原始数组
//的每一个元素分别调用map中的回调函数处理后的值。
newList=list.map(function(n){
console.log(n)
return n*2
})
console.log(newList)
5.promise
- )同步函数:同步是指函数执行完毕后,能够理解得到想要的结果,或者说是能得到一个定的返回
console.log("abc")
2.)异步函数:异步是函数执行完毕后,结果必须在未来经过某种手段才能获得(如 回调函数) 等等
settimeout(() => {
console.log("哈哈哈")
}, 5000)。//5000=5s
console.log("now")
3)promise
<script>
//promise
//pending 初始状态也叫等待状态
//resolved 成功状态
//rejected 失败状态
function test(a) {
return new Promise((resolve, reject) => {
// console.log('111111111')
//一系列代码操作后执行
//resolve('a')'
setTimeout(() => {
if (a===1) {
resolve('a')
} else {
reject("b")
}
},1000)
})
}
test(1)
.then((res) => { //then代表reslove的成功状态
console.log('res:',res)
})
.catch((err) => {
console.log("err:", err)
})
</script>