资讯专栏INFORMATION COLUMN

常用的ES6

NikoManiac / 3337人阅读

摘要:和作用域只在声明指令的块级作用域内有效。和导入模块导出模块导出默认有且只有一个默认全部导入名字可以修改我是一条华丽的分界线部分导出导入部分名字必须和定义的名字一样。

1 let 和 const

作用域: 只在声明指令的块级作用域内有效。
let所声明的变量可以改变,值和类型都可以改变,没有限制。

let a = 123
a = 456 // 正确,可以改变
let b = [123]
b = [456] // 正确,可以改变

const声明的变量不可改变值,这意味着const一旦声明变量必须立即初始化,不能以后赋值。

const a ;//报错,一旦声明变量,应该立即赋值!!
const b = 2;
b = 3//报错,因为定义常量之后不能成重新赋值!!

对于复合类型的变量,如数组和对象,变量名不指向数据,而是指向数据所在的地址。const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心

const names = [];
names = [1,2,3] //出错,因为变量names指向的地址不能发生改变,应始终指向[]所在的地址!!![1,2,3]与[]不是同一个地址
const names = [];
names = [1,2,3] //出错,因为变量names指向的地址不能发生改变,应始终指向[]所在的地址!!![1,2,3]与[]不是同一个地址
//不会报错,因为names指向的地址不变,改变的只是内部数据

const names = [];
names[0] = 1
names[1] = 2
names[2] = 3
2 数组

一次性声明多个变量:

let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
3 对象的合并:

Object.assign()方法用于对象的合并,将原对象(source)的所有可枚举属性复制到目标对象(target)

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。

注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
Object.assign 方法实行的是浅拷贝,而不是深拷贝。
const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2
4 Promise对象

Promise 是异步编程的一种解决方案。

5 import 和 export

import 导入模块、export 导出模块

// example2.js  // 导出默认, 有且只有一个默认
export default const example2 = {
  name : "my name",
  age : "my age",
  getName  = function(){  return "my name" }
}
//全部导入 // 名字可以修改
import people from "./example2.js"

-------------------我是一条华丽的分界线---------------------------

// example1.js // 部分导出
export let name  = "my name"
export let age  = "my age"
export let getName  = function(){ return "my name"}

// 导入部分 // 名字必须和 定义的名字一样。
import  {name, age} from "./example1.js"

//有一种特殊情况,即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在

import * as example from "./example1.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

-------------------我是一条华丽的分界线---------------------------

// example3.js  // 有导出默认, 有且只有一个默认,// 又有部分导出
export default const example3 = {
  birthday : "2018 09 20"
}
export let name  = "my name"
export let age  = "my age"
export let getName  = function(){ return "my name"}

// 导入默认与部分
import example3, {name, age} from "./example1.js"

6 字符串拼接

Es6的这种新的“字符串拼接”方法比较简单,没有繁琐的加号和引号,只需要在所需要的字符串“边界”加上``即可。

    var name = "Datura";
    var age = 18;
    var sex = "nü";
    var hobby = "敲代码";
    var str1 = `我是${name},今年${age}岁,性别${sex}的了,爱好${hobby}`; //注意此处有两个“ `` ”
    var str2 = "我是"+name+",今年"+age+"岁,性别"+sex+",爱好"+hobby+""; //这个是原来的写法
    alert(st1r);

7 Map对象

ES6提供了新的数据结构Map,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。
我们来新建一个Map对象,并为其赋值:

let map = new Map();
map.set("a","apple");
map.set("b","banana");
console.log(map); //   Map {"a" => "apple", "b" => "banana"}

1 获取map里面的值:
获取Map对象里面的值map.get(‘b’): banana

2 删除Map对象里面的值map.delete()

3 如果我们只需要map里面的值:

 for(let name of map.values()){
    console.log(name);  ////apple   banana
  }

4 如果我们只需要map里面的key

  for(let name of map.keys()){
    console.log(name);  //a b
  }
7 for 循环

一: for in循环


    //循环数组
    let arr = [12,5,8];
    for(let i = 0;i

二: for of循环

//循环数组
let arr = [12,5,8];
for(let name of arr){
    console.log(name);  // 12 5 8
}
//循环json数据
let json = {a:"apple",b:"banana"};
for(let name of json){
    console.log(name);
}
//报错,因为不能用for ...of...来循环json数据

8 箭头函数

我们先回顾下ES5函数定义与调用:

var show = function(){
        alert(12);  
    };
    show();   // 12
const show = () =>{
        alert(12);  
    };
    show();  // 12 
//个人理解:这里将function关键字去掉然后在“()”后面加一个“=>”










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

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

相关文章

  • [ ES6 ] 快速掌握常用 ES6 (一)

    摘要:常量变量先说说常量和变量的概念吧,常量是说那种进行一次赋值后不会更改的值,比如说游戏账户的,变量是说赋值后有更改的需求的,比如游戏名,游戏密码。常用实例交换变量的值提取数据解构赋值对提取对象中的数据,尤其有用。 本系列文章适合快速掌握 ES6 入门语法,想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》 学习 20% 的知识完成 80% 的工作 关于 ...

    ispring 评论0 收藏0
  • [ ES6 ] 快速掌握常用 ES6 (二)

    摘要:本系列文章适合快速掌握入门语法,想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充,可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数 本系列文章适合快速掌握 ES6 入门语法,想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》 本篇文章是对之前文章...

    hidogs 评论0 收藏0
  • ES6-7

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

    mudiyouyou 评论0 收藏0
  • 工作中常用es6+特性

    摘要:结合工作中使用情况,简单对进行一些复习总结,包括常用的语法,等,以及短时间内要上手需要重点学习的知识点不同工作环境可能有一些差别,主要参考链接是阮一峰的博客以及外文博客阮老师大部分文章是直接翻译的这个博客简介先说一下,是一个标准化组织,他们 结合工作中使用情况,简单对es6进行一些复习总结,包括常用的语法,api等,以及短时间内要上手需要重点学习的知识点(不同工作环境可能有一些差别),...

    xcold 评论0 收藏0
  • ES6常用语法整合

    摘要:说到肯定是先介绍了,据阮一峰老师介绍到,是一个广泛使用的转码器,可以将代码转为代码,从而在现有环境执行。输出其他还有等可以查看阮一峰的入门 ES6也出来有一会时间了,他新增的语法糖也的确大大提高了开发者的效率,今天就总结一些自己用到最多的。 说到ES6肯定是先介绍Babel了,据阮一峰老师介绍到,Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意...

    张迁 评论0 收藏0
  • 实例感受-es6常用语法和优越性

    摘要:在重写完了的时候,就个人总结了一下常用的一些常用的语法和比优越的方面。参数字符串是否在原字符串的尾部返回布尔值。第一个大于的成员的索引方法,用于某个数组是否包含给定的值,返回一个布尔值。 1.前言 前几天,用es6的语法重写了我的一个代码库,说是重写,其实改动的并不多,工作量不大。在重写完了的时候,就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法可能也就是...

    fsmStudy 评论0 收藏0

发表评论

0条评论

NikoManiac

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<