js基礎(chǔ)

js 筆記

javaScript的歷史

java和javaScript的關(guān)系

JavaScript和Java是兩種不一樣的語言，但是它們之間存在聯(lián)系。

JavaScript的基本語法和對象體系仗岖，是模仿Java而設(shè)計(jì)的。但是惭蟋，JavaScript沒有采用Java的靜態(tài)類型廉嚼，java需要編譯器編譯運(yùn)行。

javaScript與ECMAScript的關(guān)系

ECMAScript 是一套語言標(biāo)準(zhǔn)辅柴，包含：

javascript
jscript
actionscript

javaScript與ECMAScript的區(qū)別

ECMA是javascript的標(biāo)準(zhǔn)箩溃，javascript是ECMA的實(shí)現(xiàn)瞭吃。

js代碼引入

使用內(nèi)嵌方式引入js代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <!-- 內(nèi)聯(lián)引用 -->
  <script>
  var name='張三';
  </script>
</head>

外聯(lián)方式引入代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <!-- 外聯(lián)引用 -->
  <script src="js/main.js"></script>
</head>
<body>

當(dāng)script標(biāo)簽和link標(biāo)簽同時(shí)出現(xiàn)在head區(qū)域，那建議script標(biāo)簽寫在link標(biāo)簽的后面涣旨，這樣以保證樣式優(yōu)先加載歪架，不會因?yàn)閖s代碼執(zhí)行阻塞頁面渲染。

如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/main.js"></script>
</head>
<body>

根據(jù)YUI前端性能小組建議script標(biāo)簽放置在</body>的前面最佳霹陡。

如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- 外聯(lián)的方式引用 -->
  <script src="js/main.js"></script>

</body>
</html>

js注釋

單行注釋 //

<script>
//注釋1
//注釋2
//注釋3
var name='張三';
</script>

多行注釋

<script>
/*
注釋1
注釋2
注釋3
*/
var name='張三';
</script>

優(yōu)先考慮單行注釋和蚪，因?yàn)槎嘈凶⑨層锌赡軙斐烧Z法錯(cuò)誤。

語句和表達(dá)式

語句和表達(dá)式的區(qū)別

語句指一個(gè)為了得到返回值的計(jì)算式烹棉。語句和表達(dá)式的區(qū)別在于惠呼，前者主要為了進(jìn)行某種操作，一般情況下不需要返回值峦耘；后者則是為了得到返回值，一定會返回一個(gè)值旅薄。

js代碼通常是以英文狀態(tài)分號結(jié)束;
js代碼會自動過濾字符之間空格辅髓、換行、縮進(jìn)
js代碼嚴(yán)格區(qū)分大小寫

變量

變量是對值的引用少梁，變量就是為“值”起名洛口，然后引用這個(gè)名字。

var sum = 1+3*10;
alert(sum);//警告框輸出
document.write(sum);//文檔輸出
console.log(sum);//控制臺輸出凯沪，調(diào)試代碼

變量命名規(guī)則

聲明變量使用關(guān)鍵字var第焰，使用此關(guān)鍵字聲明的變量沒有作用域。

如果想要有作用域妨马，可以使用es6種的let或const這兩個(gè)關(guān)鍵字挺举。

聲明一個(gè)變量，一次都沒有給它賦值烘跺，那么它的值是未定義undefined

單個(gè)逐行聲明

var a = 1;
var b = '您好';
var c = 20;

多個(gè)一次聲明

var a = 1,
    b = '您好',
    c = 20;

var變量會自動提升

console.log(a);//undefined
var a = 10;

// 以上代碼變量會自動提升湘纵，相當(dāng)于下面的代碼
var a;
console.log(a);
a = 10;

仔細(xì)理解一下代碼的區(qū)別

//會提升
console.log(a);
var a = 10;

//會報(bào)錯(cuò)，因?yàn)闆]有var關(guān)鍵字
console.log(a);
a = 10;

變量命名要求

語法

var 變量名 = 值;

變量名滤淳，以字母梧喷、下劃線、 $或中文開頭脖咐，后面允許使用字母铺敌、數(shù)字、中文屁擅。特殊符號僅限`_$ `偿凭，變量字符之間不要存在空格。

變量命名不能使用(保留字)關(guān)鍵字 if煤蹭、else笔喉、break取视、with等等

變量命名嚴(yán)格區(qū)分大小寫

// 錯(cuò)誤的命名
var 1a = 10;
var a 1= 20;
var %a = 30;
var a,3 = 20;
var var = 10;
var if = 20;

//正確的命名
var a1 = 20;
var A1 = 30;
var _abc = 10;
var $ab = 20;
var 姓名 = '張三';

變量命名風(fēng)格

Camel Case 小駝峰式命名法

var fullName = '張亮';

Pascal Case 大駝峰式命名法

var FullName = '張亮';

常量命名，通常全部大寫

//比如圓周率就是典型的常量
var PI = 3.14;

條件語句

`if`條件語句

if 單條件語句

var age = 30;
if ( age >= 18) { 
  console.log( '您已經(jīng)成年常挚！' );
}

// 條件語句也可以使用下面的風(fēng)格
var age = 30;
if ( age >= 18)
{ 
  console.log( '您已經(jīng)成年作谭！' );
}

//簡寫，僅限條件語句中只有一條語句時(shí)成立奄毡。
var age = 30;
if ( age >= 18) console.log( '您已經(jīng)成年折欠！' );

if else 雙條件語句

var age = 30;
if ( age >= 18 ) { 
  console.log( '您已經(jīng)成年！' );
}else{
  console.log( '未成年吼过！' );
}

//簡寫锐秦，僅限條件語句中只有一條語句時(shí)成立，不推薦這樣寫盗忱。
var age = 12;
if ( age >= 18)
  console.log( '您已經(jīng)成年酱床！' );
else
  console.log( '未成年！' );

if else if else 多條件語句

&& 并且
||或者

// < 60 不及格
// >= 60 && <70 及格
// >= 70 && <80 良好
// >= 80 && <90 優(yōu)秀
// >= 90 極好

var score = prompt('請輸入你的分?jǐn)?shù)：');

if ( score < 60 ){
  console.log('不及格');
}else if( score >= 60 && score < 70 ){
  console.log('及格');
}else if( score >= 70 && score < 80 ){
  console.log('良好');
}else if( score >= 80 && score < 90 ){
  console.log('優(yōu)秀');
}else{
  console.log('極好');
}

`switch`條件語句

語法

switch( 表達(dá)式 ){
  case 值1:
    //跳出條件語句
    break;
  case 值2:
    //跳出條件語句
    break;
  case 值3:
    //跳出條件語句
    break;
  default:
    //輸出默認(rèn)結(jié)果
}

注意：switch執(zhí)行值是嚴(yán)格匹配的趟佃，也就是說 5 不等于 '5'

示例

var day = new Date().getDay();

switch( day ){
  case 0:
    console.log('星期日');
    break;
  case 1:
    console.log('星期一');
    break;
  case 2:
    console.log('星期二');
    break;
  case 3:
    console.log('星期三');
    break;
  case 4:
    console.log('星期四');
    break;
  case 5:
    console.log('星期五');
    break;
  case 6:
    console.log('星期六');
    break;
  default:
    console.log('無效的值');
}

循環(huán)語句

for循環(huán)語句

語法：

for ( 初始值;條件表達(dá)式;變量 ) {
  // 循環(huán)體內(nèi)語句
}

示例

for ( var i = 0;i<100;i++ ) {
  console.log(i);
}

循環(huán)也可以把括號中的語句提出到外面扇谣，或者置入循環(huán)體中

//初始語句外置
var i = 0;
for ( ;i<100;i++ ) {
  console.log(i);
}

//變量語句內(nèi)置
for ( var i = 0;i<100; ) {
  console.log(i);
  i++;
}

for循環(huán)支持嵌套循環(huán)

for{
  for(){
  }
}

示例

//1. 循環(huán)輸出 0-99
for ( var i = 0;i<100; i++  ) {
  console.log(i);
}

