15es6.md

es6

[toc]

es6新语法

先前我们学的都是es5js的基础语法

1.变量

var : 分为局部变量和全局变量（函数里）

const : 常量， 一旦声明或赋值就不能在变（一般大写）

let : 定义变量，只能在当前的块级（大括号)里使用

var i = 10;
for(var i=0; i<5; i++){
    
}
console.log(i) //这样打印出的i是多少   5
// 5 

// 如果var在函数内，局部变量，函数执行完就销毁的

// 常量一般大写
const PI = 3.1415926;

// 声明之后不会再改变

let a = 10;
for(let b=0; b<3; b++){
    console.log(a)  // 10  10  10
}
console.log(a)   //  10
console.log(b)   // 报错 找不到b 


let c= 10;
let c = 20;
//报错 ，不能声明两次

2.解构赋值

• 变量

// 赋值变量
var [a,b,c] = [1,2,3]  //依次对应
var [,,c]   = [a,b,c]  //没有变量名也可以，还没想好 c='c'
var [a] = [1,2,3]   // 只有a = 1 其余值是多余

• 数组

// 数组  ... 再前加三个点，数组只能再最后
var [a,b,c,...d] = [1,2,3,4,5,6,7] // d=[4,5,6,7]

//数组只能在最后，不然报错

• 字符串

// 字符串  按照顺序将字符串拆开赋值
var str1 = 'hello world';
var [a,b,c,e,f] = str1;  // a=h b=e c=l e=l f=o 

• 对象

// 对象用括号
var {a,b,c} = {a:'11',b:'22',c:'33'};

• 数值

// 数组不能解构赋值 报错
var i = 100;
var [a,b,c] = i  //不行

length属性赋值给其他变量

var str1 = 'hello world';
var (length:str2) = str1;  //str2 = str1.length; 11

3.字符串方法

字符串方法拓展

• indexOf()字符串中找字符，返回字符首次出现的索引位置，没有就返回-1.

var str1 = 'hello world';
console.log(str1.indexOf('d')); // 10
str1.indexOf('x') //-1

• includes()查找字符，存在true 否则false

str1.includes('x') //false
str1.includes('o')  //true

• startsWith()判断首字符，返回布尔值
• endsWith()判断尾字符，返回布尔值

str1.startsWith('d')  //false
str1.endsWith('d')    //true

• repeat()字符串重复输出

consloe.log('a'.repeat(5)) //输出5次a
('c'.repeat(3.6))  //向下取整  ccc
('c'.repeat(0))  //false 空字符串
(5,repeat(5)) //报错
//只能使用字符串，  参数是正数，不能是负数

• padStart在字符串的前面添加字符
• padEnd在字符串的后面添加字符

var st = 'aaa';
consloe.log(st.padStart(10,'x')) // 第一个参数是字符串的最终长度  // xxxxxxxaaa 
(st.padEnd(6,'xyz'))  //aaaxyzx
(st.padStart(7,' ')) //空格  4个空格aaa
(st.padEnd(3,'')) //没有变化
(st.padEnd(5,111))  //数字也可以 aaa11
 consloe.log(st) // aaa

4. 引号

" ", '' :只能写单行数据，不能换行

`` :反引号，可以换行

var a = `a
        <br/>
        c`;

5. 数组方法

数组方法拓展

• Array.from将对象转换为数组格式，必须写length

var Ob1={
  	0:'aa',
    1:'bb',
    2:'cc',
    'length':3,  //必须写length:  写多长，它截取多长
    			 // 2  截取到 0 1 
}
var arr1 = Array.from(Ob1);  

• coprWidthin()截取和替换

var arr2 = ['aa','bb','cc','dd','ee','ff'];
arr1.copyWithin(0,2,4)  // 三个参数
// 首先看后面两个参数，
// 从2开始截取，截取到4，不包含4， 截取多少个就替换多少个 //c d 
//第一个参数替换 
// c d c d e f
arr1.copyWithin(4,0,1) // a b c d a f

• find()找出第一个符号条件的元素
• findIndex()找出第一个符号条件的元素索引

// find()的参数好像只能是函数
var arr = [ 1, 2, 3, 4];
conslog.log(arr.find(function(){
    return n>3;   //4 满足大于3的条件
}));

conslog.log(arr.findIndex(function(){
    return n>3;   //3  满足大于3的条件的索引
}));

• fill()填充数据

// 将新数据填充，不保留老数据
var arr = ['a','b','c'];
arr.fill(123) // [123,123,123] 

// 20个a
var arr1 = new Array(20).fill('a');  //填充20个a

• [...arr1,...arr2]合并数组

// es5 
// concat() //数组
console.log(arr1.concat(arr2).concat(arr3))

// es6 
console.log([...arr1,arr2])

6.箭头函数

与es5区别较大

// 1. 减少代码量 不用写return
conslog.log(arr.findIndex(function(){
    return n>3;     //3  满足大于3的条件的索引
}));

arr.findIndex(() => n>3);  //3  满足大于3的条件的索引

// 2. this的指向  当前对向
//普通函数this只能指向当前对象

var conarr = setInterval(() => { console.log(aa)},3000) // 3秒打印