一、变量的改变
- let 用来声明变量(块级作用域)
- const 用来表示常量(块级作用域)
块级作用域 就是在{}声明的常量、变量只能在{}内使用
for (let i = 0; i < 10; i++) {
func.push(function() {
console.log(i)
})
}
上面for循环内的let i 也是块级作用域
二、模版字符串(``)
- 字符串拼接。将表达式嵌入字符串中进行拼接。用${}来界定。
console.log(`hello ${name}`) //hello lux
- 字符串换行。
在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。es6直接使用``
const template = `
hello world
`
- 字符串新增方法
// 1. includes()返回布尔值：表示是否找到了参数字符
let str = 'hahay'
console.log(str.includes('y')) // true
// 2. repeat(): 获取字符串重复n次
let s = 'he'
console.log(s.repeat(3)) // 'hehehe'
// 3. startsWith()返回布尔值：表示参数字符串是否在源字符串的头部
console.log("lxy".startsWith('l'));//true
console.log("lxy".startsWith('x'));//false
// 4. endsWith()返回布尔值，表示参数字符串是否在源字符串的尾部
console.log(str.includes('x'));//true
console.log(str.includes('z'));//false
三、函数
改变最大的感觉就是函数了
- 箭头函数 (sender) => { }
箭头函数最直观的三个特点。
- 不需要function关键字
- 可以省略return关键字
- 继承当前上下文的this关键字
//例如：
[1,2,3].map( (x) => { x + 1 } )
// 当函数仅有一个参数的时候可以省略()
[1,2,3].map( x => { x + 1 } )
// 当函数体仅有一个表达式的时候可以省略 {}
[1,2,3].map( x => x + 1 )
//等同于：
[1,2,3].map((function(x){
return x + 1
}).bind(this))
- 函数设置默认参数
var people = (name='afei') => { `boy ${name}`}
// 替代 下面写法
name = name || 'afei'
四、对象(字典)
- 键值对重名 简写
function people(name, age) {
return {
name,
age
};
}
- 对象字面量方法赋值 简写
// 省略冒号(:) 和function关键字
const people = {
name: 'lux',
getName () {
console.log(this.name)
}
}
- 提供浅复制方法
const obj = Object.assign({}, objA, objB)
- 数据解构
//对象
const people = {
name: 'afei',
age: 18
}
const { name, age } = people
console.log(`${name} --- ${age}`) // afei 18
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'
- 数据展开
- 组装对象或数组
//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
- 移除某几项
//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"
- 组合新的 Object
const first = {
a: 1,
b: 2,
c: 6,
}
const second = {
c: 3,
d: 4
}
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
五、数组
- forEach()
var arr = [1,2,3,4];
arr.forEach((item,index,arr) => {
console.log(item) //结果为1,2,3,4
})
// 数组的遍历方法，无返回值，不改变原数组
- map()
var arr = [1,2,3,4];
arr.map((item,index,arr) => {
return item*10 //新数组为10,20,30,40
})
//map遍历数组，返回一个新数组，不改变原数组的值。
- filter()
var arr = [1,2,3,4];
arr.filter((item,index,arr) => {
return item > 2 //新数组为[3,4]
})
//filter过滤掉数组中不满足条件的值，返回一个新数组，不改变原数组的值。
- reduce()
var arr = [1,2,3,4];
arr.reduce((sum,item,index,arr) => {
// sum 上次循环返回的值，若为第一次循环值为 origin
// item 循环项
// index 循环下表
// arr 源数组
return sum + item;
},origin)
//reduce 遍历数据求和。
- some()
var arr = [1,2,3,4];
arr.some((item,index,arr) => {
return item > 3 //结果为true
})
//遍历数组每一项，有一项返回true,则停止遍历，结果返回true。不改变原数组
6 every()
var arr = [1,2,3,4];
arr.every((item,index,arr) => {
return item > 1 //结果为false
})
//遍历数组每一项，每一项返回true,则最终结果为true。当任何一项返回false时，停止遍历，返回false。不改变原数组
// 与some()方法互补
7. import 和 export
8. Promise(承诺)
就是用同步的方式去写异步代码。 仅仅是同步的方式 代码还是异步执行
形象讲解promise
用法讲解
Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。
// 简单语法
new Promise((resolve,reject) => {
// 承诺成功
resolve('afei');
// 承诺失败
reject('fail')
// 承诺成功 和 失败 只能执行一个
}).then( result => {
console.log(result) // afei
}, error => {
console.log(error) // fail
}).catch();
// catch 方法 作用有两个
// 1 js代码执行发生错误时 执行 和try...catch 类似
// 1 reject() 执行时 执行 和then第二个回调一样 写代码时可以选其一
.all()方法
多个异步操作执行完后才执行回调
Promise.all([promise1,promise2,promise3])
.then(results => {
// results 是上面多个promise回调结果的数组
});