一、新增let、const声明变量
1.）var 声明的变量可以越域，let 声明的变量有严格的局部作用域
// var 声明的变量往往会越域
// let 声明的变量有严格的局部作用域
{
var a = 1;
let b = 2;
}
console.log(a);
console.log(b);2.）可以在控制台看到b是访问不到的
3.）var可以声明多次相同变量，let对于相同变量只可以声明一次
var m=1;
var m=2;
let n=3;
// let n=4;
console.log(m);
console.log(n);
如果再次声明n
4.）var会变量提升，let不会变量提升（另外const声明也不会变量提升）
注：变量提升是指Javascript在编译阶段再次声明变量（个人理解）
console.log(y);
var y=10;
console.log(x);
let x=9;此段代码在编译阶段大概是这样的：
var y;
console.log(y);
var y=10;
console.log(x);
let x=9;所以控制台打印内容：
5.）const声明变量就不可改变：
const a=1;
a=2;
二、解构表达式
1.）数据解构
//数据解构
let arr =[1,2,3];
// let a =arr[0];
// let b =arr[1];
// let c =arr[2];
// console.log(a,b,c)
//等价于
let [a,b,c]=arr;
console.log(a,b,c)2.）对象解构
//对象解构
const person ={
name:"jack",
age: 21,
language:["java","js","css"]
}
// const name=person.name;
// const age=person.age;
// const language=person.language;
// console.log(name,age,language);
const {name:abc,age,language}=person
console.log(abc,age,language);三、字符串扩展、字符串模板
1.）新的api
let str="hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"));//true2.）es6支持用一对反引号来作为字符串模板（``）,其中可以用${ }传值和函数
let ss=`<div>
<span>hello</span>
</div>`
console.log(ss);
const person ={
name:"jack",
age: 21,
language:["java","js","css"]
}
const {name:abc,age,language}=person
let info =`我是${abc},今年${age+10}岁了,我想说：${func()}`;
console.log(info);
function func() {
return "这是一句话";
}四、函数优化
1.）现在允许给参数赋默认值
//以前的写法
function add(a,b) {
// 判断b为空，为空就给默认值1
b=b||1;
return a+b;
}
console.log(add(10));
//给参数写上默认值
function add2(a,b=2){
return a+b;
}
console.log(add2(10))2.）不定参数（和Java很像）
function fun(...values) {
alert(values.length)
}
fun(1,2);//2
fun(1,2,3,4);//43.）箭头函数（和lambda很像）
//形式一
var print = function(params) {
console.log(params);
}
var print = params=>console.log(params);
print("hello");
//形式二
var sum =function(a,b){return a+b;}
var sum2=(a,b)=>a+b; //不同点，lambda表达式return要加括号
console.log(sum2(11,12));
var sum3=(a,b)=>{c=a+b; return a+b;}
//形式三
const person ={
name:"jack",
age: 21,
language:["java","js","css"]
}
function hellp(obj) {
console.log("hello,"+obj.name)
}
//箭头函数+解构表达式
var hello2 =({name})=>console.log("hello,"+name)
//将person解构成{name}
hello2(person);五、对象优化
1.）新api
const person ={
name:"jack",
age: 21,
language:["java","js","css"]
}
console.log(Object.keys(person));//["name","age","language"]
console.log(Object.values(person));//["jack","21",Array(3)]
console.log(Object.entries(person));//[Array(2),Array(2),Array(2)] const target ={a:1};
const source1 ={b:2};
const source2={c:3};
//想要合并三个变量
Object.assign(target,source1,source2); //第一个参数是目标对象，后面的参数是源对象，第一个参数是浅拷贝后面是深拷贝
console.log(target);2.)声明对象简写
const age=23;
const name="张三";
const person1 ={age:age,name:name};
//属性名和变量名相同，可以忽略
const person2={age,name};
console.log(person2);3.）对象的函数属性简写
let person3={
name:"jack",
eat:function(food){
console.log(this.name+"在吃"+food)
},
//箭头函数中this不能使用，要使用对象.属性
eat2:food=> console.log(person3.name+"在吃"+food)
,eat3(food){
console.log(this.name+"在吃"+food);
}
}
person3.eat("苹果");
person3.eat2("香蕉");
person3.eat3("橘子");六、map和reduce
//数组新增map和reduce方法
//map():接收一个函数，将原数组中的所有元素用这个函数处理后放入新的数组返回
let arr =['1','20','-5','3'];
// arr.map((item)=>{
// return item*2
// });
arr=arr.map(item=>item*2);
console.log(arr);
//reduce()为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
// arr.reduce(callback,[initialValue])
// 回调函数的参数列表
// 1.previousValue(上一次调用回调返回的值，或者是提供的初始值)
// 2.currentValue（数组当前被处理的元素）
// 3.index（当前元素在数组中的索引）
// 4.array（调用reduce的数组）
let result= arr.reduce((a,b)=>{
console.log("上一次处理后"+a);
console.log("当前正在处理"+b);
return a+b;
},100);
console.log(result)
七、promise异步编排
// $.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)
// }
// })
// }
// })
// }
// });
//promise可以封装异步操作，resolve和reject传递成功和失败的结果，p.then()进行下一次异步。。。。。。
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(data){
console.log("查询到课程：",data);
resolve(data);
},
error:function(err){
reject(err);
}
})
});
}).then((obj)=>{
$.ajax({
url:`mock/corse_score_${obj.id}.json`,
success(data){
console.log("查询到分数：",data);
},
error:function(err){
}
})
});
</script>改进
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
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);
});
八、模块化
模块化就是把代码进行拆分，方便重复利用。类似Java的导包，js中没有包的概念，称为模块
export{ }导出，import{ } from xxx导入
hello.js
export const util = {
sum(a, b) {
return a + b;
}
}
// export default {
// sum(a, b) {
// return a + b;
// }
// }
// export{util}
//export不仅可以导出对象，一切js变量都可以导出。比如：函数，数组，对象，基本类型变量main.js
import util from "./hello.js"
import {name,add} from "./user.js"user.js
var name = "jack"
var age = 21
function add(a, b) {
return a + b
}
export { name, age, add }
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
