ES6 1

资源 es6.ruanyifeng.com/

变量声明

let

let和var的区别

• let关键字声明的变量不可以重复声明，会报错

let a = 10;
let a = 20;
console.log(a);//报错

• let关键字声明的变量不存在变量提升的问题，会报错。

console.log(a);//报错
let a = 10;

• 在块级作用域内通过let关键字声明的变量，在定义的作用域外部获取不到对应的变量

if(true){
    let a = 50;
} 
console.log(a);//报错 a is not defined

• 暂时性死区（当前作用域内不允许同名的变量进来）

  在块级作用域和函数作用域内let声明的变量会形成一个封闭性的死区，只能在声明之后调用，否则会报错

let y = 9;
function fun1() {
  // console.log(y); // 报错
  let y = 888;
  console.log(y) //888
}
fun1();

const

const定义的是常量 ，并且只可以读

1. const关键字声明的变量不可以重复声明，会报错
2. const关键字声明的变量不存在变量提升的问题，会报错
3. 在块级作用域内通过const关键字声明的变量，在定义的作用域外部获取不到对应的变量
4. 暂时性死区（当前作用域内不允许同名的变量进来） 在块级作用域内const声明的变量会形成一个封闭性的死区，只能在声明之后调用，否则会报错

特殊点

• const定义的变量在声明的时候就必须赋值
• 赋值之后不允许修改

const a = 10;
a = 20;
console.log(a); //报错

 const b ;
 console.log(b); //报错

//注意
const arr = [1,2,2,3];
const arr1 = arr;
arr1[0] = 555;
console.log(arr); //不会报错 输出 555 2 2 3
console.log(arr1);//不会报错 输出 555 2 2 3
//因为arr arr1的值为地址 而地址一直没有改变过  只是堆里的地址改变的

const obj1 = {
  name: 'zs',
  age: 18
}
 const obj2 = obj1; //赋值的是地址
console.log(obj2.age) // 18
 // 冻结 冻结了之后 内容修改就不生效了，修改不会报错
Object.freeze(obj1)
obj2.age = 28; // 因为obj2被冻结了 把obj2地址对应的内容空间冻结了？，所以修改不生效，但不会报错
console.log(obj1.age, obj2.age)//18 18

解构赋值

对数组解构

从左至右依次赋值

let [x,y,z,l] = [1,2,3];
console.log(x,y,z,l);//1 2 3 undefined

对对象解构

按照属性名解构

let obj1 = {
  // key: value
  name: 'zs',
  age: 18,
}
let {age,name} = obj1
console.log(age, name) //18 zs

可以取别名 key:别名

let obj1 = {
  // key: value
  name: 'zs',
  age: 18,
}
let {age:aaa,name:nnn} = obj1
console.log(age, name,aaa,nnn) //null null 18 zs

字符串的解构

从左至右依次赋值

 let str = 'hello';
let [e,f,g,h,i,j,k] = str;
console.log(e,f,g,h,i,j,k) // h e l l o undefined

function函数中解构的使用

function fn1([x,y,z]){
    console.log(x,y,z) //1 2 3
}
let a = [1,2,3]
//也可以设置默认值
function fn2([a,b,c=500,d=100]){
    console.log(a,b,c,d) //1 2 3 100 解构出的变量为undefined才会使用默认值
}
let b = [1,2,3]
//有实参无形参可以使用arguments获得实参
 function fn3() {
  // arguments 可以获取调用方法时传递进来的实参
  console.log(arguments) //得到的是arguments对象
}
fn13([3,4,5])
fn3(2,3,4)

扩展运算符 ...

作用

1. 数组复制 并且为深克隆

let arr1 = [1,2,3];
let arr2 = [...arr1];
console.log(arr1); //[1,2,3]
console.log(arr2); //[1,2,3]
arr2[1] = 4;
console.log(arr1); //[1,2,3]
console.log(arr2); //[1,4,3]

2. 合并数组/对象 合并对象若有相同属性 则后面的属性会覆盖前面的属性

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = [...arr1,...arr2];
console.log(arr); //[1,2,3,4,5,6];
let obj1 = {
    name: 'zs';
    age: 18;
}
let obj2 = {
    height: '164cm';
    weight: '52kg';
    age: 20;
}
let obj = {...obj1,...obj2}; //

3. 作为数组/对象的一部分

let arr1 = [1,2,3];
let arr2 = [4,5,...arr1];
console.log(arr2);//[4,5,1,2,3];
let obj1 = {
    name: 'hhh';
    age: 25;
}
let obj2 = {
    height: '165cm';
    weight: '100kg';
    ...obj1;
}

4. 类数组转化为数组

rest

代表剩余的参数

 function fun(x,y,...rest) {
  // ...rest 表示剩余的参数
  console.log(x,y) // 1 2
  console.log(...rest) // 3 4 5
} 

fun(1,2,3,4,5)

函数扩展

1. 参数默认值 默认值与解构同时使用

function fun(x,y=100){
    console.log(x,y) //1 100
}
fun(1)

注意只有实参未给形参传值才会启用默认值

2. 方法名.length:返回没有指定默认值的参数个数 。 方法名.name：返回方法名

function fun(x,y=100){
    console.log(x,y) //1 100
}
fun(1)
fun.length(); //1
fun.name(); //fun

3. rest参数
4. 箭头函数

let afun = function(){
    
}
 let afun = ()=>{
    
 }

箭头：

