概述
尚硅谷笔记+阮一峰个人博客的笔记和一些个人理解
1、ES6到底是什么？
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。即 下一代Javascript语言。
2、Babel转码器
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。
在项目目录中，安装babel
$ npm install --save-dev @babel/core2.1、配置.babelrc文件
存放在项目的根目录下
基本格式：
{
"presets": [],
"plugins": []
}presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# 最新转码规则
$ npm install --save-dev @babel/preset-env
# react 转码规则
$ npm install --save-dev @babel/preset-react将规则加入.babelrc
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}3、let和const命令
3.1、let命令是什么？
用来声明变量，和var类似。
但是所声明的变量只在let所在的代码块内有效。*块级作用域）
注意：同一个作用域内不可使用let来重复声明变量。
3.1.1、不存在变量提升
变量提升：在声明变量之前可以使用 输出underfined
使用let声明变量，如果在声明之前使用，则会报错：报错ReferenceError
3.1.2、暂时性死区（TDZ）和不影响作用域链
暂时性死区的本质就是，只要一进入当前作用域（只要存在let和const命令，即形参封闭作用域），所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
if (true) {
// TDZ开始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ结束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}3.1.3、不允许重复声明变量
因此，不能再函数内部重新声明参数
function func(arg) {
let arg;
}
func() // 报错
function func(arg) {
{
let arg;
}
}
func() // 不报错3.2、块级作用域
ES5中没有块级作用域的概念。规定就按书只能在顶层作用域和函数作用域之中声明，不能再块级作用域声明。
但是，浏览器为了兼容旧版本，支持块级作用域之中声明函数，可以允运行，不会报错。
ES6规定允许在块级作用域中声明函数，块级作用域之中，函数声明语句的行为类似let，在块级作用域外不可引用。
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f();
}());3.3、const命令
声明常量的命令。
注意：
一定要初始赋值
一般常量使用大写
声明后，常量的值不能修改
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.不进行变量提升，只在声明的块级作用域起作用
在同一作用域内不可重复声明
对于数组和对象的元素修改，不算做对常量的修改，不会报错。
因为，const不改变的是变量值，而不是内存地址，对于简单类型的数据（数值，字符串和布尔值），值就保存在变量指向的那个内存地址，等同于变量数值，所以不能改变。而对于复杂类型的数据（主要是对象和数组），保存的是指向实际数据的指针、
const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性
也可以把对象冻结，此时就不能再添加新属性了
const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, i) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};3.4、总结
ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。
4、变量的解构赋值
4.1、变量解构是什么？
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这称为解构（Destructuring）。
4.2、数组的解构赋值
ES6 允许这样对数组赋值：
let [a, b, c] = [1, 2, 3];
或：
const data = {
name:'zhao',
age:12
}可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};4.4、对象的解构赋值
与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined可以很方便地将现有对象的方法，赋值到某个变量。
// 例一
let { log, sin, cos } = Math;
// 例二
const { log } = console;
log('hello') // hello上面代码的例一将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。例二将console.log赋值到log变量。
对象的解构也可以指定默认值。
默认值生效的条件是，对象的属性值严格等于undefined。
由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 34.5、参数默认值
ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
4.6、解构赋值允许给函数参数赋值初始值
function add(a,b,c=10){
return a + b + c;
}
let result = add(1,2);
上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3上面代码中，函数add的的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。
4.7、字符串的解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o" 类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 55、模板字符串
5.1、引入新的声明字符串方式
【` `】 ' ' " "
5.2、``声明字符串
内容中可以直接出现换行符
变量拼接
let out = `他是￥{data}我的偶像`
5.3、简化对象写法
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
let name = 'aaa';
let age = 12;
const student = {
name,
age,
xiezuoye(){
console.log();
}
}
6、箭头函数
6.1、箭头函数
8、rest参数
用于获取函数的实参，用来代替 arguments
8.1、获取参数
ES5
function data(){
console.log(arguments);
}
data('xx','dd');
输出的不是数组，而是一个对象。
ES6 rest 参数
function data(..args){
console.log(args);
}
data('xx','dd');
rest参数必须放到参数最后
function data(a,b,..args){
console.log(args);
}
data('xx','dd');
输出的是数组。可以使用方法。
9、扩展运算符【...】
9.1、将数组转换为逗号分隔的参数序列
const boys = ['xx','hh','jj'];
function chuanhuan (){
console.log(arguments);
}
chuanhuan(...boys);
9.2、数组的合并
const ku = ['xx','nn']；
const ji = ['bb',''kk];
//const he = ku.concat(ji) //合并数组
const he = [...ku,...ji]; //合并数组
9.3、数组的克隆
const ku = ['xx','nn']；
const ji = [...ku];
9.4、将伪数组转为真正的数组
10、symbol基本使用
ES6新的原始数据类型，表示独一无二的值。是JavaScript语言的第七种数据类型，是一种类似字符串的数据类型。
特点：
值唯一 用来解决命名冲突的问题
不能与其他数据进行运算/比较
symbol定义的对象属性不能使用for..in循环遍历，但是可以使用
10.1、创建symbol
10.1.1、 let s = Symbol();
console.log(s,typeof s);;
10.1.2、创建并传入字符串
let s1 = Symbol('abu');
let s2 = Symbol('abu');
//ES6 规定的等号 === 必须是全部相等 包括类型等 这两个字符串 存入的值相等 但是内存地址 不同
console.log(s2 === s1);
10.1.3、symbol.for创建symbol
let s3 = Symbol.for('abu');
10.2、总结js的基本数据类型：USONB
u underfined
s string symbol
o object
n null number
b boolean
10.3、Symbol的作用
10.3.1、创建对象属性 向对象中添加方法
方法1：
let game = {
name:'abu',
age:12
};
let methods = {
up:Symbol(),
down:Symbol()
};
game[methods.up] = 'xxx';
game[methods.down] = 'ddd';
console.log(game);
方法2：
let you = {
name:'xxx',
age:22,
game:function(){
console.log('123');
},
[Symbol()]:function(){
console.log('332');
}
};
console.log(you);
最后
以上就是爱听歌雪糕为你收集整理的ES6——Escscript6 入门的全部内容，希望文章能够帮你解决ES6——Escscript6 入门所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复