WebフロントエンドのコアJavaScriptを学習する最も基本的な方法(1)

c ## One、JavaScriptデータ型

基本的なデータ型

数値(特別なNaN)NaN:数値ではありません無限
ブール:true、false、または暗黙的にtrueまたはfalseに変換できる型

次の場合にのみfalseに変換できます:0、空の文字列、null、未定義、NaN、false
文字列:「or」または「or」で定義された文字を使用します

var str='abcd'
var str2="xyz"
var str3=`hello,${str}`
 null:typeof null Object   undefined:定义未赋值和没有定义的变量类型都是undefined

nullとundefinedの違い:
http
://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html Symbol:ES6の新しいデータ型。Symbole()関数で定義され、定義済みの変数を表します価値の独自性

参照データ型(複合データ型)

オブジェクト、配列、関数、RegExp、文字列

オブジェクトタイプは、オブジェクトがオブジェクト自体のプロパティであるかどうかを検出するためのプロパティを追加できます。hasOwnProperty

for(var key in obj){

if(obj.hasOwnProperty(key)){

  console.log(obj[key]) }

}

2.配列:配列

配列メソッド
Stackメソッド:
push():
尾にpopを追加:尾に削除
unshift:頭に追加
shift:頭に削除
スプライス:配列の任意の位置に追加、削除、置換

  删除:splice(要删除的起始下标,删除数量)
  添加:arr.splice(要插入的起始位置,0,要添加的值)
  
      arr.splice(2,0,'全栈1909A')
      
  替换:arr.splice(要替换的志起始位置,替换的数量,替换的值)
  
      arr.splice(4,2,'我要去阿里')

配列組み込みトラバーサルメソッド:

forEach():forのアップグレードされたバージョンで、forEach戻り値の未定義
filter():フィルター、条件を満たす配列要素をトラバースし、新しい配列を返し
ますmap():元の配列を処理し、新しい配列
reduce()を取得:マージ、複数の値を1つの値に
マージfindIndex()添え字
find()を検索配列内の一致する要素を検索
every()は、すべてが満たされている場合
はtrueを返し、それ以外の場合はfalseです。満たされている限り、some()はtrueを返し、そうでない場合はfalseを
含みますinclude ()配列に値があるかどうかを判別し、含まれている場合はtrueを返し、含まれていない場合はfalseを返します
flat()多次元配列を1次元配列にフラット化します

  扁平化方法:
  
    1.toString实现
    
    例如:
    var arr=[5,5,5,5,[2,4,[2,[23,5],6],7],3,2,2,5]
    arr.toString().split(',').map(item=>item*1)
    
    2.用递归来实现数组的扁平化
    
    function flatFn(arr) {
      var result=[];
			if(!(arr instanceof Array))  return;
       for(var key in arr) {
         result=result.concat(Array.isArray(arr[key]) ? flatFn(arr[key]) : arr[key] 					)
         }
			  return result;
			}
			
		  3.flat()  //ES2019发布方法

配列リファレンスドキュメント:
https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Redu ce

2.クラス配列:

–アレイのようなものは何ですか?
疑似配列LikeArrayとも呼ばれ、長さ方向の数値を取得し、添え字を使用して特定の要素を指定することしかできませんが、配列のAPIメソッドを使用することはできません

クラス配列の使用シナリオ:取得したdomコレクション、引数、...

–クラス配列を配列に変換する方法

1. Array.from(タイプ配列)または[...タイプ配列]
2. Array.prototype.slice.call(タイプ配列)


ES1.0 1997 ES2.0 1998
ES3.0 1999
ES4.0が中止された
ES5.0 2009
ES5.1 2011
ES6 2015以降、新しいバージョン
ES7 2016
ES8 2017 が毎年リリースされ
ます...

公式ECMAスクリプトリポジトリ更新アドレスhttps : //github.com/tc39/proposals/blob/master/finished-proposals.md

3、文字列:文字列

trim()は、文字列の左側と右側のスペースを削除します

トリムに同意せず、トリム
関数をトリムしますtrim(str)自分で{ var reg = / ^ \ s + | \ s + $ / g return str.replace(reg、 '')}


String.prototype.quchukongge = function(){ var reg = / ^ \ s + | \ s + $ / g return this.replace(reg、 '')}


toUpperCase()文字を大文字に変換
toLowerCase()文字を小文字に
変換substr()部分文字列str.substr(開始位置、複数を取る)
部分文字列(開始添字、終了添字)部分文字列
split()文字列変換配列結合:文字列
スライスへの配列(添え字開始、添え字終了)部分文字列
置換(検出される文字列または一致する正規
表現、置換される内容)を取り、indexOf()検索を置き換え、添え字を返す、いいえ-1を
含むinclude()配列の使用法と同じで、trueではなくfalseを返します

4つの数学的オブジェクト(数学)

Math.abs():絶対値を取る

Math.random()ランダムな値の範囲:0 ~~~~ 1

任意の数値範囲の開始範囲と終了範囲を返します

数量= y-x + 1

x = 10、y = 20
11 num = y-x + 1
数量= 11
開始値:10
式:Math.floor(Math.random()* number)+開始値

ランダム関数をカプセル化します:
//開始:開始インデックス
//終了:開始インデックス
関数randomIndex(start、end){

var num=end-start+1

Math.floor(Math.random()* num)+ startを返す
}

Math.foor()は切り捨てられます

Math.ceil()の切り上げ

Math.round()丸め

Math.max()はより大きい値を取ります

var arr = [23,3,34,23,24、-32,34,54,234,234,235,534,235,2]

Math.max.apply(Math、arr)
Math.min.apply(Math、arr)
Math.min.call(Math、…arr)
Math.max.call(Math、…arr)

Math.min()は小さな値を取ります

5、この点

携帯電話にあるかどうかを確認し、ある場合は携帯ページにジャンプします。

try {
    
    
  if (location.search.indexOf('?pc') !== 0 && /Android|Windows Phone|iPhone|iPod/i.test(navigator.userAgent)) {
    
    
    window.location.href = 'https://xw.qq.com?f=qqcom';
  }
} catch (e) {
    
    }
this的使用场景
*/
//1.直接调用函数 this即window
//console.log(this===window)

/*
function Fn() {

   console.log('Fn:',this)

   //this.name='1909A'
}
//Fn()

// 2。新しい関数、これは現在のコンストラクターのインスタンス化されたオブジェクトです
// var f1 = new Fn()

//3.函数属于对象

/*
var obj={
    name:'1909A',
    Fn:function() {

        var hehe=function() {

            console.log('this===window:',this===window)
             console.log('this===obj:',this===obj)
             //console.log('this===Fn:',this===Fn)
        }

       hehe()


    }

}



obj.Fn();

*/
//4.定时器上的this
/*
var obj={
    name:'1909A',
    Fn:function() {

       setTimeout(function() {

           console.log('this===window:',this===window)
           console.log('this===obj:',this===obj)

       },0)

    }

}

obj.Fn();

*

/

//5.DOM中的this

var btn=document.querySelector('#btn')
btn.onclick=function() {
    
    
  // let _this=this;
   setTimeout(()=> {
    
    

        console.log(this===btn)
   },0)

}

概要:誰がこれを呼び出し、誰がこれを指摘していますか?これは本当ですか?

var name='ok'

var obj={
    
    
   name:'alice',
   getName:function() {
    
    

     console.log(this.name)

  }
 
}

(false || obj.getName)()

技術的なディスカッションのためにグループに参加することを歓迎します。グループ番号:954314851

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_48193717/article/details/108328437