//2. 循環(huán)輸出 99-0
for( var i=99; i >= 0; i-- ){
  console.log( i ); 
}

//3. 循環(huán)輸出 0-100的偶數(shù)  10 % 3 == 1 , 10 % 5 == 0 % 表示 取余數(shù)
for ( var i = 0;i<100; i++  ) {
  if(  i % 2 == 0 ){
    console.log(i);
  }
}


//4. 循環(huán)輸出 0- 100 的總和
var sum = 0;
for ( var i = 0;i<=100; i++  ) {
  sum = sum + i;//累積
}
console.log( sum );

//5. 九九乘法表
for( var i=1; i<=9; i++ ){

  for( var j = 1; j <= i; j++ ){
    document.write( j, '*', i, '=', i*j,'&nbsp;&nbsp;&nbsp;' );
  }
  document.write('<br>');

}

break 和 continue關(guān)鍵字

while循環(huán)語句

語法

while( 條件表達(dá)式 ){
  //循環(huán)體語句
  //變量
}

示例

var i=0;
while(i<100){
  console.log(i);
  i++;
}

var i=99;
while(i>=0){
  console.log(i);
  i--;
}

break和continue可以用循環(huán)語句中，用來跳出循環(huán)

var i=0;
while(i<100){
  i++;//放前面闲昭，不然會死循環(huán)
  if(i==50) continue;
  console.log(i);
}

for和while語句可以混合使用

do while循環(huán)語句

do while 無論條件真或假罐寨，至少執(zhí)行一遍。

語法

do {
  // 循環(huán)體語句
} while ( 條件表達(dá)式 );

示例

var i=0;
do {
  console.log(i);//0
} while ( i > 10 );

js數(shù)據(jù)類型

數(shù)值 Number

js只有一種數(shù)值類型序矩，浮點(diǎn)類型鸯绿。

var age = 20; //正整型
var price = 34.2; //浮點(diǎn)型
var price = -30; //有符號整型

科學(xué)計(jì)數(shù)法

123e3 // 123000
123e-3 // 0.123
-3.1E+12
.1e-23

正零和負(fù)零

-0 === +0 // true
0 === -0 // true
0 === +0 // true

NaN 表示非數(shù)字，它的數(shù)據(jù)類型是數(shù)值類型

注意：NaN不等自己

NaN == NaN //false

字符串 String

通常用雙引號或單引號包裹的字符簸淀，我們稱為字符串

單引號里面可以使用雙引號瓶蝴，雙引號里面可以使用單引號

var name = "張三";
var name = '張三';

//雙引號中嵌套使用單引號
var str = "I'm a boy";

//單引號中嵌套使用雙引號
var str = '我喜歡吃"蘋果"';

//使用轉(zhuǎn)義符，可以安全的輸出租幕。
var str = 'I\'m a boy';
var str = "我喜歡吃\"蘋果\"";

推薦：優(yōu)先考慮使用單引號

字符串和變量拼接

字符串和變量用加號+連接：

變量在開頭囊蓝，只需要右加號

var name = '張三';
var str = name + '是我！';

變量在中間令蛉，需要左右兩個(gè)加號

var name = '張三';
var str =  '我是' + name + '本人聚霜。';

變量在末尾，只需要左加號

var name = '張三';
var str =  '我是' + name;

示例

var name = '張三';
var age = 19;
var xueli = '本科';
console.log('我叫' + name +'珠叔，今年'+age+'歲蝎宇。\n 我的學(xué)歷是'+xueli);

字符串代碼不能強(qiáng)制折行，會報(bào)錯(cuò)祷安，解決方案如下：

字符串拼接換行（差姥芥，書寫麻煩）
末尾加轉(zhuǎn)義符換行（良好）
es6字符串模板（好用，但要考慮兼容性）

<script>
var name = '張三';
var age = 20;
var xueli = '本科';
var str = `<table border="1">
  <tr>
    <th>${name}</th>
    <th>${age}</th>
    <th>${xueli}</th>
  </tr>
</table>`;
document.write( str );
</script>

布爾類型 Boolean

布爾類型只有兩個(gè)值汇鞭，true 真和 false 假

布爾相關(guān)運(yùn)算符

&&：并且凉唐，和庸追，與的意思
||: 或者的意思
!：取反，否定台囱，排除的意思
===：嚴(yán)格等于
==：等于
!==：嚴(yán)格不等于
!=：不等于
>：大于
>=：大于或等于
<: 小于
<=：小于或等于

== 和 === 的區(qū)別

==它會轉(zhuǎn)換兩端的數(shù)據(jù)類型淡溯，以保持相等。
===它不會轉(zhuǎn)換兩端的數(shù)據(jù)類型簿训，嚴(yán)格等于咱娶。

console.log( 1 == '1' );//true 隱式轉(zhuǎn)換
console.log( 1 === '1' );//false

js有那些值會自動轉(zhuǎn)換為假？

false 假值
0 數(shù)值零
'' 空字符串
null 空
undefined 未定義
NaN 非數(shù)字

注意：[]和{} 空數(shù)組和空對象都是真值

字符串中注意强品，只要有值膘侮，都是為真值，比如：'0'的榛、' '琼了、'false'都是真值

未定義 undefined

表示一個(gè)變量聲明了，但是從來沒有賦值

空 null

表示變量為空,null 它本質(zhì)上是一個(gè)對象夫晌。

undefined 和 null的區(qū)別：

undefined 表示聲明變量表伦，未賦值
null 表示變量值為空
undefined 是基本數(shù)據(jù)類型
null 通過typeof檢測它是對象類型

函數(shù) function

函數(shù)本身也是一個(gè)值，函數(shù)允許將多行代碼封裝起來慷丽，然后通過函數(shù)名調(diào)用，方便代碼組織和管理鳄哭。

function add( c, d){
  console.log(c+d );
}
add( 1, 3 );

數(shù)組 array

數(shù)組是一種集合要糊，存入各種數(shù)據(jù)類型，可以很方便存取操作妆丘，數(shù)組是有序的锄俄。

var arr = ['蘋果','桔子'];
console.log( arr[1] );

對象 object

對象是變量的集合，對象是無序的勺拣。

var person = {
  age: 20,
  name: '張三',
  chengnian: true,
  habby: ['籃球','美食']

}
console.log( person.habby[1] , person['habby'][1] );

符號 symbol

es6 新增的數(shù)據(jù)類型奶赠，表示唯一值

數(shù)據(jù)類型總結(jié)

js基本類型有那些？

數(shù)值
字符串
布爾
對象
undefined

js 有那些數(shù)據(jù)類型药有？

數(shù)值
字符串
布爾
對象
未定義 undefined
符號 symbol
空 null

typeof 檢測數(shù)據(jù)類型

請問typeof能檢測的數(shù)據(jù)類型有那些毅戈？

number
string
boolean
object
undefined
function
symbol

var a = 10;
var b = '字符串';
var c = true;
var d = [];
var e = {};
var f = Symbol();
var h = null;
var i = undefined;
var g = function(){};
var j = NaN;
var k = '';

console.log( typeof a); // number
console.log( typeof b); // string
console.log( typeof c); // boolean
console.log( typeof d); // object
console.log( typeof e); // object
console.log( typeof f); // symbol
console.log( typeof h); // object
console.log( typeof i); // undefined
console.log( typeof g); // function
console.log( typeof j); // number
console.log( typeof k); // string

因?yàn)?code>typeof檢查對象和數(shù)組返回都是object，如何區(qū)分愤惰？

var o = {};//對象
var a = [];//數(shù)組

//方法1
o instanceof Array // false
a instanceof Array // true

//方法2
Array.isArray( o ) // false
Array.isArray( a ) // true

//方法3

數(shù)值類型

與數(shù)值相關(guān)的全局方法：

parseInt() 將字符串轉(zhuǎn)換數(shù)值整型

var a = '100px';
var b = '100 200';
var c = '￥100';
var d = '';
var e = '2e3';

console.log( parseInt(a) );// 100
console.log( parseInt(b) );// 100
console.log( parseInt(c) );// NaN
console.log( parseInt(d) );// NaN
console.log( parseInt(e) );// 2

