哪里培训做网站,黄山景区的网站做的怎么样,广东佛山网络有限公司,牛商网营销型网站建设有时候#xff0c;我们需要的不是答案#xff0c;而是一双倾听的耳朵 文章目录 let和const命令变量的解构赋值 let和const命令
let和const命令都是声明变量的关键字#xff0c;类同varlet特点 用来声明变量#xff0c;不能再次定义#xff0c;但是值可以改变存在块级作用… 有时候我们需要的不是答案而是一双倾听的耳朵 文章目录 let和const命令变量的解构赋值 let和const命令
let和const命令都是声明变量的关键字类同varlet特点 用来声明变量不能再次定义但是值可以改变存在块级作用域不存在变量提升(暂时性死区)好的语法习惯先声明后使用let在全局环境下统一的变量不会挂载到window对象下 {let a 10var b 2
}
a // a is not defined
b // 2const特点 定义常量(固定的值)不能再次定义不能修改值定义常量的时候必须有值存在块级作用域不存在变量提升(暂时性死区)好的语法习惯先声明后使用const在全局环境下统一的变量不会挂载到window对象下 const PI 3.1415
PI // 3.1415
PI 3 // Assignment to constant variable变量的解构赋值
数组的结构赋值const arr [40, 10, 100]
// 得到所有数据,通过变量去接收
const a arr[0]
const b arr[1]
const c arr[2]
console.log(a, b, c) // 40 10 100
// ES6中解构赋值
const arr1 [40, 10, 100]
// 情况1数组有几项数据就定义几个变量一一对应
const [a1, b1, c1] arr
console.log(a1, b1, c1) // 40 10 100
// 情况2变量少于数组长度按照变量的顺序进行对应即可
const [a2, b2] arr
console.log(a2, b2) // 40 10
// 情况3变量多于数组长度按照变量的顺序进行对应多余的变量值就是undefined
const [a3, b3, c3, d] arr
console.log(a3, b3, c3, d) // 40 10 100 undefined
// 情况4按需取值使用空占位即可
const [, b4, c4] arr
console.log(b4, c4) // 10 100
// 情况5除去某几项得到剩余的所有选项 (...的作用剩余匹配)
const [a5,...arr2] arr
console.log(arr2) // [10, 100]
// 情况6多维数组解构赋值把握结构对应即可
const arr3 [1, 2, [100, 200]]
const [, , [a6, b6]] arr3
console.log(a6, b6) // 100 200对象的解构赋值const obj { name: tom, age: 10, hobby: { ball: 打球, game: 游戏 }
}
// 解构赋值
const {name, age, hobby: {game}} obj
// 等同于
const name obj.name
const age obj.age
const game obj.hobby.game
console.log(name, age, game) // tom 10 游戏函数相关 箭头函数 // 1.如果形参只有一个则可以省略小括号
var fn x {return x * x
}
console.log(fn(4)) // 16
// 2.如果函数只有一行代码,则可以省略大括号,并且自带return效果(意思是自动将函数体返回)
var fn1 (x, y) x y
console.log(fn1(2, 3)) // 5
var fn2 x x * x
console.log(fn2(2)) // 4
// 3.箭头函数内部没有arguments对象 (arguments对象,可以获取到函数所有的实参)
var fn3 () { console.log(arguments) } // 报错,没有找到arguments对象
fn3()
var fn4 (x, y, ...z) {// x 用于接收第一个实参的值// y 用于接收第二个实参的值// z 用于接收剩余所有实参的值console.log(x) // 1console.log(y) // 3console.log(z) // 5, 7, 9, 10
}
fn4(1, 3, 5, 7, 9, 10)
var fn5 (...value) { console.log(value) } // 使用value接收所有实参的值
fn5(2, 4, 6, 8, 10)
// 4.注意: 箭头函数内部的this执行和之前不一样了
// this的值取决于声明的环境不取决于调用的环境
// 理解为: 箭头函数没有自己的this 或者 箭头函数内部的this执行外部作用域
var fn6 () { console.log(this) } // window
fn6()
var obj { abc: fn }
obj.abc() // 还是window对象,和谁来调用没关系
const obj1 {age: 17,say() {console.log(this.age) // 此时的this是obj本身},say2: () {console.log(this.age) // 此时的this是window,是当前函数作用域外部的作用域},// say3属于obj的一个普通函数,此时this就是obj本身say3() {setTimeout(function () {// 这个位置是一个匿名函数,一般this指向的是windowconsole.log(this.age)}, 1000)setTimeout(() {// 没有this,使用的是外层作用域的this,就是obj本身console.log(this.age)}, 1000)}
}
obj1.say() // 17
obj1.say2() // undefined
obj1.say3() // undefined 17
// 5.箭头函数不能当做构造函数
var fn7 () {}
var obj new fn7() // 报错,fn is a constructor参数默认值 // 之前的写法
function fn(a) {// 没有传参的时候,可以做一个默认值处理a a || 默认值console.log(a)
}
fn()
// ES6写法
function fn(a 默认值) {// 如果调用参数没有传参a, 那么a的默认值就是 后的值console.log(a)
}
fn()匹配剩余参数 // 之前的写法
const add (a, b, c) {// 累加所有的参数return a b c
}
console.log(add(1, 4, 5))
// 假设传参的个数不固定 有多个 此时用ES6语法会更容易
const add (...args) {// args匹配到所有的参数,是数组类型let result 0for (let i 0; i args.length; i) {result args[i]}return result
}
console.log(add(1, 2, 4))数组相关 展开运算符 ...// 之前的写法
const arr [1, 10, 4, 50, 60]
const max1 Math.max(1, 10, 4, 50)
console.log(max1) // 50
// ES6写法
const max2 Math.max(...arr)
console.log(max) // 50
// 拼接数组
const arr1 [1, 2]
const arr2 [3, 4]
const arr3 [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4]
// 对象的合并
const obj1 { name: tom }
const obj2 {age: 10,gender: 女,...obj1 // 把obj1的属性合并到obj2中
}
console.log(obj2) // {age: 10, gender: 女, name: tom}Array.from() 把伪数组转成数组// 伪数组
const arrObj {0: tom,1: tony,2: lucy,length: 3
}
// 将上述伪数组转成真数组
const arr Array.from(arrObj)
console.log(arr) // [tom, tony, lucy]
// 1.length决定数组的长度
// 2.如果伪数组中数据不够length定义的长度,剩余的显示undefinedforEach() 遍历函数const arr [{name:tom,agr:20},{name:lucy,agr:23},{name:nick,agr:25}]
// item是每次遍历对应的数据选项
// i 是每次对应的索引
arr.forEach((item,i){console.log(item,i)
})find() 查找数组中符合条件的选项const arr [{name:tom,agr:20},{name:lucy,agr:23},{name:nick,agr:25}]
const item arr.find(item {// 也会遍历数组// 回调函数的返回值如果为真,终止循环,find函数会返回当前遍历的这项数据return item.name nick
})
console.log(item)findIndex() 查找数组中符合条件的第一个选项的索引const arr [{name:tom,agr:20},{name:lucy,agr:23},{name:nick,agr:25}]
const i arr.findIndex(item {// 也会遍历数组// 回调函数的返回值如果为真,终止循环,find函数会返回当前遍历的这项数据return item.name tom
})
console.log(i)字符串相关 模板字符串 (字符串拼接更方便支持换行)const name tony
const age 20
const str name 今年 age 岁
console.log(str)
// 模板字符串写法
const str1 ${name}今年${age}岁
console.log(str1)
const html divp名字:Lucy/pp年龄:28/p/div
const html1 divp名字:Lucy/p;p年龄:28/p;/div字符串扩展API includes() 判断当前字符串是否包含某段字符串startsWith() 判断是否以某一段字符串开头endWith() 判断是否以某一段字符串结尾repeat() 重复拼接同一段字符串padStart() 补齐字符串长度,不够使用某一个字符串进行补全,往前补padEnd() 补齐字符串长度,不够使用某一个字符串进行补全,往后补 const str Hi es6
// 判断是否包含 es 字符串
console.log(str.includes(es)); // true
console.log(str.includes(es1)); // false
// 判断是否以 Hi 字符串开头
console.log(str.startsWith(Hi)); // true
console.log(str.startsWith(hi)); //false
// 判断是否以 s6 字符串结尾
console.log(str.endsWith(s6)); // true
console.log(str.endsWith(S6)); // false
// 重复拼接3次 Hi es6 字符串 重复拼接同一段字符串
console.log(str.repeat(3)); // Hi es6Hi es6Hi es6
const str2 1
// 往 1 之前补 0 , 补齐之后一共6位
console.log(str2.padStart(6, 0));
// 往 1 之后补 0 , 补齐之后一共6位
console.log(str2.padEnd(6, 0));Number相关 以前学的转换数字函数 parseInt() 转成整数parseFloat() 转换成浮点数(小数) ES6中的转换数字函数 Number.parseInt()Number.parseFloat() ES6集合-Set Set是一个集合和Array类似,数组的值可以重复而Set的值不可重复。Set用于数组去重在js环境中提供了Set的构造函数就是创建一个Set集合newSet()集合的值不能重复// 创建Set集合
const set new Set()
// Set添加数据使用add()函数
set.add(1)
set.add(2)
set.add(3)
// 添加一个重复的数据,添加无效
set.add(2)
console.log(set)Set数组去重const arr [1, 2, 2, 3, 5, 4, 5]
// 将数组转换成set, new Set(数组) 得到一个Set集合
const set new Set(arr)
console.log(set)
// 将set转换成数组
// 方式1:
const arr2 Array.from(set)
console.log(arr2)
// 方式2:
const arr3 [...set]
console.log(arr3)ES6语法兼容 总结ES6提升了语法和API两个方面采用banel工具使用ES6语法降级到ES5语法从而去兼容更多的浏览器官网地址 https://babeljs.io/工具作用Babel is a JavaScript compiler. (babel是一个js编译器) 将ES6语法转换成ES5语法
