数据类型
①字符串类型详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串类型详解</title>
<!--字符串
1、正常字符串我们使用单引号,或者双引号包裹
2、转义字符 \
\' \n \t \u4e2d \u#### unicode
3、多行字符串编写
Esc键下面
var msg1=`hello world
你好
世界
`
console.log(msg1);
4、模板字符串
let name='Yu';
let age=21;
let msg2=`hello,${name},${age}`;
console.log(msg2);
5、字符串长度
var str="student";
console.log(str.length);
6、字符串的可变性:不可变
7、大小写转换
var str2="abc";
console.log(str2.toUpperCase());
var str3="ABC";
console.log(str3.toLowerCase());
8、获取下标序号
console.log(str.indexOf("d"));
9、substring [ )
console.log(str.substring(1,3));
-->
<script>
// 多行字符串
'use strict';
var msg1=`hello world
你好
世界
`
console.log(msg1);
//模板字符串
let name='Yu';
let age=21;
let msg2=`hello,${name},${age}`;
console.log(msg2);
//字符串长度
var str="student";
console.log(str.length);
//大小写转换
var str2="abc";
console.log(str2.toUpperCase());
var str3="ABC";
console.log(str3.toLowerCase());
//获取下标序号
console.log(str.indexOf("d"));
//substring [ )
console.log(str.substring(1,3));
</script>
</head>
<body>
</body>
</html>
②数组详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
<!--数组
1、length() 长度可变 值也可变
var arr=[1,2,3,4,5];
console.log(arr.length);
2、indexOf() 通过元素获得下标索引 3和"3"不一样
console.log(arr.indexOf(3));
console.log(arr.indexOf("3"));
3、slice() 截取Array的一部分 [ ),返回一个新数组,类似于String中的substring
console.log(arr.slice(2));
console.log(arr.slice(1,3));
4、push():压入到尾部 pop():弹出尾部的元素
5、unshift():压入到头部 shift():弹出头部的一个元素
6、sort() 排序
7、reverse() 元素反转
8、concat() 拼接 并没有修改数组 只是返回一个新数组 原数组不变
console.log(arr.concat([1,2,3]));
console.log(arr);
9、join() 连接符 使用特定的字符串连接
console.log(arr.join("-"));
10、多维数组
var arr2=[[1,2],[3,4],[5,6]];
console.log(arr2[2][1]);
-->
<script>
//length() 获得数组长度
var arr=[1,2,3,4,5,"2","3"];
console.log(arr.length);
//indexOf() 通过元素获得下标索引
console.log(arr.indexOf(3));
console.log(arr.indexOf("3"));
//slice() 截取Array的一部分 [ ),返回一个新数组,类似于String中的substring
console.log(arr.slice(2));
console.log(arr.slice(1,3));
//push():压入到尾部 pop():弹出尾部的元素
arr.push(3,4,"a");
console.log(arr);
arr.pop();
arr.pop();
arr.pop();
console.log(arr);
//unshift():压入到头部 shift():弹出头部的一个元素
arr.unshift("a",1);
console.log(arr);
//concat() 拼接
console.log(arr.concat([1,2,3]));
console.log(arr);
//join() 连接符 使用特定的字符串连接
console.log(arr.join("-"));
//多维数组
var arr2=[[1,2],[3,4],[5,6]];
console.log(arr2[2][1]);
</script>
</head>
<body>
</body>
</html>
③对象详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象</title>
<!--
1、最后一个属性不加逗号
2、使用一个不存在的对象,不会报错
3、动态删减属性,通过delete删除对象的属性
delete person.name
4、动态的添加,直接给新的属性添加值即可
person.name="YUYU"
5、判断属性是否在这个对象中! xx in xxx
"age" in person
true
除了自身的属性 还有继承的属性也可以判断
"toString" in person
true
6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty("age")
true
person.hasOwnProperty("toString")
false
-->
<script>
var person={
name:"Yu",
age:21,
eamil:"1989166740@qq.com",
score:100
}
//删除
delete person.name;
//添加
person.name="Y";
</script>
</head>
<body>
</body>
</html>
④流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制</title>
<!--while do while for 与java语法差不多
forEach有点不同
Java中:
int age[]={51,8,4,9,7,3,2};
forEach(int num:age){
System.out.print(age);
}
JavaScript中:
var age=[51,8,4,9,7,3,2];
for(var index in age){
console.log(age[index]);
}
-->
<script>
'use strict';
var age=[51,8,4,9,7,3,2];
//forEach函数遍历数组(函数)
age.forEach(function (value){
console.log(value)
})
//for...in遍历数组
for(var index in age){
console.log(age[index]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map和Set</title>
<!--ES6新特性-->
<script>
'use strict';
var map=new Map([['tom',98],['jack',100]]);
//添加(修改)
map.set('Yu',99);
//删除
map.delete('jack');
//查找 通过key获得value
var score=map.get('tom');
console.log(score);
console.log(map);
var set=new Set([1,2,3,4,1,1,2]);
//添加
set.add(9);
//删除
set.delete(1);
//是否包含某个元素
console.log(set.has(1));
console.log(set);
</script>
</head>
<body>
</body>
</html>
</script>
</head>
<body>
</body>
</html>
⑤Map和Set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map和Set</title>
<!--ES6新特性-->
<script>
'use strict';
var map=new Map([['tom',98],['jack',100]]);
//添加(修改)
map.set('Yu',99);
//删除
map.delete('jack');
//查找 通过key获得value
var score=map.get('tom');
console.log(score);
console.log(map);
var set=new Set([1,2,3,4,1,1,2]);
//添加
set.add(9);
//删除
set.delete(1);
//是否包含某个元素
console.log(set.has(1));
console.log(set);
</script>
</head>
<body>
</body>
</html>
⑥iterator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iterator</title>
<!--
forEach ES5.1
for of ES6新特性
-->
<script>
'use strict';
//遍历数组 通过for of来遍历数组, for in只能获得数组下标
var arr=[4,5,6];
for(let x of arr){
console.log(x);
}
//遍历map
var map=new Map([['tom',99],['jack',100],['Yu',101]]);
for(let x of map ){
console.log(x);
}
//遍历set
var set=new Set([4,5,6]);
for(let x of set){
console.log(x);
}
</script>
</head>
<body>
</body>
</html>