JavaScript（ES6）

let和const是es6新增的定义变量的两个关键字，使用语法跟var是一样的，跟var的区别：

1.没有预解析

2.全局变量不在window中

3.不能重复定义

4.会创建一个块级作用域，碰到大括号会重合作用域

const的值不能改变 - 常量

定义语法  let

let是es6中新增的定义变量的关键字，使用方式跟var是一样的

var a = 10

let b = 20

console.log(a, b);

var和let的区别

1.let定义的变量没有预解析

console.log(a);

var a = 10

var a = 10

2.let定义的变量不在window中

var a = 10

let a = 10

console.log(window);

3.let会创建一个作用域，如果碰到了大括号，会将自己的作用域跟大括号重合 - 块级作用域

for(var i=1; i<=3; i++) {}

for(let i=1; i<=3; i++) {
}

console.log(i);

if(true) {

    var a = 10

}

if(true) {

    let a = 10

}

console.log(a);

如果我们看到了没有跟其他语法配合的大括号，其实就是在定义块级作用域

4.同名变量不允许重复定义

var a = 10

var a = 20

let a = 10

let a = 20

console.log(a);

定义语法   const

const也是es6新增的定义变量的语法，使用方式跟var是一样的 - 定义常量

var a = 10

const b = 20

console.log(a, b);

const和var的区别

console.log(a);
const a = 20
console.log(window);
if(true) {
    const b = 30
}
console.log(b);

const a = 10
const a = 20
console.log(a);

let a = 10
a = 20
const a = 10
a = 20
console.log(a);

const定义的变量，值是不能修改的，一旦定义了就是永恒的。

箭头函数

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

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

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

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 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 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新增的定义字符串的语法，使用反引号 `

可以直接在字符串中通过${变量}识别，不用拼接

可以分多行来定义一个字符串，且在控制台中多行输出

字符串方法：

字符串.startsWith(字符/小字符串)

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

var str = 'asdkfjhaskjdhf'
var bool = str.startsWiht('a')
console.log(bool)

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

字符串.endsWith(字符/小字符串)

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

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

字符串.includes(字符/小字符串)

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

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

新增数组方法

some

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

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

// 有7门成绩，判断是否有不及格的成绩
var arr = [100,500,90,80,76,88]
var k = 0
var bool = arr.some(function(V){
    k++
    return  v<60
})
console.log(bool)   //false  
console.log(k)       //6

var arr = [100,500,9,80,76,88]
var k = 0
var bool = arr.some(function(V){
    k++
    return  v<60
})
console.log(bool)   //true
console.log(k)       //3

every

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

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

// 是否所有成绩都及格了
var arr = [100,500,9,80,76,88]
var k = 0
var bool = arr.every( v => {
    k++
    return  v>60
})
console.log(bool);   //false
console.log(k);    //3

var arr = [100,500,90,80,76,88]
var k = 0
var bool = arr.every( v => {
    k++
    return  v>60
})
console.log(bool);   //true
console.log(k);    //6

find

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

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

var arr = [100,500,90,80,76,88]
var ele = arr.find(v => v<60)
console.log(ele);   //undefined   

var arr = [100,500,9,80,76,88]
var ele = arr.find(v => v<60)
console.log(ele);   //  9 

findIndex

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

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

var arr = [100,50,90,80,76,88]
// 第一个不及格成绩的下标
var index = arr.findIndex(v => v<60)
console.log(index);   //  1

var arr = [100,80,90,80,76,88]
// 第一个不及格成绩的下标
var index = arr.findIndex(v => v<60)
console.log(index);   //  -1

解构赋值

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

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

var/let/const [变量1, 变量2, ..] = 数组

var/let/const [[变量]] = 数组

//之前方法获取
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);  // 45
var [_, a] = brr
console.log(a);   // 5


var [_, [_, a]] = arr
console.log(a);  // 5

最快的交换两个变量的值

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);    //12 '张三'

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

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

var obj = {
    age: 12,
    username: '张三',
    sex: '男',
    wife: {
        uname: '翠花',
        age: 13,
        sex: '女'
    }
}
// 多重解构
var {wife: {uname}} = obj
console.log(uname);

   ...   运算符

... 可以将一个数组或对象展开成多个值或多个键值对，也可以将多个值合并为一个数组

 ...对象/...数组

var pbj = {
    name: '唐伯虎',
    sex: '男'
}
var obj = {
    // 将pbj对象，展开成多个键值对放在这里
    ...pbj,
    wife: {
        name: '如花',
        age: 21,
        sex: '女'
    }
}

console.log(obj);

展开数组

合并数组

function fn(a, b, c) {
    return a + b + c
}
var arr = [4,5,6]
var num = fn(...arr)
console.log(num);

var arr = [1,9,6,3,4,8,5,7]
var max = Math.max(...arr)
console.log(max);




//合并数组
function fn(...arr) { // 任意多个数字的和
    console.log(arr);
}

fn(1,2)
fn(3,4,5)
fn(6,7,8,9)

语法 - 对象的简写

当对象的键和值使用的变量同名了，就可以简写

// var obj = {
//     name: name,
//     age: age
// }

var obj = {
    name,
    age
}
var name = '张萨安'
var age = 12
console.log(obj);