parseFloat() 將字符串轉(zhuǎn)換數(shù)值浮點(diǎn)型
number() 將字符串轉(zhuǎn)換為數(shù)值

var a = '100px';
var b = '100 200';
var c = '￥100';
var d = '';
var e = '2e3';
var f = '200.67';

console.log( Number(a) ); // NaN
console.log( Number(b) ); // NaN
console.log( Number(c) ); // NaN
console.log( Number(d) ); // 0
console.log( Number(e) ); // 2000
console.log( Number(f) ); // 200.67

isNaN：判斷是否是非數(shù)字苇经，返回真與假

isNaN 它會隱性的將字符串轉(zhuǎn)為數(shù)字，然后判斷它是否是非數(shù)字

var a = '10';
var b = '十';
console.log( isNaN(a) );//false
console.log( isNaN(b) );//true

數(shù)值實(shí)例的方法

toFixed 將數(shù)值保留指定的小數(shù)位數(shù)宦言，支持四舍五入扇单。

var price = 100.679;
console.log( (200).toFixed(2) );  //正整型要加括號，不然會報(bào)錯(cuò)
console.log( 120.679.toFixed(2) ); //浮點(diǎn)不需要
console.log( '120.679'.toFixed(2) ); //報(bào)錯(cuò)奠旺，因?yàn)閠oFixed是數(shù)值的方法蜘澜，不是字符串的方法
console.log( price.toFixed(2) );//100.68

給數(shù)值實(shí)例擴(kuò)展方法

//擴(kuò)展方法1
Number.prototype.CNY = function( len ){
  return '￥'+this.toFixed( len );
}
var num = 100;
console.log( num.CNY( 2 ) );


//擴(kuò)展方法2
Number.prototype.add = function( n ){
  return this + n;
}
var a = 1;
console.log( a.add(2).add(5) );

隱式數(shù)據(jù)類型轉(zhuǎn)換有那些施流？

console.log( 1 == '1' );  //true
console.log( 1 - '1' );  //0
console.log( 2 - true ); //1
console.log( 2 - [] ); //2
console.log( 2 - '' ); //2

字符串類型

字符串就是零個(gè)或多個(gè)排在一起的字符，放在單引號或雙引號之中鄙信。

var a = 張三; //錯(cuò)誤瞪醋，必須加引號
var a = '張三';

轉(zhuǎn)義符

常用轉(zhuǎn)義符

\n：換行符
\r：回車鍵
\'：單引號
\"：雙引號
\\：反斜杠
\t：制表符

字符串與數(shù)組

數(shù)組和字符串都有長度，也有下標(biāo)（索引值）
數(shù)組的長度可讀寫扮碧，而字符串只可讀趟章，不可寫。
字符串不可以通過索引值方式改變成員的值慎王。
字符串是類數(shù)組對象

//數(shù)組
var arr = ['你','今','天','心','情'];

//類數(shù)組對象
var obj = {
  0: '你',
  1: '今',
  2: '天',
  3: '心',
  4: '情',
  length: 5
}

//類數(shù)組對象
var str = '你今天心情';

console.log( arr[1], obj[1] );

arr.length = 10;
obj.length = 10;

console.log( arr.length, obj.length );


var arr = ['你','今','天','心','情'];
var str = '你今天心情';
arr[1] = '昨';//可以寫入
str[1] = '昨';//字符串不可以寫入

console.log( arr , str );

Base64 轉(zhuǎn)碼

var str = 'Hello World!';

//將ASCII編碼轉(zhuǎn)換為base64編碼
console.log( btoa( str ) );//SGVsbG8gV29ybGQh

var base = 'SGVsbG8gV29ybGQh';

//將base64編碼轉(zhuǎn)換為ASCII編碼
console.log( atob( base ) );//Hello World!

中文不能直接轉(zhuǎn)為base64編碼

//將中文轉(zhuǎn)換為ASCII編碼
var str = encodeURIComponent('你好蚓土，世界');

//將ASCII編碼轉(zhuǎn)換為base64編碼
console.log( btoa( str ) );//JUU0JUJEJUEwJUU1JUE1JUJEJUVGJUJDJThDJUU0JUI4JTk2JUU3JTk1JThD


//將base64編碼轉(zhuǎn)換為ASCII編碼
var base = atob('JUU0JUJEJUEwJUU1JUE1JUJEJUVGJUJDJThDJUU0JUI4JTk2JUU3JTk1JThD');

//將ASCII編碼轉(zhuǎn)換為中文
console.log( decodeURIComponent( base ) );//你好，世界

我們可以封裝為兩個(gè)函數(shù)赖淤，這樣轉(zhuǎn)碼會方便多了

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

7月16日

String對象

將其他數(shù)據(jù)流類型轉(zhuǎn)換為字符串

String(true) // "true" 將布爾轉(zhuǎn)換為字符串
String(12345) // "12345" 將數(shù)字轉(zhuǎn)換為字符串
String([]) //'' 將數(shù)組轉(zhuǎn)化為字符串蜀漆，但功能很弱

String.fromCharCode

將一個(gè)或者多個(gè)unicode碼點(diǎn)轉(zhuǎn)換為好識別的字符串

String.fromCharCode() // ""
String.fromCharCode(97) // "a"
String.fromCharCode(104, 101, 108, 108, 111)
// "hello"

字符串的長度

'abc'.length

字符串長度只讀，不可寫咱旱。

String實(shí)例的方法

charAt 返回指定索引值的字符

var str='今天的天氣怎么樣确丢？';
console.log( str[0], str.charAt(0) );//今 今

charCodeAt 返回指定索引值的unicode碼點(diǎn)

'abc'.charCodeAt(1) // b 的nicode碼點(diǎn)是 98

concat 拼接字符串，類似于加號吐限。

連接過后產(chǎn)生新字符串

var a = '你好';
var b = '張三';

console.log( a + b );
console.log( a.concat(b) );
console.log( a.concat(b,'李四','王五') );

slice 從指定的位置鲜侥，分割字符串。

位置計(jì)算規(guī)則

位置從0開始計(jì)算诸典，大于等于起始位置描函，小于結(jié)束位置。
如果位置的值是負(fù)數(shù)狐粱，則倒著數(shù)舀寓，比如-1為倒數(shù)第1個(gè)，分割出一個(gè)新字符串肌蜻。
省略結(jié)束位置互墓，表示截取到末尾

語法

字符串.slice(起始位置, 結(jié)束位置);

slice小示例

var str = '你今天的心情好嗎？';

//1. 始終截取第1個(gè)字符串
console.log( str.slice(0,1) );

//2. 始終截取最后1個(gè)字符串
console.log( str.slice(-1) );

//3. 始終截取倒數(shù)3個(gè)字符
console.log( str.slice(-3) );

//4. 始終截取首尾單個(gè)字符串蒋搜。
console.log( str.slice(0,1)+str.slice(-1) );

//5. 將字符串分割指定的段數(shù)篡撵。 你今、天的豆挽、心情酸休、好嗎、祷杈？

var total = str.length; //總字符數(shù)
var perPart = 5; //每段分2個(gè)字符
var totalPart = Math.ceil(total/perPart);  //上舍入 總段數(shù)

for(var p=0;p<totalPart;p++){
  var start = p * perPart;//4
  var end = start + perPart;//6
  console.log( str.slice( start, end ) );//2 4
}

substring 分割數(shù)組

跟slice方法很相像斑司。它的第一個(gè)參數(shù)表示子字符串的開始位置，第二個(gè)位置表示結(jié)束位置。
如果省略第二個(gè)參數(shù)宿刮，則表示子字符串一直到原字符串的結(jié)束互站。

注意：substring的參數(shù)不支持負(fù)數(shù)

substr 截取字符串

語法

起始位置支持負(fù)數(shù)，如果是負(fù)數(shù)僵缺，那么倒著數(shù)胡桃，比如-1就是倒數(shù)第一個(gè)。

字符串.substr(起始位置磕潮，截取字符的長度);

