模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
模板字符串中嵌入变量,需要将变量名写在${}
之中。
function authorize(user, action) {
if (!user.hasPrivilege(action)) {
throw new Error(
// 传统写法为
// 'User '
// + user.name
// + ' is not authorized to do '
// + action
// + '.'
`User ${user.name} is not authorized to do ${action}.`);
}
}
Proxy
Proxy,其功能类似于设计模式中的代理模式,该模式常用于三个方面
- 拦截和监视外部对对象的访问
- 降低函数或类的复杂度
- 在复杂操作前啊对操作进行校验或对所需资源进行管理
在支持Proxy
的浏览器环境中,Proxy
是一个全局对象,可以直接用
Proxy(target,handler)
是一个构造函数
target
是被代理的对象,handler
是声明了各类操作符的对象,最终返回一个代理对象。
new Proxy()
表示生成一个Proxy
实例,target
参数表示所要拦截的目标对象,handler
参数也是一个对象,用来定制拦截行为。
let obj = {
name : 'Strive'
};
let newObj = new Proxy(obj,{
get(target, property){
console.log(`您访问了${property}属性`);
//您访问了name属性
// return target.property;
return target[property];
}
});
console.log(newObj.name);//Strive
let obj = {
name : 'Strive'
};
let newObj = new Proxy(obj, {
get(target, property){
if(property in target){
return target[property];
}else{
console.warn(`${property}属性不在对象上`);
return '^_^';
}
}
});
console.log(newObj.name);
console.log(newObj.age);
const DOM = new Proxy({},{
get(target, property){
//console.log(target,property);
//property DOM.xxx 里面的xxx
return function(attr={},...children){
const el = document.createElement(property);
for(let key of Object.keys(attr)){
el.setAttribute(key,attr[key]);
}
for(let child of children){
if(typeof child == 'string'){
child = document.createTextNode(child);
}
el.appendChild(child);
}
return el;
}
}
});
let oDiv = DOM.div({id:'div1',class:'aaa'},'我是div','hahaha');
console.log(oDiv);
for…of 和 for…in
for … of
是作为ES6新增的遍历方式,允许遍历一个含有iterator
接口的数据结构并且返回各项的值
for-in
循环主要用于遍历对象,for()
中的格式:for(keys in zhangsan){}
keys
表示obj
对象的每一个键值对的键
所有循环中,需要使用obj[keys]
来取到每一个值for-in
循环,遍历时不仅能读取对象自身上面的成员属性,也能延续原型链遍历出对象的原型属性- 所以,可以使用
hasOwnPropert
y判断一个属性是不是对象自身上的属性obj.hasOwnProperty(keys)==true
表示这个属性是对象的成员属性,而不是原先属性。
for…of
- 一个数据结构只要部署了
Symbol.iterator
属性,就被视为具有iterator
接口,就可以用for…o
f循环遍历它的成员。 - 也就是说,
for…of
循环内部调用的是数据结构的Symbol.iterator
方法。 for…of
循环可以使用的范围包括数组、Set
和Map
结构、某些类似数组的对象(比如arguments
对象、DOM NodeList
对象)、后文的Generator
对象,以及字符串
dom补充
createElement()
方法通过指定名称创建一个元素setAttribute()
方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置/更改值。createTextNode()
可创建文本节点,HTML
元素通常是由元素节点和文本节点组成。appendChild()
方法向节点添加最后一个子节点。