了解JavaScript核心精髓(三)
1.js判断对象是否存在属性。
hasOwnProperty(‘property’) 判断原型属性是否存在。
"property" in Object 判断原型属性和原型链属性是否存在。
2.js 对象比较
var obj1 = {
"emailadr": "sroot@qq.com",
"emailpas": ""
}; var obj2 = {
"emailadr": "sroot@qq.com",
"emailpas": ""
}; console.log(obj1==obj2) // false ,比较对象的内存地址,不是内容
最简单的方法是直接转成字符串,再进行比较。
3.深拷贝与浅拷贝
浅度拷贝,即复制一个引用类型的指针。
var a = 1;
var b = a;
console.log(b);
深度拷贝,即复制一个一模一样完整引用类型。
//ES5 方式一
const newObj = JSON.parse(JSON.stringify(oldObj)); //ES5 方式二
function deepClone(obj) {
let newObj = Array.isArray(obj) ? [] : {}
if (obj && typeof obj === "object") {
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = (obj && typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key];
}
}
}
return newObj
}
const newObj = deepClone(oldObj)); //ES6
const newObj = Object.assign([],oldObj);
判断浅度拷贝或深度拷贝依据比较两个对象内存地址是否相等,相等就是浅度拷贝,不相等就是深度拷贝。
PS:引用类型指的是对象、数组、函数。
值类型指的是数值、字符串、布尔型、null、undefined。
4.js访问对象属性
//使用.来访问
var myCar = new Object();
myCar.make = "Ford"; //使用[]来访问
myCar["make"] = "Ford";
5.js对象继承
//学生类
function Student(name,age){
this.name = name;
this.age = age;
} //小学生类
function Pupil(name,age){
this.stu=Student;
this.stu(name,age);
} var s = new Pupil('cww', 10)
console.log(s.name) //cww
PS:可以多继承和重写,没有重载,如有同名函数,只执行最后的一个方法。
6.js面向对象。
非对象设计
function popBox() {
alert('弹出盒子')
}
popBOX() //不知道是指哪个弹出盒子。
var Top = {
popBox: function() {
alert('弹出盒子')
}
}
Top.popBox() // 顶部模块弹出盒子
// 构造函数Person
function Person() {
this.walk = function() {
alert('I can walk')
}
} var p1 = new Person()
p1.walk()
类方法 (js对象不需要new使用的方法)
// 构造函数Person
var Person = {
walk: function() {
alert('I can walk')
}
} //等价于
//function Person() {}
//Person.walk = function() {
// alert('I can walk')
//} Person.walk()
// 构造函数Person
function Person(name) {
this.name = name
}
Person.prototype.sayName = function() {
alert('my name is:' + this.name)
}
Person.prototype.age = 18
var p1 = new Person('sroot')
p1.sayName()
PS:原型方法与对象方法比较。
使用原型方法更好,提高js使用内存效率,所有的new对象都共享方法。
原型方法(实例方法)与类方法(静态方法)比较。
静态方法在程序开始时生成内存。实例方法在程序运行中生成内存。
静态方法常见于公用的方法,不需要依赖其他属性,不会被重写。实例方法常见于具体某个对象的方法。
8.函数声明与函数表达式区别
foo1(); //需要初始化
function foo1(){}; //事先定义这个函数,不可以匿名。 var foo2 = function(){};//遇到才执行这个函数,可以匿名,函数可以内部调用。
foo2();//必须在foo2函数表达式后面。
9.js跨域问题(不同域名之间的js不能相互操作)
只要是端口,协议,域名不同都算跨域。
(1)使用jsonp。
通过script标签(script标签的src属性是没有跨域的限制的),引入其他域名下的带参数函数,从而读取跨域数据。(仅支持get请求)
<script type="text/javascript">
//返回函数一定要事先声明,否则jsonp请求返回的函数是Undefined
function callbackFunction(result) {
console.log(result)
}
// 提供jsonp服务的url地址
// url后面参数可有可无,建议设置参数,有利于可以动态获取返回数据,告诉后端“我需要一个callbackFunction函数代码”,函数名不是固定的。
var url = 'http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction'
var script = document.createElement('script')
script.setAttribute('src', url)
document.getElementsByTagName('head')[0].appendChild(script)
</script>
<!-- 不建议写死script标签的src -->
<!-- <script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> -->
(2)使用iframe。
创建一个iframe,修改domain,读取iframe里面的数据。
(3)服务端设置跨域请求头。
(4)使用浏览器代理插件。(Allow-Control-Allow-Origin: *插件)
PS:jsonp安全问题:建议请求验证的refer字段或token,否则会出现CSRF攻击漏洞。
10.js判断条件优化
(1)把最常出现的结果排在前面
// var value = xxx
if (value === 4) { } else if (value === 3) { } else if (value === 1) { } else if (value === 2) { } else if (value === 0) { }
(2)拆分条件
// var value = xxx
if (value <= 4) {
if (value > 2) {
if (value === 3) { } else if (value === 4) { }
} else {
if (value === 0) { } else if (value === 1) { } else if (value === 2) { }
}
}
(3)switch语句
//var value = xxx
switch(value){
case 1: break;
case 2: break;
default: }
PS:default关键字后面无需加break关键字。
参数是固定值采用switch语句。
参数是范围值采用if语句。
(4)数据查询
//var value =xxx var arrRes = [0,1,2,3,4] var results = arrRes[value]
11.js使用别名
function $(id) {
return document.getElementById(id)
} var titleCss = $('title').style
titleCss.color = 'red'
节省代码,便于书写。
12:js遍历语句
//for遍历(适用于数组对象)
for (var i = 1; 1 < 5; i++) {
console.log(i);
} //for...in遍历(适用于数组对象)
var arrData1=[{name:"foo1"},{name:"foo2"}] for (var key in arrData1) {
console.log(arrData1[key].name)
} //Array.prototype.map()遍历(适用于数组对象)
var arrData2 = [10, 50, 100];
arrData2.map(x => console.log(x));
PS:性能高到低 for > map > for..in
尽可能使用 for循环,不要使用增强的for循环。
13.js阻止页面内部iframe运行。
if (navigator.appName == 'Microsoft Internet Explorer') {
window.frames.document.execCommand('Stop')
} else {
window.frames.stop()
}
14.js禁止外部iframe嵌套
if (window.top != window && document.referrer) {
var a = document.createElement('a')
a.href = document.referrer
var host = a.hostname var endsWith = function(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1
} if (!endsWith(host, '.test.com') || !endsWith(host, '.test2.com')) {
top.location.href = 'http://www.test.com'
}
}
15. 捕获异常
try{
...
}catch(e){
var msg = (e.message) ? e.message : e.description;
alert(msg);
}
了解JavaScript核心精髓(三)的更多相关文章
- 了解JavaScript核心精髓(四)
ES6 1.import与require区别 import 是同步导入js模块. require 是异步导入js模块. 2.使用let与const let con1 = 3 //与var作用相似,le ...
- 了解JavaScript核心精髓(二)
1.字符串操作 //声明字符串 var str = "abcd"; var str = new String("abcd") //截取字符串 console.l ...
- 了解JavaScript核心精髓(一)
ES5 1.声明脚本 <script type="text/javascript"></script> 2.DOM与BOM DOM(Document Obj ...
- javascript 核心语言笔记- 3 - 类型、值和变量
JavaScript 中的数据类型分为两类:原始类型(primitive type)和对象类型(object type).原始类型包括数字.字符串和布尔值 JavaScript 中有两个特殊的原始值: ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- JavaScript 核心参考教程 内置对象
这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 ...
- Javascript核心概述 - 深入了解javascript
/* 一.执行上下文:堆栈(底部全局上下文+顶部当前活动上下文) */ /* 二.变量对象: 变量根据执行上下文,找到数据存储位置,这种机制叫变量对象 1. 变量都要var定义,且都不能delete ...
- 《JavaScript核心概念》基础部分重点摘录
注:<JavaScript核心概念>适合深入了解JavaScript,比我买的<JavaScript框架设计>语言和内容丰富多了(可能是我水平尚浅吧). 1. 作用域 var ...
- JavaScript基础(三)
十三.JS中的面向对象 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 ...
随机推荐
- Codeforces - Educational Codeforces Round 5 - E. Sum of Remainder
题目链接:http://codeforces.com/contest/616/problem/E 题目大意:给定整数n,m(1≤n,m≤1013), 求(n mod 1 + n mod 2 + ... ...
- Altium_Designer-PCB的覆铜步骤
1.覆铜的意义 覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力:降低压降,提高电源效率:还有,与地线相连,减小环路 ...
- React怎么创建.babelrc文件
在windows环境下做react开发其实是一件非常让人头疼的事,强烈建议使用Mac或者是Linux系统,否则真的是自己挖坑自己跳了. 不过,这里还是给大家说说如何在windows环境下新建一个.ba ...
- create-react-app项目使用假数据
做新项目的时候,前端每次要等后端接口准备好再开始,就会延期,等后端接口准备好了,前端这边的项目又会相互紧张,如果前端跟后端同时进行,前期将框架,基础做好,定好接口文档,前端在后端没准备好接口的时候使用 ...
- Python-三元运算符和lambda表达式
一.三元运算符 #当满足条件1时,res=值1:否则res=值2 res = 值1 if 条件1 else 值2 举例说明: res=10 #简单的if else语句 if abs(res)>0 ...
- scrapy install
csf@ubuntu:~$ sudo apt install python-scrapy
- Spring 注解中@Resource 和 @Authwired 的区别
@Resource的作用相当于@Autowired,只不过@Autowired按byType自动注入,而@Resource默认按 byName自动注入罢了.@Resource有两个属性是比较重要的,分 ...
- iOS App 瘦身方案
缩减iOS安装包大小是很多中大型APP都要做的事,一般首先会对资源文件下手,压缩图片/音频,去除不必要的资源.这些资源优化做完后,我们还可以尝试对可执行文件进行瘦身,项目越大,可执行文件占用的体积越大 ...
- FAT32中文版分析+补充(1)
概述 起先所有的FAT文件系统都是为IBM PC机器而设计的,这说明了一个重要的问题:FAT文件系统在磁盘上的数据是用“小端”(Little Endian)结构存储的.我们使用4个8-bit的字节—— ...
- Docker自学纪实(六)搭建docker私有仓库
docker的镜像仓库分两种:一种是从官方公有仓库拉取:还有就是自己搭建私有仓库.官方的镜像仓库是面对整个应用市场的:私有仓库一般用于公司内部,就是公司项目自身所需的镜像.搭建私有仓库有什么好处?私有 ...