标签:防止 window out new select 结合 使用 就是 clu
ES6中新增的用于声明变量的关键字
let 声明的变量只有在处于的块级作用域中有效(大括号中)
防止循环变量变成全局变量 比如for循环中的 i
不存在变量提升
暂时性死区特性
var num = 10; if (true) { console.log(num); // 此时并不会向上级作用域查找而是会报错, let num = 20; // 只要在块级作用域用let关键字声明了变量,这个变量就会和这个块级作用域做绑定 }
作用:声明常量,常量的值(内存地址)不能变化的值
- 具有块级作用域
- const 声明常量必须需要赋一个初始值
const PI;
是不被允许的- 常量声明后不可更改,实际是内存地址不可更改(引用数据类型可以修改,注意不是重新赋值)
1, 使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升
2, 使用let声明的变量,其作用域为该语句所在的代码块中,不存在变量提升
3, 使用const声明的常量,在后面出现的代码中不能再修改常量的值
在ES6中,可以按照一定的模式,从数组或对象中提取值,将提取出来的值赋值给另外一个变量
let [a, b, c] = [1, 2, 3]; // 相当于 let a = 1; let b = 2; ...
let [a, b] = [1, 2, 3]; // 如果接受对象少的话,就只赋值前面的那几个
let [a, b, c] = [1, 2]; // 如果传递的值少的话,剩余的接受值为 undefined
// 变量名匹配属性值
let {score, name, age} = {name: ‘zs‘, age: 23, score: ‘js‘}; //变量名字和对象属性进行匹配,匹配到的属性值赋值给响应的变量
// 如果接收值缺少的话,还是根据名称匹配
// 如果接受收值多的话,没有匹配到的值为 undefined
// 属性值匹配属性值
let {score: myScore, age: myAge, name: myName} = {age: 23, score: ‘css‘, name: ‘zs‘}; // 根据属性匹配到对应的属性,属性值存储对应的属性值,属性值才是变量
// 如果接收值缺少的话,还是根据名称匹配
// 如果接受收值多的话,没有匹配到的值为 undefined
() => {}
// 通常会将箭头函数赋值给一个变量
const fn = () => {}
// 函数体只有一句代码,且代码的执行结果就是返回值,可以省略大括号
const sum = (n1, n2) => return n1 + n2;
// 如果形参只有 形参外部的小括号也可以省略
const fn = arg => return arg;
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
btn.onclick = function () { console.log(this) // btn这个元素 setTimeout(function () { console.log(this) // window }) setTimeout(() => console.log(this)) // 因为使用箭头函数,此时定时器内部的this也是指向 btn这个元素的 }
// es6之前如果不确定传入多少个参数的时候,通常使用arguments来接收,但是在es6中可以使用剩余参数来接收
const sum = (...args) => {
console.log(args); // args 是一个数组
let total = 0;
args.forEach(item => total += item)
return total;
}
// 剩余参数和结构赋值结合使用
let [arg1, ...args] = [‘red‘, ‘pink‘, ‘blue‘];
console.log(arg1); // red
console.log(args); // [‘pink‘, ‘blue‘];
// 拆分数组
let arr = [1, 2, 3];
let arr1 = [4, 5, 6];
console.log(...arr); // 相当于 1, 2, 3 但是打印的时候 会把逗号作为分隔符给去掉
// 合并数组
let newArr = [...arr, ...arr1];
arr.push(...arr1); // push的返回值是新数组的length push会修改原数组
// 伪数组转换为数组
let btns = document.querySelectorAll(‘button‘); // 此时的btns是一个伪数组
arrBtn = [...btns]; // 此时就转换为了真正的数组
// from() 伪数组转换为数组,第二个参数为数组的每一项,返回处理后的数组; 整体返回一个新的数组
let arr = [1, 2, 3];
let newArr = Array.from(arr, item => {
return arr * 2
}); // [2, 4, 6]
// find() 用于找出第一个符合条件的数组成员,如果没有找到返回undefined;整体返回的复合条件的项
let arr = [{id: 1, name: ‘zs‘}, {id: 2, name: ‘ls‘}, {id: 3, name:‘we‘}]
let newArr = arr.find((item, index) => {
return item.id == 2; // {id: 2, name: ‘ls‘}
})
// findIndex() 用于找出第一个复合条件的索引,只查找第一个,如果没有返回-1
let newArr = arr.findIndex((item, index) => {
return item.id > 2; // 返回索引值 2
})
// includes() 表示某个数组是否包含给定的值,返回布尔值
let res = [1, 2, 3].includes(1); // true
let res = [1, 2, 3].includes(4); // false
let name = ‘zs‘;
let str = `hello my name is ${name}`;
let result = `
<div>
模板字符串支持换行${name}
</div>
`;
let fn = `${sayHi()}`; // 模板字符串支持调用函数,执行的是函数的返回值
let str = ‘hello world‘;
var newStr = str.startsWith(‘hello‘); // startsWidth() 判断是否以某个字符串开头 返回 布尔值
var newStr = str.endsWith(‘world!‘); // endsWith() 判断是否以某个字符串结尾 返回布尔值
// repeat() 表示将原字符串重复n次,返回一个新的字符串
let str = ‘zs‘.repeat(2); // ‘zszs‘;
ES6 新增的数据结构,类似于数组,但是其中的成员是唯一的,没有重复的值
set本身是一个构造函数,用来生成set数据结构
const s = new Set(); // 空set console.log(s.size); // 返回set的长度 const s = new Set([1, 2, 3, 3]); // 如果传递进去有重复的值,会过滤掉 // 利用set做数组去重 let arr = []; let set = new Set([1, 2, 3, 4, 4]); arr.push(...set); // 此时数组中就没有重复的值了
const set = new Set();
let s1 = set.add(‘red‘); // 添加某个值,返回数据结构本身
let s2 = set.delete(‘red‘); // 删除某个值,返回一个布尔值,表示是否删除成功
let s3 = set.has(‘red‘); // 返回一个布尔值,表示这个值是否为set成员
set.clear(); // 没有返回值,清空set
// 遍历set 使用forEach 方法 注意这里的forEach只接收item 不接收索引
const s = new Set([‘red‘, ‘pink‘, ‘blue‘]);
s.forEach((item) => {
console.log(item + ‘-‘)
})
标签:防止 window out new select 结合 使用 就是 clu
原文地址:https://www.cnblogs.com/article-record/p/12695163.html