var str = '你今天的心情好嗎翠胰？';
console.log(  str.slice(4,6) );//起始位置 結(jié)束位置
console.log(  str.substr(4,2) );//起始位置 截取長度

indexOf 查找字符第一次出現(xiàn)的位置(索引值)

如果指定的字符不存在，則返回-1自脯。

語法

字符串.indexOf('要查找的字符','起始位置之景，默認(rèn)是0')

示例

var str = 'xianweb@qq@.com';
var index = str.indexOf('@')+1;//8
console.log(str.indexOf('@', index));//查找第二個(gè)@

lastIndexOf 查找字符最后一次出現(xiàn)的位置(索引值)

如果指定的字符不存在，則返回-1膏潮。

var str = 'xianweb@qq@.com';
console.log(str.lastIndexOf('@') );//查找第二個(gè)@

示例

var url = 'http://www.baidu.com/product/index.html';

//1. 截取網(wǎng)址文件名部分 index.html
console.log( url.slice(url.lastIndexOf('/')+1) );

//2. 截取網(wǎng)址主機(jī)和域名部分 www.baidu.com
var index = url.indexOf('//')+2;
console.log( url.slice( index, url.indexOf('/', index )  ) );

var filename = 'images/banner.jpg';

//1. 提取出文件擴(kuò)展名 jpg
console.log( filename.slice(filename.lastIndexOf('.')+1) );

split 將字符串按指定字符轉(zhuǎn)換為數(shù)組

返回的是數(shù)組锻狗，split支持''空字符串參數(shù)，howmany數(shù)值焕参，返回所需數(shù)組最大長度轻纪。

語法

'蘋果|桔子|香蕉'.split('|', howmany);//['蘋果','桔子','香蕉']

示例

var filename = 'images/banner.jpg';
var arr = filename.split('.');
console.log(arr[arr.length-1]);

console.log( '蘋果|桔子|香蕉'.split('|', 2) );//['蘋果','桔子']

console.log('蘋果桔子'.split('') );//['蘋','果','桔','子']

toLowerCase toLocaleLowerCase 轉(zhuǎn)換小寫轉(zhuǎn)換本地小寫

toLocaleLowerCase通常是你自己在原型鏈取同名函數(shù)覆蓋，自定義自己的轉(zhuǎn)換規(guī)則

console.log( 'ASADSADW'.toLowerCase()  );//asadsadw
console.log( 'ASADSADW'.toLocaleLowerCase()  );//asadsadw

推薦使用：toLowerCase

toUpperCase toLocaleUpperCase 轉(zhuǎn)換小寫轉(zhuǎn)換本地小寫

toLocaleUpperCase通常是你自己在原型鏈取同名函數(shù)覆蓋叠纷，自定義自己的轉(zhuǎn)換規(guī)則

console.log( 'asadsadw'.toUpperCase()  );//ASADSADW
console.log( 'asadsadw'.toLocaleUpperCase()  );//ASADSADW

推薦使用：toUpperCase

repeat 將字符重復(fù)指定的次數(shù) es6

//1. 替換手機(jī)中間部分為*號
var mobile = '18512345168';

var start = mobile.slice(0,3);
var end = mobile.slice(-4);
// console.log( start + '*'.repeat(4) + end );

//2.圓點(diǎn)自動補(bǔ)齊
var arr = ['abc','abcde','ssds','wewe','sds','fgf','fgf','fgf','fgf','fgf','fgf','fgf','fgf','fgf','fgf','fgf','fgf'];

//總長度
var total = 30;

//補(bǔ)齊符
var symbol = '.';

//自動補(bǔ)齊
for(var i=0;i<arr.length;i++){
  var num = total - arr[i].length - String(i+1).length;
  console.log( arr[i] + symbol.repeat(num) + (i+1) );
}

includes 查找是否包含某個(gè)字符串 es6

返回真和假

console.log('xianweb@qq.com'.indexOf('#'));//-1
console.log('xianweb@qq.com'.indexOf('@'));//7

console.log('xianweb@qq.com'.includes('#'));//false
console.log('xianweb@qq.com'.includes('@'));//true

replace 字符串替換

不使用正則替換刻帚，只能單次，并且區(qū)分大小寫

語法

'字符串模板'.replace('被搜索的字符','用來替換的字符');

//示例
'hello'.replace('l','*');

//結(jié)果 he*lo

match涩嚣、search 都是依賴使用正則表達(dá)式替換

localeCompare 比較兩個(gè)字符的大小

字符串?dāng)?shù)字比較崇众，

返回-1，前面的字符小于后面字符
返回0缓艳，前面的字符等于后面字符
返回1，前面的字符大于后面字符

var a = '1';
var b = '2';
console.log( a.localeCompare(b) ); // -1

var c = '1';
var d = '1';
console.log( c.localeCompare(d) ); // 0

var e = '2';
var f = '1';
console.log( e.localeCompare(f) ); // 1

字母比較

var a = 'a';
var b = 'b';
console.log( a.localeCompare(b) ); // -1

var c = 'a';
var d = 'a';
console.log( c.localeCompare(d) ); // 0

var e = 'b';
var f = 'a';
console.log( e.localeCompare(f) ); // 1

注意：中文是比較是采用unicode數(shù)字碼比較看峻，不是想要的效果阶淘。

Array數(shù)組對象

定義數(shù)組

構(gòu)造函數(shù)方式定義

var arr = new Array();
arr[0] = '蘋果';
arr[1] = '桔子';
console.log( arr );

構(gòu)造函數(shù)參數(shù)賦值快速定義

var arr = new Array('蘋果','桔子');
console.log( arr );

使用中括號簡寫定義（推薦）

var arr = ['蘋果','桔子'];
console.log( arr );

數(shù)組的成員可以是任意數(shù)據(jù)類型

var arr = [ 
  1,
  true, 
  '蘋果',
  undefined,
  null, 
  ['張三'],
  function(){
    return 10;
  },
  {
    id:10
  }
];

數(shù)組的長度

數(shù)組的長度可讀可寫

數(shù)組.length

示例

var arr = [];
arr.length = 10;//寫
console.log( arr.length );//讀 10

注意：當(dāng)我們使用length設(shè)置長度，如果產(chǎn)生空位互妓，空位的值是undefined

var arr = ['a','b','c','d'];
arr.length = 2;
console.log( arr ); // ["a", "b"]
console.log( arr[100] );// 讀 undefined
console.log(arr.length );// 2

數(shù)組和數(shù)組不能直接用加號相加溪窒，這樣數(shù)組會自動轉(zhuǎn)換為字符串

var arr1 = ['a','b'];
var arr2 = ['c','d'];

//隱式轉(zhuǎn)換為字符串 ['a','b'] =>  a,b
console.log( arr1 + arr2 ); // a,bc,d

var str = '蘋果,桔子,香蕉';
var arr = str.split(','); // ['蘋果','桔子','香蕉']
console.log( arr );
console.log(  arr + '' ); // 蘋果,桔子,香蕉

當(dāng)給數(shù)組的length設(shè)置為0，那么就相當(dāng)于清空數(shù)組冯勉。

//清空數(shù)組
console.log( ['蘋果','桔子','香蕉'].length=0 );//[]

多維數(shù)組

如果數(shù)組的成員還是數(shù)組澈蚌，就形成了多維數(shù)組。

var a = ['蘋果','桔子']; //一維數(shù)組
var b = [ 
  ['蘋果','桔子'], 
  ['青菜','肉'] 
]; 
//二維數(shù)組

//數(shù)組和對象相接口灼狰，非常類似于數(shù)據(jù)庫記錄集宛瞄，類似于一個(gè)標(biāo)準(zhǔn)表格數(shù)據(jù)。
var data = [
  { id: 1, title: '標(biāo)題1', author:'張三' },
  { id: 2, title: '標(biāo)題2', author:'張三' },
  { id: 3, title: '標(biāo)題3', author:'張三' }
]

數(shù)值鍵名會自動轉(zhuǎn)換為字符串

