谷粒商城笔记二es6新特性
Posted 今夜月色很美
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷粒商城笔记二es6新特性相关的知识，希望对你有一定的参考价值。
1、let的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
// var 声明的变量往往会越域，let 声明的变量有严格局部作用域
//
// var a = 1
// let b = 2
//
// console.log("a=", a) //a= 1
// console.log("b=", b) // ReferenceError: b is not defined
// var 可以声明多次，let 只能声明一次
// var a = 1
// var a = 2
// let b = 4
// let b = 5 //Uncaught SyntaxError: Identifier 'b' has already been declared
// console.log("a=", a)
// console.log("b=", b)
// var 会变量提升，let 不存在变量提升
// console.log("a=", a) //a= undefined
// var a = 1
// console.log("b=", b) //Uncaught ReferenceError: Cannot access 'b' before initialization
// let b = 2
//声明必须初始化，否则会报错，声明之后不允许改变
const c = 1
c = 2 //1、let的使用.html:34 Uncaught TypeError: Assignment to constant variable.
</script>
<body>
let的使用
</body>
</html>
2、解构表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
//数组解构
let arr = [1,2,3]
let [a,b,c] = arr
console.log(a,b,c)
//对象解构
const person = "name": "zhangsan","age": 16
// const name,age = person
const name:abc,age = person
console.log(abc,age)
// 字符串扩展
let str = "helloworld"
console.log(str.startsWith("hell"))
console.log(str.startsWith("ell"))
console.log(str.endsWith("ell"))
console.log(str.endsWith("ld"))
console.log(str.includes("ell"))
//模板字符串
function toStr()
return "函数返回值"
//使用反撇号`代替引号，模板字符串可以多行书写
let info = `我是$abc,今年$age+10,我想说$toStr()`
console.log(info)
</script>
<body>
</body>
</html>
3、函数优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
function add(a, b)
// 判断b是否为空，为空就给默认值1
b = b || 1;
return a + b;
// 传一个参数
console.log(add(10));
//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a, b = 1)
return a + b;
console.log(add2(20));
//可变参数
function sum(...value)
let sum = 0
value.forEach(element =>
sum = sum + element
);
return sum
console.log(sum(1,2,3))
console.log(sum(1,2,3,4,5,6))
//箭头函数
function sum2(a,b)
return a + b
let sum3 = (a,b) => a + b
console.log(sum3(10,30))
let sum4 = (...value) =>
let sum = 0
value.forEach(element =>
sum = sum + element
);
return sum
console.log(sum4(1,2,3))
console.log(sum4(1,2,3,4,5,6))
</script>
<body>
</body>
</html>
4、对象优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
const person = "name": "zhangsan","age": 16
console.log(Object.keys(person))
console.log(Object.values(person))
console.log(Object.entries(person)) //获得对象的键值对
//Object.assign对象合并
const source2 = "sex":"男"
const source3 = "home":"蜀山区"
Object.assign(person, source2, source3)
console.log(person)
const name = "lisi"
const age = 20
const person2 = name, age
console.log(person2)
//对象属性的简写
let person3 =
"name": "lisi",
eat: function(food)
console.log(this.name + "在吃" + food)
,
//箭头函数this不能使用，使用对象.属性
eat2: food => console.log(person3.name + "在吃" + food)
person3.eat("香蕉")
person3.eat2("橘子")
//对象拓展运算符
//对象深拷贝
let p1 = name: "jack", age: 26
let p2 = ...p1
console.log(p2)
//合并对象
let p3 = sex: "man"
let p4 = ...p1, ...p3
console.log(p4)
</script>
<body>
</body>
</html>
5、map和reduce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
//数组中新增了map和reduce方法
//map()接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = [3,1,-4,30]
// arr2 = arr.map((item)=>
// return item * 2
// )
arr2 = arr.map(item => item * 2)
console.log(arr2)
//reduce()为数组中每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
</script>
<body>
</body>
</html>
6、promise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<script>
//ajax层层嵌套
$.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) =>
$.ajax(
url: `mock/user.json`,
success(data)
resolve(data);
,
error(error)
reject(data);
);
);
p.then((obj) =>
console.log("查询到用户：", obj);
return new Promise((resolve, reject) =>
$.ajax(
url: `mock/user_corse_$obj.id.json`,
success(data)
resolve(data)
,
error(error)
reject(error)
);
).then((obj) =>
console.log("查询到课程：", obj);
return new Promise((resolve, reject) =>
$.ajax(
url: `mock/corse_score_$obj.id.json`,
success(data)
resolve(data)
,
error(error)
reject(error)
);
).then((obj) =>
console.log("查询到分数：", obj);
).catch((err) =>
console.log("出现异常了：" + err);
)
).catch((err) =>
console.log("出现异常了：" + err);
)
以上是关于谷粒商城笔记二es6新特性的主要内容，如果未能解决你的问题，请参考以下文章