了解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或对象字面量创建对象 ...
随机推荐
- IOS transform的使用(移动,放大,旋转)
@interface ViewController () - (IBAction)up; - (IBAction)big ; - (IBAction)leftRotate ; @property (n ...
- 返回json格式 不忽略null字段
返回json格式 不忽略null字段 发布于 353天前 作者 king666 271 次浏览 复制 上一个帖子 下一个帖子 标签: json 如题,一个实体的某个字段如果为null,在 ...
- 【CCPC-Wannafly Winter Camp Day3 (Div1) G】排列(水题)
点此看题面 大致题意:已知 \(p\)为\(n\)的一个排列,定义\(A(p)_i=min_{j=1}^ip_j\),若用\(q_i\)表示\(p\)第\(i\)小的前缀的长度(以值为第一关键字,下标 ...
- 初始化mysql数据库时提示字符编码错误的解决办法
有时候在安装完数据库并初始化的时候会出现如下错误: root@localhost mysql-5.5.19]# bash scripts/mysql_install_db --user=mysql - ...
- _default_ VirtualHost overlap on port 80, the first has precedence
去掉#NameVirtualHost *:80,然后重启httpd
- laravel 去掉index.php伪静态
1,首先,让apache服务器支持rewrite 可以在apache配置文件中定义rewrite规则,是全局的,无论哪个应用都实用 //httpd.config Listen 80 RewriteEn ...
- Git基础篇
对于Git的一些基础了解,安装,里面的一些名词,这里就不做介绍了.主要记录怎么使用GIt. 本篇介绍: 配置个人信息 生成本地仓库并与远程库相连 添加SSH秘钥 ...
- 3.vue引入axios全局配置
前言: Vue官方推荐使用axios来进行异步访问. axios文档参考:axios中文文档 开始搭建: 1.引入axios (1)打开终端 win+R (2)切换到项目路径: g: cd Webap ...
- Oracle AWR快照管理与常见问题
1.手动创建Snapshots exec dbms_workload_repository.create_snapshot(); OR BEGIN DBMS_WORKLOAD_REPOSITORY.C ...
- 【动态规划 floyd】SPOJ ACPC13
为什么rzz会把这题放在NOI模拟赛的T2? 题目大意 有一张$n$个点$m$条边的有向图,每条边有权值$w_i$. 定义一个任务$(a_i,b_i,c_i)$是如下一条路径: 最多经过$c_i$条边 ...