es6:
es:EMCAScript 6 （es2015）
Emca:国际标准组织
一、常量与变量
const a='hello' 常量const只能定义一次，不能重复定
const声明的变量不得改变值，这意味着const一旦声明变量，就必须立即初始化，不能留到以后赋值。
let命令是es6中新增的一个命令，它是用来声明变量，它的用法类似于var，它所声明的变量的，只用于let命令所在的代码块内有效。
let:定义一个块级作用域的变量
let它需要先定义在使用（不存在变量提升）
1、let与var的区别
a、let它需要先定义在使用（不存在变量提升）
b、let不能重复定义，但是可以被修改
c、var可以定义多次
const的作用域与let的命令相同，只在声明所在的块级作用域内有效
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const a = "hello";
console.log(a);
// console.log(b);
// var b = 123456;
//变量提升
// var b;
// console.log(b);
// b = 123456;
//let c = 100;
if(10> 9){
let c=200;
console.log(c);
}
console.log(c);
var c = 300
let d = 888;
d = 999
console.log(d);
var i=10;
var arr = [22,33,44,55]
for(let i=0;i< arr.length;i++){
}
if(i>5){
console.log(i+10);
}
const obj = {
name: "谢小二",
age: 22
}
var obj2 = obj;
obj2.age = 90
console.log(obj.age);
</script>
</head>
<body>
</body>
</html>View Code
补充：
js的数据类型：
string,array,number,null,undefined,boolean,object
基本数据类型：
string，number，null，undefinedboolean
引用类型:
array,object
二、模板字符串
a、通过反引号来使用，字符串当中可以使用变量
b、可以当作普通字符串来处理
c、可以使用多行字符串
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list_1">
</ul>
<script>
let name = `小三`;
console.log(`她的名字叫${name}`);
document.getElementById("list_1").innerHTML = `
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
`
</script>
</body>
</html>View Code
三、解构变量
a、数组结构赋值：把数据元素的值依次地赋值给变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// let arr = [89,90,99];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c,[d]] = [89,90,99,[100]];
console.log(a);
console.log(c);
console.log(d);
let obj = {
"a1":"json",
a2: 23
}
let {a1,a2} = obj;
console.log(a1);
</script>
</head>
<body>
</body>
</html>View Code
四、对象的扩展
解构不仅可以用于数组，还可以用对象
a、对象当中的属性可以简写
b、对象当中的方法也可以简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let username = '谢小闲';
let obj = {
username,
fun() {
alert(999);
}
};
console.log(obj.username);
obj.fun();
// var useranme = $("#text1").val();
// var password = $("#text2").val();
// $.get(url,{useranme,password},function(){
//
//
// })
</script>
</head>
<body>
</body>
</html>View Code
五、函数的扩展
a、可以给函数默认参数
b、剩余的参数可以用...（这三个点代替）
如：
function fun(a,...b ){
}
fun(11,22,33)
则：b = [22,33]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun(x=100) {
alert(x);
}
//fun();
function fun2(x=3,...y) {
//alert(x);
console.log(x);
console.log(y);
}
fun2(x=2,y=300)
</script>
</head>
<body>
</body>
</html>View Code
六、数组的扩展
a、对数组的遍历
（1）、用forEach循环
如果在原来的基础上都加1就是对数组的遍历用map,反悔的时候用return（map(),在括号里面放函数）
如：
arr.forEach(function (value,index) {
console.log(value);
})
var arr2 = arr.map(function (value,index) {
return value+1
})b、判断数组当中是否存在某个数组
（1）、取索引的时候用indexOf
（2）、包含用includes
console.log(arr.indexOf(1000))
console.log(arr.includes(201))c、对数组的过滤用filter
var arr4 = arr.filter(function (value,index) {
return value > 50
})
console.log(arr4);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var arr = [78,89,90,21];
arr.forEach(function (value,index) {
console.log(value);
})
var arr2 = arr.map(function (value,index) {
return value+1
})
console.log(arr2);
console.log(arr.indexOf(1000))
console.log(arr.includes(201))
let arr3 = [11,22,33]
for(var i in arr3){
// console.log(arr3[i]);
}
for(var i of arr3){
console.log(i);
}
var arr4 = arr.filter(function (value,index) {
return value > 50
})
console.log(arr4);
</script>
</head>
<body>
</body>
</html>View Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li{
list-style: none;
}
.tipbox{
width: 200px;
height:200px;
border: 1px solid cornflowerblue;
position: absolute;
background-color: #aaaaaa;
top: 200px;
left: 600px;
}
</style>
</head>
<body>
<div id="app">
<div>
<input type="text" placeholder="姓名" v-model="username">
<input type="text" placeholder="年龄" v-model="age">
<input type="button" value="增加" @click="add">
</div>
<div>
<table cellpadding="0" border="1">
<tr v-for="(item,index) in arr">
<td>{{item.username}}</td>
<td>{{item.age}}</td>
<td>{{index}}</td>
<td><input type="button" value="删除" @click="del(index)"></td>
<td><input type="button" value="修改" @click="showBox(index)"></td>
</tr>
</table>
</div>
<div class="tipbox" v-show="isShow">
<p><input type="text" placeholder="姓名" v-model="m_username"></p>
<p><input type="text" placeholder="年龄" v-model="m_age"></p>
<p>
<input type="button" value="确定" @click="save()">
<input type="button" value="取消" @click="cancel()">
</p>
</div>
</div>
<script>
new Vue({
el: "#app", //表示在当前这个元素内开始使用VUE
data:{
username: "",
age: "",
arr: [],
isShow:false,
m_username: "",
m_age: "",
n: 0
},
methods: {
add: function () {
this.arr.push({username:this.username,age: this.age});
console.log(this.arr);
},
del: function (index) {
this.arr.splice(index,1);
},
showBox: function (index) {
this.isShow = true;
this.n = index;
this.m_username = this.arr[index].username;
this.m_age = this.arr[index].age;
},
cancel: function () {
this.isShow = false
},
save: function () {
this.arr[this.n].username = this.m_username;
this.arr[this.n].age = this.m_age;
this.isShow = false
}
}
})
</script>
</body>
</html>维护学生信息
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
