ES6的基础知识(一)

taohonghui 发布于2019-08-23 15:55 / 2529人阅读

摘要：上面的不支持变量提升此处报错不能重复声明报错支持块级作用域报错除了的功能还不能更改声明后的值不过可以对声明的对象增加属性和更改属性值报错小张小红解构数组解构赋值对象解构赋值对解构赋值的值自定义名称默认赋值若是给赋值将覆盖默认值省略赋值展开运

github上面的demo

let&const

let不支持变量提升

</>复制代码 
 console.log(a); // 此处报错
 let a = "a";

let不能重复声明

</>复制代码 
 let a = "a";
 let a = "abc"; // 报错

let支持块级作用域

</>复制代码 
 if (true) {
   let a = "a";
 }
 console.log(a) // 报错
 for (let i = 0; i < 5; i++) {
   setTimeout(() => {
     console.log(i); // 0 1 2 3 4
   });
 }

const除了let的功能,还不能更改声明后的值,不过可以对声明的对象增加属性和更改属性值

</>复制代码 
 const PI = 3.14;
 PI = 3.141; // 报错
 const obj = {
   name: "小张"
 };
 obj.name = "小红";
 obj.age = 25;

解构

</>复制代码 
{
  // 数组解构赋值
  let [a, b, c] = [123, "abc", { name: "xiaohong" }];
  console.log(a, b, c); // 123 "abc" { name: "xiaohong" }
}
{
  // 对象解构赋值
  let { name, age } = {
    name: "xiaohong",
    age: 25
  };
  console.log(name, age); // xiaohong 25
}
{
  // 对解构赋值的值自定义名称
  let { name: myname, age: myage } = {
    name: "xiaohong",
    age: 25
  };
  console.log(myname, myage); // xiaohong 25
}
{
  // 默认赋值,若是给age赋值将覆盖默认值
  let { name, age = 19 } = {
    name: "xiaohong"
  };
  console.log(name, age); // xiaohong 19
}
{
  // 省略赋值
  let [, , a] = [1, 2, 3];
  console.log(a); // 3
}

展开运算符

函数中使用展开运算符

</>复制代码 
 function test(a, b, c) {}
 let arr = [1, 2, 3];
 test(...arr);

数组中函数中使用展开运算符

</>复制代码 
 let [a, b, ...c] = [1, 2, 3, 4, 5];
 console.log(a, b, c); // 1 2 [ 3, 4, 5 ]
 let arr1 = [1, 2, 3];
 let arr2 = [...arr1, 4, 5];
 console.log(arr2); // [ 1, 2, 3, 4, 5 ]

类数组变量转成数组

</>复制代码 
function test(a, b, c) {
   console.log([...arguments]);
 }
 test(1, 2, 4); // [1 2 4]

字符串

模板字符串:在这之前字符串拼接用+号来完成,现在用``和S{}即可代替字符串的拼接

</>复制代码 
 let name = "xiaohong", age = 25;
 let str = `我叫:${name},今年${age}岁了`;
 console.log(str); // 我叫:xiaohong,今年25岁了   
{
 // 自定义模板字符串的返回值
 let name = "xiaohong",
   age = 25;
 // ...rest作为参数只是放在最后
 function desc(string, ...rest) {
   let str = "";
   for (let i = 0, len = rest.length; i < len; i++) {
     str += string[i] + rest[i];
   }
   str += string[string.length - 1];
   return str.toLocaleUpperCase();
 }
 let str = desc`我叫:${name},今年${age}岁了`;
 console.log(str); // 我叫:XIAOHONG,今年25岁了
}

判断字符串以某个字符串开头

</>复制代码 
 let str = "hello world!";
 console.log(str.startsWith("h")); // true

判断字符串以某个字符串结尾

</>复制代码 
 let str = "hello world!";
 console.log(str.endsWith("!")); // true

判断字符创是否包含某个字符串

</>复制代码 
 let str = "hello world!";
 console.log(str.includes("hello")); // true

将字符串重复生成

</>复制代码 
 let str = "hello world!";
 console.log(str.repeat(3)); // hello world!hello world!hello world!

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102550.html

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
前端小知识--TypeSript和JavaScript到底是什么关系？

摘要：想学好前端，真的要主动，然后对所有的英文文档耐心一点。在年月日，国际组织发布了的第六版，该版本正式名称为，但通常被称为或者。自此，每年发布一次新标准。但保留了用于依赖注入的构造函数参数类型。必须在构造函数中声明属性，而不是在类的代码体中。从 TypeScript 到 ES6 到 ES5 在我初学前端的很长一段时间，不愿意碰git，不愿意碰框架，总是嫌麻烦，连ES6也没有怎么去弄明白...

sixleaves 2019-08-21 12:02 评论0 收藏0
前端基础进阶（十四）：es6常用基础合集

摘要：在继承的构造函数中，我们必须如上面的例子那么调用一次方法，它表示构造函数的继承，与中利用继承构造函数是一样的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在实际开发中，ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格，...

Ryan_Li 2019-08-21 18:31 评论0 收藏0
前端基础进阶（十五）：详解 ES6 Modules

摘要：下载地址安装一个好用的命令行工具在环境下，系统默认的非常难用，所以我个人比较推荐大家使用或者。下载地址安装在命令行工具中使用查看版本的方式确保与都安装好之后，我们就可以安装了。前端基础进阶系列目录 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 对于新人朋友来说，想要自己去搞定一个E...

Lowky 2019-08-21 18:31 评论0 收藏0
ES6零基础教学_解析彩票项目-学习笔记（一）

摘要：彩票项目实战学习记录一完整走了一遍课程，觉得还不错。支持正版人人有责零基础教学解析彩票项目下面是项目课程的目录路线一个项目分为三部分业务逻辑，自动构建系统，模拟数据和真实数据接口处理。彩票项目实战学习记录（一）完整走了一遍课程，觉得还不错。总结: es6的知识点说得还算清楚，主要是为了了解和使用，不是深究，所以浅尝即止即可，所以觉得还不错。完整还原了项目开发的代码设计和开发过...

blastz 2019-08-22 13:52 评论0 收藏0
经常会用到的es6的知识点

摘要：经常会用到的的知识点提到我们就来说说，也是诞生，它的初始名叫。又名，在，和大受重用。年，负责制定规范草案的委员会决定将定义新标准的制度改为一年一次出现。它们在规范的先前版本中被称为模板字符串。它与数组非常相似，但是数据结构的成员都是唯一的。经常会用到的es6的知识点提到es6我们就来说说javascript，es6也是ES2015 1995：JavaScript诞生，它的初始名叫...

asce1885 2019-08-20 18:03 评论0 收藏0