.函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。 （箭头函数内部的this指向的是父作用域中的this）

不可以当作构造函数（类），也就是说，不可以使用new命令，否则会抛出一个错误。

不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替

字符串扩展

1. 模板字符串

let s = '我的名字是：' + name + '我的年龄是：' + age
 let s1 = `我的名字是：${name}我的年龄是：${age}`

2. includes() includes 查找字符串 如果存在 返回true 否则返回false

let str = 'hello';
console.log(str.includes('a'))//false

3. startsWith() endsWith()判断查询的字符串是否是原字符串的开始/末尾 => boolean

let str2 = 'hello';
console.log(str2.startsWith('hello'))

4. padStart(howmany,letter) padEnd(howmany,letter) 在字符串前面/后面添加howmany个字符

console.log(str2.padStart(5,'abc') )
console.log(str2.padEnd(8,'xy') )

5. repeat(howmany) 字符串重复howmany次

数值扩展

ES6在Number对象上，新提供以下两种方法

1. Number.isFinite() 用来检查是否为数值 返回布尔类型数据

Number.isFinite(15) //true 是数值返回true
Number.isFinite('15') //false 不是数值返回false

2. Number.isNaN() 用来检查一个值是否为NaN

Number.isNaN(NaN) //true
Number.isNaN(15) //false
Number.isNaN('15') //false 参数类型不是NaN 一律返回false

1. Number.isInteger() 用来判断一个数值是否为整数

Number.isInteger(25) //true
Number.isInteger(25.0) // true  注意：JavaScript 内部，整数和浮点数采用的是同样的储存方法，所以 25 和 25.0 被视为同一个值。
Number.isInteger(25.1) //false
Number.isInteger('25') //false 不是数值全部返回false
Number.isInteger() //false

ES6 将全局变量parseInt()和parseFloat(),移植到number对象上面，行为完全保持不变

1. Number.parseInt() 解析一个字符串并返回一个整数

console.log(Number.parseInt(5.5)) // 5
console.log(Number.parseInt('a5')) // NAN

2. Number.parseFloat() 解析一个字符串并返回一个浮点数

console.log(Number.parseFloat('6.6ab')) // 6.6
console.log(Number.parseFloat('6.6ab999')) // 6.6
console.log(Number.parseFloat('a6')) // NAN
console.log(Number.parseFloat('6.a')) // 6
console.log(Number.parseFloat('6.0a')) // 6
console.log(Number.parseFloat('6.01a')) // 6.01
console.log(Number.parseFloat('6.6.6')) // 6.6

1. Math.trunc() 去除一个数的小数部分

Math.trunc(3.14159265) //3

2. Math.sign() 判断一个数是正数 负数 或者 零

console.log(Math.sign(789)) // 正数返回1
console.log(Math.sign(-999)) // 负数 返回-1
console.log(Math.sign(0)) // 零 返回 0
console.log(Math.sign(-0)) // -0

数组扩展

1. Array.from() 可将类数组和类似数组的对象转换成数组

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

2. Array.of()

用于将一组值，转化为数组

Array.of(3,10,8) //[3,10,8]
Array.of(3) //[3]

3. 数组实例的copyWithin(target,start,end) 会改变原来的数组

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。 start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。 end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

4. 数组实例的 find(function(value,index,arr){}) 用于找出第一个符合条件的数组成员 ，如果没有符合条件的成员，则返回undefined。

value: 代表数值

index： 代表索引

arr： 代表数组

[1,5,10,1,5,15].find(function(valude,index,arr){
    return value>=10
}) //10

6. 数组实例的 findIndex(function(value,index,arr){}) 用于找出第一个符合条件的数组成员索引 ，如果没有符合条件的成员，则返回-1.
7. 数组实例的fill(count,start,end)

使用给定值，填充一个数组

count(必选)：填充数组 的数值

start(选填)：填充的起始位置

end(选填)：填充数组结束位置

['a','b','c'].fill(7) //[7,7,7]
['a','b','c'].fill(7,1,2) //['a',7,'c']

8. 数组实例的includes()

用来表示某个数组是否含有给定的值 返回一个boolean类型数值

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

9. 数组遍历 forEach() 数组遍历没有返回值

arr.forEach(()=>{
    
})

10. 数组遍历 map()
11. 数组遍历 filter()

对象扩展

1. 简写

//ES5写法
let name = 'yjq';
let age = 20;
let ojb = {
    name: name,
    age: age,
    eat: function(){
        console.log(`${this.age} is eating`);
    }
}
//ES6写法
let ojb = {
    name,
    age,
    eat(){
        console.log(`${this.age} is eating`);
    }
}

在ES6中对象中的属性名可以是变量,表达式 用[]括起来

let xxx = 'Ename';
let obj = {
    [xxx]: 'BBB',
    age: 25,
    [xxx+'other']: 'MN',
}

2. Object.is(x,y) 判断x,y是否严格相等

console.log(Object.is(10,'10')) //false
//与===不同的两种特殊情况
console.log(Object.is(-0,+0)) //false
console.log(+0===-0) //true
console.log(Object.is(NaN,NaN)) //true
console.log(NaN===NaN) //false

2. 对象中keys，values，entries方法的使用

    console.log(Object.keys(obj3)) // => [key, key]
    console.log(Object.values(obj3)) // => [value, value]
    console.log(Object.entries(obj3)) // => [[key,value],[key,value]]

3. Object.assign() 见浅克隆=》深克隆