目录
第1章 ES6的常用语法补充
课时1：Vue 学前须知
了解 Html +CSS+javascript基础知识
课时2：Vue 课程开篇
三大主流框架学习之前需了解ES6的常用语法
课时3：Vue 基础-let和const-上
01-作用域只局限于当前代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-let和const</title>
</head>
<body>
<script>
//let 和 const 声明 变量和常量 var
//01-作用于只局限于当前代码块
{
var str="张三";
console.log(str);
let str1="李四";
console.log(str1);
}
console.log("+++++"+str);
console.log("-----"+str1);
</script>
</body>
</html>结果：
02-使用let中的变量作用域不会被提升
ES5中：
va在ES5中声明的变量作用域无时无刻不在提升
正常情况下：
var str1="张三";
console.log(str1);输出：张三
改为下面的情况时，输出undefined
console.log(str1);//输出undefined
var str1="张三";结果： 
ES5会将上述语句做如下提升：
var str1;
console.log(str);
str1="张三";结果： 
在ES6中：
{
console.log(str);
let str="李四";
}结果：
03-在相同的作用域下不能声明相同变量
{
var str2="张三";
var str2="李四";
console.log(str2);//输出李四
let str2="王五";
let str2="赵六";
console.log(str2);
//Uncaught SyntaxError: Identifier 'str2' has already been declared
}04-for循环提现let的父子作用域
for(let i=0;i<=5;i++){
let i=10;
console.log(i);
}输出：10
课时4：Vue 基础-let和const-下
<script>
//01-只有在当前的代码块中有效
{
const a='zhangsan';
const a='lisi';// SyntaxError: Identifier 'a' has already been declared 不能被重复声明，同一代码块只能被声明一次
console.log(a);//输出 zhangsan
}
console.log(a);//Uncaught ReferenceError: a is not defined
//02-作用域不会被提升
//03-不能重复使用
</script>//04-声明的常量必须赋值
{
let name;
name='zhangsan';
console.log(name); //输出zhangsan
const name;
name='zhangsan';
console.log(name); //输出 Uncaught SyntaxError: Missing initializer in const declaration
} {
const name='zhang';
name='lisi';
console.log(name);//报错：不能给常量赋值
} const obj={name:'张三'};
console.log(obj);
obj.name='李四';
console.log(obj);//
课时5：Vue-解构赋值
<script>
//01-基本用法
let name='张三',age="18",sex='男';
console.log(name);
console.log(age);
console.log(sex);//
</script>
<script>
//01-基本用法
//let name='张三',age="18",sex='男';
let [name,age,sex]=['李四',20,'女'];
console.log(name);
console.log(age);
console.log(sex);//
</script>
//02-对象的解构赋值
// var obj={name:'张三',age: 55,sex: '男'};
let {name,age,sex}={name:'张三',age:55,sex:'男'};
console.log(name);
console.log(age);
console.log(sex);对对象的解构
let {name,age,friends}={name:'张三',age:55,friends:{name:'dog',age:2}};
console.log(name);
console.log(age);
console.log(friends);//key需一一对应
//03-数组的解构赋值
let [name, age, sex]=['李四','20','女'];
let [arr1,[arr2,arr3,[arr4,arr5]]]=[1,[2,3,[4,5]]];
console.log(name);
console.log(age);
console.log(sex);
console.log(arr1,arr2,arr3,arr4,arr5);
//04-基本类型的解构赋值
let [a,b,c,d,e]='我是中国人';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
课时6：Vue基础-ES6新增的数据类型Set
<script>
//1.创建一个集合
let arr=[];//数组
let obj={};//对象
let set1=new Set();//集合
console.log(set1);
let set=new Set(['张三','李四','王五','李四']);//集合
console.log(set);
// 02- 一个属性
console.log(set.size);//set1集合长度
//03-四个方法
//add
set.add("刘德华");
set.add('姚晨').add('孙悟空');//列式调用
console.log(set);
//delete
console.log(set.delete('张三'));
console.log(set.delete('李四'));
//has
console.log(set.has('张三'));//集合里有张三则返回TRUE
//clear
console.log(set.clear());//undefine
console.log(set);
</script>课时7：Vue基础-ES6新增的数据类型map-上
//1.创建map
const map=new Map([
['name','张三'],
['age',18],
['sex','男']
]);
console.log(map);
课时8：Vue基础-ES6新增的数据类型map-下
//1.创建map
const map=new Map([
['name','张三'],
['age',18],
['sex','男'],
['name','hhaa ']
]);
console.log(map);
console.log(map.size);//去重复
//2. set (增加元素） get
map.set('friends',['赵六','力气']).set(['112'],'龙啸');
console.log(map);
console.log(map.get('name'));
//3. delete
console.log(map.delete('friends')) ;
console.log(map);
//4. has
console.log(map.has('age')) ;
//5. clear
map.clear()
console.log(map);
//6. keys(),values(),entries()
console.log(map.keys());
console.log(map.values());
console.log(map.entries());
//遍历
map.forEach(function(value,index){
console.log(value);
console.log(index);
})
map.forEach(function(value,index){
console.log(index+":"+value);
})
//注意事项
map.set({},'aaaaa');
map.set({},'哈哈哈');
console.log(map);
console.log({}==={});
课时9：Vue-ES6新增的数据类型Symbol
<script>
//1. 定义
let str1=Symbol();
let str2=Symbol();
console.log(str1===str2);//false
console.log(typeof str1);//symbol
console.log(typeof str2);//symbol
//2. 描述
let str3=Symbol('name');
let str4=Symbol('name');
console.log(str3);//输出 Symbol//false(name)
console.log(str4);//输出 Symbol(name)
console.log(str3===str4);//false,表示两者独一无二
//3.对象的属性名
const obj={};
obj.name='张三';
obj.name='李四';
console.log(obj);//输出值 {name: "李四"}
const obj1={};
obj1[Symbol('name')]='张三';
obj1[Symbol('name')]='李四';
console.log(obj1);//输出 {Symbol(name): "张三", Symbol(name): "李四"}
</script>
课时10：Vue-ES6新增的语法 class
//1. 构造函数
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('张三',10);
console.log(person); //2. 通过class面向对象
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
print(){
console.log("我叫"+this.name+",今年"+this.age+"岁了");
}
}
let person =new Person('张三',10);
console.log(person);
person.print();
课时11：Vue基础-内置对象扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-模板字符串</title>
<style>
.test{
width: 100px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<script>
//1. 模板字符串 反撇号 ( `` )
let str='适合敲代码！';
let className='test';
let html= `<html>
<head></head>
<body>
<p>今天天气很好</p>
<div class="${className}">${str}</div>
</body>
</html>`;
console.log(html);
//2. 数组的扩展
//Array.from 作用：伪数组转化为真实的数组
let allLis=document.querySelectorAll('li');
console.log(allLis);
console.log(Array.isArray(allLis));
console.log(Array.from(allLis));
console.log(Array.isArray(Array.from(allLis)));
//Array.of 可将零零散散的转为数组
console.log(Array.of(1, 2, 3, 4));
console.log(Array.of('张三', '李素', '王五'));
//3. 对象的扩展
//如果key和vaalue是一样，写一个就够了
//正常方式
let obj={
'name':'张娜',
'age':20
}
console.log(obj);
//
let name='账单';
let age=18;
let obj1={
'name':name,
'age':age
}
console.log(obj1);
//以上可简写为
let name1='账单';
let age1=18;
let obj2={
name,
age
}
console.log(obj2);
//4. Object.assign() 多个对象合成一个对象
let obj4={name:'小明'};
let obj5={age:13};
let obj6={sex:'男'};
let obj7={friends:'小话'};
let obj8={};
Object.assign(obj8,obj4,obj5,obj6,obj7);
console.log(obj8);
//5. 延展操作符 拆分成数组
let str2='今天的天气很好';
let strArr= [...str2];
console.log(strArr);
let student={
name:'小军',
age:15,
sex:'男'
}
//面试题
let myArr=[1,2,10,'张三',20,2,1];
//console.log(new Set(myArr));
console.log([...new Set(myArr)]);
</script>
</body>
</html>
课时12：Vue基础-函数扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-模板字符串</title>
<style>
.test{
width: 100px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<script>
//1. 形参设置默认值
//ES5
function sum(num1,num2){
num1=num1||10;
num2=num2||10;
console.log(num1+num2);
}
sum();//输出 20
sum(10,20);//输出 30
//ES6
function sum1(num1=10,num2=10){
console.log(num1+num2);
}
sum();//输出 20
sum(10,20);//输出 30
//2. 参数形式 延展操作符
//ES5 中
function sum2(){
let result =0;
for(let value of arguments){
result +=value;
}
return result;
}
console.log(sum2(10, 20, 30));
//ES6 延展操作符
function sum3(...nums){
let result =0;
for(let value of nums){
result +=value;
}
return result;
}
console.log(sum3(10, 20, 30));
//多样化参数 传递
function sum4(name,sex,...nums){
let result =0;
console.log(name);
console.log(sex);
for(let value of nums){
result +=value;
}
return result;
}
console.log(sum4('张三','男',10, 20, 30));
</script>
</body>
</html>
课时13：Vue基础-箭头函数
//箭头函数
// ()=>{}
let sum = (num1,num2)=>{ return num1+num2 };
console.log(sum(100, 300));
let nameArr=['张三','李四','瓦努'];
nameArr.forEach((value, index)=>{
console.log(index+':'+value);
});
function demo (){
setTimeout(function(){
console.log(this);
},1000);
setTimeout(()=>{
console.log(this);
},1000);
}
let obj={};
demo.call(obj);
课时14：Vue基础-promise
//Promise 结构
new Promise((resolve, reject)=>{
$.ajax({
url:'http://happymmall.com/user/get_user_info.do',
type:'post',
success(res){
resolve(res)
},
error(err){
reject(err)
}
});
}).then((res)=>{
console.log('success',res);
}, (err)=>{
console.log('error', err);
});
//链式Promise结构
var promiseFn1 = new Promise((resolve, reject)=>{
$.ajax({
url:'http://happymmall.com/cart/get_cart_product_count.do',
type:'post',
success(res){
resolve(res)
},
error(err){
reject(err)
}
});
});
promiseFn1.then(()=>{
console.log('promiseFn1 success');
return promiseFn2;
}).then(()=>{
console.log('promiseFn2 success');
});
课时15：Vue基础-类和对象
//类的构造函数和方法
class Animal{
constructor(){
this.name='animal';
}
getName(){
return this.name;
}
}
let animal = new Animal();
console.log(animal.getName());
//动态设置参数
class Animal{
constructor(name){
this.name=name;
}
getName(){
return this.name;
}
}
let animal = new Animal('animal test');
console.log(animal.getName());
//类的继承
class Animal{
constructor(){
this.name='animal';
}
getName(){
return this.name;
}
}
class Cat extends Animal{
constructor(){
//子类使用extends关键字时，不能使用this了，要想使用，必须加上super(),这样才能共享一个this指针
super();
this.name='cat';
}
}
let animal = new Animal();
let cat = new Cat();
console.log(animal.getName());
console.log(cat.getName());
//对象的写法
var name = 'Rose',
age = 18;
var obj = {
name: name,
age: age,
getName: function(){
return this.name;
},
getAge: function(){
return this.age;
}
}
let name = 'Rosen',
age = 18;
let obj = {
//变量名可以直接用作对象的属性名称
name,
age,
//对象里的方法可以简写
getName(){
return this.name;
},
//表达式可以作为属性名或方法名
['get' + 'Age'](){
return this.age;
}
}
//Object对象的扩展
Object.krys(obj);
//返回对象的所有属性名，为数组 {"name","age","getName","getAge"}
课时16：Vue基础-ES6--模块化
index.html:
<!-- 告诉浏览器，js文件以模块化的方式引入 -->
<script type="module" src="./index.js></script>
index.js
// import {str, obj, fn} from './module.js'
// // 默认值引入
// import foo from'./module.js'
// console.log('name:', obj.name);
// console.log('str:', str);
// console.log('fn:', fn);
// // 输出默认值
// console.log(foo)
import {str as string, obj, fn} from './module.js'
// 默认值引入
import foo from'./module.js'
console.log('name:', obj.name);
console.log('str:', string);
console.log('fn:', fn);
// 输出默认值
console.log(foo)module.js
let str = 'string';
let obj = {
name:'Rose'
};
let fn = () => {
console.log('module test');
}
//输出变量？ 输出对象
export {
str,
obj,
fn
}
//default 表示模块会默认输出的东西
export default {a: 1}
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
