ES6 基础语法总结

var let 与 const

  • var 的不足
    1. 可以重复声明 如已声明 var a = 10;还可以声明 var a = 20;
    2. 不受区块限制 如区块一中使用了{var a = 10;} 后面再声明 var a = 20;最后输出的是 20
    3. 只能被闭包（函数）限制区块
  • 区别
    1. var 有变量提升 let 跟 const 没有
    2. let 声明的变量可以重新赋值，const 声明的常量不可以
    3. let 可以声明一个值为空的变量，const 声明的常量必须有值
    4. 一般情况下 const 声明的常量全部大写
  • 存储地址区别

所有声明的变量、常量 会放到栈内存 每个内存都有一个地址 每个地址都是 16 进制

比较大的数据比如 json 都会在堆内存开辟一块空间，空间里也有各个内存，也会有一个地址，但这个 json 所赋值给的 let 的变量或 const 的常量是仍旧存在于栈内存的，他在栈内存里存的只是堆内存的空间里内存的首地址，堆内空间内存的地址不可变，但是里面的内容是可变的

const json

模板字符串

用两个`反引号包裹可以使用${}的形式添加变量，相如换行等无需再用 html 代码替换，直接输入即可

  1. let name = "zhangsirui";
  2. let age = 30;
  3. let jsx = `我叫${name}
  4. 我今年${age}岁`;
  5. console.log(jsx);

输出：

我叫 zhangsirui
我今年 30 岁

箭头函数

一般来说函数都是用 function 声明，用箭头函数可以使用=>代替 function，使代码变的更简洁

  1. function add (a,b){
  2.     return a + b;
  3. }
  1. // 用箭头函数
  2. let add = (a,b)=>{
  3.     return a + b;
  4. };

箭头函数使用时需要注意以下几点

  • 如果只有一条语句可以不用大括号，且不用大括号的时候 return 也必须省略
  1. let add = (a,b)=>a + b;
  • 没有参数或多个参数时，使用小括号，因为没有参数的时候需要拿括号当结构，有多个参数需要用逗号隔开，得用括号把参数包裹起来
  1. let info = ()=>'info';
  2. let add = (a,b)=>a + b;
  • 只有单个参数的时候可以省略小括号
  1. let name = name => `我的名字是${name}`;
  • 如果只有一条语句且这条语句是表达式或 json 对象,需要加括号将内容包裹起来
  1. let info = () => ({name:"admin",age:30});
  • 箭头函数本身没有 this，他是借用的父级的 this
  1. let info = () => this;
  2. //可以看到this一直往上指到了window对象

数组

for in 与 for of

for in 是遍历的数组的索引 for of 是遍历的数组的元素值 for in 更适合遍历对象 for of 更适合遍历数组

  1. // for in
  2. let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
  3. let goods1 = [];
  4. let sum = 0;
  5. for (n in good) {
  6.   if (good[n] >= 10) {
  7.     goods1.push(good[n]);
  8.   }
  9. }
  1. // for of
  2. let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
  3. for (n of good) {
  4.   if (n >= 0) {
  5.     goods1.push(n * 0.5);
  6.     sum += n * 0.5;
  7.   }
  8. }

filter 过滤器

filter 过滤器 把符合条件的值过滤出来

  1. let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
  2. let goods1 = good.filter(function (n) {
  3.   return n >= 10;
  4. });
  5. //   filter过滤器进阶
  6. let goods1jj = good.filter((n) => n >= 10);

map 映射

map 映射 把每个元素处理 处理完了把每个处理后的结果返回

  1. let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
  2. let goods1 = good.filter((n) => n >= 10);
  3. let goods2 = goods1.map(function (n) {
  4.   return n * 0.5;
  5. });
  6. //   map 映射进阶
  7. let goods2jj = goods1.map((n) => n * 0.5);

reduce 累加器

reduce(function(a,b){},c)

  • a 前一个元素, b 当前元素, c 可选：指定第一个元素
  • 如果有 c, 那么 a = c,b=数组内第一个元素
  • 如果没有 c,那么 a = 数组内第一个元素,b=数组内第二个元素
  1. let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
  2. let goods1 = good.filter((n) => n >= 10);
  3. let goods2 = goods1.map((n) => n * 0.5);
  4. let sum = goods2.reduce(function (a, b) {
  5.   return a + b;
  6. });
  7. //   reduce进阶
  8. let sumjj = goods2.reduce((a, b) => a + b);

startsWith 与 endsWith

  • startsWith 判断字符串是否以某些字符开头
  • endsWith 判断字符串是否以某些字符结尾
  1. let url = ["https://www.baidu.com/", "http://www.baidu.com/", "https://www.php.cn/"];
  2. url.forEach((item) => {
  3.   if (item.startsWith("https")) {
  4.     console.log("安全");
  5.   } else {
  6.     console.log("err:链接不安全，暂不支持");
  7.   }
  8. });
  9. url.forEach((item) => (item.endsWith("cn") ? console.log("网站支持") : console.log("网站不支持")));

链式调用

  1. let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
  2. let sum = good
  3.   .filter((n) => n >= 10)
  4.   .map((n) => n * 0.5)
  5.   .reduce((a, b) => a + b);

class 类

  • class + 类名声明
  • 使用 constructor 方法传入参数
  • 使用 this.name 的方式获取类里面的成员
  • 声明方法可以省略 function
  • 使用 class + 子类名 + extends +父类名可以实现类的继承
  • 调用方法使用 new + 类名 + (参数) 来调用
  1. class Person {
  2.   constructor(name, age, gender) {
  3.     this.name = "name";
  4.     this.age = age;
  5.     this.gender = gender;
  6.   }
  7.   //声明方法
  8.   say() {
  9.     console.log(this.name);
  10.   }
  11. }

json 对象与字符串相互转换

使用 JSON.stringify(json 对象) 可以把 json 对象转为字符串，使用 JSON.parse(json 字符串)可以把 json 字符串转为 json 对象

  1. let a = "aaa";
  2. let b = "bbb";
  3. let c = "ccc";
  4. let d = function () {
  5.   console.log("ddd");
  6. };
  7. // 将a更名为e
  8. const obj = { e: a, b, c, d };
  9. console.log(obj);
  10. let str = JSON.stringify(obj);
  11. console.log(str);
  12. let o = JSON.parse(str);

解构赋值

  • 数组的解构赋值是从前往后按顺序进行赋值
  1. let arr = ["one", "two", "three"];
  2. let [a, b, c] = ["one", "two", "three"];
  • 对象的解构赋值是按名称来进行赋值，跟顺序没有关系
  1. const { name, gender, age, say } = {
  2.   name: "admin",
  3.   age: 30,
  4.   gender: "男",
  5.   say() {
  6.     return "aaa";
  7.   },
  8. };
  • 解构数组中的对象
  1. const [a, b, c, { x: g, y }, d, e] = ["a", "b", "c", { x: "aaa", y: "bbb" }, "d", "e"];
  2. console.log(a, b, c, g, y, d, e);
  • 解构对象中的数组
  1. const {
  2.   a,
  3.   b,
  4.   c,
  5.   d: [x, y],
  6.   e,
  7. } = { a: "a", b: "b", c: "c", d: ["aaa", "bbb"], e: "e" };
  8. console.log(a, b, c, x, y, e);
  • …展开合并参数
    …在数组中就是展开，在单值中就是合并
  1. const [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7];
  2. console.log(a, b, c);
  1. function add(...args) {
  2.   return args.reduce((a, b) => a + b);
  3. }
  4. console.log(add(1, 2, 3, 5, 4, 56, 4, 5, 10));
  5. console.log(add(...c));

Module 模块化编程

one.js

  1. // 使用export将变量跟函数单个导出
  2. export let a = 10;
  4. export function add(a, b) {
  5.   return a + b;
  6. }
  8. console.log("one.js");

two.js

  1. let b = 20;
  3. function add(a, b) {
  4.   return a + b;
  5. }
  7. console.log("two.js");
  8. // 使用export将变量跟函数打包导出
  9. export { b, add };

three.js

  1. let d = 40;
  3. function add(a, b) {
  4.   return a + b;
  5. }
  7. // 进行缺省导出，一个模块只能有一个缺省导出
  8. export default function (...args) {
  9.   return args.reduce(function (a, b) {
  10.     return a + b;
  11.   });
  12. }
  14. // 导出的时候给函数或者变量更名
  15. export { d, add as fun1 };

four.js

  1. let e = 40;
  3. function add(a, b) {
  4.   return a + b;
  5. }
  7. export default function (...args) {
  8.   return args.reduce(function (a, b) {
  9.     return a + b;
  10.   });
  11. }
  13. export { e, add as fun2 };

index.js

  1. // 使用解构赋值的方法 用import将变量及函数导入
  2. import { a, add } from "./one.js";
  3. // 导入的时候给变量或函数更名
  4. import { b, add as sum } from "./two.js";
  5. // 使用*as可以将所有内容导入，并存放到一个变量中
  6. import * as three from "./three.js";
  7. import { e, fun2 } from "./four.js";
  8. let c = 30;
  9. console.log("########");
  10. console.log(add(a, b));
  11. console.log("########");
  12. console.log(sum(b, c));
  13. console.log("########");
  14. // 从导入的所有内容中调用里面的变量及函数
  15. console.log(three["fun1"](c, three["d"]));
  16. console.log("########");
  17. console.log(three["default"](a, b, c, three["d"]));
  18. console.log("########");
  19. console.log(fun2(a, e));

index.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <!-- 使用module模块化编程需要加上type="module才能生效 -->
  9.     <script src="index.js" type="module"></script>
  10.   </head>
  11.   <body></body>
  12. </html>

更多相关文章

  1. md5加密与数组函数
  2. 五.Python面向对象
  3. PHP字符运算、类型转换和系统函数
  4. ES6基本语法，Axios异步网络请求介绍
  5. Python的装饰器原来是这么用的
  6. 循环语句 超级全局变量 及 cURL函数
  7. ES6 和异步网络请求
  8. udp数据报从网卡驱动到用户空间流程总结
  9. 关于ptype_all和pypte_base中的pt_prev的说明

随机推荐

  1. 浅析java中equals与==的用法
  2. Java se之静态代码块、代码块、构造函数
  3. Android使用ichartjs在HTML5中动态绘制图
  4. Android群英传笔记—第1章 Android体系与
  5. Java设计模式之五——装饰模式
  6. 向IntelliJ IDEA创建的项目导入Jar包的两
  7. Javascript设计模式详解
  8. Android之仿美拍主要菜单滑动反弹效果
  9. Java从来不死 PYTHON活跃上升
  10. 接着很久以前的贪吃蛇