es6中简单常用的新特性

简介: es6中简单常用的新特性

let、const 和var

// var可以定义变量和常量
// const用来定义常量,let用来定义变量,防止变量穿透
for(let i = 0;i < 5;i++){
  console.log(i);
}
//则会报错,显示i未定义,如果用var则会变量穿透
console.log(i)

新的字符串拼接方式

// 字符串会涉及到动态部分
    var person = {
        name: "Jing",
        address: "河南",
        link: "https://www.jing.com"
    }
    let address = "我是"+person.name+"我在"+person.address+"我正在学习"+person.link;
     console.log(address)
    // es6的模范字符串写法
    let address2 = `我是${person.name}我在${person.address}我正在学习${person.link}`
    console.log(address2)

可以给函数添加默认参数

// 函数默认参数(如果只传输一个,则另一个会使用默认值)
    function add(a=100,b=100){
        return a+b;
    }
    // 如果只传输一个参数的话,另外一个就是默认参数
    console.log(add(1))

箭头函数,就像Java中的lambda

// 定义一个数组将数组中的每一个元素乘以2
var arr = [1,2,3,4,5];
var result = arr.map((a)=>a*2);
console.log(result);

对象的简写方式

// 以前对象的写法  
let info = {
      title: "郑州",
      link: "https://jing.com",
      go: function (){
          console.log("Hello")
      }
  }
  // es6 简写
  // 因为对象是key:value存在
  // 1: 如果key和变量名字一致,可以指定一次即可
  // 2: 如果value是一个函数,可以把`:function`去掉,只剩下()即可
  let title = "郑州";
  let link = "https://jing.com";
  let info2 = {
      title,
      link,
      go(){
          console.log("Hello")
      }
  }
  console.log(info2)
  console.log(info2.title)
  console.log(info2.link)
  info2.go();

获取对象属性的几种新方式

// 编写一个对象
let name = '齐菁菁'
let age = 12;
let address = '郑州'
let person = {
    name,
    age,
    address,
    go(){
        console.log("Hello,NodeJs")
    }
}
// 用.的方式
console.log(person.name,person.age,person.address)
// 用[]的方式
console.log(person['name'],person['age'],person['address'])
person['go']();
// es6 中快速获取属性方法的一种形式
let {name,age,address,go} = person;
console.log(name,age,address);
go();

对象之间的传播解构

let person = {
    name: "qijingjing",
    address: "郑州",
    phone: 1234567,
    go(){
        console.log("开始上学了")
    }
}
// 解构出来(把剩下的取出来给另外一个对象)
let {name,address,...person2} = person;
console.log(name,address,person2,person2)

数组中map与reduce的使用

// 新建一个数组
let number = [1,3,3,4];
// 对所有数组乘以2赋值到新数组
let newarr = [];
// 1.传统的方式
for(let i = 0;i<number.length;i++){
    newarr.push(number[i]*2);
}
console.log(newarr);
// 2.es6的方式
// let newNumber = number.map(function(a){
//    return a*2;
// })
let newNumber = number.map(a=>a*2);
console.log(newNumber)
// map处理对象的数据
let users = [{age:10,name:'小李'},{age:12,name:'小王'},{age:9,name:'小红'}]
let newUsers = users.map(function (a){
    a.age+=1;
    // 可以给对象增加一个属性
    a.flag = true;
    return a;
})
console.log(newUsers)
// ---------reduce的使用
let arr = [1,2,3,4,5,6];
// 计算数组里面所有元素相加
let number = arr.reduce((a, b)=>a+b);
console.log(number)


目录
相关文章
|
3月前
|
JavaScript 前端开发 开发者
ES6的常用新特性17条
ES6,也称为ECMAScript 2015,是JavaScript语言的一个重大更新,它引入了许多新的语法特性。以下是ES6的一些主要语法
|
16天前
|
JavaScript 前端开发
ES6新特性(一)
ES6新特性(一)
|
16天前
|
JavaScript 前端开发
ES6新特性(二)
ES6新特性(二)
|
3月前
|
JavaScript 前端开发 开发者
es6的新特性
es6的新特性
29 7
|
12月前
|
存储 JavaScript 前端开发
ES6新特性
ES6新增特性详细内容
|
JavaScript 前端开发 网络架构
关于ES6新特性的总结 1
关于ES6新特性的总结
42 0
|
3月前
|
前端开发
ES6 部分新特性使用
ES6 部分新特性使用
24 0
|
11月前
|
JavaScript 前端开发 开发者
ES6 新特性
这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级,它带来了许多新特性和语法糖,让我们的代码更加简洁高效。无论你是新手还是有经验的开发者,掌握ES6都会让你的编码变得更加愉快和高效。那么,让我们开始吧!
|
前端开发
关于ES6新特性的总结 2
关于ES6新特性的总结
30 0
|
前端开发 JavaScript
es6的8条新特性总结
es6的8条新特性总结
121 0