ES6学习笔记（第一天）

ES6学习笔记（第一天）

1.let变量声明

//连续声明，赋值方面与var一致
//特性：
//1.变量不能重复声明
let star = '你好';
let star = '666';//此时会报错

//2.块级作用域有效   (全局、函数、ecal)
{ 
    let str='wwh';
}
console.log(str);//此时会报错，因为拿不到，只在{}中有效
//这里的块级还包括if for else while这些语句

//3.不存在变量提升
console.log(name);//会报错，不能使用name这个变量
let name='wwh'; //let改为var就可以

//4.不影响作用域链
{
    let w='111';//虽然是块级作用域，但是不影响作用域链的效果
    function fn(){
        console.log(w);
    }
    fn();//可以拿到
}

特性2的例子

  <div>
        <h2>点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        var box=document.querySelectorAll('.item')
        var flag=true
            for(var i=0;i<box.length;i++){
                box[i].onclick=function(){
                    //这里换成box[i]，点击盒子时会报错，遍历完之后点击才会执行回调函数。
                    //而var是全局作用域，box[i]在回调函数的这个作用域里找不到i就会向外查找，而此时的i已经变成3了。
                    //解决方法：使用box[i]时用let i=0
                    this.style.background='pink'
                }
            }
            console.log(i);//输出3
    </script>

2.const 声明常量

注意事项：
1.一定要赋初始值

const a;//报错

2.常量一般要大写(潜规则)
3.常量的值不能修改

    const SCL='123'
    SCL='456'//报错

4.块级作用域
5.对于数组和对象的元素修改，不算2中的常量修改，不会报错

const QQ=['wwh','wxh'];
QQ.push('cxj');//此时不会报错，因为只是修改数据，并没有修改地址,const的只想不变
            //但是QQ='666'会报错，因为const指向了另外一个地址

3.解释赋值

就是从给的数据（比如数组，对象等）里提取出目标值，并赋值给变量。 如果数据不是对象类型，则会把它转成对象类型，如果不能转，则会报错。

    var {a} = null // error
    var {a} = undefined // error
    var {length} = '123' // 转成字符串对象，它有length属性
    console.log(length) // 3

3.1数组

数组是通过顺序来提取的，提取到了就赋值给对应下标的变量。 变量可以随意命名。
如果变量多了则多出的没匹配上的变量是undefined
如果变量少了则只赋值对应的变量。

    var [first,second] = [1,2,3]
    console.log(first, second)  // 1 2
    var [first,second, third, fourth] = [1,2,3]
    console.log(first, second, third)  // 1 2 3
    console.log(fourth)  // undefined

数组的解构支持嵌套。

var [one,[two]] = [1,[2],3]
console.log(two) // 2

可以给变量设置默认值，如果变量没有匹配上，则会使用默认值代替undefined。变量没有匹配上的条件是没有对应的值或者对应的值全等于undefined。

var [first] = []
console.log(first) // undefined

var [first = 'a'] = []
console.log(first) // 'a'

var [first = 'a'] = [undefined]
console.log(first) // 'a'

var [first = 'a'] = [null]
console.log(first) // null

var [first = 'a'] = [0]
console.log(first) // 0

默认值也可以使用变量名，前提是需要先声明了再使用。

var [first, second = first] = [1]
console.log(first, second) // 1, 1

只想取第二个值，可以这样写

var [,second] = [1,2]
console.log(second) // 2

3.2对象

对象的解构不是按照顺序的，而是匹配key和变量名是否一致，如果一致，则把key对应的value赋值给变量。不一致的话就是undefined。

var {a, b} = {a:1, b:2}
console.log(a,b) // 1 2

var {c} = {a:1, b:2}
console.log(c) // undefined

也支持嵌套，设置默认值

3.3其他

可以对函数的参数进行解构，也可以设置默认值

function fn ({a = 1, b = 2} = {}) {
  return a + b
}
fn({a: 10, b: 20}) // 30
fn({a: 10}) // 12
fn() // 3

解构赋值用在交换值非常方便

var a = 1, b = 2;
[b,a] = [a,b]
console.log(a, b) // 2 1

4.模板字符串

es6引入新的声明字符串的方式``

//内容可以直接出现换行
let str=`seee`

变量拼接

let l='wwh';
let out =`${l}，早上好！`
console.log(out)//输出wwh，早上好！

5.对象简化写法

es6允许在大括号里直接写入变量名和函数名，作为对象的属性和方法

let name='zzl';
let fun=function(){
    console.log('我是人');
}
const data={
    name, //可以直接写变量名，不用再写值了
    fun    //相当于：name：name，fun：fun
}
console.log(data);
// 结果输出name:'zzl',fun()

方法也可以省去：和function

const data={
    // 旧的方法定义
    // act:function(){
    //     console.log('我很满意我自己');
    // }
    //新的方法定义
    act(){
        console.log('我可以');
    }
}

6.箭头函数

用=>来定义函数

 let fun=(a,b)=>{
    return a+b;
 }
 //函数调用与之前的函数一致

特性：

//1.箭头函数的额this是静态的，this始终指向函数声明时所在作用域下的this的值
function getname(){
    //name是wwh,直接调用的话this值指向window
}
    console.log(this.name);//wwh
let getname2=()=>{
    //而这个箭头函数是在全局作用域下声明的，所以this也是指向window
    console.log(this.name);//wwh
}

