ES6 尚硅谷 学习内容详解

ES6入门

ES全称EcmaScript,是脚本语言的规范，而平时经常编写的JavaScript是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性

ECMAS ( European Computer Manufacturers Association )

ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。TC39 ( Technical Committee 39 )

<script type="text/babel">

Babel 是一个 JavaScript 编译器

Babel 是一个工具链，主要用于将 ECMAScript 2015+ （ES6+）版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
• 源码转换 (codemods)

Babel 通过语法转换器来支持新版本的 JavaScript 语法。

var

1.可以重复声明

2.无法限制修改

3.没有块级作用域

let

⭕声明变量

1.变量不能重复声明

2.块级作用域 全局，函数，eval

 eval( )语句写于函数内，因此 eval( )内执行的变量也只是局部变量。函数外部无法访问。

3.不存在变量提升

console.log( song ) ;
var song ='  ';

4.不影响作用域链

{
    let school = '尚硅谷' ;
    function fn( ){
        console .log(school);
    }
    fn();
}

let案例实践

document.getElementByclassName (  )使用指定的calss属性值(名称)返回当前文档中所有相关元素的集合(节点列表对象)。

节点列表对象代表了收集到的所有相关节点，可以使用序列号(index)访问节点列表，index的值从0开始。

注：使用节点列表对象的length属性获取相同特定class属性值的元素的数量， 然后根据索引值获取想要的元素相关信息。

如果不存在指定的id属性时，返回NULL

//获取div元素对象
let items = document . getElementsByClassName( ' item ' );
//遍历并绑定事件
for(let i = 0; i < items.length; i++){
    items[i].onclick = function(){
        //修改当前元素的背景颜色
        //this.style.background = 'pink';
        items[i].style.background = 'pink' ;
        //用var会导致i累加到越界
    }
}

//即  
{   
    let i = 0;
    items [i] . onclick = function( ){ }  
}

---

const

⭕声明常量

1.一定要赋初始值 const A;

2.一般常量使用大写(潜规则)

3.常量的值不能修改

4.块级作用域

{
     const PLAYER =' ' ;
}

console.log(PLAYER);

5.对于数组和对象的元素修改（添加），不算做对常量的修改。不会报错。

例：

window . onload=function (){
    
    var aBtn=document . getElementsByTagName( ' input' );
    
    for(var i=0;i<aBtn. length;i++){
        
        (function (i){
        
            aBtn[i]. onclick=function (){
        
                alert(i);
        
            };
        
        })(i);
        
    }
    
};

JS执行机制：先执行主线程，后执行队列（自执行函数，每次循环调用一次该函数。并且将 i 传入进去绑定事件 作用域）——> 闭包

---

解构赋值：

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值。

1.数组的结构

const F4 = ['小沈阳','刘能'，'赵四','宋小宝'];

let [xiao, liu, zhao, song] = F4;

console.log(xiao);

console.log(liu); 

console.log(zhao); 

console.log(song);

2. 对象的解构

const zhao = {
    name :'赵本山'，
    age: '不详' ，
    xiaopin: function( ){
        console.log("我可以演小品");
    }
};

let {name, age, xiaopin} = zhao;

console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin( );

数组

• map 映射 一个对一个

1️⃣[12, 58,99,86,45,91]

[不及格，不及格，及格，及格，不及格，及格]

2️⃣

 let result = arr.map(function (item) {

     return item ;

 })

let arr = [12, 5, 8];
let result = arr.map( item => item * 2);

 alert(result);

3️⃣

let score = [19, 85, 99, 25, 90] ;

let result = score . map( item => item >= 60 ? '及格':'不及格');

alert(score);

alert(result);

• reduce 汇总 ——> 一堆出一个

算个总数：

[12, 8000000,599999]  => 80060011

算个平均数:

[12, 59,99] => 56.67

算总和：

let arr=[12,69,180,8763];
//伪代码
let result = arr. reduce(function (tmp - 中间结果, item - 下一项, index - 下标){
    //alert(tmp + ', +item+ ',+index);
    return   tmp + item; 
});

算平均数：

let result=arr . reduce(function (tmp, item, index){
    if(index != arr . length-1){ //不是最后一次，
        return  tmp + item;
    }else{   //最后一次
        return ( tmp+item)/arr.length; 
    }
});

• filter 过滤器

let arr=[12,5,8,99,27,36,75] ;
let result=arr. filter(item =>{
    if(item %3 == 0){
        return true;
    }else{
        return false;
    }
    return  item %3 ==0;
});

let result = arr. filter( item => item %3 ==0) ;

• forEach

  arr. forEach((item, index)=>{
      alert(index+': '+item);
  });

  循环（迭代）