欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入理解es6(上)

程序员文章站 2023-11-08 11:53:52
一、let和const 1、let与var的区别 不存在变量提升 块级作用域 不允许重复声明 2、const常量 const与let一样,唯一区别在于声明的常量不能被修改 二、解构赋值 es6按照一定模式,从数组和对象中提取值,对变量进行赋值,被称为解构 1、数组的解构 + "模式匹配",只要等号两 ......

一、let和const

1、let与var的区别

不存在变量提升
块级作用域
不允许重复声明

2、const常量

const与let一样,唯一区别在于声明的常量不能被修改

二、解构赋值

es6按照一定模式,从数组和对象中提取值,对变量进行赋值,被称为解构

1、数组的解构

  • "模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值,如果右边不是数组就会报错
  • 基本用法:
let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3

let [a1, b1=2] = [1] // a1=1, b1=2 //指定默认值

let [d, [e], f] = [1, [2], 3] // 嵌套数组解构 d=1, e=2, f=3

let [g, ...h] = [1, 2, 3] // 数组拆分 g=1, h=[2, 3]

let [i,,j] = [1, 2, 3] // 不连续解构 i=1, j=3

let [k,l] = [1, 2, 3] // 不完全解构 k=1, l=2

2、对象的解构

与数组不同的是,变量的解构没有顺序问题,变量必须与属性同名才能解构
基本用法:

let {a, b} = {a:'aa', b:'bb'} //a='aa' b='bb'

//设置默认值
let {x, y = 5} = {x: 1}; //x= 1 y=5

//允许别名,a的值将失效
let {a:a1,b} = {a:'aa', b:'bb'} //a1='aa' b='bb' 

let obj = {a:'aa', b: {c:'c'}}
let {a, b:{c}} = obj // 嵌套解构 a='aa' c='bb'

3、字符串的解构

let [a, b, c] = 'hello' // a='h' b='e' c='l'

4、函数的解构

function say({name,age}){
    console.log(name + '今年' + age)
} 
say({name:'小明',age:18})

三、字符串的扩展

1、模板字符串