//類數(shù)組對象
var obj = {
  0: '蘋果',
  '1': '桔子',
  length: 2
}
console.log( obj[0], obj[1], obj['1'] );

數(shù)組的讀寫刪操作

數(shù)組讀取

var arr = ['蘋果','桔子'];
console.log( arr[1] );

數(shù)組寫入新成員

var arr = ['蘋果','桔子'];
arr[2] = '香蕉'; //寫入一個(gè)成員
console.log( arr );// ["蘋果", "桔子", "香蕉"]

delete 數(shù)組刪除成員

var arr = ['蘋果','桔子','香蕉'];
delete arr[1];
console.log( arr );// ['蘋果',empty,'香蕉']

注意：delete 刪除數(shù)組成員并不會改變數(shù)組長度交胚，而只是形參一個(gè)空位份汗。

in 運(yùn)算符

檢查某個(gè)鍵名是否存在盈电，適用于對象，也適用于數(shù)組杯活。

var arr = ['蘋果','桔子','香蕉'];
console.log( 0 in arr  );//true
console.log( 5 in arr  );//false

for...in 循環(huán)和數(shù)組的遍歷

var arr = ['蘋果','桔子','香蕉'];

//for 循環(huán)
for(var i=0;i<arr.length;i++){
  console.log( arr[i] );
}

//while 循環(huán)
var i=0;
while(arr[i]){
  console.log(arr[i]);
  i++;
}

//do while 循環(huán)
var i=0;
do{
  console.log(arr[i]);
  i++;
} while( i < arr.length );

//for in 循環(huán) (不推薦)
for(var i in arr){
  console.log(arr[i]);
}

// forEach 高階函數(shù)
arr.forEach( function( a,i,arr ){
  console.log(a,i,arr);
})

2019-7-17

forEach循環(huán)

forEach 不一定是數(shù)組特有的方法不會循環(huán)空成員匆帚，比如：

var arr = [1,,,2,3,undefined];
//上面的數(shù)組用forEach循環(huán)，只會輸出1,2,3,undefined

forEach 沒有返回值旁钧，也就是內(nèi)部加return沒有返回值吸重。

類數(shù)組對象轉(zhuǎn)換為真正的數(shù)組對象

語法

var arr = Array.prototype.slice.call(類數(shù)組對象);

示例

//類數(shù)組對象
var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

//類數(shù)組轉(zhuǎn)化為真正的數(shù)組
var arr = Array.prototype.slice.call(obj);

//因?yàn)橐呀?jīng)數(shù)組了，所有使用forEach無妨
arr.forEach(function( item ){
  console.log( item );
})

因?yàn)樽址彩穷悢?shù)組歪今，同樣可以用上面的方法轉(zhuǎn)成真正的數(shù)組

var str = '今天的天氣不錯(cuò)';
var arr = Array.prototype.slice.call( str );
//輸出 ["今", "天", "的", "天", "氣", "不", "錯(cuò)"]

Array.isArray 檢測是否是數(shù)組

var arr = ['a','b'];
console.log(  Array.isArray(arr)  );//true

對象

什么是對象嚎幸？簡單說，對象就是一組“鍵值對”（key-value）的集合彤委，是一種無序的復(fù)合數(shù)據(jù)集合鞭铆。

對象是變量的集合（容器）

鍵值可以是任何數(shù)據(jù)類型

對象的屬性之間用英文逗號分割

書寫對象過程中常見問題

對象所有的鍵名都是字符串，所以加不加引號都可以焦影，因?yàn)橄到y(tǒng)內(nèi)部會轉(zhuǎn)換為字符串

es6中引入了一種數(shù)據(jù)類型车遂，叫symbol，它確保鍵名是唯一的斯辰，也可以使用symbol作為鍵名舶担。

//問題1：尾部原則上不需要加英文逗號，但現(xiàn)代瀏覽器都能忽略
var obj = {
  foo: 'Hello',
  bar: 'World',
};

//問題2：鍵名和鍵值之間是英文冒號
var obj = {
  foo= 'Hello',
  bar= 'World',
};

//問題3：屬性之間用英文逗號分割
var obj = {
  foo: 'Hello';
  bar: 'World';
};

//問題4：使用了中文的逗號
var obj = {
  foo: 'Hello'彬呻，
  bar: 'World'
};

變量是傳值傳遞衣陶，數(shù)組和對象因?yàn)槭且妙愋停运鼈兪莻髦穫鬟f

//1.變量 => 傳值傳遞
var a = 10;
var b = a;//10
a = 20;
console.log( a, b );// a = 20  b = 10

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

//2. 對象 => 傳址傳遞
var c = {
  name: '張三'
}

var d = c;

c.name = '李四';//對象寫入

console.log( c, d );
//c = { name:'李四' }
//d = { name:'李四' }

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

//3. 數(shù)組 => 傳址傳遞
var a = ['蘋果','桔子'];

var b = a;

a[1] = '香蕉';//數(shù)組寫入

console.log( a, b );
//a = ['蘋果','香蕉']
//d = ['蘋果','香蕉']

表達(dá)式還是語句闸氮？

當(dāng)對象的大括號{在首行首字母位置剪况，如下，js引擎解析會產(chǎn)生歧義蒲跨，為了避免下面的歧義译断，js規(guī)定，大括號出現(xiàn)在首行首字母位置或悲，一律認(rèn)為是語句孙咪，如果要解析為表達(dá)式，則需要用圓括號包裹對象即可巡语。

//會被認(rèn)為是語句
{
  name:'張三'
}

//會被認(rèn)為是表達(dá)式
({
  name:'張三'
})

//表達(dá)式
var obj = {
  name:'張三'
}

eval函數(shù)

eval 函數(shù)會將字符串的內(nèi)容當(dāng)成表達(dá)式解析翎蹈，注冊改函數(shù)容易引起安全隱患，和性能開銷比較大男公。

//1. eval 四則運(yùn)算
var str='1*5+5';
console.log( str,  eval( str ) );

//2. eval 直接解析變量
var a = 10;
var str = 'a=30;';
console.log( str,  eval( str ) );


//3. eval 直接解析數(shù)組引用
var a = ['蘋果','桔子'];
var str = 'a[1]';
console.log( str,  eval( str ) );

因?yàn)閑val會帶來安全問題和性能開銷比較大棍掐，通常一些框架會屏蔽此函數(shù)毅否，具體如下:

window.eval = null;

對象屬性的操作

讀取屬性

通常點(diǎn)的形式讀取

var obj = {
  name: '張三',
  'first-name': '李四',
  1: 'abc'
}
console.log(obj.name);//張三

通常中括號的形式讀取

var obj = {
  name: '張三',
  'first-name': '李四',
  1: 'abc'
}
console.log(obj['name']);//張三
console.log(obj['first-name']);//李四
console.log(obj[1]);//abc

當(dāng)鍵名是變量時(shí)寝殴，那么點(diǎn)調(diào)用的方式無效塌西，應(yīng)該使用中括號

var str = 'name';
var obj = {
  name: '張三',
  age: 20
}
str = 'age';
console.log(  obj[str] );// 20
console.log(  obj.str );//undefined，需要用[]

屬性的賦值

點(diǎn)運(yùn)算符和方括號運(yùn)算符，不僅可以用來讀取值，還可以用來賦值。

// 聲明時(shí)直接填入屬性
var person1 = {
  name: '張三',
  age: 20
}
console.log( person1 );

// 先聲明一個(gè)對象举庶，后填入屬性
var person2 = {};
person2.name = '張三';
person2['age'] = 20;

console.log( person2 );

//對象比較是比較內(nèi)存地址，不是值
console.log( person1 == person2 );//false

對象比較是比較內(nèi)存地址揩抡，如下

// 聲明時(shí)直接填入屬性
var a = {
  name: '張三',
  age: 20
}
var b = a;//b等于a相當(dāng)于b的內(nèi)存地址指向了a
console.log( a == b  ); //true

中括號包裹鍵名户侥，會起到解析為變量的作用

// 不加中括號
var str = 'name';
var a = {
  str:'張三',
  age: 20
}
console.log( a );//{ str:'張三',age:20 }

