ES6

用户7428254102502
87 阅读4分钟

ES6定义变量

总结：

let和const是es6新增的定义变量的两个关键字，使用语法跟var是一样的，跟var的区别：
const的值不能改变 - 常量
const定义的变量，值是不能修改的，一旦定义了就是永恒的。
1.没有预解析
2.全局变量不在window中
3.不能重复定义
4.会创建一个块级作用域，碰到大括号会重合作用域

箭头函数

es6中提供了一种新的函数定义语法 - 只能等同于赋值式的函数

这种语法是对于匿名函数的一种简写 - 箭头函数

var fn = function() {
   console.log(11);
 }
 let fn= ()=>{
     console.log(11);
 }
fn()

当只有一个形参的时候，小括号可以省略

var fn = function(a) {
     console.log( parseInt(a) );
 }
 let fn = a => {
     console.log(parseInt(a));
}
fn('5')

当大括号中只有一行代码的时候，大括号是可以省略的，如果大括号中这一行代码中有return，连return关键字一起省略

let fn = a => console.log(parseInt(a));
fn('6')
 var fn = function(a) {
     return parseInt(a) 
 }
 let fn = a => parseInt(a)
 var res = fn('7')
 console.log(res);

注意：只能简化简单的匿名函数

var arr = [10, 20, 30]
var brr = arr.map(function(v) {
    return v + v * 0.3
 })
 var brr = arr.map(v => v + v * 0.3)
 console.log(brr);

给函数的形参赋值，形参就变成了可选项了

function fn(a, b) {
     if(b === undefined) {
        b = 0
    }
    return Math.floor(Math.random() * Math.abs(a - b)) + Math.min(a, b)
 }

fn(0, 256)
fn(0, 1500)

fn(256)
fn(1500)

注意：带有默认值的参数，必须在所有形参的末尾


function fn(a, b) {
    return Math.floor(Math.random() * Math.abs(a - b)) + Math.min(a, b)
 }
 var color = fn(256)
 console.log(color);

 var color1 = fn(30, 50)
 console.log(color1);

ES6字符串

es6中提供了一种新的语法用来定义字符串 - 反引号

var str = `abc`

单引号和双引号定义的字符串，不能分多行定义一个字符串，反引号可以多行定义一个字符串，且在控制台中，怎么定义的就怎么输出

var str = '
 a
 b
 '
 var str = `
 a
 b
 `
console.log(str);
var str = '<tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>'
console.log(str);

可以在反引号定义的字符串直接识别变量，不用拼接了 - 在反引号中使用${变量}

var imgPath = 'https://img1.baidu.com/it/u=3316754777,2519856621&fm=253&fmt=auto&app=138&f=JPEG?w=653&h=500'

document.write('<img src="'+imgPath+'" />');
document.write(`<img src="${imgPath}" />`);

总结：

模板字符串：是es6新增的定义字符串的语法，使用反引号 可以直接在字符串中通过${变量}识别，不用拼接 可以分多行来定义一个字符串，且在控制台中多行输出

字符串方法：

1.判断字符串是否以某个字符或某个小字符串开头的 - 字符串.startsWith(字符/小字符串)

var str = 'asdkfjhaskjdhf'
var bool = str.startsWith('a')
console.log(bool);
var bool = str.startsWith('asdlk')
console.log(bool);

2.判断字符串是否以某个字符或个小字符串结尾的 - 字符串.endsWith(字符/小字符串)

var bool = str.endsWith('f')
var bool = str.endsWith('asdk')
console.log(bool);

3.判断字符串中是否包含某个字符串或小字符串 - 字符串.includes(字符/小字符串)

var bool = str.includes('a')
console.log(bool);

ES6新增数组方法

some - 判断数组中是否至少有一个元素是满足指定条件的，返回布尔值

语法：
数组.some(function(v, i, a) {
    return 条件
})

every - 判断数组中是否所有元素都满足指定条件，返回布尔值

语法
数组.every(function(v, i, a) {
    return 条件
})

find - 在数组中找满足条件的第一个元素 - 返回找到的元素，找不到就返回undefined


语法：
数组.find(function(v, i, a) {
    return 条件
})

findIndex - 在数组中找满足条件的第一个元素的下标 - 返回下标，找不到返回-1


语法：
数组.findIndex(function(v, i, a) {
    return 条件

解构赋值

解构赋值：快速的将对象或数组中的值批量赋值给变量

数组解构 -

快速的将数组中的批量赋值给变量

var arr = [1,2,3,4,5]
var a = arr[0]
var b = arr[1]

var [a, b, c, d, f] = arr
console.log(a, b, c, d, f);

var [_, _, c] = arr
console.log(c);

多重解构

 var arr = [
     1,
     [
       4,
       5
     ],
     2,
     3,
  ]
 var [_, brr] = arr
 console.log(brr);
 var [_, a] = brr
 console.log(a);
 var [_, [_, a]] = arr
 console.log(a);

最快的交换两个变量的值


var a = 1
var b = 2
var [b, a] = [a, b]
console.log(a, b );

对象的解构

var obj = {
     age: 12,
     username: '张三',
    sex: '男'
 }
var age = obj.age
var username = obj.username

var {age, username} = obj
console.log(age, username);
解构时变量名必须跟对象的键的名字保持一致
var {a, b} = obj
console.log(a, b);

解构对象并取别名 - 一旦取别名原来的变量就不能用了
var {age: a, username: b} = obj
console.log(age, username);
console.log(a, b);

 var obj = {
     age: 12,
    username: '张三',
     sex: '男',
    wife: {
         uname: '翠花',
         age: 13,
         sex: '女'
   }
 }
 
多重解构
var {wife: {uname}} = obj
console.log(uname);
avatar
文章
阅读
粉丝