ESCMAScript6

Data: 2017-11-20 10:30:58Form: JournalClick: 16

# ESCMAScript6

# 一、介绍

ECMA 是 "European Computer Manufactures Association" 的缩写，中文称欧洲计算机制造联合会。
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
初学者一开始学习 JavaScript，其实就是在学 3.0 版的语法。
兼容表：http://kangax.github.io/compat-table/es6/open in new window
browser 在线代码转换

# 二、`let` 命令

ES6 新增了 let 命令，用来声明变量
let所声明的变量，只在 let 命令所在的代码块内有效

# 1、在{}里用let创建的变量，在外部使用就会报错，找不到
{
    var a = 10;
    let b = 1;
}
console.log(a);
console.log(b);

# 2、在for循环里用let创建的遍历，在外部使用会报错
# 2.1、let命令很适合在for循环中使用
for (let i = 0; i < 10; i++) {
    console.log(i);
}
console.log(i);

# 3、变量提升：没有创建变了，打印就会报错
# 3.1、var命令会发生“变量提升”现象，即变量可以在声明之前使用
console.log(a); // 打印undefined
var a = 1;

console.log(b); // 报错ReferenceError
let b = 2;

# 4、暂时性死区：简称 TDZ
# 4.1、只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
var php = 'php中文网';
{
    php = 'PHP中文网'; // 报错ReferenceError
    let php;
}

var php = 'php中文网';
{
    let php;    // 创建相同的变量名，在这个区域就不受外部变量影响
    php = 'abc';
    console.log(php);
}
console.log(php);

# 5、不允许重复创建
let a = 10;
var a = 1;
# 5.1、2个let也会报错
let a = 10;
let a = 1;

# 三、`const` 命令

const 声明一个只读的常量。一旦声明，常量的值就不能改变。

# 1、创建常量
const PHP = "php中文网";
console.log(PHP);
PHP = "php中文网";  // 重复复制，会报错TypeError

# 2、声明常量，就必须立即初始化赋值
const PHP;  // 报错SyntaxError

# 3、只在声明所在的块级作用域内有效，跟let一样
{
    const PHP = "php中文网";
}
console.log(PHP);

# 4、暂时性死区：简称 TDZ
{
    console.log(PHP);   // 报错ReferenceError
    const PHP = "php中文网";
}

# 5、如果常量类型是类，可以改变常量里的数据
function teacher(name,age){
    this.name = name;
    this.age = age;
}

const t = new teacher('欧阳克','38');
t.getname = function(){
    console.log(this.name);
}
t.getname();
// 5.1、改变常量的值，就会报错
t = '欧阳克';
// 5.2、可以改变常量里面的值
t.setname = function(name){
    this.name = name;
}
t.setname('朱天蓬');
t.getname();

# 四、`Arrow` 箭头函数

# 1、语法

作用：代码更加简洁、简化回调函数

# 1、新写法
let fun = x => x*x;
console.log(fun(10));

# 2、老写法
let fun = function(x){
    return x*x;
}
console.log(fun(10));

# es6箭头函数： x 是 值， => 是 function

# 3、多个参数或没有参数，增加()号
let fun = (x,y) => x*y;
console.log(fun(10,8));
let fun = () => 10*8;
console.log(fun());

# 4、多条语句，增加{}号，和return
let fun = (x,y) => {
    console.log(x,y);
    return x*y;
}
console.log(fun(10,8));

# 5、返回对象时，必须在对面外增加括号
let fun = () => ({id:1,name:'欧阳克'});
console.log(fun());

# 2、`this` 的使用

箭头函数没有自己的 this，它的 this 是继承而来的，默认指向在定义它时所处的对象（即外层代码块的 this）

# 1、this代表当前，php变量调用，this代表php变量
let php = {
    name : 'php中文网',
    teacher(title){
        console.log(title);
        console.log(this);
        console.log(this.name);
    }
}
php.teacher('es6基础语法');

# 2、想使用外部的this，可以在外部把this赋值给新变量
let that = this;
let name = '欧阳克';
let php = {
    name : 'php中文网',
    teacher(title){
        console.log(that);
        console.log(that.name);
    }
}
php.teacher('es6基础语法');

# 3、如果teacher属性里在创建个方法，this还是代表window
let that = this;
let name = '欧阳克';
let php = {
    name : 'php中文网',
    teacher(title){
        let say = function(){
            console.log(this);
            console.log(that);
        }
        say();
    }
}
php.teacher('es6基础语法');

# 4、在teacher属性想使用php变量，就是this代表php变量
let that = this;
let name = '欧阳克';
let php = {
    name : 'php中文网',
    teacher(title){
        let that_t = this;
        let say = function(){
            console.log(this);
            console.log(that);
            console.log(that_t);
        }
        say();
    }
}
php.teacher('es6基础语法');

// 5、箭头函数，this代表php变量，不需要重新赋值
let that = this;
let name = '欧阳克';
let php = {
    name : 'php中文网',
    teacher(title){
        let that_t = this;
        let say = ()=>{
            console.log(this);
            console.log(that);
            console.log(that_t);
            // window是可以直接使用的
            console.log(window);
        }
        say();
    }
}
php.teacher('es6基础语法');

# 五、数组新用法

# 1、`map()` 方法

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

# 1.1、方法里使用匿名方法，打印数组中的值，每次拿出一个值，给变量v
let arr = [2,4,6,8,10];
arr.map(function(v){
    console.log(v);
});

