web之ES6，ES6浅层次（上）

ES6

1,什么是ES6?

简单来说 ,ES6就是JavaScript的新版本,ES6就是ECMAScript6(6是版本号),又称ES2015(不是2016).
☺ECMAScript是什么??? 一种语言标准,
!JS已经是一个成熟的编程语言了!

2,let和const

let 和var 一样 用来 定义新变量;

<script>    

console.log(a);//结果为undefine  输出a 但没有自己定义的变量a js会预先定义个  var a;
var a=1;              //赋值,刚才预定义了一个a  但没有赋值
console.log(a);       //1  这时候的a已经为1

</script>

学过JS的已经能理解预定义的问题,但一个 从c过来的程序员可能就会混淆,第一个a为什么能输出???

for(var i=1; i<10;i++){}
// i在循环体之外也能使用。
console.log(i);      //输出10

为什么会输出呢? i不是在for循环里面定义的吗,ES6的出现就是为了更改这些问题,让js变得更严谨.
把上面的var都换成let会怎样?

// console.log(a);    报错
let a = 1;
console.log(a)   //1
for(var i=1; i<10;i++){// i在循环体之外也能使用。
}
console.log(i); //10

果然,let定义的变量都有了自己的块级作用域.

let与var的区别(官宣)

1,不能重复定义
2,没有变量提升（var定义的变量是有变量提升的），必须先定义再使用
3,全局变量不会附加到window对象的属性中
4,具有块级作用域
eg:

// 1. let 定义变量，变量不可以再次定义
let name = 'zhangsan';
console.log(name);//zhangsan
name = 'lisi';
console.log(name); // lisi
let name ='aoligei'
console.log(name);//报错

?? 当时我的疑问是,lisi什么鬼,为啥不报错,不是不能重复整吗?
重复定义,与赋值不是一个东西…
看来是个憨憨本憨了

作用域

1,全局作用域
2,局部作用域
3,块级作用域（ES6中提出的）
如果是通过let关键字来定义变量的，则js代码中就可以通过{}来切分作用域了。用大括号切分

// 具有块级作用域，块就是大括号
{
    let age = 18;
    console.log(age); // 18
}
console.log(age); // 报错，此作用域中没有age的定义

// 块级作用域的嵌套
{    let a = 1;    {        
let a = 2;        
console.log(a);        
a = 3;        
console.log(a);  
  }    
console.log(a)}
// 隐藏的块级作用域
for (let i = 0; i < 10; i++) {    
// i 只能在此范围内使用，因为有块级作用域
}
console.log(i);  
// 报错，此作用域中没有age的定义

我淦,这别人写的东西↑是专业…

变量提升?
先定义再使用,没有预定义了.

全局变量不会赋值加在window对象中
let声明的全局变量不会以属性的形式附加在window对象中，全局变量与window对象再无关系。

let hobby = '吃饭';
var a = 1;
console.log(window.hobby); //undefined 与windows无关咯
 console.log(window.a); //1

