ES6语法
1.var let const区别
let有作用域限制,只限于当前代码块,没有作用域的提升
let不能声明相同的变量
const:主要声明常量
2.解构赋值
//数组解构赋值
let [name,age,sex] = ['张三',18,'男'];
//对象解构赋值
let {name,age,sex} = {name:'李四',age:20,sex:'女'};
3.数据集合SET
特点:类似数组,没有重复的元素(唯一的)
开发中用于去除重复数据
Key和Value都是相等的
创建集合:
let set = new Set(['张三',18,'男']);
一个属性和4个方法:
set.size 大小
set.add()//添加
set.delete()//删除 --返回true 或 false
set.has() //查看是否有 --返回true 或 false
set.clear()//清楚所有 无返回值
set.keys() //拿所有键
set.values()//拿所有值
4.数据集合--map
特点:类似于对象
创建
const map = new Map([
['name','张三'],
['age',18],
['sex','男'],
]);
//遍历
map.forEach(function(index,value){
console.log(index+'=='+value);
})
5.新增数据类型:symbol 是独一无二的
6.Class类,通过类产生对象
7.新增函数
console.log('Hello word'.includes('word',index)); //判断字符串中是否包含指定字符串(包含返回true) ,index可写可不写 开始位置
console.log(url.startsWith('admin')); //以指定字符串开头
console.log(url.endsWith('admin')); //以指定字符串结束
//魔板字符串
let s =`
<div>
<span>${obj.uname}</span>
<span>${obj.age}</span>
</div>
`;
console.log(s);
8.函数
function foo(a ,...param){
console.log(a,param);
}
foo(1,2,3); //值 1 [2,3]
9.循环
let arr = [11,22,33,44];
arr.forEach((item,index)=>{
console.log(item,index);
})
ES5
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
constructor:Person,
print(){
console.log('姓名:'+this.name+'年龄:'+this.age);
}
}
let person = new Person('张三',29);
console.log(person);
ES6:
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
print(){
console.log('姓名:'+this.name+'年龄:'+this.age);
}
}
let person = new Person('张三',29);
console.log(person);
5.数组的新用法 forEach some filter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul ref="hlist">
<li style="height: 10px">1</li>
<li style="height: 20px">2</li>
<li style="height: 30px">3</li>
<li style="height: 40px">4</li>
<li style="height: 50px">5</li>
</ul>
<button @click="getHeight()">点击获取</button>
<button @click="yzSome()">验证Some</button>
<input type="text" v-model="search" >
<table>
<tr v-for="(s ,index) in filters(search)" :key = "index">
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.age}}</td>
<td>{{s.mobile}}</td>
</tr>
</table>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
someArr:['张三','李四','王五'],
students:[
{name:'张三',sex:'男',age:20,mobile:'13922228888'},
{name:'李四',sex:'女',age:30,mobile:'139111133333'},
{name:'王五',sex:'男',age:50,mobile:'1394444455555'},
{name:'赵六',sex:'女',age:60,mobile:'1396666677777'},
],
search:'',
},
methods:{
getHeight(){
let heiarr = [];
let alllis = this.$refs.hlist.getElementsByTagName('li');
console.log(alllis);
//slice--切割数组 call--借调
Array.prototype.slice.call(alllis).forEach(li =>{
heiarr.push(li.clientHeight);
})
console.log(heiarr);
},
yzSome(){
let result = this.someArr.some((str)=>{
return str === '张三1';
})
console.log(result);
},
filters(search){
return this.students.filter((stu)=>{
if(stu.name.includes(search)){
return stu;
}
})
},
}
})
</script>
