JS NOTE

192 阅读9分钟

ARRAY

Array.concat()

会将参数衔接到array中得到一个新数组并返回,不会修改原array;

如果传入的某个参数是数组,则会将该数组的元素衔接进去

var a=[1,2,3]

a.concat(4,5); //返回[1,2,3,4,5]

a.concat([4,5]); //返回[1,2,3,4,5]

a.concat(4,[5,[6,7]]) //返回[1,2,3,4,5,[6,7]]

Array.join()

将array的每一个元素转换为字符串,并通过在中间插入指定的参数字符,将其衔接起来,返回衔接好的字符串

a = new Array(1,2,3,"testing");

s = a.join("+"); //s = "1+2+3+testing"

Array.push()

将参数按顺序追加到array尾部,会直接修改原array,并返回array的新长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.push("Kiwi") //fruits=["Banana", "Orange", "Apple", "Mango", "Kiwi"];

Array.pop()

将移除array的最后一个元素,缩短数组的长度,并返回所移除元素的值;

如果数组为空,返回值是undefined

var stack=[];

stack.push(1,2); //stack:[1,2] 返回2

stack.pop(); //stack:[1] 返回2

stack.push([4,5]); //stack:[1,[4,5]] 返回2

stack.pop(); //stack:[1] 返回[4,5]

Array.reverse()

颠倒数组元素的顺序,它会在原数组中进行操作

Array.shift()

移除并返回array 的第一个元素,如果数组为空,则直接返回undefined,返回数组原来的第一个元素

Array.unshift()

将参数插入array的头部,直接修改数组本身,返回数组的新长度

Array.splice()

array.splice(start,deleteCount,value,...)

将删除从数组索引start处(包括start)开始的零个或多个元素,并用参数列表中指定的值来替换掉所删除的元素,并且将直接修改数组,且返回另一个新数组,包含所删除的元素

var a=["Banana", "Orange", "Apple", "Mango"];

a.splice(1,2); //返回["Orange", "Apple"]; a变为["Banana","Mango"];

Array.slice()

array.slice(start,end)

返回的数组包含从索引start处一直到end之间(包含start不含end)的元素,如无end,则至尾部的所有元素;

如果start为负数,则表示从数组尾部开始计算,-1为最后一个元素,以此类推

如果end为负数,则表示从数组的尾部开始计算;

slice没有修改原数组

var a =[1,2,3,4,5];

a.slice(0,3); //返回[1,2,3];

a.slice(3); //返回[4,5];

a.slice(1,-1); //返回[2,3,4]

Array.every()

array.every(function(){}); array.every(function(){},o);

用来测试数组的所有元素是否满足某些条件;会按照序号从小到大遍历元素,并对每个元素调用指定的function,如果其返回为false(或任何能转化为false的值),则会停止遍历,整体立刻返回false;如果每一次调用都返回true,或者遍历的数组为空时,则整体返回true;

[1,2,3].every(function(x){return x<5;}) //=>true;所有元素都<5

[1,2,3].every(function(x){return x<3;}) //=>false;

Array.some()

依次对数组的每个元素遍历function,如果其返回true,则会停止遍历,立刻返回true;如果每一次调用都返回false,或者数组为空时,则返回false

[1,2,3].some(function(x){return x>5}); //false;

[1,2,3].some(function(x){return x>2}); //true;

Array.map()

返回一个新数组,将array的元素传递,遍历调用function,不会改变原数组

[1,2,3].map(fucntion(x){return x*x;}); // =>[1,4,9]

Array.filter()

返回一个新数组,将array的元素传递,遍历调用function,过滤出符合的元素

[1,2,3].filter(function(x){return x>1;}); // =>[2,3]

Array.forEach()

无返回值,只是遍历数组中的每一项进行funciton调用

var a=[1,2,3];

a.forEach(function(x,i,a){a[i]++;}); // a=>[2,3,4];

Array.indexOf()

array.indexOf(value,start)

在array中查询等于value的元素,并返回找到第一个元素的序号索引,从start位置开始,如没有start,则从0开始,如果没找到匹配的,返回-1