// 加中括號，會解析為變量
var str = 'name';
var a = {
  [str]:'張三',
  age: 20
}
console.log( a );//{ name:'張三',age:20 }

變量取名慎用name峦嗤，在某些情況下會產(chǎn)生沖突蕊唐。

Object.keys查看所有屬性

Object.keys方法會將數(shù)組中所有的鍵名，放入到一個(gè)新數(shù)組中烁设，返回?cái)?shù)組替梨。

當(dāng)鍵名是symbol命名時(shí)，Object.keys會跳過symbol命名屬性

var str = Symbol();
var a = {
  [str]: '張三',
  age: 20
}
var keys = Object.keys( a );
console.log( keys  );//['age']

//采用symbol數(shù)據(jù)類型命名的鍵名調(diào)用
var str = Symbol();
var a = {
  [str]: '張三',
  age: 20
}
console.log(a[str]);//張三

`delete` 命令刪除對象屬性

var str = Symbol();
var a = {
  [str]: '張三',
  age: 20
}
delete a[str];//刪除symbol類型鍵名
delete a.age;//刪除string類型鍵名
console.log( a );//{}

注意装黑，刪除一個(gè)不存在的屬性副瀑，delete不報(bào)錯(cuò)，而且返回true恋谭。

var obj = {};
console.log( delete obj.name);//true

只有一種情況糠睡，delete命令會返回false，那就是該屬性存在疚颊，且不得刪除狈孔。

//1. 創(chuàng)建新對象創(chuàng)建新屬性
var obj = Object.defineProperty( {},'name', {
  value: '張三',
  configurable: true
})
console.log( delete obj.name, obj );  //false


//2. 在原有對象基礎(chǔ)上擴(kuò)展新屬性
var person = {
  name: '張三'
}
var obj = Object.defineProperty( person, 'age', {
  value: 56, //鍵值
  configurable: true, //configurable表示是否能被delete刪除，false不能刪除
  enumerable: true //enumerable表示是否能被Object.keys枚舉材义，true可枚舉
})
console.log( delete person.age, Object.keys(obj) );

delete命令只能刪除對象本身的屬性均抽，無法刪除繼承的屬性

var obj = {};
delete obj.toString // true
obj.toString // function toString() { [native code] }

in 運(yùn)算符

in 運(yùn)算符用于檢查對象是否包含某個(gè)屬性
in 運(yùn)算符繼承的屬性也可以檢測到，返回true
in 運(yùn)算符是淺查找屬性其掂，只支持一級屬性驗(yàn)證油挥。

var person = {
  name:'張三',
  info: {
    xueli: '本科'
  }
}
console.log( 'name' in person ); //true 
console.log( 'xueli' in person ); //false
console.log( 'xueli' in person.info ); //true

var obj = {
  name:'張三'
}
Object.defineProperty( obj, 'age', {
  value: 30,
  enumerable: false
})

console.log( obj );

console.log( 'name' in obj ); //true
console.log( 'toString' in obj ); //true
console.log( 'age' in obj );// true

for in 循環(huán)對象

for in 循環(huán)會跳過繼承屬性，比如toString
for in 循環(huán)會跳過不可枚舉屬性清寇，比如設(shè)置enumerable: false

var obj = {
  name:'張三'
}
Object.defineProperty( obj, 'age', {
  value: 30,
  enumerable: true
})
for(var k in obj){
  console.log( k, obj[k] );
}

將對象的鍵值提取出來喘漏，裝入一個(gè)新數(shù)組护蝶，模仿Object.keys功能

var index = 0;
var arr = []
for(var key in info){
  arr[index] = info[key];
  index++;
}
console.log( arr );

經(jīng)典面試題

//查找字符重復(fù)的次數(shù)
var str = '一d你de你sqssd';

//對象方式
var info = {};
for( var i=0; i<str.length; i++ ){
  var val = str[i];
  if( val in info ){
    info [ val ] ++ ;
  }else{
    info [ val ] = 1;
  }
}
console.log( info );//{一: 1, d: 3, 你: 2, e: 1, s: 3, …}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~···

//查找重復(fù)最多的次數(shù)
var index = 0;
var firstVal = 0;

for(var key in info ){
  if( index == 0 ){
    firstVal = info[key];
  }else{
    if( firstVal < info[key]){
      firstVal = info[key];
    }
  }
  index++;
}
console.log( firstVal );// 3

數(shù)組的方法

實(shí)例方法

變異和非變異的理解

變異的方法：破壞了原始數(shù)組
非變異的方法：不會破壞原始數(shù)組华烟，產(chǎn)生新數(shù)組

valueOf() 數(shù)組原始值 toString()將數(shù)組轉(zhuǎn)化為字符串

var arr = ['蘋果','桔子'];
console.log( arr.valueOf() ); // [1, 2, 3]
console.log( arr.toString() ); // 1, 2, 3
console.log( arr+'' ); // 隱式轉(zhuǎn)換 1, 2, 3
console.log( arr.join(',') );// 1, 2, 3

join() 將數(shù)組按指定的字符轉(zhuǎn)換為字符串

返回新的字符串，不會破壞原始數(shù)組持灰，非變異方法盔夜。

如果不提供參數(shù)，默認(rèn)用逗號分隔。

var arr = ['蘋果','桔子'];
console.log( arr.join('') ); //蘋果桔子
console.log( arr.join('@') ); //蘋果@桔子
console.log( arr.join() ); //蘋果,桔子

var str = Array.prototype.join.call('hello', '-');
console.log( str );//h-e-l-l-o

push() 向數(shù)組的尾部追加成員

返回?cái)?shù)組最新的長度喂链，該原始數(shù)組已經(jīng)被添加新成員返十，是變異的方法。

var arr = ['蘋果','桔子'];
arr[2] = '菠蘿';
var result = arr.push('香蕉'); //執(zhí)行過后返回?cái)?shù)組最新的長度

console.log( result ); // 4
console.log( arr ); // ["蘋果", "桔子", "菠蘿", "香蕉"]

var arr = ['蘋果','桔子'];
arr.push('香蕉','菠蘿'); //一次性追加2個(gè)
arr.push( ['生菜','西紅柿'] ); //追加一個(gè)數(shù)組
console.log( arr );// ['蘋果','桔子','香蕉','菠蘿', ['生菜','西紅柿'] ]

unshift() 向數(shù)組的開頭追加成員

返回?cái)?shù)組最新的長度椭微，該原始數(shù)組已經(jīng)被添加新成員洞坑，是變異的方法。

和上面的push方法幾乎一樣蝇率，只是插入成員的位置不同迟杂。

var arr = ['蘋果','桔子'];
arr.unshift('香蕉','菠蘿'); //一次性追加2個(gè)
console.log(arr);//["香蕉", "菠蘿", "蘋果", "桔子"]

pop() 刪除數(shù)組最后一個(gè)成員

返回被刪除成員的值，該方法會破壞原始數(shù)組本慕，是變異的方法排拷。

var arr = ['蘋果','桔子'];
var result = arr.pop();

console.log( result );// 桔子
console.log( arr );// ['蘋果']

shift() 刪除數(shù)組開頭第一個(gè)成員

返回被刪除成員的值，該方法會破壞原始數(shù)組锅尘，是變異的方法监氢。

var arr = ['蘋果','桔子'];
var result = arr.shift();

console.log( result );// 蘋果
console.log( arr );// ['桔子']

concat()

用于多個(gè)數(shù)組的合并，合并出一個(gè)新數(shù)組藤违，不會破壞原始數(shù)組浪腐，是非變異的方法

var a = ['蘋果','桔子'];
var b = ['芒果','西瓜'];
var arr = a.concat( b ); 
console.log( arr );// ['蘋果','桔子','芒果','西瓜']

push() 和 concat()的區(qū)別：

push 返回?cái)?shù)組新長度，concat 返回新數(shù)組
push 變異的方法纺弊，concat 非變異的方法
push 添加的是數(shù)組牛欢，會產(chǎn)生多維數(shù)組，concat 不會產(chǎn)生多維數(shù)組
reverse() 反轉(zhuǎn)數(shù)組

