当前位置:   article > 正文

前端基础之ES6_es6前端

es6前端

1. 前后端对比

2. ES6

ECMAScript6.0(以下简称ES6,ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本),是JavaScript语言的下一代标准,2015年6月正式发布,从ES6开始的版本号采用年号,如ES2015,就是ES6。ES2016就是ES7。ECMAScript是规范,JS的规范的具体实现。


2.1 let&&const

  1. var在{}之外也起作用,let在{}之外不起作用
  2. var多次声明同一变量不会报错,let多次声明会报错,只能声明一次。
  3. var 会变量提升(打印和定义可以顺序反)。let 不存在变量提升(顺序不能反)
  4. const声明之后不允许改变,是只读变量
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. // var 声明的变量往往会越域
  12. // let 声明的变量有严格局部作用域
  13. // {
  14. // var a = 1;
  15. // let b = 2;
  16. // }
  17. // console.log(a); // 1
  18. // console.log(b); // ReferenceError: b is not defined
  19. // var 可以声明多次
  20. // let 只能声明一次
  21. // var m = 1
  22. // var m = 2
  23. // let n = 3
  24. // let n = 4
  25. // console.log(m) // 2
  26. // console.log(n) // Identifier 'n' has already been declared
  27. // var 会变量提升
  28. // let 不存在变量提升
  29. // console.log(x); // undefined
  30. // var x = 10;
  31. // console.log(y); //ReferenceError: y is not defined
  32. // let y = 20;
  33. // const
  34. // 1. const声明之后不允许改变
  35. // 2. 一但声明必须初始化,否则会报错
  36. const a = 1;
  37. a = 3; //Uncaught TypeError: Assignment to constant variable.
  38. </script>
  39. </body>
  40. </html>

2.2 解构表达式&字符串

支持let arr = [1,2,3]; let [a,b,c] = arr;这种语法 支持对象解析:const { name: abc, age, language } = person; 冒号代表改名

字符串函数 支持一个字符串为多行,占位符功能 ${}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. //数组解构
  12. // let arr = [1,2,3];
  13. // // let a = arr[0];
  14. // // let b = arr[1];
  15. // // let c = arr[2];
  16. // let [a,b,c] = arr;
  17. // console.log(a,b,c)
  18. const person = {
  19. name: "jack",
  20. age: 21,
  21. language: ['java', 'js', 'css']
  22. }
  23. // const name = person.name;
  24. // const age = person.age;
  25. // const language = person.language;
  26. //对象解构
  27. const { name: abc, age, language } = person;
  28. console.log(abc, age, language)
  29. // 字符串扩展
  30. let str = "hello.vue";
  31. console.log(str.startsWith("hello"));//true
  32. console.log(str.endsWith(".vue"));//true
  33. console.log(str.includes("e"));//true
  34. console.log(str.includes("hello"));//true
  35. //字符串模板
  36. let ss = `<div>
  37. <span>hello world<span>
  38. </div>`;
  39. console.log(ss);
  40. // 字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
  41. function fun() {
  42. return "这是一个函数"
  43. }
  44. let info = `我是${abc},今年${age + 10}了, 我想说: ${fun()}`;
  45. console.log(info);
  46. </script>
  47. </body>
  48. </html>

2.3 函数优化

