本文共 9299 字,大约阅读时间需要 30 分钟。
ECMAScript 和 JavaScript
历史版本
ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS
解决不兼容办法,编译、转换
var 的问题
{ }
let 和 const
{ }
块内声明的,块外无效块级作用域举例
()
可以省return
,{}
可以省// 普通函数function name() { }// 箭头函数,去掉 function, 加上 =>() => { }
let show1 = function () { console.log('abc')}let show2 = () => { console.log('abc')}show1() // 调用函数show2()let show4 = function (a) { return a*2}let show5 = a => a * 2 //简洁,类似python lambda 函数console.log(show4(10))console.log(show5(10))
...args
function show(a, b, ...args) { console.log(a) console.log(b) console.log(args)}console.log(show(1, 2, 3, 4, 5))let arr1 = [1, 2, 3]let arr2 = [4, 5, 6]let arr3 = [...arr1, ...arr2]console.log(arr3)function show2(a, b=5, c=8) { console.log(a, b, c)}show2(88, 12)
let [a, b, c] = [1, 2, 3]console.log(a, b, c)let { x, y, z} = { x: 1, y: 2, z: 3}console.log(x, y, z)let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']console.log(json, arr, num, str)
let arr = [12, 5, 8]let result = arr.map(function (item) { return item*2})let result2 = arr.map(item=>item*2) // 简写console.log(result)console.log(result2)let score = [18, 86, 88, 24]let result3 = score.map(item => item >= 60 ? '及格' : '不及格')console.log(result3)// 结果[ 24, 10, 16 ][ 24, 10, 16 ][ '不及格', '及格', '及格', '不及格' ]
var arr = [1, 3, 5, 7]var result = arr.reduce(function (tmp, item, index) { //tmp 上次结果,item当前数,index次数1开始 console.log(tmp, item, index) return tmp + item})console.log(result)var arr = [1, 3, 5, 7]var result = arr.reduce(function (tmp, item, index) { if (index != arr.length - 1) { // 不是最后一次 return tmp + item } else { return (tmp + item)/arr.length }})console.log(result) // 平均值
var arr = [12, 4, 8, 9]var result = arr.filter(item => (item % 3 === 0) ? true : false)console.log(result)var result = arr.filter(item => item % 3 === 0)console.log(result)var arr = [ { title: '苹果', price: 10 }, { title: '西瓜', price: 20 },]var result = arr.filter(json => json.price >= 20)console.log(result)
var arr = [12, 4, 8, 9]var result = arr.forEach(item => console.log(item))var result = arr.forEach((item, index)=>console.log(item, index))
startsWith
endsWith
var url = 'http://qq.com'console.log(url.startsWith('http'))console.log(url.endsWith('com'))// 都是 true
${变量}
let a = 12let str1 = `asdf${ a}`console.log(str1)let title = '标题'let content = '内容'let str = `${ title}
${
content}`console.log(str)标题
内容
// 老版本function User(name, pass) { this.name = name this.pass = pass}User.prototype.showName = function () { console.log(this.name)}User.prototype.showPass = function () { console.log(this.pass)}var u1 = new User('able', '1233')u1.showName()u1.showPass()// 老版本继承function VipUser(name, pass, level) { User.call(this, name, pass) this.level = level}VipUser.prototype = new User()VipUser.prototype.constructor = VipUserVipUser.prototype.showLevel = function () { console.log(this.level)}var v1 = new VipUser('blue', '1234', 3)v1.showName()v1.showLevel()
class User { constructor(name, pass) { this.name = name this.pass = pass } showName() { console.log(this.name) } showPass() { console.log(this.pass) }}var u1 = new User('able2', '111')u1.showName()u1.showPass()// 新版本继承class VipUser extends User { constructor(name, pass, level) { super(name, pass) this.level = level } showLevel(){ console.log(this.level) }}v1 = new VipUser('blue', '123', 3)v1.showLevel()
JSON 格式
JSON 对象
var json = { a: 12, b: 5}var str = 'hi,' + JSON.stringify(json)var url = 'http://www.xx.com/' + encodeURIComponent(JSON.stringify(json))console.log(str)console.log(url)var str = '{"a": 12, "b": 4, "c": "abc"}'var json = JSON.parse(str)console.log(json)hi,{ "a":12,"b":5}http://www.xx.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D{ a: 12, b: 4, c: 'abc' }
对象(object)
对象 简写
var a = 12, b = 5console.log({ a:a, b:b})console.log({ a, b})console.log({ a, b, c:"c"})console.log({ a, b, show(){ console.log('a') }}){ a: 12, b: 5 }{ a: 12, b: 5 }{ a: 12, b: 5, c: 'c' }{ a: 12, b: 5, show: [Function: show] }
异步和同步
Promise 对象
Promise 也是一个构造函数
function f1(resolve, reject) { // 异步代码...}var p1 = new Promise(f1);p1.then(f2); // f1的异步操作执行完成,就会执行f2。
// 传统写法step1(function (value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { // ... }); }); });});// Promise 的写法(new Promise(step1)) .then(step2) .then(step3) .then(step4);
var p1 = Promise.resolve(1), p2 = Promise.resolve(2), p3 = Promise.resolve(3);Promise.all([p1, p2, p3]).then(function (results) { console.log(results); // [1, 2, 3]});
*
两边可以有空格,或靠近函数或function
function show() { console.log('a') console.log('b')}show() // 普通函数function *show2() { console.log('1') yield console.log('2')}let genObj = show2()genObj.next() // 1genObj.next() // 2genObj.next() // 最后了,没有结果
yield
next()
传参无效,只用来启动如果函数前漏掉 *
yield
会报错, ReferenceError: yield is not defined
function * show() { console.log('1') var a = yield console.log('2') console.log(a)}// yield 传参var gen = show()gen.next() // 1gen.next() // 2 和 undefined 因为没有传参,yield没有返回值var gen = show()gen.next(10) // 1 第一次执行到yield,但没有执行赋值gen.next(20) // 2 和 20function* show2() { console.log('1') yield 10 console.log('2')}// yield 返回var gen = show2()var res1 = gen.next()console.log(res1) // { value: 10, done: false }var res2 = gen.next()console.log(res2)// { value: undefined, done: true } 最后的value需要return返回
// 带逻辑-generatorrunner(function * () { let userData = yield $.ajax({ url: 'getUserData'}) if (userData.type == 'VIP') { let items = yield $.ajax({ url: 'getVIPItems'}) } else { let items = yield $.ajax({ url: 'getItems'}) }})
// yield 实例,用同步方式写异步server.use(function * () { let data = yield db.query(`select * from user_table`) this.body = data})
arr.includes()
数组是否包含某个东西let arr = ['a', 'b', 'c']console.log(arr.includes(1))for (let i in arr) { console.log(i) // 循环的时下标 key}for (let i of arr) { console.log(i) // 循环的是值 value}for (let i of arr.keys()) { console.log('>'+i)}for (let [key, value] of arr.entries()) { console.log('>' + key + value)}let json = { a: 12, b: 5, c: 7 }for (let i in json) { console.log(i)}
console.log('=' + 'abcd'.padStart(6, '0') + '=')console.log('=' + 'abcd'.padEnd(6, '0') + '=')=00abcd==abcd00=
容忍度
async await
async function show() { console.log(1) await console.log(2)}
转载地址:http://hnxxi.baihongyu.com/