const(音标['kɒnst],读成看思特)

作用：定义一个只读的常量。
格式： const 常量名 = 常量值;
示例：const COMPANY_NAME = “XXX公司”
const特点
所谓常量，就是不能修改，即：
一旦定义就不能修改；
一旦声明，就必须立即初始化；

const a = 1;
a = 2; // 报错

其它与let相似的特点
1,具有块级作用域
2,没有变量提升，必须先定义再使用
3,常量也是独立的，定义后不会压入到window对象中，不是window对象的属性本质.

const定义对象和数组

const obj = {a:1};
obj.a = 2;
console.log(obj.2); // 问题：obj对象的属性值a是否修改了。

结果真的是2.接下来有请官方讲解…
对于复合类型的数据（如对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就不能控制了。因此，将一个对象声明为常量必须非常小心,它的属性是可以修改的

也就是说,const保存的没变,但对象和数组保存的是一个位置信息,而不是直接的数据,对象的真实数据还是可以修改的…

烦,但说的有道理,我不能反驳

3,解构赋值(不是结构)

定义:ES 6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
,就是ES6有一个快速赋值的方式,可以给数组和对象快速赋值,eg↓

let arr=[1,2,3,4,5];   //建立数组let 
[a,b,c,d,e]=arr;//赋值
console.log(a,b,c,d,e);//输出  结果赋值成功12345

空跳[,]

let arr=[1,2,3,4,5];   //建立数组
[,,,e]=arr;//空跳,在不需要复制的地方不写.
console.log(e);//输出  结果赋值4

注
等号两边要统一格式
练习案例

// 变量多，值少
let arr = [5, 9, 10];
let [a, b, c, d] = arr;
console.log(a, b, c, d); 
// 结论：没有匹配上的值是undefined
//5,9,10,undefine

// 默认值
let arr = [5, 9];
let [a, b, c, d=4] = arr;
console.log(a, b, c, d); 
// 结论：对于没有匹配上的变量，有默认值就使用默认值，否则就是 undefined，
//5,9,undefine,4

// 变量少，值多
let arr = [5, 9, 10, 8, 3, 2];
let [a, b] = arr;
console.log(a, b); 
// 结论：多余的忽略
//5,9

// 用空跳过不需要的值
let arr = [5, 9, 10, 8, 3, 2];
let [, , a, , b] = arr; 
console.log(a, b); 
// 结论：不需要用变量接收的值，用空位占位
//10,3

// 复杂的场景，只要符合模式，即可解构
let arr = ['zhangsan', 18, ['175cm', '65kg']];
// 如何让a的值是175cm,b的值是65kg
console.log(a, b); // 175cm 65kg
//let [,,[a,b]]=arr;

学到这,感觉还挺简单的,哈哈哈哈哈

剩余值(…三个点接受剩余值)

let arr = [5, 9, 10, 8, 3, 2];
let [a, b, ...c] = arr; // ...c 接收剩余的其他值，得到的c是一个数组
console.log(a, b, c); 
// 结果：
// a = 5, 
// b = 9, 
// c = [10, 8, 3, 2]

对象的解构赋值

完整格式
let {“属性名1”：变量名1=默认值1, “属性名2”：变量名2=默认值2,… } = {“属性名1”：属性值1,“属性名2”：属性值2,…}
怎么用了大括号?
因为要求格式一致

基本使用

// 场景1，默认要求变量名和属性名一样
let { name, age } = {age: 27, name: 'zs'};
console.log(name, age); 

let {a, c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, undefined

变量改名

// 场景2，可以通过:为变量改名
let {b, name:a} = {name: 'zs'};//name:a 在这里name 被改成了a

console.log(b, a,name); //undefine  "zs" ""

练习案例

var {b=1, name:a,age:b=1 } = {name: '王明明'};
console.log(b, a,name); //1,"王明明",""

// 复杂的嵌套，只要符合模式，即可解构
let obj = {
    name: 'zhangsan',
    age: 22,
    dog: {
        name: '毛毛',
        age: 3
    }
};
// 如何才能把age和name解析出来
let {dog: {name, age}} = obj;
console.log(name, age); // 毛毛 3

个人总结,数组容易理解,对象这个赋值时直接找对应格式相同的的,直接赋值.

剩余值

// 把其它的属性全收集起来
let obj = {name:'zs', age:20, gender:'男'};
let {name, ...a} = obj;
console.log(name, a);
// 结果：
// name = zs
// a = {age: 20, gender: "男"};

4,函数拓展

默认值

function 函数名(参数名1=‘默认值1’，参数名2=‘默认值2’，参数名3=‘默认值3’){

}

就是参数自己有一个默认值,传参就会覆盖,不传他自己也有一个值

function f(a=1,b=2){
 console.log(a,b,a+b);
}
f(10) //10  2  12
f(10,20) //10  20  30 
f()//   1  2  3

rest参数(取剩余的替换ES5中的arguments)
在定义函数时，在最后一个参数前面加上…， 则这个参数就是剩余参数；
let fn = function(参数1，参数2，…rest参数){}

function f2 (x,...y){
    console.log(x,y)
}
f2(1,2);//1  [2]
f2(2,3,4); //2  [3,4]

ES6箭头函数
let 函数名 = (形参1,…形参n) => {
函数体
}
简洁,高效,牛笔
第一眼看到这个箭头函数时，会觉得很奇怪。如果从函数表达式的格式出发， 经过如下2步演化步骤就可以得到。把function 关键字 后移动到 （）和 {} 中间把function 改写成 =>
注意如果返回值是一个对象，要加()

let f = x => {return {a:1}  }
// 可以简化成：
let f = x => {a:1} // 报错
let f = x =>({a:1})

箭头函数与普通函数的区别

1,内部没有arguments
2,内部没有this↓
3,不能作为构造器(不能new)
内部的this对象，指向定义时所在的对象，而不是使用时所在的对象。

???

var name = 'lisi'; // 测试时，这里必须用var，因为用let声明的变量不能使用window调用
let obj = {
    name: 'zhangsan',
    f1 : () => {
        console.log(this); // obj对象
        console.log(this.name); // zhangsan
    },
    f2 : function(){
        console.log(this); // window对象
        console.log(this.name); // lisi
    }
};
obj.f1();
obj.f2();

箭头函数里面的this 没有指向调用的obj而是从windows出发,普通函数是调用者的.

5,数组扩展

面试题举例++
写出10个你用过的与数组相关的方法。
答案:sort，push，pop，unshift, splice,concat，map,forEach,filter,some,… 。
然而我只认识sort和push…
我淦
一,扩展运算符:它的作用是把数组中的元素一项项地展开：把一个整体的数组拆开成单个的元素。
格式: …数组(在数组前面加…)
eg:

console.info(...[1,2,3]);//1,2,3

应用1,数组合并

var arr0 = ['a','b'];
var arr1 = [1,2,3];
var arr2 = [4, ...arr1];//4,1,2,3
var arr3 = [..arr0 ,...arr1];//a,b,1,2,3

应用2,Math.max()

Math.max(1,3,4,6);
var arr = [1,3,4,6];
Math.max(...arr);//6
// 或者 Math.max.apply(this,[1,2,3,566])

可以
二,Array .from
功能：把其它非数组的对象转成数组。格式： 数组 = Array.from(伪数组/类数组/非数组对象)
eg:

let Arr = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
console.log(Arr.from);//a,b,c

可以
三,find和findindex方法
格式:
[数组].find(function(item,index,self){
//条件
// 如果满足查找的
})
eg:

let arr = [1, 2, 4, 0, -4, 3, -2, 9];
arr.find(function (item, index, self) {
    console.log(item); // 数组中的每个值
    console.log(index); // 数组中的每个索引/下标
    console.log(self); // 当前的数组
});

// 用法：找数组中第一个小于0的数字
let arr = [1, 2, 4, 0, -4, 3, -2, 9];
let result = arr.find(function (item) {
    return item < 0; //遍历过程中，根据这个条件去查找
});
console.log(result); // -4

懂了,但会忘记…
四,includes()
功能：判断数组是否包含某个值，返回 true / false
格式：数组.includes(参数1，参数2)
参数1，必须，表示查找的内容
参数2，可选，表示开始查找的位置，0表示从第一个元素开始找。默认值是0。
eg:

let arr = [1, 4, 3, 9];
console.log(arr.includes(4)); // true
console.log(arr.includes(4, 2)); // false， 从2的位置开始查，所以没有找到4
console.log(arr.includes(5)); // false

我又会了,但可能明天就忘了

6,字符串扩展

一,模板字符串(相对重要)
在做字符串拼接时，使用+来拼接复杂内容是很麻烦的，而模板字符串可以解决这个问题。
格式：${变量} ${表达式} 语法：模板字 符串使用反引号 ` 把内容括起来，类似于普通字符串的""。${}充当界定符的作用，其中可以写变量名，表达式等。
允许字符串内部进行换行，代码更好读更好的体验示例：(允许空格,拼接的更好看)

let name = 'zs';
let age = 18;
// 拼接多个变量，在模板字符串中使用占位的方式，更易懂
let str = `我是${name}，今年${age}`;

二,includes
i格式：str.includes(searchString, [position])
功能：返回布尔值，表示是否找到了参数字符串position:
从当前字符串的哪个索引位置开始搜寻子字符串，默认值为0。

这个和数组用法一样啦

三,startsWith
格式：str.startsWidth(searchString, [position])
功能：返回布尔值，表示参数字符串是否在原字符串的头部或指定位置
position: 在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处。
这个没什么蛋用…
四,endWith
格式：str.endsWith(searchString, [len]) 功能：返回布尔值，表示参数字符串是否在原字符串的尾部或指定位置.
len:可选。作为 str 的长度。默认值为 str.length。
和上面一样,没什么用
五,repeat,重复返回一个字符串
repeat方法返回一个新字符串，表示将原字符串重复n次。
语法:str.repeat(n)

let html = '<li>itheima</li>';
html = html.repeat(10);

7,Set对象和Map

Set是集合的意思。是ES6 中新增的内置对象，它类似于数组，但是成员的值都是唯一的，即没有重复的值。使用它可以方便地实现用它就可以实现数组去重的操作。
创建set对象

let s = new Set([1,2,3]);
console.info(s);1,2,3

set 是一个对象 里面是数组,所以用大括号 套系中括号{[ ]}.
set的api
1,size：属性，获取 set 中成员的个数，相当于数组中的 length
2,add(value)：添加某个值，返回 Set 结构本身。重复无效,
3,delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
4,has(value)：返回一个布尔值，表示该值是否为Set的成员。
5,clear()：清除所有成员，没有返回值。
forEach:遍历(类似数组)
set数组去重

let arr = [1,1,2,3,3];
console.info([...new Set(arr)])

用了new?构造函数??

8,新的对象表现方式

let name = 'zhangsan', age = 20, gender = '女';
let obj = {
    name: name, // 原来的写法
    age, // 对象属性和变量名相同，可以省略后面的 “:age”，下面的gender同理
    gender,
    fn1:function(){  // 常规写法
        console.log(123);
    },
    fn2 () { // 可以省略 
        console.log(456);
    }
};
console.log(obj.age); // 20
obj.fn2(); // 456

对象属性和变量名相同可以省略

9,ES6降级

一,ES6 (2015年10月)虽好，但是有兼容性问题，IE7-IE11 基本不支持 ES6
二,在最新的现代浏览器、移动端、Node.js 中都支持 ES6

因为 ES 6 有浏览器兼容性问题，可以使用一些工具进行降级（把ES6的代码转成ES5的代码），例如：babel
一个网站可以 直接转换代码ES6转成ES5网站

https://www.babeljs.cn/

10,js严格模式

"use strict"
不定义不能用,严格模式的js呗
简单提一嘴

原文链接：https://www.cnblogs.com/szq123/p/11285199.html