['a','b','c'].indexOf('b'); // => 1

['a','b','c'].indexOf('d'); // => -1

['a','b','c'].indexOf('a',1); // => -1

Array.lastIndexOf()

返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索

var str="I am from runoob,welcome to runoob site.";

var n=str.lastIndexOf("runoob", 9);

document.getElementById("demo").innerHTML=n; // => -1

Array.reduce()

array.reduce(function(){},inital)

按array的前2个元素进行function调用,接下来的调用传入之前计算值和array的下一个元素;

如果传入inital,则第一次调用时,以inital为第一个值带入,array[0]为第二个值

var numbers = [15.5, 2.3];

function getSum(total, num) {

return total + Math.round(num);

}

function myFunction(item) {

document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);

}

//第一步:0+ Math.round(15.5);=>0+16=16

//第二步:16+ Math.round( 2.3);=>16+2=18

Array.reduceRight()

遍历数组是从右到左(从最大的序号到最小的)

Array.sort()

在原数组中对数组元素进行排序,排序顺序可以是字母或数字,并按升序或降序。

默认排序顺序为按字母升序。

var points = [40,100,1,5,25,10];

points.sort(function(a,b){return a-b}); //=>1,5,10,25,40,100

points.sort(function(a,b){return b-a}); //=>100,40,25,10,5,1

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort(); //=>Apple,Banana,Mango,Orange

Array.toString()

将数组转化成字符串,并返回该字符串

Array.toLocaleString();

将数组转化成本地化字符串

var d = new Date();

d.toLocaleString(); //=>2019/6/26 下午5:13:06

d.toString(); //=>Wed Jun 26 2019 17:13:32 GMT+0800 (中国标准时间)



STRING

string.slice()

stringObject.slice(start,end) //起始下标(不包含开始)和结束下标,负数则从后往前

提取字符串的某个部分,并以新的字符串返回被提取的部分

var str="Hello happy world!"

document.write(str.slice(6)) //=>happy world!

document.write(str.slice(6,11)) //=>happy

string.split()

stringObject.split(separator,howmany) 返回的是数组!

//字符串或正则表达式;指定返回的数组的最大长度

var str="How are you doing today?"

document.write(str.split(" ") + "<br />") //How,are,you,doing,today?

document.write(str.split("") + "<br />") //H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

document.write(str.split(" ",3)) //How,are,you

"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]

"|a|b|c".split("|") //将返回["", "a", "b", "c"]

string.substr()

stringObject.substr(start,length) //起始下标(不包含开始);字符串的字符数

var str="Hello world!"

document.write(str.substr(3)) //lo world!

document.write(str.substr(3,7)) //lo worl

string.substring();

stringObject.substring(start,stop) //起始下标(不包含开始);结束下标

var str="Hello world!"

document.write(str.substring(3)) //lo world!

document.write(str.substring(3,7)) //lo w

string.concat()

stringObject.concat(stringX,stringX,...,stringX)

连接两个或多个字符串

var str1="Hello"

var str2="world!"

document.write(str1.concat(str2)) //=>Helloworld!

string.indexOf()

stringObject.indexOf(searchvalue,fromindex) //检索的字符串值 ;开始检索的位置

var str="Hello world!"

document.write(str.indexOf("Hello")) //=>0

string.lastIndexOf()

从后往前搜

string.match()

在字符串内检索指定的值,或找到一个或多个正则表达式的匹配

var str="Hello world!"

document.write(str.match("world")) //=>world

document.write(str.match("World") ) //=>worldnull

var str="1 plus 2 equal 3"

document.write(str.match(/\d+/g)) //=>1,2,3

string.replace(regexp/substr,replacement)

var str="Visit Microsoft!"

document.write(str.replace(/Microsoft/, "W3School")) //=>Visit W3School!

string.serach()

用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串

var str="Visit W3School!"

document.write(str.search(/W3School/)) //=>6

string.chartAt()

stringObject.charAt(index) //index是字符在字符串中的下标。

var str="Hello world!"

document.write(str.charAt(1)) //=>e

string.toString()

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.toString()) //"George,John,Thomas"

String(abc)

