JavaScript之ES6常用新特性

参考:https://www.jianshu.com/p/ac1787f6c50f

变量声明:const 与 let

  const:常量,必须初始化值   let:变量

  格式:const 变量A = "值"     let 变量B = "值"

  作用域:两者都为块级作用域

模板字符串:

  示例:

let a = "值1"

console.log(`值:${a}`)  // 输出:  值:值1

箭头函数:

  特点:1. 不需要function关键字来创建函数

     2. 当函数仅有一个表达式的时候可以省略 { } 与 return关键字

     3. 当函数只有一个参数的时候,可以省略 ()

  示例:

// 当函数主题只有一个表达式时,可以省略 {  }
let fn1 = (a, b) => a + b
// 箭头函数
let fn2 = () => {
  // 函数内容
}
// 只有一个参数可以省略 ()
let fn3 = a => {
    // 函数内容
}

函数运行参数默认值

  注意:默认值参数需要写在参数最后面

  示例:

// text2有默认值,需要写在参数的最后
function printText(text1, text2 = "123", text3 = "456") {
    console.log(`${text1}-${text2}-${text3}`)
}

printText(‘0000‘) // 输出:0000-123-456

Spread/Rest操作符( ... )

  示例:

// 示例1:当被用于迭代器中时,它是一个 Spread 操作符
function foo(x,y,z) {
  console.log(x,y,z);
}

let arr = [1,2,3];
foo(...arr); // 1 2 3

// 示例2:当被用于函数传参时,是一个 Rest 操作符:当被用于函数传参时,是一个 Rest 操作符:
function foo1(...args) {
  console.log(args);
}
foo1( 1, 2, 3, 4, 5);  // [1, 2, 3, 4, 5]

支持二进制和八进制字面量

let oValue = 0o10;
console.log(oValue); // 8

let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

对象与数组的解构

// 对象
const student = {
    name: ‘Sam‘,
    age: 22,
    sex: ‘男‘
}
// 数组
// const student = [‘Sam‘, 22, ‘男‘];

// ES5;
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ‘ --- ‘ + age + ‘ --- ‘ + sex);

// ES6
const { name, age, sex } = student; // 解构
console.log(name + ‘ --- ‘ + age + ‘ --- ‘ + sex);

for...of 与 for ... in

  for...of 用于遍历一个迭代器,如数组:

let letters = [‘a‘, ‘b‘, ‘c‘]
letters.size = 3for (let letter of letters) {
  console.log(letter)
}// 结果: a, b, c

  for...in 用来遍历对象中的属性:

 let stus = ["Sam", "22", "男"]
 for (let stu in stus) {
   console.log(stus[stu])
 } // 结果: Sam, 22, 男

以下两个不是特别了解:

   对象超类 super

   类 class  语法糖

一个人应养成信赖自己的习惯,即使在最危急的时候,也要相信自己的勇敢与毅力。——拿破仑

原文地址:https://www.cnblogs.com/jingxuan-li/p/11809760.html

时间: 2024-07-30 02:02:52

JavaScript之ES6常用新特性的相关文章

JavaScript:ES6的新特性

1.关键字 const:修饰常量.ES6之前只有变量的声明字段var,ES6开始引入常量关键字,被修饰的变量无法被修改. <script type="text/javascript"> var name1 = "XYQ" console.log(name1); //XYQ name1 = "ZZZ" console.log(name1); //ZZZ const name2 = "XYQ" console.log(

ES6 &amp;&amp; ECMAScript2015 新特性

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了- 在我们正式讲解ES6语法之前,我们得先了解下Babel.Babel Babel是一个广泛使用的ES6转码器,可以将ES6

ES6的新特性-让前后端差异越来越小

ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. 潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS的风采. 1.箭头操作符 如果你会C#或者Java,

ES6一些新特性记录

ES6一些新特性记录 1.箭头操作符 箭头操作符左边是需要输入的参数,右边是返回值 比如运用到js回调函数中可以使书写更加方便 var array=[1,3,5]; //标准写法 array.foreach(function(v,i,a){ console.log(v); }); //es6写法 array.foreach(v => console.log(v)); 又比如一块简单的代码: function (i){ return i + 1}     //es5写法 (i) => i + 1

ES6常用五大特性

ES6可谓是对JS语言的一个颠覆性改变,增加了Module改善JS一直被诟病的模块化.Promise解决异步函数的回调地狱.Class的面相对象编程... 在学习ES6的过程中,大家或多或少都有看过阮一峰老师的<ECMAScript 6 入门>.这本书把ES6的所有知识点都讲解的很详细,如果有时间,还是要去仔仔细细的研究一番.这篇博文只是摘录五个常用的特性来讲解,话不多说,下面开讲: 一.let和const命令 1.let: (1)基本用法 ES6 新增了let命令,用来声明变量.类似于var

ES6相关新特性介绍

你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用.在本文中,我们将讨论一些精心挑选的 ES6 特性,这些特性可以用于你日常的 Javascript 编码中. 请注意,当前浏览器已经全面展开对这些 ES6 新特性的支持,尽管目前的支持程度还有所差异.如果你需要支持一些缺少很多 ES6 特性的旧版浏览器,我将介绍一些当前可以帮助你开始使用 ES6 的解决

ES6的新特性 — 新增关键字let、const

ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScript定义了很多东西,如: 语法-----解析规则,关键字,语句,声明,操作等 类型-----布尔型,数字,字符串,对象等 原型和继承 内置对象,函数的标准库----------JSON, Math, 数组方法,对象方法等 浏览器兼容: 目前Google和Firefox浏览器对ES6新特性的兼容最友好

ES6实用新特性

兼容性 http://kangax.github.io/compat-table/es5/ http://kangax.github.io/compat-table/es6/ ES6(ES2015)兼容环境: IE10以上,Chrome.FireFox.移动端.NodeJS 在低版本环境中使用的解决方案: 1 在线转换 brower.js 2 提前编译 ES6新特性 变量 函数 数组 字符串 面向对象 Promise generator/yield(对Promise的封装) 模块化 一.变量 v

H5、C3、ES6的新特性

H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其他设备的解析 便于团队开发和维护 2.表单新特性 3.多媒体视频(video)和音频(audio) 4.web存储 sessionstorage:关闭浏览器清空数据,储存大小约5M. localstorage:永久生效,存储大小20M,多窗口下都可以使用 都只能储存字符串 C3的新特性 1.选择器: