es6那些事儿
一、参考链接
http://www.ecma-international.org/ecma-262/6.0/index.html
http://www.ecma-international.org/ecma-262/7.0/index.html
http://www.ecma-international.org/ecma-262/8.0/index.html
http://es6.ruanyifeng.com/
https://developer.mozilla.org/zh-CN/
二、安装依赖
cnpm i -D babel-preset-env babel-loader babel-core babel-polyfill babel-plugin-transform-runtime
查看浏览器对es6的支持情况
cnpm i -g es-checker
es-checker
三、文件配置
//webpack.config.js
module.exports = {
entry: './index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}
四、 声明变量
1、关键字
var
function
let
const
import
class
2、var,let,const
var声明的变量存在变量提升,会初始化为undefined;
let声明的变量不存在变量提升,会保持为未初始化的状态。let声明块级作用域,不存在变量提升,暂时性死区(封闭性作用域),不允许重复声明。尽量避免在块级作用域内声明函数,如果确实需要,也应该写函数表达式,而不是写函数声明。
const声明的变量不是值不能修改,而是变量指向的内存地址不能修改。声明块级作用域,不存在变量提升,暂时性死区(封闭性作用域),不允许重复声明。
3、全局变量和顶层对象
顶层对象,在浏览器环境指的是window对象,在Node指的是global对象。es5中,全局变量是顶层对象的属性,es6中不是。
//获取顶层对象
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
五、变量的解构赋值
变量的解构赋值,等号右边可能是数组,对象,字符串,数值,布尔值。解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。
1、数组
let [a, b, c] = [4, 5, 6];
只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。
let [k = 1] = [undefined];
let [x, y, z] = [1,,5];
2、对象
let { m, n } = { m: "aaa", n: "bbb" };
let { l = "ccc", m = l } = { m: "aaa", n: "bbb" }; //默认值设置成功,m为"aaa"
let { m: l } = { m: "aaa", n: "bbb" }; // 模式匹配成功,l为"aaa"
3、字符串
let [a, b, c] = "hello";
let { length: len } = "hello"; // len为5
4、数值和布尔
let { toString: s } = 12; //s === Number.prototype.toString
let { toString: s } = true; //s === Boolean.prototype.toString
5、函数
//函数参数的默认值是空对象,函数设置了对象解构赋值的默认值。
function fn1({x = 0, y = 0} = {}) {
return [x, y];
}
console.log(fn1({})); //[0, 0] //函数参数的默认值是有具体属性的对象,函数没有设置对象解构赋值的默认值。
function fn2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
console.log(fn2({})); //[undefined, undefined]
console.log(fn2({x:2,y:5}));
六、字符串的扩展
1、一些函数
'hello'.includes('l'); //true
'hello'.startsWith('h'); //true
'hello'.endsWith('o'); //true
'hello'.repeat(3); //"hellohellohello"
'hello'.padStart(8,'hi,'); //"hi,hello"
'hello'.padEnd(11,',world'); //"hello,world"
2、模板字符串
let name = "camille";
console.log(
`hello,my name is ${name}`
); let h = document.querySelector('body');
h.innerHTML = `<h1 style="color:red">您好</h1>`;
3、标签模板
标签模板是函数调用的另一种形式,即模板字符串跟在函数名后面。这里的标签指的是函数,模板字符串就是函数的参数。
//过滤HTML字符串,防止用户输入恶意内容。
function SaferHTML(templateData) {
let s = templateData[0];
for (let i = 1; i < arguments.length; i++) {
let arg = String(arguments[i]); s += arg.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">"); s += templateData[i];
}
return s;
} let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`; console.log(message);
七、函数的rest参数和数组的扩展操作符
咋一看,都是3个点,函数的rest参数可以把参数序列转换为数组。数组的扩展操作符,...可以把数组转换为参数序列,[...]把具有iterator接口的对象转换为数组,[...]把字符串转换为数组。
八、在html中写es6
<script type="text/babel">
// 你的ES6代码
</script>
es6那些事儿的更多相关文章
- ES5和ES6那些你必须知道的事儿(三)
ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...
- ES5和ES6那些你必须知道的事儿(二)
ES5和ES6那些你必须知道的事儿 ES5新增的东西 二.对象方法 1.Object.getPrototypeOf(object) 返回对象的原型 function Pasta(grain, widt ...
- ES5和ES6那些你必须知道的事儿(一)
ES5和ES6那些你必须知道的事儿 ES5新增的东西 一.数组方法 1.forEach 用途:遍历,循环 对于空数组不会执行回调函数 //用法 array.forEach( function( ...
- 关于ES6的let、const那些事儿
Babel 转码器 Babel是广泛使用的一个ES6转换器,将ES6代码转换成ES5代码,从而实现在老版本的浏览器执行. let和const命令 let所声明的变量只在let命令所在的代码块内是有效的 ...
- Vue ES6 Jade Scss Webpack Gulp
一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...
- webpack 教程 那些事儿04-webpack项目实战分析
这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇 就像我们不会完全做一个项目,不用别人的轮子一样.这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀. 有了前面的基 ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- 深入浅出ES6(十六):模块 Modules
作者 Jason Orendorff github主页 https://github.com/jorendorff 早在2007年我刚加入Mozilla的JavaScript团队的时候广为流传一个 ...
- 深入浅出ES6(十一):生成器 Generators,续篇
作者 Jason Orendorff github主页 https://github.com/jorendorff 欢迎回到深入浅出ES6专栏,望你在ES6探索之旅中收获知识与快乐!程序员们在工作 ...
随机推荐
- Mycat节点扩缩容及高可用集群方案
数据迁移与扩容实践: 工具目前从 mycat1.6,准备工作:1.mycat 所在环境安装 mysql 客户端程序. 2.mycat 的 lib 目录下添加 mysql 的 jdbc 驱动包. 3.对 ...
- phpmyadmin 安装
首先,安装mysql $ sudo apt-get install mysql-server$ sudo apt-get install mysql-client安装时输出root用户的密码在安装ph ...
- cf909C 线性dp+滚动数组好题!
一开始一直以为是区间dp.. /* f下面必须有一个s 其余的s可以和任意f进行匹配 所以用线性dp来做 先预处理一下: fffssfsfs==>3 0 1 1 dp[i][j] 表示第i行缩进 ...
- 20165314 2016-2017-2 《Java程序设计》第3周学习总结
20165314 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 类体包含成员变量和域变量 局部变量只在方法内有效 对象的创建以及对象对自己变量和方法通过用. ...
- vue项目使用阿里巴巴矢量图标库教程
前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...
- JMeter 提供了六种定时器
JMeter提供了六种定时器,下面让我们一起来学习下JMeter的定时器. 先明确一些概念: 1)定时器是在每个sampler(采样器)之前执行的,而不是之后: 是的,你没有看错,不管这个定时器的位置 ...
- HDU 1277全文检索(字典树)
全文检索 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- webpack+vue打包之后输出配置文件修改接口文件
用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,but,难道我们只是改个接口地址也要重新打包吗?当然不行了,那就太麻烦了,怎么 ...
- 20165323 2017-2018-2 《Java程序设计》课程总结
一.每周作业链接汇总 预备作业1:20165323 我期望的师生关系 预备作业2:20165323 学习基础与C语言学习心得 预备作业3:20165323 预备作业三 第一周作业:20165323&l ...
- webpack学习笔记--配置module
Module module 配置如何处理模块. 配置 Loader rules 配置模块的读取和解析规则,通常用来配置 Loader.其类型是一个数组,数组里每一项都描述了如何去处理部分文件. 配置 ...