javascript

最新推荐文章于 2025-02-25 21:40:51 发布

置顶 artemisrj

最新推荐文章于 2025-02-25 21:40:51 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/artemisrj/article/details/50958627

Javascript 专栏收录该内容

49 篇文章

订阅专栏

本文详细介绍了JavaScript的基础语法、数组、字符串等基本概念，并深入探讨了函数、对象、原型等高级特性，同时还覆盖了DOM操作、JSON处理及模块化开发等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide
ES6标准 http://es6.ruanyifeng.com/#README
mdn https://developer.mozilla.org/en-US/docs/Web/JavaScript/

自建对象

标注自建对象

Math

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
求最大值

Math.max(10, 20);   //  20
Math.max(-10, -20); // -10
Math.max(-10, 20);  //  20

基础语法

变量相关

布尔判断(小写的)

true 和false

元素未定义的判断（）

if(typeof(sentiment)!="undefined"){}

强制字符串转数字，int

parseInt(stringnum);

数组

http://www.w3school.com.cn/jsref/jsref_obj_array.asp
数组初始化和添加元素

var wordarray=[];
wordarray.push(obj);

遍历

array.forEach(function(value){ //处理})  //(ES 5)
array.forEach(function(value,i,a){a[i]=value+1;//每个元素自加1})
//value是数组之中的一个元素，i是序号，a是数组
//jquery
$(".class").each(function(index){ var color=$(this).attr("color"); })

数组切割,有两个，slice返回一个新的数组，splice在原来的数组上进行删除和增加。

array.slice(beginInt,endInt)

数组的连接 concat,新建一个数组

a = concat([1],[2])

数组的开头增加元素,修改原来的数组跟push相对应

arrayObject.unshift(newelement1,newelement2,....,newelementX)

数组的排序数组返回0,1,-1!!!!!

array=[1,2,3,4];
array.sort(function(a,b){return a>b?1:-1;})
//[1, 2, 3, 4]
array.sort(function(a,b){return a>b?-1:1;})
//[4, 3, 2, 1]
如果是字母的
a = "HelloWorld"
a.split('').sort().join('')
//"HWdellloor"

数组的过滤

filtedData=a.filter(function(x){return x>3;});
//返回了大于3的过滤数组

判断在不在数组里面

//indexOf有IE不兼容的问题
array.indexOf(value)
if (!Array.indexOf) {
    Array.prototype.indexOf = function (obj) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == obj) {
                return i;
            }
        }
        return -1;
    }
}

// http://blog.youkuaiyun.com/jumtre/article/details/41893779 这个博客有几种方案

多维数组

var a=[];
a[0]=new Array();

删除数组中的元素

delete arrary[3]
//这种方式删除了之后是稀疏数组保留序号，数组长度不变

array.splice(i,n);
//删除从i开始的n个元素，返回被删除的元素
//这个删除之后，数组的长度会变

array.shift()
//删除数组的第一个元素'

array.pop()
//删除数组的最后一个元素

ES5 的方法：
forEach (js v1.6)

array.forEach(function(value,i,a){a[i]=value+1;//每个元素自加1})

map (js v1.6)

var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item,index,array) {
  return item * item;
});
alert(arrayOfSquares); // 1, 4, 9, 16

filter (js v1.6)
some (js v1.6)
every (js v1.6)
indexOf (js v1.6)
lastIndexOf (js v1.6)
reduce (js v1.8)
reduceRight (js v1.8)

字符串

字符串查找


if(key.indexOf('c')>0){
    continue;
}
//如果key这个字符串中有c这个串，那么继续

强制转化成数字，http://blog.youkuaiyun.com/yf505261213/article/details/17374647
parseInt(a);
查看数据类型
typeof(data);

正则 RegExp

mdn RegExp

正则生成对象

/ab+c/i;
new RegExp('ab+c', 'i');
new RegExp(/ab+c/, 'i');

正则的转义

var re = /\w+/;
var re = new RegExp('\\w+');

正则的测试

function checknum(value) {
    var Regx = /^[A-Za-z -]*$/;
    if (Regx.test(value)) {
        return true;
    }
    else {
        return false;
    }
}
//正则判断是不是由字母，空格和-组成

字典 Map

mdn Map
其实早期Js里面没有字典的定义，字典的用法其实就是对象的用法
然后键-值组合就是对象的属性组合。后来我竟然发现ES6加入了map,欢呼~
map的和对象的键值对的区别是，对象的键只能是字符串，而map可以是各种数据类型。

//ES6
var m = new Map();
var o = {p: "Hello World"};

m.set(o, "content")
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

下面的是以前传统javascript的实现

var dic={} //var dic=[]
dic["key"]=value
//遍历
for(var key in dic){
  var value=dic[key];
}

判断某个元素在不在字典里面

if(dic[key]){
 //在字典里面
}
if(typeof(clickedWords[wordsText)=="undefined"){

}
//《可维护的Js》说第一种不好

遍历对象所有属性

if( key in dic){

}

删除键值

delete array["key"];

函数

arguments属性，是函数收到的实参

// 求圆形面积,矩形面积, 三角形面积
function area () {
　　if(arguments.length == 1) {搜索
    　　alert(3.14 * arguments[0] * arguments[0]);
　　} else if(arguments.length == 2) {
    　　alert(arguments[0] * arguments[1]);
　　} else if(arguments.length == 3) {
    　　alert(arguments[0] + arguments[1] + arguments[2]);
　　} else {
    　　return null;
　　}
}
area(10,20,30);

对象

在javascript中，一个对象就是任何无序键值对的集合,如果它不是一个主数据类型(undefined，null，boolean，number，or string)，那它就是一个对象

原型

原型对象(注:也就是某个对象的原型所引用的对象)的属性一旦定义，就可以被多个引用它的实例所继承(注:即这些实例对象的原型所指向的就是这个原型对象)
获取对象的原型

var a = {};

//Firefox 3.6 and Chrome 5
 Object.getPrototypeOf(a);
//[object Object]

//Firefox 3.6, Chrome 5 and Safari 4
a.__proto__;
//[object Object]

//all browsers
 a.constructor.prototype;
//[object Object]

var obj={};
obj.text=key;
//obj["text"]=key; //效果相同
obj.weight=wordfre[key];

构造对象

function myforce(nodes,links){
    this.nodes=nodes;
    this.links=links;
}

a = new myforce("node", "link");
//or
a= myforce("node", "link");
//相互的区别     前者的this是新生成的对象，后者的this指向全局变量

myforce.prototype.init=function(){
}

其他

日期

Date对象的问题

var date=new Date("2001-1-1");
date.setDate()//设置日期的时候从1开始
date.setMonth();//设置月份的时候从0开始，而且超过11会自动转入下一年

JSON

加载数据，花了半天加载数据，发现问题也很坑爹。

字符串转数组

array=JSON.parse(str[,retrivel]);
$.parseJSON(str);//也是一种从字符串转数组的方法。

数组转json 字符串

str=JSON.stringify(array)

d3加载本地json文件，用来测试可视化

d3.json("../data4.json", function(error, all_data) {
    dealwith(all_data);
})

http://blog.youkuaiyun.com/lowkeysk/article/details/8175195
$.getJSON()加载数据没反应的问题，也没有报错，最后发现是因为相对路径和绝对路径的问题，要用相对路径。

Dom操作

节点的选择

选取节点

var selector="#id";
var selector2=".cc";
document.querySelector(selector);//原生态
document.querySelectorAll(selector2);
document.getElementById("id");
$(selector);//jquery

获得某个节点的子节点

//var cn=ele.childNodes; 这个方法能够弄到text也就是空白
var cn=ele.children;

对节点的内容进行提取

//<div>    cc<b>lala</b>   <div>
ele.innerHTML
 //提取所有的html:cc<b>lala</b>

ele.innerText //提取所有的文本，忽略html:cc

$(".class").each(function(index){ var color=$(this).attr("color"); })
//遍历每个类为class的元素

$.each的用法
http://www.cnblogs.com/mabelstyle/archive/2013/02/19/2917260.html

$.each(options,function(){
})

如果要在遍历的时候删除数组元素，应当倒序遍历
或者在遍历的时候新建一个数组，而不是在原数组上进行改变。

下面的这个讲了python和js互相传数据的，
Ajax，python数据库，cgi，

节点的控制

//jquery对于节点的控制啥的比较顺手，
$.("button").empty();
//清除节点里面的 内容

//d3
d3.select("div")
.append("#subdiv")
.attr("width",w);

属性：
获得某个节点的classname
ele.className
获取某个节点的属性

$(ele).attr("class","className");
function checknum(value) {
        var Regx = /^[A-Za-z -]*$/;
        if (Regx.test(value)) {
            return true;
        }
        else {
            return false;
        }
    }
//正则判断是不是由字母，空格和-组成

css的处理
删除某个属性
$(“ele”).attr(“color”,”“);

节点内容。
$(“div”).text(); 获取中间的文本，不包括html标签；$ (“div”).html(); 获取中间的所有内容。

节点滚动条设置
http://www.w3school.com.cn/jquery/css_scrolltop.asp

$(".btn1").click(function(){
  $("div").scrollTop(100);
});

//数字代表滚动的数值

checkbox,用来判断复选框有没有被选中，之前看到有attr(“checked”)的，表示不行。
$(this).is(‘:checked’))

交互

jquery 的若干时间
http://www.w3school.com.cn/jquery/jquery_ref_events.asp

鼠标的移入移出，用来做tip
ele.mouseenter(function(){});

ele.mouseout(function(){});

浏览器对象

window
打开新窗口

window.open("http://www.imooc.com","_blank","width=600,height=400,top=100,left=0")

模块化

var module1 = ( function (mod){
　　　　//...
　　　　return mod;
　　})(window.module1 || {});

其他
：