变量命名

变量名:字母 数字 下划线 美元符$

jquery:  $     $.each()   $ === jQuery

underscore( js的一个函数库)  :   _     _.each()

关键字 :  if   for

保留字 :  class

推荐有意义的命名:

buttonCancel   button_cancel   btnCancel


数据类型和堆栈

基本类型(可以修改) :  4  str   true  undefined  null

引用类型(不能修改) :  { }  [ ]

var score = 40;
score = 50;

上面属于覆盖,不属于修改

var str = "hello";
var newStr = str.replace("h", "");
document.write( str + "/" + newStr);

字符串操作返回新的字符串,原字符串没有改变

        var obj = {};
console.log(obj);
obj.name = "cyy";
obj.age = 25;
obj.name = "cyy2";
delete obj.age;
console.log(obj);

引用类型的属性可以添加,可以修改,可以删除

        var name = "cyy";
name.age = 25;
console.log(name.age);//undefined

基本类型不能添加属性

str.replace()

1->Number

"str"->String

不是基本类型有属性和方法,而是通过基本类型找到其包装对象,包装对象会把属性和方法借给该基本类型的变量


基本类型保存在栈内存中,按值访问(直接访问)

引用类型保存在堆内存中,但是地址保存在栈内存中,按引用访问(需要中转)


变量比较和值的赋值

        var obj1 = {
age: 24,
num: 1
}
var obj2 = {
age: 24,
num: 1
}
console.log(obj1 === obj2);//false

基本类型的比较就是值的比较,只要值相等即为相等

引用类型,实际上是开辟了各自的内存空间,虽然内容相等,但是并不是一个地址

只有当指向同一个引用的时候,才为相等

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var obj1 = {
age: 24,
num: 1
}
var obj2 = obj1;
console.log(obj1 === obj2);//true
</script>
</body>
</html>

此时obj2保存的是obj1的地址,因此相等

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var obj1 = {
age: 24,
num: 1
}
var obj2 = {
age: 24,
num: 1
}
function equelObj(a, b){
for(var i in a){
if(a[i] !== b[i]) return false;
}
return true;
}
console.log(equelObj(obj1, obj2));//true
</script>
</body>
</html>

以上方式可以比较两个对象的内容是否相等

        function equelArr(a, b){
if(a.length !== b.length) return false;
for(var i=0; i<a.length;i++){
if(a[i] !== b[i]) return false;
}
return true;
}

以上方式比较两个数组的内容是否相等

var name1 = "cyy";
var name2 = name1;
console.log(name2);//cyy name2 = "cyy2";
console.log(name1);//cyy

基本类型复制是值的复制,两个变量互不干涉

var obj1 = {
name: "cyy",
age: 24
}
var obj2 = obj1;
obj2.age++;
console.log(obj2.age);//
console.log(obj1.age);//

引用类型复制是地址的复制,二者指向同一个地址,一个改变另一个也会发生改变

var obj1 = {
name: "cyy",
age: 24
}
function copyObj(a){
var newObj = {};
for(var i in a){
newObj[i] = a[i];
}
return newObj;
}
console.log(copyObj(obj1));

以上方法是复制一个对象的内容,但不是引用的同一个地址

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var obj1 = {
name: "cyy",
age: 24,
hobby: []
}
function copyObj(a){
var newObj = {};
for(var i in a){
newObj[i] = a[i];
}
return newObj;
}
console.log(copyObj(obj1));
</script>
</body>
</html>

该方式属于浅拷贝,如果对象中某个属性本身是引用类型,则复制时又会该属性又会指向同一个地址,需要用到递归解决

jquery 中的 $.extend 既可以进行浅拷贝,又可以进行深拷贝


不使用新的变量,来对换两个变量的值

var a = 3;
var b = 4;
a = a + b; //a=7
b = a - b; //b=3
a = a - b; //a=3

一个很奇葩的规则:赋值才会改变引用的地址,但是添加与修改内容不会改变地址

var a=[4];
var b=a;//此时b与a指向同一个空间 a=[4] b=[4]
a=[4,44];//此处a被重新赋值,指向了另一个空间;b仍旧指向原来的空间
console.log(a);//(2) [4, 44]
console.log(b);//[4] a=b;//此时a又指向了b的空间 a=[4] b=[4]
b.push(44);
console.log(a);//(2) [4, 44]

参数传递和类型检测

function add(a,b){
return a+b;
}
console.log(add(3,4));//

a,b是形参,3,4是实参

function addName(obj){
obj.name="cyy";
}
var me={};
addName(me);
console.log(me.name);//cyy

引用类型的参数传递(实质上也是值传递)

function addName(obj){
obj.name="cyy";//me.name=cyy(值传递)
obj={};//obj指向了一个新的地址,但是me依旧指向老的地址
obj.name="cyy2";//对新的地址进行操作
}
var me={};
addName(me);
console.log(me.name);//cyy

以上证明:由于引用类型作为参数时,实质上也是值传递。因此当形参被指向新的地址时,并没有对实参进行操作,因为二者并不是指向同一个地址


