es6深度学习---接下来会一直更新学习内容（一）

最新推荐文章于 2024-05-27 11:40:47 发布

zkau0518

最新推荐文章于 2024-05-27 11:40:47 发布

阅读量135

点赞数 1

分类专栏： es6

本文链接：https://blog.csdn.net/weixin_39888214/article/details/95959680

版权

es6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个总结是我在看老潇（陈潇冰）的 es6 课程做的笔记，怕看了之后忘记，就记录下来了，好记性不如烂笔头，希望能在前端的路上越走越迷茫。

一、ECMA介绍、名称、版本

ECMA 标准：

http://www.ecma-international.org/publications/standards/Standard.htm

ES6 ：2015年6月 ES6.0

ES7 ：2016年6月 ES6.1

ES8 ：2017年6月 ES6.2(async await) ES8

ESnext ：'下一代 js'语言

任何人都可以向标准委员会 (TC39), 要求更改语言标准

提案变成标准，经历5个阶段
   Stage 0   展示阶段
   Stage 1   征求意见阶段
   Stage 2   草案阶段
   Stage 3   候选阶段
   Stage 4   定案阶段(标准)

babel：
https://github.com/tc39/ecma262

Chrom浏览器到目前位置，支持 es6 是相当给力，对新的语法支持，速度还挺猛，建议使用Chrome

二、let，const

定义（声明）变量的作用域：全局、函数作用域

let ：变量，相当于之前的 var

let

a) 没有预解析，不存在变量提升

在代码块内，只要let定义变量，在之前使用，都是报错

必须先定义，再使用

let a = 12;
function fn() {
alert(a);
let a = 5;
}
fn(); // 报错 Uncaught ReferenceError: Cannot access 'a' before initialization at fn

b) 同一个作用域里 { }，不能重复定义变量

let a = 12;

let a = 5; // 报错 Uncaught SyntaxError: Identifier 'a' has already been declared

c) for 循环， for 循环（）里面的父级作用域，{ } 里面又是另一个作用域
for (let i = 0; i < 10; i++){

  let i = 5;

  console.log(i); //10 5 循环打印10次 5

}

块级作用域：

{

//块级作用域

}

{{{{ let a = 12 }}}}

if( ){ xx }

for( ){ }

while( ){ }

选项卡例子：

<body>
    <input type="text" value="aaa" />
    <input type="text" value="bbb" />
    <input type="text" value="ccc" />
</body>


window.onload = function() {
    var aInput = document.querySelectorAll('input');
    
    for (let i = 0; i < aInput.length; i++) {
        aInput.onclick = function() {
            alert(i)
        }    
    }
}

const ：常量

const

a) 定义的变量不可以修改

const a = 12;

a = 5;

alert(a);// 报错 Uncaught TypeError: Assignment to constant variable.

b) 定义完的变量，必须有值，不能后赋值，不能修改

const a;

a = 12;

alert(a);// 报错Uncaught SyntaxError: Missing initializer in const declaration

const arr = [ 'apple','banana'];

arr.push('origin');

console.log(arr); // ["apple", "banana", "origin"]

const arr = Object.freeze[ 'apple','banana'];

arr.push('origin');

console.log(arr); // 报错

c) 以后配置文件可以这么写

const config = {

host: ,

username: ,

password: ,

version:

}

立即执行命令函数:

(function(){

// TODO

})

相当于现在

{

// TODO

}

三、解构赋值

等号左右两边，结构格式保持一致

let [a, b, c] = [1, 2, 3];

console.log(a, b, c);

设置默认值

let [a, b, c='默认值'] = [1, 2];

console.log(a, b, c);

let [a, b, c='暂无'] = [1, 2, undefined];//undefined 是空的

console.log(a, b, c);

let [a, b, c] = [1, 2, null]; //null是有值，空对象

console.log(a, b, c);

let {name, age, job} = {

name: 'quer',

age: '20',

job: '学生'

}

console.log(name, age, job);

设置别名

let {name: n, age: a, job: j} = {

name: 'quer',

age: '20',

job: '学生'

}

console.log(n, a, j)

交换两个数的位置

let a = 12;

let b = 5;

[a, b] = [b, a];

封装函数

function getPos() {

return {

left: 10;

top: 20;

}

}

let { left, top: t} = getPos();

console.log(left, t)

import { a, b, c} from './mod'

四、字符串模板以及字符串新增

`` 字符串模板，优点: 可以随意换行
` ${变量名字} `

let name ='Strive';
let age = 18;
let str = `这个人叫${name}, 年龄是 ${age}岁`;

console.log(str);

关于字符串的新属性

字符串查找

includes(要找的东西) 返回值返回索引（位置），没有找到返回 -1

str.indexOf(要找的东西) 返回值 true / false

判断浏览器：includes

字符串是以谁开头

str.startsWith(检测东西) 返回值 true / false

字符串以谁结尾

str.endsWith(检测东西) 返回值 true / false

重复字符串

str.repeat(重复次数)

填充字符串

str.padStart(整个字符串长度，填充内容) 往前填充

str.padEnd((整个字符串长度，填充内容) 往后填充

let str = 'apple';

let padStr = 'xxxx';

str.padStart(str.length + padStr.length, padStr)

五、函数默认参数、箭头函数、剩余参数

函数默认参数
function show({x=0,y=0}={}){
console.log(x,y);
}
show()

函数参数默认已经定义了，不能再使用let，const声明
function show(a=18){
let a = 101; //错误
console.log(a);
}
show()