# 1.2、k是下标，从0开始，跟循环中的k一样的。
arr.map(function(v,k){
    console.log(k);
    console.log(v);
});

# 1.3、箭头函数
arr.map(v=>{
    console.log(v);
});

# 1.4、返回处理结果
let ret = arr.map(v=>v*v);
console.log(ret);

# 2、`reduce()` 方法

# 3、`filter()` 方法

# 4、`forEach()` 方法

# 六、新增字符串方法

# 1、`startsWith()` 方法

用于检测字符串是否以指定的子字符串开始

let url = "https://www.php.cn";

if(url.startsWith("http://")){
    alert("http协议");
}else if(url.startsWith("https://")){
    alert("https协议");
}else{
    alert("未知协议");
}

# 2、`endsWith()` 方法

let url = "https://www.php.cn/static/images/PHPlogo.png";

if(url.endsWith(".png")){
    alert("这是png图片");
}else if(url.endsWith(".jpg")){
    alert("这是jpg图片");
}else{
    alert("未知后缀");
}

# 3、模版字符串

# 1、字符串里有html代码，并且换行，需要用+号
let str = '<div>欧阳克</div>' +
    '<div>朱天蓬</div>' +
    '<div>灭绝师太</div>';
console.log(str);

# 2、也可以用\斜杠
let str ='<div>欧阳克</div>\
    <div>朱天蓬</div>\
    <div>灭绝师太</div>';
console.log(str);

# 3、使用es6的模版字符串(``)
let str = `<div>欧阳克</div>
    <div>朱天蓬</div>
    <div>灭绝师太</div>
`;
console.log(str);

# 4、使用变量
let arr = ['欧阳克','朱天蓬','灭绝师太'];
let str = '<div>'+arr[0]+'</div>' +
    '<div>'+arr[1]+'</div>' +
    '<div>'+arr[2]+'</div>';
console.log(str);
# 4.1、直接在模版字符串(``)使用变量
let arr = ['欧阳克','朱天蓬','灭绝师太'];
let str = `<div>${arr[0]}</div>
    <div>${arr[1]}</div>
    <div>${arr[2]}</div>
`;
console.log(str);

# 七、函数参数

# 1、数组展开

# 1、使用...把数组展开
let arr = [1,2,3,4,5,6];
console.log(...arr);

# 2、展开重新复制给新数组
let arr1 = ['欧阳克','朱天蓬'];
let arr2 = ['灭绝师太','西门大官人'];
let arr3 = [...arr1, ...arr2];
console.log(arr3);

# 2、方法传值

# 1、使用数组展开传值
function demo(name1,name2){
    console.log(name1 + name2);
}
let arr = ['欧阳克','朱天蓬'];
demo(...arr);

# 2、使用数组展示接收，接收后是一个数组类型
function demo(...name){
    console.log(name);
}
demo('欧阳克','朱天蓬');
let arr = ['欧阳克','朱天蓬'];
demo(...arr);

# 3、接收剩余参数，只能放到最后
function demo(name1,name2,...name){
    console.log(name1);
    console.log(name2);
    console.log(name);
}
demo("欧阳克","朱天蓬","灭绝师太","西门大官人");
let arr = ["欧阳克","朱天蓬","灭绝师太","西门大官人"];
demo(...arr);

# 八、结构赋值

# 1、普通赋值
let a = "欧阳克";
let b = "朱天蓬";
let c = "灭绝师太";
console.log(a,b,c);

# 2、结构赋值
let [a,b,c] = ["欧阳克","朱天蓬","灭绝师太"];
console.log(a,b,c);
# 2.1 左右两边要一样
let [a,b] = ["欧阳克","朱天蓬","灭绝师太"];
let [a,b,c] = ["欧阳克","朱天蓬",];
console.


      
      
  
    
      
        
        I'm Developers.
      
      Copyright © 2014-2024 Guojunjie.com.

All screenshots © 郭俊杰(Journal).

I have been in Xiamen,China.

Website Establishment by Journal.
闽ICP备12018326号-2 
      
     
    
      
        	关于 
            博客 
            留言 
            联系 
                    
          地图 Map
      
    
          
        
        
        
        
          
            Name:
              
            
              
              
              
              
            
            
            
            
            
          
            
            <提交>
        
        
          
            请输入验证码再继续！
            
              
                验证码：
                
                
              
                
            
          
        
      
  
  
  
    Copyright © 2016 by 郭俊杰(Journal)
  
  
     


  返回顶部
  
  
    返回

我是 PHP 程序员

ESCMAScript6

# ESCMAScript6

# 一、介绍

# 二、let 命令

# 三、const 命令

# 四、Arrow 箭头函数

# 1、语法

# 2、this 的使用

# 五、数组新用法

# 1、map() 方法

# 2、reduce() 方法

# 3、filter() 方法

# 4、forEach() 方法

# 六、新增字符串方法

# 1、startsWith() 方法

# 2、endsWith() 方法

# 3、模版字符串

# 七、函数参数

# 1、数组展开

# 2、方法传值

# 八、结构赋值

# 二、`let` 命令

# 三、`const` 命令

# 四、`Arrow` 箭头函数

# 2、`this` 的使用

# 1、`map()` 方法

# 2、`reduce()` 方法

# 3、`filter()` 方法

# 4、`forEach()` 方法

# 1、`startsWith()` 方法

# 2、`endsWith()` 方法