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() // 顶部模块弹出盒子
优点:有命名空间(实现模块化),可拓展(便于继承),避免函数重名,明确语义化。
缺点:代码冗余。
 
7.js 对象方法类型
   对象方法 (js对象需要new才能使用的方法)
// 构造函数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()
    原型方法 (js对象继承拓展的方法,需要new才能使用的方法)
// 构造函数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...in遍历  > Object.keys遍历

尽可能使用 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核心精髓(三)的更多相关文章

  1. 了解JavaScript核心精髓(四)

    ES6 1.import与require区别 import 是同步导入js模块. require 是异步导入js模块. 2.使用let与const let con1 = 3 //与var作用相似,le ...

  2. 了解JavaScript核心精髓(二)

    1.字符串操作 //声明字符串 var str = "abcd"; var str = new String("abcd") //截取字符串 console.l ...

  3. 了解JavaScript核心精髓(一)

    ES5 1.声明脚本 <script type="text/javascript"></script> 2.DOM与BOM DOM(Document Obj ...

  4. javascript 核心语言笔记- 3 - 类型、值和变量

    JavaScript 中的数据类型分为两类:原始类型(primitive type)和对象类型(object type).原始类型包括数字.字符串和布尔值 JavaScript 中有两个特殊的原始值: ...

  5. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  6. JavaScript 核心参考教程 内置对象

    这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 ...

  7. Javascript核心概述 - 深入了解javascript

    /* 一.执行上下文:堆栈(底部全局上下文+顶部当前活动上下文) */ /* 二.变量对象: 变量根据执行上下文,找到数据存储位置,这种机制叫变量对象 1. 变量都要var定义,且都不能delete ...

  8. 《JavaScript核心概念》基础部分重点摘录

    注:<JavaScript核心概念>适合深入了解JavaScript,比我买的<JavaScript框架设计>语言和内容丰富多了(可能是我水平尚浅吧). 1. 作用域 var ...

  9. JavaScript基础(三)

    十三.JS中的面向对象 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 ...

随机推荐

  1. IOS transform的使用(移动,放大,旋转)

    @interface ViewController () - (IBAction)up; - (IBAction)big ; - (IBAction)leftRotate ; @property (n ...

  2. 返回json格式 不忽略null字段

    返回json格式 不忽略null字段  发布于 353天前  作者 king666  271 次浏览  复制  上一个帖子  下一个帖子  标签: json 如题,一个实体的某个字段如果为null,在 ...

  3. 【CCPC-Wannafly Winter Camp Day3 (Div1) G】排列(水题)

    点此看题面 大致题意:已知 \(p\)为\(n\)的一个排列,定义\(A(p)_i=min_{j=1}^ip_j\),若用\(q_i\)表示\(p\)第\(i\)小的前缀的长度(以值为第一关键字,下标 ...

  4. 初始化mysql数据库时提示字符编码错误的解决办法

    有时候在安装完数据库并初始化的时候会出现如下错误: root@localhost mysql-5.5.19]# bash scripts/mysql_install_db --user=mysql - ...

  5. _default_ VirtualHost overlap on port 80, the first has precedence

    去掉#NameVirtualHost *:80,然后重启httpd

  6. laravel 去掉index.php伪静态

    1,首先,让apache服务器支持rewrite 可以在apache配置文件中定义rewrite规则,是全局的,无论哪个应用都实用 //httpd.config Listen 80 RewriteEn ...

  7. Git基础篇

    对于Git的一些基础了解,安装,里面的一些名词,这里就不做介绍了.主要记录怎么使用GIt. 本篇介绍: 配置个人信息        生成本地仓库并与远程库相连        添加SSH秘钥       ...

  8. 3.vue引入axios全局配置

    前言: Vue官方推荐使用axios来进行异步访问. axios文档参考:axios中文文档 开始搭建: 1.引入axios (1)打开终端 win+R (2)切换到项目路径: g: cd Webap ...

  9. Oracle AWR快照管理与常见问题

    1.手动创建Snapshots exec dbms_workload_repository.create_snapshot(); OR BEGIN DBMS_WORKLOAD_REPOSITORY.C ...

  10. 【动态规划 floyd】SPOJ ACPC13

    为什么rzz会把这题放在NOI模拟赛的T2? 题目大意 有一张$n$个点$m$条边的有向图,每条边有权值$w_i$. 定义一个任务$(a_i,b_i,c_i)$是如下一条路径: 最多经过$c_i$条边 ...