1.前端对应的技术框架:
2、ES6:全称ECMAScript6.0 ,是JavaScript的标准规范。JavaScript是它的实现。
下面学习它的新特性:
(1)let和const学习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--es6新特性-->
<script>
/*
1.新特性let;
(1)var声明的变量往往会越域;let声明的变量有严格的局部作用域
(2)var可以声明多次;let只能声明一次
(3)var会变量提升;let不存在变量提升
2.const:声明之后不允许改变,一旦声明必须初始化
* */
{
var a = 1;
let b = 2;
}
// console.log(a);
// console.log(b);
var n = 1;
var n = 5;
let c = 1;
c = 2;
console.log(c);
console.log(n);
</script>
</body>
</html>
(2)解构表达式,字符串扩展,字符串模板,字符串插入变量和表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 解构表达式
* */
let arr = [1,2,3];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c] = arr;
document.write(a,b,c);
const person = {
name: "zhangsan",
age: 21,
language: ['java','js']
}
// const name = person.name;
// const language = person.language;
const {name:n,age:e,language:l} = person;
document.write(n,e,l);
/*
* 字符串扩展
* */
let str = "hello.vue";
document.write(str.startsWith("hello"));//true
document.write(str.endsWith(".vue"));//true
document.write(str.includes("e"));//true
document.write(str.includes("hello"));//true
/*
* 字符串模板
* */
let ss = `<div>
<span>hello world<span>
</div>`;
document.write(ss);
/*
* 字符串插入变量和表达式
* 变量名写在${}中,${}中可以放入JavaScript中定义的表达式
* */
function f(){
return "这是一个函数";
}
let info = `我是${n},今年${e+10}岁了,我想说:${f()}`;
document.write(info);
</script>
</body>
</html>
(3)函数参数的默认值,不定参数,箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 函数参数的默认值
* */
//在es6以前,我们无法给一个函数参数设置默认值,只能采用变通写法:
function add(a,b) {
//判断b是否为空,为空就给默认值1
b = b || 1;
return a + b;
}
//传一个参数
document.write(add(10));
//现在es6可以这么写:直接给参数写上默认值,没传就会自动使用默认值
function add1(a,b = 1) {
return a + b;
}
document.write(add1(20));
/*
* 不定参数
* */
function fun(...values) {
document.write(values.length)
}
fun(1,2);//2
fun(1,2,3,4);//4
/*
* 箭头函数
* */
//以前声明一个方法
// var print = function (obj) {
// document.write(obj);
// };
// print(111);
var print = obj =>document.write(obj);
print("hello");
var sum = function (a,b) {
c = a+b;
return a+c;
};
var sum2 = (a,b) => a + b;
document.write(sum2(1,6));
var sum3 = (a,b)=>{
c = a+b;
return a+c;
};
document.write(sum3(2,2));
const person = {
name: 'jack',
age: 18
};
function hello(param) {
document.write("hello"+param.name);
}
hello(person);
var hello1 = (param) =>document.write("hello1" + param.name);
hello1(person);
//箭头函数+解构
var hello2 = ({name}) =>document.write("hello2" + name);
hello2(person);
</script>
</body>
</html>
(4)声明对象简写、对象的函数属性简写、对象拓展运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//object新特性
const person = {
name: 'jack',
age: 18,
language: ['java','js','css']
};
document.write(Object.keys(person));//["name","age","language"]
document.write(Object.values(person));//["jack",21,Array(3)]
document.write(Object.entries(person));//[Array(2),Array(2),Array(2)]
const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};
//对象合并{a:1,b:2,c:3}
Object.assign(target,source1,source2);
document.write(target);
console.log(target);
//声明对象简写:
const age = 23;
const name = "张三";
const person1 = {age:age,name:name};
console.log(person1);
const person2 = {name,age};
console.log(person2);
//对象的函数属性简写
let person3 = {
name: "jack",
//
eat: function (food) {
document.write(this.name + "在吃" + food);
},
//箭头函数this.属性不能使用。需要对象.属性
eat2: food => document.write(person3.name + "在吃" +food),
eat3(food){
document.write(this.name + "在吃" + food);
}
};
person3.eat("香蕉");
person3.eat2("苹果");
person3.eat3("菠萝");
//对象拓展运算符
//拷贝对象(深拷贝)
let person5 = {name:"Amy",age:15}
let someone = {...person5}
console.log(someone);
//合并对象
let age1 = {age:17};
let name1 = {name:'Amy'};
let person6 = {...age1,...name1}
console.log(person6);
</script>
</body>
</html>
(5)数组中新增了map和reduce方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//数组中新增了map和reduce方法
//map():接收一个函数,将原来数组中的所有元素用这个函数处理后放入新数组中返回。
let arr = ['1','20','-5','4'];
// arr = arr.map((item)=>{
// return item*2
// });
arr = arr.map(item =>item*2);
document.write(arr);
//reduce()为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。
//[2,40,-10,6]
//arr.reduce(callback,[initialValue])
/*
* 1.previousValue(上一次调用回调返回的值,或者是提供的初始值(initiaValue))
* 2.currentValue(数组中当前被处理的元素)
* 3.index(当前元素在数组中的索引)
* 4.array(调用reduce的数组)
* */
let result = arr.reduce((a,b) =>{
document.write("上一次处理后:"+a);
document.write("当前正在处理:"+b);
return a +b;
},100);
document.write(result);
</script>
</body>
</html>
(6)promise可以封装异步ajax操作(简化ajax)
扫描二维码关注公众号,回复:
13322333 查看本文章
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<script>
/* //1.查出当前用户信息
//2.按照当前用户的id查出他的课程
//3.按照当前课程id查出分数
$.ajax({
url: "mock/user.json",
success(data){
console.log("查询用户:",data);
$.ajax({
url: `mock/user_corse_${data.id}.json`,
success(data) {
console.log("查询到课程:",data);
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success(data){
console.log("查询到分数:",data);
},
error(error){
console.log("出现异常了:"+error);
}
});
},
error(error){
console.log("出现异常了:"+error);
}
});
},
error(error){
console.log("出现异常了:"+error);
}
});
*/
//promise可以封装异步操作
/*let p = new Promise((resolve,reject)=> {
//1.异步操作
$.ajax({
url: "mock/user.json",
success: function (data) {
console.log("查询用户成功:",data);
resolve(data);
},
error: function (err) {
reject(err);
}
});
});
p.then((obj)=>{
return new Promise((resolve, reject) => {
$.ajax({
url: `mock/user_corse_${obj.id}.json`,
success: function (data) {
console.log("查询用户课程成功:",data);
resolve(data);
},
error: function (err) {
reject(err);
}
});
})
}).then((obj2)=>{
console.log("上一步的结果",obj2);
$.ajax({
url: `mock/corse_score_${obj2.id}.json`,
success: function (data) {
console.log("查询用户课程得分成功:",data);
},
error: function (err) {
}
});
});
*/
//对上面的代码进行封装
function get(url) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
get("mock/user.json")
.then((data)=>{
console.log("用户查询成功:",data);
return get(`mock/user_corse_${data.id}.json`);
}).then((data)=>{
console.log("课程查询成功:",data);
return get(`mock/corse_score_${data.id}.json`);
}).then((data)=>{
console.log("课程成绩查询成功:",data);
}).catch((err)=>{
console.log("出现异常,",err);
})
</script>
</body>
</html>
(7)es6中的模块化:
main.js导入hello.js和user.js中的属性和方法:
hello.js
/*export const util = {
sum(a, b) {
return a + b;
}
};*/
export default {
sum(a, b) {
return a + b;
}
}
//export不仅可以导出对象,一切js变量都可以导出。比如:进本类型变量、函数。数组、对象。
// export {util}
user.js
var name = 'jack';
var age = 20;
function add(a, b) {
return a + b;
}
export {name, age, add};
main.js
import ddd from "./hello.js";
import {name, age, add} from "./user.js";
util.sum(1, 2);
document.write(name);
document.write(age);