有些值,如undefined和null 无法使用.toString();

故使用该API;

string.valueOf()

返回该原始值

var d=new Date();

var n=d.valueOf(); //1562057107221

string.sub()

字符串显示为下标

string.sup()

字符串显示为上标

string.small()

小字号显示字符串

string.big()

大字号显示字符串

string.strike()

删除线显示字符串

toLocaleLowerCase()

把字符串转换为小写

toLocaleUpperCase()

把字符串转换为大写

string.charCodeAt()

stringObject.charCodeAt(index)

方法可返回指定位置的字符的 Unicode 编码

var str="Hello world!"

document.write(str.charCodeAt(1)) //=>101

string.fixed()

把字符串显示为打字机字体

string.fontcolor(color)

按照指定的颜色来显示字符串

string.fontcolor(color)

使用指定的尺寸来显示字符串

string.fromCharCode(72,69,76,76,79)

接受一个指定的 Unicode 值,然后返回一个字符串

string.italics()

用斜体显示字符串

string.link()

将字符串显示为链接




JSBasic

对象篇

创建对象

var obj=new Object();

obj.name = RAY;

...

变量篇

变量命名:

由字母、下划线、数字、$组成;

不能是关键字和保留字;

区分大小写

闭包

有权访问另一个函数作用域中的变量的函数。多见于在一个函数内部创建另一个函数。

JS基础

目的&现在:

js最开始是为了判断客户端的输入,如:对传空的参数进行判断,为了减少服务器的压力;

如今:特效、异步交互、web&移动端、客户端nodejs等

组成:

ECMAscript (js语法规范),BOM(js操作浏览器API),DOM(js操作网页元素API)

基本知识

1.var一个变量,内存里的栈则将会保存这个基本类型=>变量的值。

2.js是一种弱类型的语言

3.JavaScript的数据类型有:

简单(基本)类型:Number、String、Boolean、undefiend、null

复杂(引用):Oject、Array、Date等

4.typeof x => typeof关键字用来查看x的类型是什么;

5.NaN =>非数值类型

isNaN(x):任何不能被转换为数值的值都会导致此函数返回true;

6.转义符

\n换行 \t制表缩进 \b空格 \r回车 \\斜杠

var str="hello \"itcast\" ";

7.因为字符串不可变性,for循环对普通类型,基本字符串的不断操作,会不断开辟内存栈里的内存空间,故尽量使用数组;

8.空字符串,0,NaN,null,undefined 在boolen值转换中都会转换成false;

“0” 这是字符串 是true;

var msg; //此时msg为undefined;

if(msg){ alert ("true")}else{alert("false")}

9.转换成字符串类型:tostring(“123”) String(abc) 或者用 + 拼接字符串;

eg: var str=""+18; //"18"

把字符串转换成数字类型:

Number("123") 或者parsetInt("123") 【转换成整数】或者 parseFloat(“123”)【浮点数】

转换成布尔类型:隐式转换:(!abc) ,(!!abc) ,(abc)

Boolen("123");

10.数字运算符 %=》 取余

++a;先a=a+1(a已重新赋值) 表达式返回a的值(a重新赋值)

a++;先返回表达式的值a(返回的是原之前的a)

再a = a+1:(a重新再赋值)

11.逻辑运算符 &&:与 有一个为false,则返回false

|| :或 有一个true,则返回true

!: 取反

短路运算符是因为 && 第一个满足,为false,则不执行,返回false

|| 第一个满足,为true,则不执行返回true

额外:var b ="abc" && "bcd"; 如果2个操作数,有一个为false,则返回这个数;

如果都是true,返回第二个;

var b = "abc" || undefined; 返回true的那个值,

12.=== 全等是类型都等于才可以

13.switch里的case用的是全等;不写break则会把匹配到语句,以及下面的语句也执行了

switch(a){

case x:

console.log(x);

case y:

conosle.log(y);

default :

console.log(haha);

break;

}

14.三目运算符 var sex=1; sex=sex ===1?“男”:“女” (true :false)

15.break:在某种条件下,中断循环

continue:符合某种条件下,跳过该序,循环下一个