Es6基础部分（一）

Es6

简介:ES6（ECMAScript）是javaScript的一种语言标准，JavaScript是ES6的一种实现

​ ES6是泛指5.1版本之后的JAVAScript

​ ES6是从2015年 2016年 2017年等对JS的升级 更加方便程序员们的使用

let

let用于声明变量 （只在代码块中起作用）

{
let a = "hello"
console.log(a)    // 输出 hello
}
console.log(a)    //报错

let比var要适用于循环语句

let

let 作用域只在块级作用域有效

for(let i=0 ; i<5; i++){
	console.log(i)    //0 1 2 3 4 
}
console.log(i) //报错 ReferenceError: i is not defined

let变量不提升

{
console.log(a)
let a=1
}   // 报错

let的暂时性死区

只要块级作用域中存在let ，let声明的变量就会绑定在这个区域，不受影响

var a = 123;
if (true) {
  a = 'abc'; // ReferenceError
  let tmp;
}

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

“ 暂时性死区 ” ： 在代码块内，使用let声明变量之前，该变量都是不可用的

var

var 全局作用域

for(var i = 0 ; i<5 ; i++){
	console.log(i)  // 0 1 2 3 4 
}
console.log(i)  //5

var 变量提升

{
    console.log(a);
    var a=1
}     //undefined

const 命令

const用于定义常量 ，常量一旦声明就不能改变

const pai = 3.1415926
console.log(pai) // 3.1415926


pai = 123;
console/log(pai)  // 报错 
 

const声明的变量也不提升 ，存在暂时性死区 ，只能在声明变量的后面使用

if(true){
console.log(a); //报错 ReferenceError
const a = 3.14;
}                 注：声明的常量 a 之前调用 所以报错

解构赋值

1.数组的解构赋值

解构（Destructuring） 从数组中对象中提取值，对变量进行复制

写法一、

let [a,b,c,] = [1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

写法二、

let arr = [1,2,3]
let [a,b,c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

注意：

不完全结构

let arr = [1,2]
let [a,b,c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

剩余运算符 …rest

let [a,...b] = [1,2,3,4]
console.log(a) // 1
sonsole.log(...b) // 2 3 4

//数组拼接
let a = [1,2,3]   
console.log(...a)  // 1,2,3
let b = [4,5,6]
console.log(...b)  // 4,5,6
let c = [...a,...b]
console.log(c)   //[ 1, 2, 3, 4, 5, 6 ]

箭头函数

箭头函数的初始写法：

const fn = () => a + b ;
console.log(fn(1,3))  // 4

箭头函数中的this

普通函数中的this指向window

function fn(){
console.log(this); // window
}
fn();

对象中的普通函数执行调用者

var obj = {
name:"tom",
say:()=>{
console.log(this); //window 对象
}
};
obj.say();

面试题：

var name ="jim";
var obj = {
name :"tom",
say:()=>{
consolelog(this.name}
}
};
obj.say();

模板字符出串

ES6中的字符串拼接

//原字符串拼接 es5
var a ="张三";
var b ="18"
console.log(a+"今年"+b)  // 张三今年18


//ES6字符串拼接
let a ="李四";
let b = 20;
console.log(`${a}今年${b}岁了`) //李四今年20岁了

模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(   
<ul>
  <li>first</li>
  <li>second</li>
</ul>
   );
  //上面代码中，所有模板字符串的空格和换行，都是被保留的，比如 标签前面会有一个换行。如果你不想要这个换行，可以使用 trim 方法消除它。
  $('#list').html(   
<ul>
  <li>first</li>
  <li>second</li>
</ul>
   .trim);

模版字符串中可以调用函数

function fn() {
  return "Hello World";
}
 console.log(`foo ${fn()} bar`)   
// foo Hello World bar

Array数组扩展

1.find方法

find是查找数组中符合条件的成员，如果没有找到返回undefined

let arr = {
{
id:"1",
name:"tom"
},
{
id:"2",
name:"jim"
}
};
const obj = arr.find(item => item.id == 2)
console.log(obj)
这个案例是查询对象的id是2的，返回结果是满足条件的那个对象

indIndex

findlndex是返回满足条件的索引号，查不到返回-1

let arr = {
{
id:"1",
name:"tom"
},
{
id:"2",
name:"jim"
}
};
const index = arr.findIndex(item =>item.id == 3)
console.log(index)

2.includes

let arr = [10,20,30]
const res = arr.includes(10)
console.log(res)

上面判断的是10是不是在数组中存在

3.set

set类似与数组，但是成员中的值是唯一的，不会出现重复的

const set = new Set([10,20,30,4,2])
set.add(11); //添加数字11
set.delete(11); //删除数组中的11
console.log(...set) // 将数组之中的数全部输出 

from()

Array.from()方法用于将两类对象转换为真正的数组;类似于数组中的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

下面是一个类似于数组的对象，Array。from将他转换为真正的数组

let arr = {
	'0':'a',
    '1': 'b',
    '2': 'c',
    length:3
};

//ES5写法
var arr1 = [].slice.call(arr); // ['a','b','c']


//ES6写法
let arr1 = Array.from(arr); // ['a','b','c']