反轉(zhuǎn)數(shù)組淆游，返回已經(jīng)破壞過后的原始數(shù)組傍睹，是變異的方法

var arr = [1,2,3];
arr.reverse();
console.log( arr ); // [3,2,1]

示例

//分步操作
var str1 = '今天的天氣不錯(cuò)';
var arr = str1.split('');
arr.reverse();
var str1 = arr.join('');
console.log( str1 );

//鏈?zhǔn)讲僮?var str2 = '今天的天氣不錯(cuò)'.split('').reverse().join('');
console.log( str2 );

splice() 集刪除、添加犹菱、修改功能的數(shù)組方法

該函數(shù)集刪除拾稳、添加、修改功能的數(shù)組方法腊脱，會破壞原始數(shù)組访得，變異的方法。

起始位置陕凹，數(shù)值悍抑，支持負(fù)數(shù)，表示從后往前數(shù)杜耙。

刪除的個(gè)數(shù)搜骡，數(shù)值，必填佑女，如果設(shè)置為0记靡，表示不刪除谈竿。

返回被刪除的數(shù)組

語法

數(shù)組.splice(起始位置,刪除的個(gè)數(shù), 新成員值1,新成員值2,....);

splice() 刪除操作

//刪除操作
var arr = ['蘋果','桔子','芒果'];
arr.splice(1,1);
console.log( arr );

//1. 清空數(shù)組 splice
var arr1 = ['蘋果','桔子','芒果'];
arr1.splice(0);//第2個(gè)參數(shù)省略，代表數(shù)組最大的長度
console.log(arr1);

//2. 始終刪除第一個(gè)成員 splice
var arr2 = ['蘋果','桔子','芒果'];
arr2.splice(0,1);
console.log(arr2);

//3. 始終刪除最后一個(gè)成員 splice
var arr3 = ['蘋果','桔子','芒果'];
arr3.splice(-1,1);
console.log(arr3);

//4. 始終只取數(shù)組最后兩個(gè)成員 splice
var arr4 = ['蘋果','桔子','芒果'];
arr4.splice(0, arr4.length-2);
console.log(arr4);

splice() 添加操作

注意：添加是在起始位置的前面追加

//添加操作

//1. 在桔子后追加香蕉1個(gè)成員
var arr1 = ['蘋果','桔子','芒果'];
arr1.splice( 2, 0, '香蕉' );
console.log( arr1 );

//2. 在蘋果后面追加火龍果摸吠、櫻桃2個(gè)成員
var arr2 = ['蘋果','桔子','芒果'];
arr2.splice( 1, 0, '火龍果','櫻桃' );
console.log( arr2 );


//3. 在芒果后面追加數(shù)組['哈密瓜','西瓜']
var arr3 = ['蘋果','桔子','芒果'];
arr3.splice( arr3.length, 0, ['哈密瓜','西瓜'] );//類似push方法
console.log( arr3 );

splice 修改操作空凸，采用先刪后加原則

//1. 在桔子修改為香蕉
var arr1 = ['蘋果','桔子','芒果'];
arr1.splice(1,1,'香蕉');
console.log( arr1 );

//2. 在桔子修改為香蕉，芒果修改為西瓜
var arr2 = ['蘋果','桔子','芒果'];
arr2.splice(1,2,'香蕉','西瓜');
console.log( arr2 );

slice() 分割數(shù)組

slice 按照起始位置和結(jié)束位置分割出一個(gè)新數(shù)組寸痢，它不會破壞原始數(shù)組呀洲，是非變異的方法，返回新數(shù)組啼止。

起始位置两嘴，數(shù)值，可以是負(fù)數(shù)族壳，表示從后開始算,-1 表示倒數(shù)第一個(gè)

結(jié)束位置憔辫，數(shù)值，可以是負(fù)數(shù)仿荆，表示從后開始算,-1 表示倒數(shù)第一個(gè)

省略結(jié)束位置贰您，表示到數(shù)組末尾（相當(dāng)于數(shù)組的長度）。

語法

數(shù)組.slice(起始位置,結(jié)束位置)

示例

var arr = ['蘋果','桔子','香蕉','菠蘿','西瓜'];

//1. 提取第一個(gè)成員
console.log( arr.slice(0,1) );

//2. 提取第桔子和香蕉
console.log( arr.slice(1,3) );

//3. 始終提取最后一個(gè)成員
console.log( arr.slice(-1) );

//4. 始終提取除第一個(gè)和最后一個(gè)成員
console.log( arr.slice(1,-1) );

//5. 始終提取最后兩個(gè)成員
console.log( arr.slice(-2) );

示例求學(xué)生三門成績的總分拢操、平均分锦亦、最低分、最高分

    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body{
          padding: 20px;
        }
        table{
          border-collapse:collapse;
          border: 1px solid #ccc;
        }
        th,td{
          padding: 10px;
        }
        tbody tr:nth-child(odd) td{
          background-color: #eee;
        }
      </style>
  <script>
  var data = [
    { id: 1, name:'張三', score: [ 78, 88, 75] },
    { id: 2, name:'李四', score: [ 66, 79, 85] }
  ];

  var temp = `<table cellspacing="0" border="1">
    <thead>
      <tr>
        <th>學(xué)號</th>
        <th>姓名</th>
        <th>語文</th>
        <th>數(shù)學(xué)</th>
        <th>外語</th>
        <th>總分</th>
        <th>平均分</th>
        <th>最低分</th>
        <th>最高分</th>
      </tr>
    </thead>
    `;
  
  for(var i=0;i<data.length;i++){

    var score = data[i].score;
    var sum = score.reduce( function( prev, next ){ 
      return prev + next;
    });//總分
    var min = Math.min.apply( null, score );//最低分
    var max = Math.max.apply( null, score );//最高分
    var avg = (sum/3).toFixed(1);//平均分

    temp += `
    <tbody>
      <tr>
        <td>${data[i].id}</td>
        <td>${data[i].name}</td>
        <td>${score[0]}</td>
        <td>${score[1]}</td>
        <td>${score[2]}</td>
        <td>${sum}</td>
        <td>${avg}</td>
        <td>${min}</td>
        <td>${max}</td>
      </tr>
    </tbody>
    `;
  }

  temp += '</table>';

  document.write( temp );

  var arr = [2,3,5,6,8,9];
  var num = Math.max.apply( null, arr );
  

  console.log( num );

  </script>

分頁四要素

當(dāng)前頁 page
總個(gè)數(shù) total
每頁多少個(gè) perpage
總頁數(shù) totalpage

sort() 對數(shù)組成員進(jìn)行排序令境，默認(rèn)是按照字典順序排序杠园，排序后，原數(shù)組將被改變舔庶，變異的方法抛蚁。

//數(shù)字排序
var arr = [ 2,6,1,9, 4];
arr.sort();
console.log( arr ); // [1, 2, 4, 6, 9]

//數(shù)字排序不正確，是按字符串排序
var arr = [ 2, 6, 1, 9, 4, 12, 24];
arr.sort();
console.log( arr ); // [1, 12, 2, 24, 4, 6, 9]

//字符串排序
var arr = [ 'b', 'a', 'c', 'd', 'ab', 'bc'];
arr.sort();
console.log( arr ); //["a", "ab", "b", "bc", "c", "d"]

以上排序有局限性惕橙，比如數(shù)字它是字符來排序的瞧甩，而且也不方便升序、降序切換

我們可以通過設(shè)置一個(gè)回調(diào)函數(shù)使得排序更加精確

語法

數(shù)組.sort( function( prev, next ){
  return prev - next;
})

數(shù)值排序示例

//數(shù)值排序
var arr = [ 2, 6, 1, 9, 4, 12, 24];
var flag = -1;// 1 為升序  -1 降序
arr.sort( function( a, b ){
  return ( a - b ) * flag;
});
console.log( arr );

字符串排序