用反引号(`)标识,字符串中嵌入变量用${}

2、新增方法

查找字符串,返回布尔值

let str = 'hello world'
//返回布尔值,表示是否找到了参数字符串
str.includes('r')  //true 

//返回布尔值,表示参数字符串是否在原字符串的头部
str.startswith('hello')  //true

//返回布尔值,表示参数字符串是否在原字符串的尾部
str.endswith('d')  //true

去空格

let str = '   hello world      '
//消除首尾的空格
str.trim()  //'hello world'

//消除字符串头部的空格
str.trimstart()  //'hello world   '

//消除尾部的空格
str.trimend()  //'   hello world'

四、数组的扩展

es5新增的方法:
foreach、map、filter、some、every、reduce

1、array.from将类似数组的对象转为数组

//类似数组的对象
let obj = {
    0:'a',
    1:'b',
    2:'c',
    length:3
}
//es5写法
var arr = [].slice.call(obj);
//es6写法
var arr1 = array.from(obj);

// arguments对象
function foo() {
  var args = array.from(arguments);
  // ...
}

2、array.of方法用于将一组值,转换为数组

    array.of(3, 11, 8) // [3,11,8]
    array.of(3) // [3]

3、find/findindex查找符合条件的元素

//find方法找出第一个符合条件的数组成员
let arr = [1, 4, -5, 10];
let val = arr.find((item,index,arr)=>{
    return item > 1;
})
//val 4

//findindex返回第一个符合条件的数组成员的位置
let index = arr.find((item,index,arr)=>{
    return item > 1;
})
//index 1

4、entries(),keys(),values()用于遍历数组

可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

let arr = ['a','b','c']

//遍历数组的键名
for(let index of arr.keys()){
    console.log(index)
}
//0 1 2 

//遍历数组的键值
for(let value of arr.values()){
    console.log(value)
}
//'a' 'b' 'c'

//遍历数组的键值对
for(let [index,value] of arr.entries()){
    console.log(index,value)
}
//0 'a' 
//1 'b'
//2 'c'

5、includes()表示是否包含某个值

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

//第二个参数表示搜索的开始位置,负数表示倒数位置
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

6、数组的扩展运算符 ...

可以把数组展开成用逗号隔开的一组值

let arr = [1,2,3,4,5,6,7]
//复制数组
let arr1 = [...arr]

//合并数组
let arr2 = [...arr,8] // [1,2,3,4,5,6,7,8]

//展开参数
math.max(...arr) //7

//剩余参数(解构赋值)
let [a,...b] = arr
//a 1
//b [2,3,4,5,6,7]

//转set (同时去重)
let arr3 = [...new set(arr)]

五、对象的扩展

1、对象的简写

  • 当属性名和属性值相同时,可以省略属性值
  • 方法可以省略function
  • 对象的属性名和方法名允许为变量或者表达式
  • 例如:
let name = '小明'
let age ="age1"
let person = {
    name,
    [age]:18,
    ['hei'+'ght']:180,
    sayname(){
        console.log(this.name)
    }
}
person.sayname();
console.log(person)

2、对象的扩展运算符 ...

同数组扩展运算符,支持对象解构剩余参数,对象合并,复制对象

3、object.is()

用来比较两个值是否严格相等,等同于 "==="

//唯一不同之处
+0 === -0 //true
nan === nan //false
object.is(+0, -0) // false
object.is(nan,nan) //true

4、object.assign()

  • 用于对象的合并,第一个参数是目标对象,后面的参数都是源对象
  • 如果目标对象与源对象有同名属性,则后面会覆盖前面的属性
var obj1 = {a:1,b:2}
var obj2 = {b:3,c:4}
console.log(object.assign(obj1,obj2))
//{a:1, b:3, c:4}

let obj = {a:1, b:2}
object.assign(obj) === obj // true

//参数不是对象会转成对象再返回
typeof object.assign(2) // "object"

//undefined和null无法转成对象,作为第一个参数会报错
object.assign(undefined) // 报错
object.assign(null) // 报错

object.assign(obj, undefined) === obj // true
object.assign(obj, null) === obj // true

5、object.setprototypeof(),object.getprototypeof()

  • object.setprototypeof()用来设置一个对象的prototype对象
  • object.getprototypeof()用于读取一个对象的原型对象
//设置obj对象上的__proto__原型对象为proto对象
let proto = {};
let obj = { x: 10 };
object.setprototypeof(obj, proto);

6、object.keys(),object.values(),object.entries()

使用for...of可以遍历对象的键名,键值,键值对

var obj = {
    a:1,
    b:2,
    c:3
}
//传统遍历对象
for(key in obj){
    console.log(key) //所有键值
    console.log(obj[key]) //所有键值
}

//es6遍历
//所有键名
for( let index of object.keys(obj) ){
    console.log(index)
}
//所有键值
for( let value of object.values(obj) ){
    console.log(value)
}
//所有键值对
for( let [index,value] of object.entries(obj) ){
    console.log(index,value)
}

7、object.fromentries()

方法是object.entries()的逆操作,用于将一个键值对数组转为对象

object.fromentries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }

// 特别适合map结构
const map = new map().set('foo', true).set('bar', false);
object.fromentries(map)
// { foo: true, bar: false }

六、函数的扩展

1、函数参数的默认值

如果传入了参数就使用传入的值,如果没有就使用默认值

function sum(a=0, b=0){
    return a + b;
}
sum(); //0
sum(1); //1
sum(1,1) //2

2、rest参数

用于获取函数的多余参数,这样就不需要使用arguments对象

function add(...value){
    console.log(value)
    //[1,2,3,4]
}
add(1,2,3,4)

3、箭头函数 =>

使用“箭头”(=>)定义函数

  • 箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分
  • 箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回
  • 如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错
var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

注意:

this指向外部作用域
不可以new,也就是不能用作构造函数
不可以使用argument对象,可以使用rest参数代替

参考至