原来想要函数默认值得这么写b = b || 1; 现在可以直接写了function add2(a, b = 1) {
函数不定参数function fun(...values) {
支持箭头函数(lambda表达式),还支持使用{}结构传入对象的成员

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. //在ES6以前,我们无法给一个函数参数设置默认值,只能采用变通写法:
  12. function add(a, b) {
  13. // 判断b是否为空,为空就给默认值1
  14. b = b || 1;
  15. return a + b;
  16. }
  17. // 传一个参数
  18. console.log(add(10));
  19. //现在可以这么写:直接给参数写上默认值,没传就会自动使用默认值
  20. function add2(a, b = 1) {
  21. return a + b;
  22. }
  23. console.log(add2(20));
  24. //不定参数
  25. function fun(...values) {
  26. console.log(values.length)
  27. }
  28. fun(1, 2) //2
  29. fun(1, 2, 3, 4) //4
  30. //箭头函数
  31. //以前声明一个方法
  32. // var print = function (obj) {
  33. // console.log(obj);
  34. // }
  35. var print = obj => console.log(obj);
  36. print("hello");
  37. var sum = function (a, b) {
  38. c = a + b;
  39. return a + c;
  40. }
  41. var sum2 = (a, b) => a + b;
  42. console.log(sum2(11, 12));
  43. var sum3 = (a, b) => {
  44. c = a + b;
  45. return a + c;
  46. }
  47. console.log(sum3(10, 20))
  48. const person = {
  49. name: "jack",
  50. age: 21,
  51. language: ['java', 'js', 'css']
  52. }
  53. function hello(person) {
  54. console.log("hello," + person.name)
  55. }
  56. //箭头函数+解构
  57. var hello2 = ({name}) => console.log("hello," +name);
  58. hello2(person);
  59. </script>
  60. </body>
  61. </html>


2.4 对象优化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. const person = {
  12. name: "jack",
  13. age: 21,
  14. language: ['java', 'js', 'css']
  15. }
  16. console.log(Object.keys(person));//["name", "age", "language"]
  17. console.log(Object.values(person));//["jack", 21, Array(3)]
  18. console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
  19. const target = { a: 1 };
  20. const source1 = { b: 2 };
  21. const source2 = { c: 3 };
  22. //{a:1,b:2,c:3}
  23. Object.assign(target, source1, source2);
  24. console.log(target);//["name", "age", "language"]
  25. // 声明对象简写
  26. const age = 23
  27. const name = "张三"
  28. const person1 = { age: age, name: name }
  29. const person2 = { age, name }//声明对象简写
  30. console.log(person2);
  31. // 对象的函数属性简写
  32. let person3 = {
  33. name: "jack",
  34. // 以前:
  35. eat: function (food) {
  36. console.log(this.name + "在吃" + food);
  37. },
  38. //箭头函数this不能使用,对象.属性
  39. eat2: food => console.log(person3.name + "在吃" + food),
  40. eat3(food) {
  41. console.log(this.name + "在吃" + food);
  42. }
  43. }
  44. person3.eat("香蕉");
  45. person3.eat2("苹果")
  46. person3.eat3("橘子");
  47. // 对象拓展运算符
  48. // 拷贝对象(深拷贝)
  49. let p1 = { name: "Amy", age: 15 }
  50. let someone = { ...p1 }
  51. console.log(someone) //{name: "Amy", age: 15}
  52. // 合并对象
  53. let age1 = { age: 15 }
  54. let name1 = { name: "Amy" }
  55. let p2 = {name:"zhangsan"}
  56. p2 = { ...age1, ...name1 }
  57. console.log(p2)
  58. </script>
  59. </body>
  60. </html>

2.5 map&reduce

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. //数组中新增了map和reduce方法。
  12. //map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
  13. let arr = ['1', '20', '-5', '3'];
  14. // arr = arr.map((item)=>{
  15. // return item*2
  16. // });
  17. arr = arr.map(item=> item*2);
  18. console.log(arr);
  19. //reduce() 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,
  20. //[2, 40, -10, 6]
  21. //arr.reduce(callback,[initialValue])
  22. /**
  23. 1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
  24. 2、currentValue (数组中当前被处理的元素)
  25. 3、index (当前元素在数组中的索引)
  26. 4、array (调用 reduce 的数组)*/
  27. let result = arr.reduce((a,b)=>{
  28. console.log("上一次处理后:"+a);
  29. console.log("当前正在处理:"+b);
  30. return a + b;
  31. },100);
  32. console.log(result)
  33. </script>
  34. </body>
  35. </html>

2.6 promise 异步编排

  1. corse_score_10.json 得分
  2. {
  3. "id": 100,
  4. "score": 90
  5. }
  6. user.json 用户
  7. {
  8. "id": 1,
  9. "name": "zhangsan",
  10. "password": "123456"
  11. }
  12. user_corse_1.json 课程
  13. {
  14. "id": 10,
  15. "name": "chinese"
  16. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  9. </head>
  10. <body>
  11. <script>
  12. //1、查出当前用户信息
  13. //2、按照当前用户的id查出他的课程
  14. //3、按照当前课程id查出分数
  15. // $.ajax({
  16. // url: "mock/user.json",
  17. // success(data) {
  18. // console.log("查询用户:", data);
  19. // $.ajax({
  20. // url: `mock/user_corse_${data.id}.json`,
  21. // success(data) {
  22. // console.log("查询到课程:", data);
  23. // $.ajax({
  24. // url: `mock/corse_score_${data.id}.json`,
  25. // success(data) {
  26. // console.log("查询到分数:", data);
  27. // },
  28. // error(error) {
  29. // console.log("出现异常了:" + error);
  30. // }
  31. // });
  32. // },
  33. // error(error) {
  34. // console.log("出现异常了:" + error);
  35. // }
  36. // });
  37. // },
  38. // error(error) {
  39. // console.log("出现异常了:" + error);
  40. // }
  41. // });
  42. //1、Promise可以封装异步操作
  43. // let p = new Promise((resolve, reject) => { //传入成功解析,失败拒绝
  44. // //1、异步操作
  45. // $.ajax({
  46. // url: "mock/user.json",
  47. // success: function (data) {
  48. // console.log("查询用户成功:", data)
  49. // resolve(data);
  50. // },
  51. // error: function (err) {
  52. // reject(err);
  53. // }
  54. // });
  55. // });
  56. // p.then((obj) => { //成功以后做什么
  57. // return new Promise((resolve, reject) => {
  58. // $.ajax({
  59. // url: `mock/user_corse_${obj.id}.json`,
  60. // success: function (data) {
  61. // console.log("查询用户课程成功:", data)
  62. // resolve(data);
  63. // },
  64. // error: function (err) {
  65. // reject(err)
  66. // }
  67. // });
  68. // })
  69. // }).then((data) => { //成功以后干什么
  70. // console.log("上一步的结果", data)
  71. // $.ajax({
  72. // url: `mock/corse_score_${data.id}.json`,
  73. // success: function (data) {
  74. // console.log("查询课程得分成功:", data)
  75. // },
  76. // error: function (err) {
  77. // }
  78. // });
  79. // })
  80. function get(url, data) { //自己定义一个方法整合一下
  81. return new Promise((resolve, reject) => {
  82. $.ajax({
  83. url: url,
  84. data: data,
  85. success: function (data) {
  86. resolve(data);
  87. },
  88. error: function (err) {
  89. reject(err)
  90. }
  91. })
  92. });
  93. }
  94. get("mock/user.json")
  95. .then((data) => {
  96. console.log("用户查询成功~~~:", data)
  97. return get(`mock/user_corse_${data.id}.json`);
  98. })
  99. .then((data) => {
  100. console.log("课程查询成功~~~:", data)
  101. return get(`mock/corse_score_${data.id}.json`);
  102. })
  103. .then((data)=>{
  104. console.log("课程成绩查询成功~~~:", data)
  105. })
  106. .catch((err)=>{ //失败的话catch
  107. console.log("出现异常",err)
  108. });
  109. </script>
  110. </body>
  111. </html>

2.7 模块化导入导出

模块化就是把代码进行拆分,方便重复利用。类似于java中的导包,
而JS换了个概念,是导模块。

模块功能主要有两个命令构成 export 和import

export用于规定模块的对外接口
import用于导入其他模块提供的功能
 

  1. user.js
  2. var name = "jack"
  3. var age = 21
  4. function add(a,b){
  5. return a + b;
  6. }
  7. export {name,age,add}
  8. hello.js
  9. // export const util = {
  10. // sum(a, b) {
  11. // return a + b;
  12. // }
  13. // }
  14. export default {
  15. sum(a, b) {
  16. return a + b;
  17. }
  18. }
  19. // export {util}
  20. //`export`不仅可以导出对象,一切JS变量都可以导出。比如:基本类型变量、函数、数组、对象。
  21. main.js
  22. import abc from "./hello.js"
  23. import {name,add} from "./user.js"
  24. abc.sum(1,2);
  25. console.log(name);
  26. add(1,3);

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/131167
推荐阅读
相关标签
  

闽ICP备14008679号