typeof 检测数据类型,返回值都是字符串类型

数组和对象都是返回object

instanceof Array  判断是否是数组的实例

instanceof Object  判断是够是object的实例(数组也是Object的实例,所有东西都是object的实例)

console.log([] instanceof Array);//true
console.log({} instanceof Array);//false
console.log([] instanceof Object);//true
console.log({} instanceof Object);//true

不用第三个参数,对换两个引用类型的变量值

var a = {name: 'xm'}, b = [4];
a=[a,b];//[{name: 'xm'}, 4]
b=a[0];//b={name: 'xm'};
a=a[1];//a=[4]

null是Null类型,属于基本类型

console.log(typeof null);//object
console.log(null instanceof Object);//false

JS数据类型和堆栈+变量比较和值的复制+参数传递和类型检测的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. 前端面试:js数据类型

    js数据类型是js中的基础知识点,也是前端面试中一定会被考察的内容.本文旨在知识的梳理和总结,希望读者通过阅读本文,能够对这一块知识有更清晰的认识.文中如果出现错误,请在评论区指出,谢谢. js数据类 ...

  3. static 和 final 关键字 对实例变量赋初始值的影响

    static 和 final 关键字 对实例变量赋初始值的影响 最近一直在看<深入理解Java虚拟机>,在看完了对象内存分配.Class文件格式之后,想深扒一下实例变量是如何被赋上初始值的 ...

  4. js数据类型和变量

    Number JavaScript不区分整数和浮点数,统一用Number表示: 123 0.345 -99 NaN 当无法计算结果时用NaN表示 Infinity 表示无限大,当数值超过js的Numb ...

  5. 前端(十一)—— JavaScript基础:JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符

    JS存在的位置.JS变量定义.调试方式.JS数据类型.运算符 一.JS语言介绍 1.概念 浏览器脚本语言 可以编写运行在浏览器上的代码程序 属于解释性.弱语言类型编程语言 2.组成 ES语法:ECMA ...

  6. 多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量

    多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量,并且数组变量可以直接取到每一个元素var array1 = '<%=yearList =>'; ...

  7. js 判断一个变量是否有值

    最近遇到一个面试题,判断一个变量是否有值,当时有点蒙,其实很简单,就是判断 变量是否为 undefined或者null function isFlag(val) { if(Object.prototy ...

  8. 由js apply与call方法想到的js数据类型(原始类型和引用类型)

    原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...

  9. JS函数 -- 功能,语法,返回值,匿名函数,自调用匿名函数,全局变量与局部变量,arguments的使用

    “JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...

随机推荐

  1. 深入Java类加载全流程,值得你收藏

    先测试一番,全对的就走人 //题目一 class Parent1{ public static String parent1 = "hello parent1"; static { ...

  2. Shell常用命令之主机检测(ping)

    主机检测命令ping 向网络主机发送ICMP回传请求 常用选项 -A:洪水攻击选项,启用此功能能在短时间之内发送大量的ping包 -b:开启ping网桥模式,默认不允许ping网桥 -c:设置发送多少 ...

  3. AcWing 787.归并排序

    AcWing 787.归并排序 题目描述 给定你一个长度为n的整数数列. 请你使用归并排序对这个数列按照从小到大进行排序. 并将排好序的数列按顺序输出. 输入格式 输入共两行,第一行包含整数 n. 第 ...

  4. JAVA byte数组转化为16进制字符串输出

    最简单的方法: 利用javax.xml.bind包下的DatatypeConverter printHexBinary public static java.lang.String printHexB ...

  5. ThreadLocal源码分析-黄金分割数的使用

    前提 最近接触到的一个项目要兼容新老系统,最终采用了ThreadLocal(实际上用的是InheritableThreadLocal)用于在子线程获取父线程中共享的变量.问题是解决了,但是后来发现对T ...

  6. Linux内核单链表

    主要说明Linux内核中单链表操作的关键思想,需要注意的地方 1. 假设 为了说明关键思想,对数据结构进行了精简 2. 数据结构定义 struct ListNode { int val; ListNo ...

  7. 套接字名与DNS

    2 现代地址解析 首先要说Python套接字最强大的工具之一-------getaddrinfo() 这个函数可能是我们用来将用户指定的主机名和端口号转换为可供套接字方法使用的地址时所需的唯一方法. ...

  8. python 函数(实参与形参、传递参数)

    函数 什么是函数?函数是带名字的代码块,用于完成具体的工作.写出一个函数后,就可以一直调用. 定义函数,函数的基本组成: 1.1 向函数传递参数 向函数中传递任意参数,这样打印出的结果就可以根据自己的 ...

  9. Affinity Propagation Demo1学习

    利用AP算法进行聚类: 首先导入需要的包: from sklearn.cluster import AffinityPropagation from sklearn import metrics fr ...

  10. ajax jsonp跨域 【转】

    跨域的基本原理:    JSONP跨域GET请求是一个常用的解决方案,    JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的 ...