//字符串排序
var arr = [ 'b', 'a', 'c', 'd', 'ab', 'bc' ];
var flag = 1; // 1 為升序  -1 降序

arr.sort( function( a, b ){
  return a.localeCompare( b ) * flag;
})

console.log( arr );

數(shù)組也可以用來替代條件語句輸出

var day = new Date().getDay();//0 - 6
var week = ['日','一','二','三','四','五','六'];
console.log('今天是星期' + week[day] );

map() 將數(shù)組的所有成員依次傳入?yún)?shù)函數(shù)弥鹦，然后把每一次的執(zhí)行結(jié)果組成一個(gè)新數(shù)組返回肚逸，它是非變異的方法。

var arr = [ 1, 2, 3, 4, 5];
var newArr = arr.map(function( item ){
  return item * 2;
})

console.log( newArr );// [ 2, 4, 6, 8, 10 ]

//取出偶數(shù)成員
var arr = [ 1, 2, 3, 4, 5];
var newArr = arr.map(function( item ){
  if(item % 2 == 0) {
    return item;
  }
})
console.log( newArr );//[undefined, 2, undefined, 4, undefined]

//map中this指向第二個(gè)參數(shù)彬坏，下圖也就是arr數(shù)組

var arr = ['a', 'b', 'c'];
var newData= [0, 2].map(function ( item ) {
  return this[ item ];
}, arr);

console.log( newData ); // ['a','c']

forEach() 與map方法很相似朦促，也是對數(shù)組的所有成員依次執(zhí)行參數(shù)函數(shù)，forEach方法不返回值栓始，只用來操作數(shù)據(jù)务冕。

示例

var arr = [ 1, , 3, , 5];
arr.forEach(function( item, index, arr ){
  console.log( item, index, arr );
})

forEach 和 map的區(qū)別

forEach 沒有return返回值，它會跳過空位
map 有return返回值混滔，它會跳過空位

filter() 方法用于過濾數(shù)組成員洒疚，滿足條件的成員組成一個(gè)新數(shù)組返回，非變異的方法坯屿。

//查找出不及格的分?jǐn)?shù)
var score = [ 50, 70, 58, 62, 80];
var newScore = score.filter( function(item){
  return item < 60;
})

console.log( newScore );//[50, 58]

//也可以利用排除法刪除
var arr = [ 50, 70, 58, 62, 80];
arr = arr.filter( function(item){
  return item != 62;
})
console.log( arr );//[ 50, 70, 58, 80];

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末油湖，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子领跛，更是在濱河造成了極大的恐慌乏德，老刑警劉巖，帶你破解...
沈念sama閱讀 217,277評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件吠昭，死亡現(xiàn)場離奇詭異喊括，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)矢棚，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,689評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門郑什，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人蒲肋，你說我怎么就攤上這事蘑拯。” “怎么了兜粘？”我有些...
開封第一講書人閱讀 163,624評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵申窘，是天一觀的道長。經(jīng)常有香客問我孔轴，道長剃法，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,356評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任路鹰，我火速辦了婚禮贷洲，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘晋柱。我一直安慰自己恩脂，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,402評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布趣斤。她就那樣靜靜地躺著俩块，像睡著了一般。火紅的嫁衣襯著肌膚如雪浓领。梳的紋絲不亂的頭發(fā)上玉凯，一...
開封第一講書人閱讀 51,292評論 1贊 301
城市分裂傳說
那天，我揣著相機(jī)與錄音联贩，去河邊找鬼漫仆。笑死，一個(gè)胖子當(dāng)著我的面吹牛泪幌，可吹牛的內(nèi)容都是我干的盲厌。我是一名探鬼主播署照，決...
沈念sama閱讀 40,135評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼吗浩！你這毒婦竟也來了建芙？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,992評論 0贊 275
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤懂扼，失蹤者是張志新（化名）和其女友劉穎禁荸，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體阀湿，經(jīng)...
沈念sama閱讀 45,429評論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡赶熟，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,636評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了陷嘴。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片映砖。...
茶點(diǎn)故事閱讀 39,785評論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖灾挨，靈堂內(nèi)的尸體忽然破棺而出啊央，到底是詐尸還是另有隱情，我是刑警寧澤涨醋，帶...
沈念sama閱讀 35,492評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布瓜饥，位于F島的核電站，受9級特大地震影響浴骂，放射性物質(zhì)發(fā)生泄漏乓土。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,092評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一溯警、第九天我趴在偏房一處隱蔽的房頂上張望趣苏。院中可真熱鬧，春花似錦梯轻、人聲如沸食磕。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,723評論 0贊 22
一樁弒父案喳挑，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽彬伦。三九已至，卻和暖如春伊诵，著一層夾襖步出監(jiān)牢的瞬間单绑，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,858評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工曹宴，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留搂橙，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,891評論 2贊 370
代替公主和親
正文我出身青樓笛坦，卻偏偏與公主長得像区转，于是被迫代替她去往敵國和親苔巨。傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,713評論 2贊 354

js基礎(chǔ)

js 筆記

javaScript的歷史

java和javaScript的關(guān)系

javaScript與ECMAScript的關(guān)系

javaScript與ECMAScript的區(qū)別

js代碼引入

js注釋

語句和表達(dá)式

語句和表達(dá)式的區(qū)別

變量

變量命名規(guī)則

條件語句

if條件語句

switch條件語句

循環(huán)語句

js數(shù)據(jù)類型

數(shù)值 Number

字符串 String

字符串和變量拼接

布爾類型 Boolean

未定義 undefined

空 null

函數(shù) function

數(shù)組 array

對象 object

符號 symbol

數(shù)據(jù)類型總結(jié)

typeof 檢測數(shù)據(jù)類型

數(shù)值類型

字符串類型

轉(zhuǎn)義符

字符串與數(shù)組

Base64 轉(zhuǎn)碼

7月16日

String對象

將其他數(shù)據(jù)流類型轉(zhuǎn)換為字符串

String.fromCharCode

字符串的長度

String實(shí)例的方法

charAt 返回指定索引值的字符

charCodeAt 返回指定索引值的unicode碼點(diǎn)

concat 拼接字符串，類似于加號吐限。

slice 從指定的位置鲜侥，分割字符串。

substring 分割數(shù)組

substr 截取字符串

indexOf 查找字符第一次出現(xiàn)的位置(索引值)

lastIndexOf 查找字符最后一次出現(xiàn)的位置(索引值)

split 將字符串按指定字符轉(zhuǎn)換為數(shù)組

toLowerCase toLocaleLowerCase 轉(zhuǎn)換小寫 轉(zhuǎn)換本地小寫

toUpperCase toLocaleUpperCase 轉(zhuǎn)換小寫 轉(zhuǎn)換本地小寫

repeat 將字符重復(fù)指定的次數(shù) es6

includes 查找是否包含某個(gè)字符串 es6

replace 字符串替換

match涩嚣、search 都是依賴使用正則表達(dá)式替換

localeCompare 比較兩個(gè)字符的大小

Array數(shù)組對象

定義數(shù)組

數(shù)組的成員可以是任意數(shù)據(jù)類型

數(shù)組的長度

多維數(shù)組

數(shù)值鍵名會自動轉(zhuǎn)換為字符串

數(shù)組的讀寫刪操作

in 運(yùn)算符

for...in 循環(huán)和數(shù)組的遍歷

2019-7-17

forEach循環(huán)

類數(shù)組對象轉(zhuǎn)換為真正的數(shù)組對象

Array.isArray 檢測是否是數(shù)組

對象

表達(dá)式還是語句闸氮？

eval函數(shù)

對象屬性的操作

Object.keys查看所有屬性

delete 命令刪除對象屬性

in 運(yùn)算符

for in 循環(huán)對象

數(shù)組的方法

實(shí)例方法

分頁四要素

`if`條件語句

`switch`條件語句

toLowerCase toLocaleLowerCase 轉(zhuǎn)換小寫轉(zhuǎn)換本地小寫

toUpperCase toLocaleUpperCase 轉(zhuǎn)換小寫轉(zhuǎn)換本地小寫

`delete` 命令刪除對象屬性