window.name='wwh';
const data={
    name:'wxh'
}

//直接调用
getname();//name是wwh,直接调用的话this值指向window
getname2();//而箭头函数是在全局作用域下声明的，所以this也是指向window

// call方法调用
getname.call(data);//wxh 此时普通函数this的值已经变为data了。
getname2.call(data);
//输出wwh,因为它的this依然指向函数getname2声明时所在作用域下的this的值window.name='wwh';



//2. 不能作为构造实例化对象
let Person=(name,age)=>{
    this.name=name;
    this.age=age;
}
let me=new Person('zzl','22');//此时会报错，箭头函数不能作为实例化对象。



//3.不能使用arguments变量
// arguments:用来保存实参的
let fn=()=>{
    console.log(arguments);
}
fn(1,2,3);//会报错，不用用来保存实参

//4.箭头函数的简写
    //省略小括号，当且仅当只有一个参数
    let add =n=>{
        return n*n
    }
    //省略花括号，当代码体只有一条语句的时候，此时 return 必须省略,且语句执行结果就是函数的返回值
    let pow =(n,m)=>n*m
    //两个都省
    let sww=n=>n+n

箭头函数适合与this无关的回调：定时器、数组的方法回调
不适合与this有关的回调：DOM元素的事件回调、对象的方法

btn.addEventListener("click",function(){
    //此时普通函数的this指向事件缘
    //如果使用箭头函数，事件源将变成外部作用域的this值，即这个函数所在的作用域
})

7.函数参数初始值

es6允许给函数参数赋初始值

//1.形参初始值，一般位置靠后
function add(a,b,c=10){
    return a+b+c
}

//2.函数参数初始值与结构赋值结合使用
function data({name,age='18'}){
    console.log(name);
    console.log(age);
}
data({
    name='wwh',
    // age='18'
})

8.rest参数

用于获取函数的实参，可以代替arguments。

// function data(){
//     console.log(arguments);//输出的是一个对象
// }
// data('wwh','wxh');//函数调用

// rest参数
function data(...args){
    console.log(args); //输出的是一个数组，可以使用filter some...
}
data('wwh','wxh');//函数调用

rest参数必须放最后

function data(a,b,...args){
    console.log(a);//1
    console.log(b);//2
    console.log(args);//366
}
data(1,2,3,6,6)

9.扩展运算符…

将数组转换为逗号分隔的参数序列

const names=['wwh','wxh','cxj'];

function data(){
    console.log(arguments);
}
//不用扩展运算符
data(names);//只输出一个结果，是一个数组

// 用扩展运算符
data(...names);//输出3个结果，等价于：data('zzl','wxl','ll')，即参数序列

应用

//数组的合并
const a=['wwh'];
const b=['wxh'];
const c=[...a,...b];
// c=['wwh','wxh']

//数组的克隆
//如果数组里面有引用类型的话，扩展运算符也只是浅拷贝。
const a=['e','d','g']
const sao=[...a]
console.log(sao)//['e','d','g']

//将伪数组转为真正的数组
const divs=document.querySelectorAll('div');//得到伪数组
const divdata=[...divs];//转为真正的数组

10.Symbol

它一种新的数据类型，表示独一无二的值，类似于字符串的数据类型。js中第七种数据类型
(1)它的值是唯一的，用来解决命名冲突的问题。
(2)它的值不能于其他数据进行运算。
(3)它定义的对象属性不能使用for…in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

//1.创建
  //Symbol()
 let s=Symbol() //Symbol()是一个函数
 console.log(s,typeof s)//Symbol() 'symbol' 这里唯一的、独一无二的值我们看不见

 let s2=Symbol('wwh')
 let s3=Symbol('wwh')
 console.log(s2===s3)//false 说明这两个wwh不一样，类似于这两个wwh同名但学号不一样
  //Symbol.for 创建
 let s4=Symbol.for('wwh') 
 let s5=Symbol.for('wwh') 
 console.log(s4,typeof s4)//Symbol(wwh) 'symbol'
 console.log(s4===s5)//true

 //2.不能与其他数据进行运算
   let re=s+100//报错
   let re=s>100//报错
   let re=s+s//报错

Symbol()的应用：给对象添加独一无二的属性：

let game={
    //假如有很多代码很多变量名
}

//声明一个对象
let data={
    //Symbol保证了up和down的属性名是独一无二的，
    // 所以添加进去也不怕也不怕有属性名冲突
    up:Symbol(),//up属性的数据类型为Symbol
    down:Symbol()
};

//第一种添加方式：通过另外一个对象添加Symbol属性
//把这个Symbol添加到game方法中
//[]方法：因为对象点号后面只能接字符串，所以这里用中括号
game[data.up]=function(){
    console.log('上升'); //安全的向这个对象中添加了两个方法
}
game[data.down]=function(){
    console.log('下降');
}
console.log(game);


//
//第二种添加方式
let play={
    name='run',
    [Symbol('say')]:function(){
        console.log('我会说话');
    },
    [Symbol('sleep')]:function(){
        console.log('我会睡觉');
    }
}
console.log(paly);

Symbol()有很多内置属性：可以用于做对象的属性
建议看这个文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable

11.js数据类型小总结

一句话：USONB you are so niubility! 你如此的牛掰！
分别代表：
U: undefined
S: string symbol
O: object (小提示：数组是对象类型)
N: null number
B: boolean